Utilizing bootstrap to showcase canvas thumbnails within a div for lighter client-side creation. While not the perfect design, it's functional.
An issue arises when viewing the app on a mobile device in portrait mode - the col-xs-6 class remains fixed even after rotating the screen, resulting in an unsightly display:
Rotated screen: https://i.sstatic.net/xV9cj.jpg
Normal screen: https://i.sstatic.net/NsyM3.jpg
Questioning if this is a bug with the phone or browser (using Galaxy S3), or possibly an error in the code? Shouldn't screen rotation trigger a change in resolution? Unsure if there's an elegant solution to address this issue. Here's the HTML:
<div id="upload-list">
<!-- for each image -->
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="thumbnail">
<div class="caption">IMG_0004.JPG<i><br>6.14 MB</i></div>
<div style="display: none;" class="abort_upload working">
<span class="alert-warning glyphicon glyphicon-remove-circle"></span>
</div>
<!-- This is for upload progress display -->
<div class="knob-outer">
<div class="knob-progress">
<div style="display:inline;width:64px;height:64px;">
<canvas height="64" width="64"></canvas>
<input style="width: 36px; height: 21px; position: absolute; vertical-align: middle; margin-top: 21px; margin-left: -50px; border: 0px none; background: none repeat scroll 0% 0% transparent; font: bold 12px Arial; text-align: center; color: rgb(7, 136, 165); padding: 0px;" readonly="readonly" value="0" data-width="64" data-height="64" data-fgcolor="#0788a5" data-readonly="1" data-bgcolor="#3e4043" type="text">
</div>
</div>
</div>
<!-- the actual canvas with the image, is being generated client-side after file selection -->
<canvas class="canvas-thumbnail" height="518" width="691"></canvas>
</div>
</div>
</div>
Relevant CSS:
@media (min-width: $screen-xs-min) {
.thumbnail canvas.canvas-thumbnail { height:72px !important; width: 96px !important}
.knob-progress {width: 64px; height: 64px}
}
$screen-xs: 420px !default;
$screen-xs-min: $screen-xs !default;
EDIT: other screen size css
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
@media (min-width: $screen-sm-min) {
.thumbnail canvas.canvas-thumbnail { height:64px !important; width: 86px !important}
}
@media (min-width: $screen-md-min) {
.thumbnail canvas.canvas-thumbnail { height:95px !important; width: 126px !important}
}