Dicoweb: Add CSS for mobile devices.

author: Wojciech Polak <polak@gnu.org> 2013-03-02 14:32:33 +0100
committer: Wojciech Polak <polak@gnu.org> 2013-03-02 14:37:36 +0100
commit: 9d08cdfd73267b2fcd84b968258536cbdfad9af2 (patch)
tree: dce517e822859129841250e8455f2e0617b75a3a
parent: a07969d24129394013abf094d23a9f062b03f89e (diff)
download: dico-9d08cdfd73267b2fcd84b968258536cbdfad9af2.tar.gz
dico-9d08cdfd73267b2fcd84b968258536cbdfad9af2.tar.bz2
3 files changed, 73 insertions, 56 deletions
diff --git a/dicoweb/static/dicoweb.css b/dicoweb/static/dicoweb.css
index 543b0a2..de4d617 100644
--- a/dicoweb/static/dicoweb.css
+++ b/dicoweb/static/dicoweb.css
@@ -1,6 +1,6 @@
 /*
   This file is part of GNU Dico.
-  Copyright (C) 2008-2010, 2012 Wojciech Polak
+  Copyright (C) 2008-2010, 2012, 2013 Wojciech Polak
 
   GNU Dico is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
@@ -22,10 +22,14 @@
 }
 
 body {
-  font-family: arial, sans-serif;
+  font-family: Arial, sans-serif;
   font-size: 95%;
   background-color: white;
   color: #585858;
+  max-width: 750px;
+  margin: 0 auto;
+  padding: 0 1em;
+  overflow-y: scroll;
 }
 
 h1, h2, h3 {
@@ -39,18 +43,15 @@ h2 {
   padding-top: .5em;
   padding-bottom: .17em;
 }
+h3 { margin-bottom: 8px; }
 
 img {
   padding: 3px;
   border: 0px;
 }
 
-a {
-  color: #ff5c2f;
-}
-a:hover {
-  text-decoration: underline;
-}
+a { color: #ff5c2f; }
+a:hover { text-decoration: underline; }
 
 input {
   padding: 1px;
@@ -60,7 +61,8 @@ ul {
   margin-bottom: 1em;
 }
 li {
-  margin-left: 2em;
+  margin-left: 1.5em;
+  margin-bottom: 0.2em;
   line-height: 1.5em;
 }
 p {
@@ -68,26 +70,29 @@ p {
   margin-bottom: 0.2em;
 }
 pre {
+  font-family: Arial;
   font-size: 95%;
+  text-align: justify;
   white-space: normal;
   line-height: 140%;
   padding: 1em;
 }
-table {
-  border-spacing: 2px;
-}
+pre a { text-decoration: none; }
+pre h3, pre h4 { margin-top: 1.2em; }
+
+table { border-spacing: 2px; }
+table td.label { width: 25%; }
 tr, th, td {
   padding: 2px;
-  vertical-align: top;
+  vertical-align: middle;
 }
 
-.hidden {
-  display: none
-}
+.clear { clear: both; }
+.hidden { display: none }
 
-#top {
-  margin: 0 auto 0 auto;
-}
+#wrap { margin: 1em 0; }
+
+#logo { float: left; }
 #logo h1 {
   padding-left: 15px;
   padding-bottom: 3px;
@@ -98,17 +103,12 @@ tr, th, td {
 #logo img {
   padding-left: 15px;
 }
-#searchform {
-  width: 600px;
-  margin: 60px auto 0 auto;
-}
-#searchform table {
-  margin-left: auto;
-  margin-right: auto;
-}
+
+#main { padding-top: 45px; }
+#searchform table { margin: 0 auto; }
+
 .results, .derror {
   border-top: dotted 1px #e1e1e1;
-  width: 700px;
   margin: 1em auto 0 auto;
   padding: 4px;
   padding-top: 10px;
@@ -123,12 +123,34 @@ a.link-lmr {
   font-size: 8pt;
 }
 
+input, select { padding: 3px; }
+#toggle_options { white-space: nowrap; }
+
 #footer {
+  clear: both;
   font-size: 80%;
-  width: 700px;
   text-align: center;
   border-top: dotted 1px #e1e1e1;
-  margin: 1em auto 10px auto;
-  padding: 4px;
-  padding-top: 10px;
+  margin: 1.2em auto 10px auto;
+  padding: 10px 4px 4px 4px;
+}
+
+/* mobile devices */
+@media screen and (max-width: 360px) {
+  #action-pad { display: none; }
+}
+@media screen and (max-width: 640px) {
+  #main { padding-top: 50px; }
+  #logo h1 { font-size: 2em; float: right; }
+  #logo img {
+    max-width: 48px; max-height: 48px;
+    float: left; padding-left: 0;
+  }
+  #searchform { clear: both; margin-top: 1em; }
+  #action { padding-top: 0.5em; }
+  table { max-width: 100%; }
+  td.label { width: 20% !important; }
+  input, select { width: auto; max-width: 215px; }
+  li { margin-left: 1em; margin-bottom: 1em; }
+  pre { font-size: 90%; padding: 0; }
 }
