flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-12-21 02:31:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor tweaking...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-12-02 18:20:23 +04:00
parent 55b1b00069
commit eee76e314e
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/experiments/seporate-image-and-background.html
View File

@ -22,7 +22,7 @@
/* XXX do we need this? */ /* XXX do we need this? */
border: solid black 5px; border: solid black 5px;
/*-webkit-filter: invert(1);*/ -webkit-filter: invert(1);
} }
.current.image { .current.image {
background: no-repeat 50% black; background: no-repeat 50% black;
@ -151,10 +151,16 @@
vertical-align: middle; vertical-align: middle;
} }
.current + .mark { /* this is a placeholder -- I'm to lazy to make a real floating element
* to indicate selection... */
.current+.mark {
border: solid red 5px; border: solid red 5px;
} }
.mark.select {
border: dotted blue 5px;
}
.mark.blue, .mark.blue,
.mark.red, .mark.red,
.mark.yellow { .mark.yellow {
@ -232,6 +238,10 @@
<hr> <hr>
Keep the images on one level and marks outside, after the image...<br> Keep the images on one level and marks outside, after the image...<br>
+ one tag per UI element<br>
+ generic and extensible<br>
- a little bit more complicated mark manipulation during image shifting
&ndash; potential orphaned or misplaces marks...<br>
<div class="ribbon"> <div class="ribbon">
<div id="0" class="image2" style="background-image: url(image.jpg)"></div> <div id="0" class="image2" style="background-image: url(image.jpg)"></div>
<div class="mark red"></div> <div class="mark red"></div>
@ -241,6 +251,9 @@
<div class="mark blue" title="blue"></div> <div class="mark blue" title="blue"></div>
<div class="mark red" title="red"></div> <div class="mark red" title="red"></div>
<div class="mark yellow" title="yellow"></div> <div class="mark yellow" title="yellow"></div>
<div id="2" class="image2" style="background-image: url(image.jpg)"></div>
<div class="mark select"></div>
</div> </div>
</body> </body>