(css) Improve sgImageGallery for small devices

Also include md-truncate directive from ng-material.
This commit is contained in:
Francis Lachapelle 2017-05-31 09:40:22 -04:00
parent e4d0ce6090
commit c8e90b4abd
5 changed files with 13 additions and 11 deletions

View file

@ -119,15 +119,13 @@
template: [ template: [
'<sg-image-gallery layout="column">', '<sg-image-gallery layout="column">',
' <div class="md-toolbar-tools" layout="row" layout-align="space-between center">', ' <div class="md-toolbar-tools" layout="row" layout-align="space-between center">',
' <div>', ' <md-button class="md-icon-button"',
' <md-button class="md-icon-button"', ' aria-label="' + l('Close') + '"',
' aria-label="' + l('Close') + '"', ' ng-click="$panelCtrl.close()">',
' ng-click="$panelCtrl.close()">', ' <md-icon>arrow_back</md-icon>',
' <md-icon>arrow_back</md-icon>', ' </md-button>',
' </md-button>', ' <md-icon class="md-primary">image</md-icon>',
' <md-icon class="md-primary">image</md-icon>', ' <div md-truncate class="md-flex" ng-bind="$panelCtrl.selectedImage.filename"></div>',
' <span ng-bind="$panelCtrl.selectedImage.filename"></span>',
' </div>',
' <md-button class="md-icon-button"', ' <md-button class="md-icon-button"',
' aria-label="' + l('Save Attachment') + '"', ' aria-label="' + l('Save Attachment') + '"',
' ng-href="{{$panelCtrl.selectedImage.urlAsAttachment}}">', ' ng-href="{{$panelCtrl.selectedImage.urlAsAttachment}}">',

View file

@ -21,8 +21,8 @@ sg-image-gallery {
cursor: pointer; cursor: pointer;
} }
.sg-image { .sg-image {
max-height: 80vh; max-height: 75vh;
max-width: 90vh; max-width: 75vw;
} }
.sg-image-thumbnails { .sg-image-thumbnails {
align-self: center; align-self: center;

View file

@ -0,0 +1,2 @@
/*! toast/_extends.scss - */
@import '../../../angular-material/src/components/truncate/truncate.scss';

View file

@ -0,0 +1 @@
@import 'extends';

View file

@ -60,6 +60,7 @@
@import 'components/toast/toast'; @import 'components/toast/toast';
@import 'components/toolbar/toolbar'; @import 'components/toolbar/toolbar';
@import 'components/tooltip/tooltip'; @import 'components/tooltip/tooltip';
@import 'components/truncate/truncate';
@import 'components/virtualRepeat/virtual-repeat'; @import 'components/virtualRepeat/virtual-repeat';
@import 'components/whiteframe/whiteframe'; @import 'components/whiteframe/whiteframe';