changeset 99:4762bad57dae

arnica_slides: initial version basic css definition
author Reimar Bauer <rb.proj AT googlemail DOT com>
date Tue, 24 Jun 2008 03:13:45 +0200
parents edb3aa8208b2
children ee184bd0f428
files data/plugin/action/arnica_slides.py htdocs/modern/css/arnica_slides.css
diffstat 2 files changed, 63 insertions(+), 47 deletions(-) [+]
line wrap: on
line diff
--- a/data/plugin/action/arnica_slides.py	Mon Jun 23 23:50:00 2008 +0200
+++ b/data/plugin/action/arnica_slides.py	Tue Jun 24 03:13:45 2008 +0200
@@ -94,51 +94,16 @@
     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 = css() + '''
+    html = '''
+<link rel="stylesheet" type="text/css" charset="utf-8" media="all"
+ href="%(theme_url)s/css/%(action_name)s.css">
+
 <SCRIPT LANGUAGE="JavaScript">
 <!-- Original:  Ricocheting (ricocheting@hotmail.com) -->
 <!-- Web Site:  http://www.ricocheting.com -->
@@ -256,6 +221,8 @@
 }
 //  End -->
 </script> ''' % {
+  'theme_url': ('%s/%s' % (request.cfg.url_prefix_static, request.theme.name)),
+  'action_name': action_name,
   'htdocs': request.cfg.url_prefix_static,
   'counter': counter}
 
@@ -284,8 +251,8 @@
 
     html = '''
 <div class="arnica">
-<div>
-<form name=slideform method="POST"><div>
+<div class="navigation_animation">
+<form name=slideform method="POST">
 <input type="hidden" name="flag" value="webnail">
 <input type="hidden" name="webnail_list" value='%(this_webnail_list)s'>
 <input type="hidden" name="webnail_name" value='%(this_webnail_name)s'>
@@ -295,18 +262,20 @@
 %(option_webnails)s</select></label>
 <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>
-<br>
+</form>
+</div>
+<div class="navigation_button">
 <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>
+<div class="image">
 <img src="%(server)s%(this_image)s" class="arnica_slide" name="show">
-<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 class="image_description">
+<span id="arnica_alias_text">%(this_alias_text)s</span>,
+<span id="arnica_exif_date_text">%(this_exif_date_text)s</span>
 </div>
 </div>
 ''' % {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/modern/css/arnica_slides.css	Tue Jun 24 03:13:45 2008 +0200
@@ -0,0 +1,47 @@
+/*
+arnica_slides styles 
+
+copyright © 2008 MoinMoin:ReimarBauer, MoinMoin:RadomirDopieralski
+license: GNU GPL, see COPYING for details
+*/
+
+html { height: 100%; background: #fff; }
+body { min-height: 100%; position: relative; }
+div.arnica {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    border-style: outset;
+    -moz-border-radius-bottomright: 1px;
+    border-bottom-right-radius: 1px;
+    -moz-border-radius-bottomleft: 1px;
+    border-bottom-left-radius: 1px;
+    margin: 2em;
+}
+
+.arnica .navigation_animation {
+    text-align: center;
+    vertical-align: middle;
+    margin: 0.5em;
+}
+
+.arnica .navigation_button {
+    text-align: center;
+    vertical-align: middle;
+    margin: 0.5em;
+}
+
+.arnica .image {
+    text-align: center;
+    vertical-align: middle;
+    margin: 0.5em;
+}
+
+.arnica .image_description {
+    text-align: center;
+    padding: 0.5em;
+    line-height: 1.2;
+    font-size: 70%;
+    opacity: 0.5;
+    filter:alpha(opacity='50');
+}