fixup HTML/CSS for title footer + width-based CSS
authorTero Marttila <terom@fixme.fi>
Wed, 21 Aug 2013 01:31:35 +0300
changeset 52 bb851151e956
parent 51 6f35a169ef01
child 53 8e6e7ca39e48
fixup HTML/CSS for title footer + width-based CSS
qrurls/static/qrurls/qrurls.css
qrurls/templates/qrurls/image.html
--- a/qrurls/static/qrurls/qrurls.css	Wed Aug 21 01:18:22 2013 +0300
+++ b/qrurls/static/qrurls/qrurls.css	Wed Aug 21 01:31:35 2013 +0300
@@ -25,14 +25,29 @@
 }
 
 body.qrurls-image .container {
+    /* Provide relative width for img within */
     width: 100%;
     height: 100%;
 }
 
 body.qrurls-image img {
     border: none;
-    max-width: 100%;
-    max-height: 100%;
     margin: auto;
     display: block;
+    
+    /* Scale for portait-mode */
+    max-width: 100%;
 }
+
+div.footer {
+    margin: 1em;
+    padding: 1em;
+    
+    border-radius: 1em;
+    background-color: #080808;
+    opacity: 1.0;
+
+    text-align: center;
+    color: #ff8800;
+    font-weight: bold;
+}
--- a/qrurls/templates/qrurls/image.html	Wed Aug 21 01:18:22 2013 +0300
+++ b/qrurls/templates/qrurls/image.html	Wed Aug 21 01:31:35 2013 +0300
@@ -6,7 +6,10 @@
     </head>
     <body class="qrurls-image">
         <div class="container">
-            <img src="{{ image.get_absolute_url }}" alt="{{ title }}" title="{{ title }}" />
+            <img src="{{ image.get_absolute_url }}" title="{{ title }}" />
+            <div class="footer">
+                {{ title }}
+            </div>
         </div>
     </body>
 </html>