flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-12-21 10:41:39 +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-03 03:35:30 +04:00
parent eee76e314e
commit ee3a433601
1 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -167,6 +167,7 @@
width: 0px; width: 0px;
margin-left: 0px; margin-left: 0px;
border: none; border: none;
box-sizing: border-box;
} }
.mark.blue:after, .mark.blue:after,
.mark.red:after, .mark.red:after,
@ -185,19 +186,21 @@
left: auto; left: auto;
right: 10px; right: 10px;
box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
} }
.mark.blue:after { .mark.blue:after {
left: -25px; left: -25px;
background: blue; border: solid 3px blue;
} }
.mark.red:after { .mark.red:after {
left: -42px; left: -44px;
background: red; background: red;
border-radius: 50%;
} }
.mark.yellow:after { .mark.yellow:after {
left: -59px; left: -67px;
background: yellow; background: yellow;
} }
@ -205,23 +208,31 @@
<script src="jquery.js"></script> <script src="jquery.js"></script>
<body> <body>
The current structure... <details>
<summary>
The current structure... (not current anymore)
</summary>
<div> <div>
<div class="image" style="background-image: url(image.jpg)"></div> <div class="image" style="background-image: url(image.jpg)"></div>
<div class="current image" style="background-image: url(image.jpg)"></div> <div class="current image" style="background-image: url(image.jpg)"></div>
</div> </div>
<hr> </details>
Image bg transparent while the ribbon's bg is black...<br> <details>
<summary>
Image bg transparent while the ribbon's bg is black...
</summary>
<div class="ribbon"> <div class="ribbon">
<div class="image2" style="background-image: url(image.jpg)"></div> <div class="image2" style="background-image: url(image.jpg)"></div>
<div class="current image2" style="background-image: url(image.jpg)"></div> <div class="current image2" style="background-image: url(image.jpg)"></div>
</div> </div>
</details>
<hr> <details>
<summary>
Add a seporate bg tag<br> Add a seporate bg tag (rejected)
</summary>
- this effectively doubles the number of tags used for a ribbon...<br> - this effectively doubles the number of tags used for a ribbon...<br>
+ the only API that needs changing is what deals with previews and filters<br> + the only API that needs changing is what deals with previews and filters<br>
+ will simplify different image indicator CSS<br> + will simplify different image indicator CSS<br>
@ -235,10 +246,13 @@
<div class="image3" style="width: 400px;"><div style="background-image: url(image.jpg)"></div></div><br> <div class="image3" style="width: 400px;"><div style="background-image: url(image.jpg)"></div></div><br>
<div class="image3" style="width: 400px;"><div style="background-image: url(image.jpg); -webkit-transform: rotate(90deg)"></div></div--> <div class="image3" style="width: 400px;"><div style="background-image: url(image.jpg); -webkit-transform: rotate(90deg)"></div></div-->
<hr> </details>
Keep the images on one level and marks outside, after the image...<br> <details open>
+ one tag per UI element<br> <summary>
Keep the images on one level and marks outside, after the image...
</summary>
+ one tag per UI element, or if we make things a bit more comlicated, up to 3 per tag (self, before and after)<br>
+ generic and extensible<br> + generic and extensible<br>
- a little bit more complicated mark manipulation during image shifting - a little bit more complicated mark manipulation during image shifting
&ndash; potential orphaned or misplaces marks...<br> &ndash; potential orphaned or misplaces marks...<br>
@ -255,6 +269,7 @@
<div id="2" class="image2" style="background-image: url(image.jpg)"></div> <div id="2" class="image2" style="background-image: url(image.jpg)"></div>
<div class="mark select"></div> <div class="mark select"></div>
</div> </div>
</details>
</body> </body>
</html> </html>