eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-11 19:00:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Centered the cropped image (#705)

Browse Source 
* Updated demo.css

* Updated defaultHtmlStepUI.js

* Updated defaultHtmlStepUI.js

* Updated defaultHtmlStepUI.js

* Updated demo.css

* Updated defaultHtmlStepUi.js

* Updated defaultHtmlStepUi.js

* Added semi-colons in demo.css

* removed the style attribute from the img element
This commit is contained in:
Harsh Prabhu
2019-03-15 04:37:18 +05:30
committed by Jeffrey Warren
parent 30e9f359d5
commit 0be9e3f33b
2 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
examples/demo.css
View File

@@ -250,3 +250,15 @@ a.name-header{
text-decoration: none;
color: #445;
}
.step-column{
display:flex;
flex-direction:row;
align-items:center;
}
.step-image{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
}

12
examples/lib/defaultHtmlStepUi.js
View File

@@ -26,9 +26,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
step.ui =
'\
<div class="container">\
<div class="row step">\
<div class="row step" style="display:flex">\
<form class="input-form">\
<div class="col-md-4 details">\
<div class="col-md-4 details" style="flex:1">\
<h3>\
<span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
'<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
@@ -37,9 +37,11 @@ function DefaultHtmlStepUi(_sequencer, options) {
'</i></p></div>\
</div>\
</form>\
<div class="col-md-8 cal">\
<div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
<a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>\
<div class="col-md-8 cal step-column">\
<div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
<div class="step-image">\
<a><img alt="" class="img-thumbnail step-thumbnail"/></a>\
</div>\
</div>\
</div>\
</div>\