diff --git a/dicoweb/templates/base.html b/dicoweb/templates/base.html
index 614b1e7..a173450 100644
--- a/dicoweb/templates/base.html
+++ b/dicoweb/templates/base.html
@@ -5,6 +5,7 @@
 <head>
 <title>{{ page.title|striptags }}GNU Dico Web</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 <meta name="keywords" content="gnu dico web search interface, dicoweb, dictionaries, dict protocol" />
 <meta name="description" content="GNU Dico WebSearch Interface" />
 <meta name="robots" content="{{ page.robots }}" />
@@ -14,29 +15,23 @@
 </head>
 
 <body>
-<div id="header"></div>
-<table id="top">
-  <tr>
-    <td>
-      <div id="logo">
-	<h1><a href="{% url views.index %}" accesskey="1">GNU Dico</a></h1>
-	<img src="{% media_prefix %}/gnu-head-sm.jpg" width="129" height="122" alt="GNU" />
-      </div>
-    </td>
-    <td>
-      <div id="main">
-	{% block search %}{% endblock %}
-      </div>
-    </td>
-  </tr>
-</table>
+  <div id="wrap">
+    <div id="logo">
+      <h1><a href="{% url views.index %}" accesskey="1">GNU Dico</a></h1>
+      <img src="{% media_prefix %}/gnu-head-sm.jpg" width="129" height="122" alt="GNU" />
+    </div>
+    <div id="main">
+      {% block search %}{% endblock %}
+    </div>
+  </div><!-- /wrap -->
+  <div class="clear"></div>
 
 {% block results %}{% endblock %}
 
-<div id="footer">
-  <a href="http://www.gnu.org/software/dico/">GNU Dico</a>
-  Web interface. Copyright &copy; 2008-{% now "Y" %} GNU Dico Team.
-</div>
+  <div id="footer">
+    <a href="http://www.gnu.org/software/dico/">GNU Dico</a>
+    Web interface. Copyright &copy; 2008-{% now "Y" %} GNU Dico Team.
+  </div>
 
 </body>
 </html>
diff --git a/dicoweb/templates/index.html b/dicoweb/templates/index.html
index 10c8830..5ebb46a 100644
--- a/dicoweb/templates/index.html
+++ b/dicoweb/templates/index.html
@@ -6,10 +6,10 @@
 
 <div id="searchform">
   <form id="form" method="get" action="">
-    <table width="600">
+    <table>
       <tbody>
 	<tr>
-          <td align="right" style="width:25%">{% trans "Search term:" %}</td>
+          <td align="right" class="label">{% trans "Search term:" %}</td>
 	  <td>
 	    <input type="text" id="q" name="q" size="35" value="{{ q|escape }}" />
             <a href="./#" id="toggle_options">{% trans "more options" %}</a>
@@ -46,8 +46,8 @@
       </tbody>
       <tbody>
 	<tr>
-	  <td></td>
-	  <td>
+	  <td id="action-pad"></td>
+	  <td id="action" colspan="2">
 	    <input type="submit" name="search" value="{% trans "Search" %}" />
 	    <input type="submit" name="define" value="{% trans "Define (I'm feeling lucky)" %}" />
 	  </td>
author	Wojciech Polak <polak@gnu.org>	2013-03-02 14:32:33 +0100
committer	Wojciech Polak <polak@gnu.org>	2013-03-02 14:37:36 +0100
commit	9d08cdfd73267b2fcd84b968258536cbdfad9af2 (patch)
tree	dce517e822859129841250e8455f2e0617b75a3a
parent	a07969d24129394013abf094d23a9f062b03f89e (diff)
download	dico-9d08cdfd73267b2fcd84b968258536cbdfad9af2.tar.gz dico-9d08cdfd73267b2fcd84b968258536cbdfad9af2.tar.bz2