styling and docs

code/app.py

@@ -34,6 +34,7 @@ def before_request():
     g.shares = json.load(open(app.config['SHARES_FILE'],'rt'))
     g.version = __FLEES_VERSION__
     g.site_name = app.config['SITE_NAME']
+    g.max_zip_size = app.config['MAX_ZIP_SIZE']
 
 @app.route("/")
 def index():
@@ -51,7 +52,8 @@ def index():
                     'name': share['name'],
                     'expire': get_or_none(share,'expire'),
                     'upload': get_or_none(share,'upload'),
-                    'password_set': password_set
+                    'password_set': password_set,
+                    'description': get_or_none(share,'description','')
                 })
 
     return render_template("index.html", entries=public_shares)

code/static/css/styles.css

@@ -4,21 +4,21 @@ html {
 }
 
 body {
-    color: slategray;
+  color: #0E6251;
-	background-color: ghostwhite;
+	background-color: #FDF2E9;
 	min-height: 600px;
 	font: 14px/1.3 'Segoe UI',Arial, sans-serif;
 }
 
 a:visited {
-    color: darkslategray;
+    color: #0E3221;
 }
 a:link {
-    color: slategray;
+    color: #0E6251;
 }
 
 #page {
-   padding-bottom:60px;
+   padding-bottom: 60px;
 }
 #footer {
    position: absolute;
@@ -26,9 +26,14 @@ a:link {
    left: 9vw;
    width: 80vw;
    height: 23px;
-   background: #f3f3fb;
+   background-color: #FAE5D3;
    text-align: center;
    padding-top: 7px;
+   background: #fdf2e9; /* Old browsers */
+   background: -moz-linear-gradient(left, #fdf2e9 0%, #fae5d3 50%, #fdf2e9 100%); /* FF3.6-15 */
+   background: -webkit-linear-gradient(left, #fdf2e9 0%,#fae5d3 50%,#fdf2e9 100%); /* Chrome10-25,Safari5.1-6 */
+   background: linear-gradient(to right, #fdf2e9 0%,#fae5d3 50%,#fdf2e9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf2e9', endColorstr='#fdf2e9',GradientType=1 ); /* IE6-9 */
 }
 .version_number {
   font-size: xx-small;
@@ -40,8 +45,16 @@ td,th {
   padding-top: 0.2em;
   padding-bottom: 0.2em;
 }
+th {
+  cursor: pointer;
+}
+
 tr:nth-child(even) {
-  background: #f3f3fb
+  background-color: #FAE5D3;
+  background: -moz-linear-gradient(left, #fae5d3 0%, #fae5d3 95%, #fdf2e9 100%);
+  background: -webkit-linear-gradient(left, #fae5d3 0%,#fae5d3 95%,#fdf2e9 100%);
+  background: linear-gradient(to right, #fae5d3 0%,#fae5d3 95%,#fdf2e9 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fae5d3', endColorstr='#fdf2e9',GradientType=1 );
 }
 
 .td_right {
@@ -68,10 +81,13 @@ tr:nth-child(even) {
 #list_menu {
   float:right;
   padding: 8px;
-  border: 4px solid lightslategray;
+  border: 4px solid #148F77;
-  background-color: #f3f3fb;
+  background-color: #FAE5D3;
   line-height: 1.5em;
   position: relative;
+  -webkit-border-bottom-left-radius: 15px;
+  -moz-border-radius-bottomleft: 15px;
+  border-bottom-left-radius: 15px;
 }
 
 #list_menu ul {
@@ -109,10 +125,13 @@ tr:nth-child(even) {
 
 #index_menu {
   float:right;
-  padding: 8px;
+  padding: 12px;
-  border: 4px solid lightslategray;
+  border: 4px solid #148F77;
-  background-color: #f3f3fb;
+  background-color: #FAE5D3;
   line-height: 2em;
+  -webkit-border-bottom-left-radius: 15px;
+  -moz-border-radius-bottomleft: 15px;
+  border-bottom-left-radius: 15px;
 }
 
 #index_table {

code/templates/index.html

@@ -17,7 +17,10 @@
    </tr>
   {% for entry in entries %}
     <tr>
-      <td><a href="{{ url_for('list_view',name=entry.name) }}">{{ entry.name }}</a>
+      <td><a 
+             href="{{ url_for('list_view',name=entry.name) }}" 
+             title="{{ entry.description | safe }}"
+          >{{ entry.name }}</a>
           {% if entry.password_set %}(Logged in){% endif %}
       <td class=td_right>{% if entry.expire %}{{ entry.expire|safe }}{% else %}-{% endif %}
       <td class=td_right>{% if entry.upload %}yes{% else %}no{% endif %}

code/templates/list.html

@@ -22,19 +22,19 @@
    Share:
    <ul>
   {% if public %}
-   <li>is <a href="{{ url_for('index') }}">public</a>
+   <li>is <a href="{{ url_for('index') }}" title="Share is publicly visible in the index">public</a>
   {% else %}
-   <li>is <a href="{{ url_for('index') }}">unlisted</a>
+   <li>is <a href="{{ url_for('index') }}" title="Share not listed in the index unless you have logged in">unlisted</a>
   {% endif %}
   {% if expire %}
-   <li>expires {{ expire }}
+   <li><span title="All share operations disabled after the date">expires {{ expire }}</span>
   {% else %}
    <li>never expires
   {% endif %}
   {% if overwrite == false %}
-   <li>overwriting is disabled
+   <li><span title="Uploaded files need to be uniquely named">overwriting is disabled</span>
   {% endif %}
-   <li><a href="{{ url_for('download_zip',name=name) }}">Download as zip</a>
+   <li><a href="{{ url_for('download_zip',name=name) }}" title="Download all the files as one ZIP file. Total size of files must be less than {{ g.max_zip_size }} Mb">Download as zip</a>
    <li><a href="{{ url_for('logout',name=name) }}">Logout</a>
    </div>
   </div>