tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Added modifier for img --fits-space, will need to use js to detect so styles can be adapted

Browse Source
This commit is contained in:
Paul Clarke 2016-04-21 10:15:23 +12:00 committed by Ingo Schommer
parent 9b5430a80c
commit 35a2e13085
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/client/src/components/preview/index.js
View File

@ -14,7 +14,7 @@ class CampaignPreview extends SilverStripeComponent {
<h3 className="preview__overlay-text">There is no preview available for this item.</h3> <h3 className="preview__overlay-text">There is no preview available for this item.</h3>
</div> </div>
<div className="preview__file-container panel-scrollable"> <div className="preview__file-container panel-scrollable">
<img className="preview__file" src="http://placehold.it/250x150" /> <img className="preview__file--fits-space" src="http://placehold.it/250x150" />
</div> </div>
<div className="toolbar--south"> <div className="toolbar--south">
<div className="btn-toolbar"> <div className="btn-toolbar">

11
admin/client/src/components/preview/styles.scss
View File

@ -6,11 +6,16 @@
.preview__file-container { .preview__file-container {
height: calc(100% - #{$toolbar-total-height}); height: calc(100% - #{$toolbar-total-height});
text-align: center; text-align: center;
}
.preview__file {
position: relative; position: relative;
}
.preview__file { // TODO files smaller than the given space need to be detected via js to give class --fits-space
}
.preview__file--fits-space {
position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); left: 50%;
transform: translate(-50%, -50%);
} }
.preview__overlay { .preview__overlay {
text-align: center; text-align: center;