From 8ba0c8f0acdb1dc179f6c0ec925655ddd94fc1e4 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Mon, 2 Dec 2013 09:31:53 +0400 Subject: [PATCH] some experimenting... Signed-off-by: Alex A. Naanou --- ui/data.js | 2 +- .../seporate-image-and-background.html | 57 +++++++++++++++++++ 2 files changed, 58 insertions(+), 1 deletion(-) diff --git a/ui/data.js b/ui/data.js index 56843ed8..f0cae5b2 100755 --- a/ui/data.js +++ b/ui/data.js @@ -1163,7 +1163,7 @@ function updateImage(image, gid, size, sync){ // async load... } else { // NOTE: storing the url in .data() makes the image load the - // last preview and last preview only in the case that we + // last preview and in a case when we // manage to call updateImage(...) on the same element // multiple times before the previews get loaded... // ...setting the data().loading is sync while loading an diff --git a/ui/experiments/seporate-image-and-background.html b/ui/experiments/seporate-image-and-background.html index e242f096..5ab77e23 100755 --- a/ui/experiments/seporate-image-and-background.html +++ b/ui/experiments/seporate-image-and-background.html @@ -98,6 +98,47 @@ /*********************************************************************/ +.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; +} + + + @@ -114,5 +155,21 @@
+ +
+ + Add a seporate bg tag
+ - this effectively doubles the number of tags used for a ribbon...
+ + the only API that needs changing is what deals with previews and filters
+ + will simplify different image indicator CSS
+ + will remove LOTS of code dealing with scaling, sizing and rotation... this will not change!
+
+
+
+
+
+