changeset 97:477255e09c8c

arnica_slides: simple css elements added based on a mockup from Radomir Dopieralski
author Reimar Bauer <rb.proj AT googlemail DOT com>
date Sun, 22 Jun 2008 16:21:43 +0200
parents 63da0711188e
children edb3aa8208b2
files data/plugin/action/arnica_slides.py
diffstat 1 files changed, 45 insertions(+), 6 deletions(-) [+]
line wrap: on
line diff
--- a/data/plugin/action/arnica_slides.py	Sun Jun 22 14:48:56 2008 +0200
+++ b/data/plugin/action/arnica_slides.py	Sun Jun 22 16:21:43 2008 +0200
@@ -94,14 +94,51 @@
     os.remove(thumbf)
     new_image_object.save(thumbf, img_type)
 
+def css():
+    """ simple version of mockup example by Radomir Dopieralski"""
+    return '''
+<style type="text/css">
+    html { height: 100%; background: #fff; }
+    body { min-height: 100%; position: relative; }
+    div.arnica {
+        display: inline-block;
+        text-align: center;
+        margin: 2em;
+    }
+    .arnica dl.info {
+        position: absolute;
+        width: 30em;
+        padding: 0.2em;
+        line-height: 1.2;
+        font-size: 70%;
+        top: 0;
+        left: 50%;
+        background: #fff;
+        color: #000;
+        opacity: 0.7;
+        filter:alpha(opacity='50');
+        text-align: left;
+        margin: 0 0 0 -10em;
+        -moz-border-radius-bottomright: 8px;
+        border-bottom-right-radius: 8px;
+        -moz-border-radius-bottomleft: 8px;
+        border-bottom-left-radius: 8px;
+    }
+    .arnica dl.info dt {
+        font-weight: bold;
+        float: left;
+        width: 4em;
+    }
+</style>
+'''
+
 def html_js(request, counter):
     """ javscript for the slides
     @param request: request object
     @param this_image:  url of image to start
     @param counter: index position of this_image
     """
-
-    html = '''
+    html = css() + '''
 <SCRIPT LANGUAGE="JavaScript">
 <!-- Original:  Ricocheting (ricocheting@hotmail.com) -->
 <!-- Web Site:  http://www.ricocheting.com -->
@@ -247,6 +284,7 @@
 
     html = '''
 <div class="arnica">
+<div>
 <form name=slideform method="POST"><div>
 <input type="hidden" name="flag" value="webnail">
 <input type="hidden" name="webnail_list" value='%(this_webnail_list)s'>
@@ -258,16 +296,17 @@
 <input type="button" name="slidebutton" onClick="arnica_ap(this.value);" value="Start" title="AutoPlay">
 <label>Duration (sec):<input type="input" name="duration" value="3.0" size="3"></label>
 </div></form>
-<div class="arnica_buttons">
+<br>
 <span id="arnica_first_slide"><img src="%(server)s%(htdocs)s/common/arnica/arnica_first_slide.png" onclick="arnica_first_slide();" name="fs"  title="first slide" ></SPAN>
 <img src="%(server)s%(htdocs)s/common/arnica/arnica_previous.png" onclick="arnica_previous_slide();"  title="previous slide" >
 <img src="%(server)s%(htdocs)s/common/arnica/arnica_next.png" onClick="arnica_next_slide();"  title="next slide" >
 <span id="arnica_last_slide"><img src="%(server)s%(htdocs)s/common/arnica/arnica_last_slide.png" onClick="arnica_last_slide();"  title="last slide" ></SPAN>
 </div>
 <img src="%(server)s%(this_image)s" class="arnica_slide" name="show">
-<div class="arnica_info">
-<p class="arnica_name"><SPAN id="arnica_alias_text">%(this_alias_text)s</p>
-<p class="arnica_date"><SPAN id="arnica_exif_date_text">%(this_exif_date_text)s</p>
+<dl class="info">
+<dd><SPAN id="arnica_alias_text">%(this_alias_text)s</dd>
+<dd><SPAN id="arnica_exif_date_text">%(this_exif_date_text)s</dd>
+</dl>
 </div>
 </div>
 ''' % {