flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

tuning editor layout...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-11-30 02:01:39 +04:00
parent b2b3cc58e9
commit 341b6aaa07
1 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui/experiments/editor.html
View File

@ -3,8 +3,9 @@
.panel {
display: inline-block;
width: 508px;
min-width: 500px;
min-width: 200px;
max-width: 450px;
border: solid 2px silver;
border-radius: 4px;
@ -16,7 +17,6 @@
}
.panel summary {
padding-left: 3px;
/*background: #ddd;*/
background: silver
}
.panel summary::-webkit-details-marker {
@ -42,7 +42,6 @@
background: white;
}
.panel details {
width: 500px;
margin: 3px;
border: solid 1px silver;
box-shadow: none;
@ -64,20 +63,24 @@
/* main controls */
.panel .control {
white-space:nowrap;
}
.panel .control .title {
display: inline-block;
width: 100px;
/*margin-right: -80px;*/
width: 80px;
cursor: move;
}
.panel .control .slider {
-webkit-appearance: none !important;
width: 300px;
width: 200px;
height: 4px;
border: solid 1px gray;
border-radius: 2px;
background: silver;
}
.panel .control.at-default .slider {
}
.panel .control .slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
height: 15px;
@ -87,6 +90,9 @@
background: white;
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
}
.panel .control.at-default .slider::-webkit-slider-thumb {
opacity: 0.5;
}
.panel .control .value {
-webkit-appearance: none !important;
display: inline-block;
@ -104,7 +110,7 @@
}
.panel .control .reset {
visibility: hidden;
border: none;
border: solid 1px transparent;
}
.panel .control:hover button.reset {
visibility: visible;
@ -124,11 +130,23 @@
padding-right: 5px;
background: white;
}
.panel .state:active {
background: silver;
}
.panel .state.ui-draggable-dragging {
box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4);
}
.panel .states {
min-height: 30px;
}
/* misc */
.panel hr {
border: none;
border-top: solid 1px silver;
}
</style>
<script src="jquery.js"></script>
@ -304,6 +322,11 @@ function makeAbsRange(text, filter, target, min, max, dfl, step, translate, norm
var val = this.valueAsNumber
value.val(val)
updateFilter(target, filter, translate(val))
if(parseFloat(val) == dfl){
elem.addClass('at-default')
} else {
elem.removeClass('at-default')
}
})
.appendTo(elem)
var value = $('<input type="number" class="value"/>')