2013-12-02 06:23:19 +04:00
< html >
< style >
.image {
position: relative;
display: inline-block;
vertical-align: middle;
text-align:left;
width: 300px;
height: 300px;
font-size: 12pt;
overflow: hidden;
box-sizing: border-box;
color: white;
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
background: no-repeat 50% black;
background-size: contain;
/* XXX do we need this? */
border: solid black 5px;
2013-12-02 18:20:23 +04:00
-webkit-filter: invert(1);
2013-12-02 06:23:19 +04:00
}
.current.image {
background: no-repeat 50% black;
background-size: contain;
/* XXX remove this... */
border: solid red 5px;
}
2013-12-02 08:50:43 +04:00
.ribbon {
position: relative;
display: block;
height: auto;
min-width: 0px;
overflow: visible;
white-space: nowrap;
font-size: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.ribbon:empty {
display: none;
}
.ribbon:first-child {
margin-top: 0px;
}
.ribbon:last-child {
margin-bottom: 0px;
}
2013-12-02 06:23:19 +04:00
/*********************************************************************/
.image2:before,
.image2 {
position: relative;
display: inline-block;
vertical-align: middle;
text-align:left;
font-size: 12pt;
overflow: visible;
color: white;
}
.image2 {
width: 290px;
height: 290px;
background: no-repeat 50% transparent;
background-size: contain;
margin: 5px;
-webkit-filter: invert(1);
}
.ribbon {
display: inline-block;
background: black;
}
.current.image2:before {
position: relative;
content: "";
top: -5px;
left: -5px;
width: 100%;
height: 100%;
/* XXX this is affected by the filter... */
border: solid 5px red;
}
/*********************************************************************/
2013-12-02 09:31:53 +04:00
.image3 div,
.image3 {
position: relative;
display: inline-block;
vertical-align: middle;
text-align:left;
width: 300px;
height: 300px;
font-size: 12pt;
overflow: hidden;
box-sizing: border-box;
color: white;
background: black;
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
border: solid black 5px;
}
.image3 div {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% transparent;
background-size: contain;
border: none;
-webkit-filter: invert(1);
}
.current.image3 {
background: no-repeat 50% black;
background-size: contain;
/* XXX remove this... */
border: solid red 5px;
}
2013-12-02 17:45:54 +04:00
/*********************************************************************/
.mark {
display: inline-block;
position: relative;
width: 300px;
height: 300px;
margin-left: -300px;
left: 0px;
box-sizing: border-box;
vertical-align: middle;
}
2013-12-02 18:20:23 +04:00
/* this is a placeholder -- I'm to lazy to make a real floating element
* to indicate selection... */
.current+.mark {
2013-12-02 17:45:54 +04:00
border: solid red 5px;
}
2013-12-02 18:20:23 +04:00
.mark.select {
border: dotted blue 5px;
}
2013-12-04 23:18:23 +04:00
.mark.tagged,
2013-12-02 17:45:54 +04:00
.mark.blue,
.mark.red,
.mark.yellow {
2013-12-02 18:00:45 +04:00
width: 0px;
margin-left: 0px;
2013-12-02 17:45:54 +04:00
border: none;
2013-12-03 03:35:30 +04:00
box-sizing: border-box;
2013-12-02 17:45:54 +04:00
}
2013-12-04 23:18:23 +04:00
.mark.tagged:after,
2013-12-02 17:45:54 +04:00
.mark.blue:after,
.mark.red:after,
.mark.yellow:after {
display: block;
position: absolute;
content: "";
font-size: 0pt;
border: none;
width: 15px;
height: 15px;
top: auto;
bottom: 10px;
left: auto;
right: 10px;
2013-12-03 16:51:49 +04:00
/*box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.7);*/
box-shadow: 2px 2px 20px -2px rgba(0,0,0,0.7);
2013-12-03 03:35:30 +04:00
box-sizing: border-box;
2013-12-02 17:45:54 +04:00
border-radius: 50%;
}
2013-12-02 18:00:45 +04:00
2013-12-04 23:18:23 +04:00
.mark.tagged:after {
box-shadow: none;
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
font-size: 10pt;
vertical-align: middle;
text-align: center;
content: "T";
color: white;
background: none;
}
2013-12-02 17:45:54 +04:00
.mark.blue:after {
2013-12-02 18:00:45 +04:00
left: -25px;
2013-12-03 03:35:30 +04:00
border: solid 3px blue;
2013-12-02 17:45:54 +04:00
}
.mark.red:after {
2013-12-03 03:35:30 +04:00
left: -44px;
2013-12-02 17:45:54 +04:00
background: red;
2013-12-03 03:35:30 +04:00
border-radius: 50%;
2013-12-02 17:45:54 +04:00
}
.mark.yellow:after {
2013-12-03 03:35:30 +04:00
left: -67px;
2013-12-02 17:45:54 +04:00
background: yellow;
}
2013-12-02 09:31:53 +04:00
2013-12-04 23:18:23 +04:00
.ccw270,
.cw90 {
-webkit-transform: rotate(90deg);
}
.ccw180,
.cw180 {
-webkit-transform: rotate(180deg);
}
.ccw90,
.cw270 {
-webkit-transform: rotate(270deg);
}
.ccw0,
.cw0 {
-webkit-transform: rotate(0deg);
}
2013-12-02 06:23:19 +04:00
< / style >
2013-12-02 17:45:54 +04:00
< script src = "jquery.js" > < / script >
2013-12-02 06:23:19 +04:00
< body >
2013-12-03 03:35:30 +04:00
< details >
< summary >
The current structure... (not current anymore)
< / summary >
2013-12-02 08:50:43 +04:00
< div >
< div class = "image" style = "background-image: url(image.jpg)" > < / div >
< div class = "current image" style = "background-image: url(image.jpg)" > < / div >
< / div >
2013-12-02 06:23:19 +04:00
2013-12-03 03:35:30 +04:00
< / details >
2013-12-02 06:23:19 +04:00
2013-12-03 03:35:30 +04:00
< details >
< summary >
Image bg transparent while the ribbon's bg is black...
< / summary >
2013-12-02 06:23:19 +04:00
< div class = "ribbon" >
< div class = "image2" style = "background-image: url(image.jpg)" > < / div >
< div class = "current image2" style = "background-image: url(image.jpg)" > < / div >
< / div >
2013-12-03 03:35:30 +04:00
< / details >
2013-12-02 09:31:53 +04:00
2013-12-03 03:35:30 +04:00
< details >
< summary >
Add a seporate bg tag (rejected)
< / summary >
2013-12-02 09:31:53 +04:00
- 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 >
+ will simplify different image indicator CSS< br >
< s > + will remove LOTS of code dealing with scaling, sizing and rotation...< / s > this will not change!< br >
< div class = "ribbon" >
< div class = "image3" > < div style = "background-image: url(image.jpg)" > < / div > < / div >
< div class = "current image3" > < div style = "background-image: url(image.jpg)" > < / div > < / div >
< / div >
< br >
<!-- XXX this shows that we will still need margin - patching and resizing when rotating...
< 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-- >
2013-12-02 17:45:54 +04:00
2013-12-03 03:35:30 +04:00
< / details >
2013-12-02 17:45:54 +04:00
2013-12-03 03:35:30 +04:00
< details open >
< summary >
Keep the images on one level and marks outside, after the image...
< / summary >
2013-12-03 16:51:49 +04:00
+ one tag per UI element and only if that element is present (no dot, no tag), or if we make things a bit more comlicated, up to 3 per tag (self, before and after)< br >
2013-12-02 18:20:23 +04:00
+ generic and extensible< br >
- a little bit more complicated mark manipulation during image shifting
– potential orphaned or misplaces marks...< br >
2013-12-02 17:45:54 +04:00
< div class = "ribbon" >
< div id = "0" class = "image2" style = "background-image: url(image.jpg)" > < / div >
< div class = "mark red" > < / div >
2013-12-04 23:18:23 +04:00
< div id = "1" class = "current image2 cw180" style = "background-image: url(image.jpg)" > < / div >
2013-12-02 17:45:54 +04:00
< div class = "mark" > < / div >
2013-12-02 18:00:45 +04:00
< div class = "mark blue" title = "blue" > < / div >
< div class = "mark red" title = "red" > < / div >
< div class = "mark yellow" title = "yellow" > < / div >
2013-12-02 18:20:23 +04:00
< div id = "2" class = "image2" style = "background-image: url(image.jpg)" > < / div >
< div class = "mark select" > < / div >
2013-12-04 23:18:23 +04:00
< div class = "mark tagged" title = "tagged" > < / div >
2013-12-02 17:45:54 +04:00
< / div >
2013-12-03 03:35:30 +04:00
< / details >
2013-12-02 17:45:54 +04:00
2013-12-02 06:23:19 +04:00
< / body >
< / html >
