From e635ab2c1be54be8313c96787b33a4b1a44ad957 Mon Sep 17 00:00:00 2001
From: Justyna Ilczuk <justyna.ilczuk@gmail.com>
Date: Fri, 25 Jan 2013 22:56:36 +0100
Subject: [PATCH] View improvements.

---
 helloworld.pyx        |   0
 templates/about.html  |   6 ++-
 templates/date.html   |   2 +-
 templates/index.html  |  85 +++++++++++++++++++++++++++----
 templates/layout.html | 114 ++++++++++++++++++++++++++++++++++++------
 templates/pyvis.py    |  11 ----
 6 files changed, 180 insertions(+), 38 deletions(-)
 create mode 100644 helloworld.pyx
 delete mode 100644 templates/pyvis.py

diff --git a/helloworld.pyx b/helloworld.pyx
new file mode 100644
index 0000000..e69de29
diff --git a/templates/about.html b/templates/about.html
index 052b9d0..30a8a50 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -20,10 +20,14 @@ $("document").ready( function(){
     <p>
     	Select a subject from navigation bar menu. Then you will be able to see, which notes are uploaded.There is link, view and download buttons click on anything you are interested in. 
     </p>
-    <h1>Why? What for?</h1>
+    <h1>Why? What for? Motivation</h1>
     <p>
     	I like digital notes. But I encountered some problems, it wasn't very comfortable. I wanted to improve it. I wanted to share, to have easy access and automated updates and maintainence. So I made nooz. I am still working on it.
     </p>
+    <h1>How was it made?</h1>
+    <p>
+    	Whole app is written in python. I used flask, amazing, fast, simple python web framework as backend. To make it look somehow I used twitter bootstrap. As database I use sqlite3.
+    </p>
 
 </div>
 
diff --git a/templates/date.html b/templates/date.html
index 7eee9f7..5f5894d 100644
--- a/templates/date.html
+++ b/templates/date.html
@@ -9,7 +9,7 @@
   <h2>{{ key }}</h2>                                                             
     {%- if subject %}   
           {% for note in subject %}
-                <a href="/view/{{note.subject}}/{{note.datestring }}" ><img src="{{ url_for('static', filename=note.subject + '/' + note.datestring + '/' + note.name) }}" height="30%" class="img img-rounded" width="30%" alt=""></a>
+                <a href="/view/{{note.subject}}/{{note.datestring }}" ><img src="{{ url_for('static', filename='mini/' + note.subject + '/' + note.datestring + '/' + note.name) }}" class="img img-rounded"  alt=""></a>
           {% endfor %}                                                                                      
                                   
     {%- endif %}                                                                                                                                
diff --git a/templates/index.html b/templates/index.html
index 3f55d41..6fd0401 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,9 +2,62 @@
 {% block body %}
 <script type="text/javascript">
 //Change active button in navbar
+
 $("document").ready( function(){
   $("li").removeClass("active");
   $("#home").addClass("active");
+  
+  pages = [];
+  i=1;
+  $(".image").each( function() {
+    pages.push($(this).attr("rel"))
+  });
+
+
+  $(".image").click(function() {
+        var image = $(this).attr("rel");
+        $('#display').hide();
+        $('#display').fadeIn('slow');
+        $('#display').attr("src", image);
+        return false;
+  });
+
+  previous_page = "";
+  console.log(pages);
+  next_page = pages[1];
+  $(function() {
+      $("#newer").click(function() {
+        if(i < pages.length)
+        {
+          previous_page = pages[i-1];
+          $('#display').hide();
+          $('#display').fadeIn('slow');
+          $('#display').attr("src", next_page);
+          
+            i++;
+          next_page = pages[i];
+         
+          
+        }
+        
+        return false;
+       });
+      $("#older").click(function() {
+        if(i >= 2)
+        { 
+          $('#display').hide();
+          $('#display').fadeIn('slow');
+          $('#display').attr("src", previous_page);
+          
+            previous_page = pages[i-3];
+            next_page = pages[i-1]
+            i--;
+         
+          
+        }
+        return false;
+       });
+    });
 });
 
 </script>
@@ -16,13 +69,21 @@ $("document").ready( function(){
           <a href="#"  id="image">
               <img id="display" src="{{ url_for('static', filename=main_page_src) }}" alt="">
           </a>
+          <ul class="pager">
+            <li class="previous">
+              <a href="" id="older">&larr; Older</a>
+            </li>
+            <li class="next">
+              <a href="" id="newer">Newer &rarr;</a>
+            </li>
+          </ul>
         </li>
 
         <li class="span2">
           {% for thumb in thumbs %}
             <a href="#" rel="{{ url_for('static', filename=thumb.href) }}" class="thumbnail image">
-              <img src="{{ url_for('static', filename=thumb.src) }}" alt="">
-          </a>
+              <img src="{{ url_for('static', filename='mini/' + thumb.src) }}" alt="">
+            </a>
           {% endfor %}  
           <ul>
             <h4>Other dates...</h4>
@@ -33,14 +94,18 @@ $("document").ready( function(){
         </li>
         
     </ul>
-
-
     
 
+  {% endblock %} 
 
-  <p>
-    What I want todo.
-    4. make it easy download upload of notes
-    5. add tagging and searching and subjects
-  </p>
-  {% endblock %} 
\ No newline at end of file
+  <script type="text/javascript">
+    $(function() {
+      $(".image").click(function() {
+        var image = $(this).attr("rel");
+        $('#display').hide();
+        $('#display').fadeIn('slow');
+        $('#display').attr("src", image);
+        return false;
+       });
+    });
+  </script>
\ No newline at end of file
diff --git a/templates/layout.html b/templates/layout.html
index a62362d..4852773 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -11,17 +11,7 @@
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.js') }}"></script>
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
    
-  <script type="text/javascript">
-    $(function() {
-      $(".image").click(function() {
-        var image = $(this).attr("rel");
-        $('#display').hide();
-        $('#display').fadeIn('slow');
-        $('#display').attr("src", image);
-        return false;
-       });
-    });
-  </script>
+  
 <script type=text/javascript>
   $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
 </script>
@@ -29,8 +19,20 @@
 <script >
 
 $("document").ready( function() {
+  $('.submenu').hover(function () {
+      console.log("hover");
+        $(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
+        
+    }, function () {
+      console.log("hide");
+        $(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
+    }).find("a:first").append(" &raquo; ");
+
 });
 
+
+
+
 </script>
   </head>
 
@@ -39,6 +41,46 @@ $("document").ready( function() {
         padding-top: 40px;
         padding-bottom: 40px;
       }
+
+      .submenu-show
+      {
+        border-radius: 3px;
+        display: block;
+        left: 95%;
+        margin-top: -30px !important;
+        moz-border-radius: 3px;
+        position: absolute;
+        webkit-border-radius: 3px;
+        }
+        .submenu-hide
+        {
+            display: none !important;
+            float: right;
+            position: relative;
+            top: auto;
+        }
+        .navbar .submenu-show:before
+        {
+            border-bottom: 7px solid transparent;
+            border-left: none;
+            border-right: 7px solid rgba(0, 0, 0, 0.2);
+            border-top: 7px solid transparent;
+            left: 7px;
+            top: 10px;
+            padding-left: 5px;
+            position: absolute;
+        }
+
+
+        .navbar .submenu-show:after
+        {
+            border-bottom: 6px solid transparent;
+            border-left: none;
+            border-right: 6px solid #fff;
+            border-top: 6px solid transparent;
+            left: 10px;
+            top: 11px;
+        }
   </style>
     
   <body>
@@ -77,19 +119,59 @@ $("document").ready( function() {
 						<div class="dropdown">
   							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
     							Date
-    							<span class="caret"></span>
+    							<span class="caret"></span>  
   							</a>
     
-  							<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-    							{% for date in all_dates %}
+  						
+              <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                <li> submenu 
+                  <ul class="dropdown-submenu">
+                  <li>n</li>
+                  </ul>
+                </li>
+                {% for date in all_dates %}
                     <li><a href="/date/{{date }}">{{date }}</a> </li>
                   {% endfor %}
+                  <li>
+                  </li>
 
-
+                  
   							</ul>
+
+              <ul class="dropdown-menu">
+                <li class="dropdown submenu">
+                    <a href="#" class="dropdown-toggle" id="levelone" data-toggle="dropdown">Level 1</a>
+                    <ul class="dropdown-menu  submenu-hide">
+                        <li class="dropdown submenu">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.1</a>
+                             <ul class="dropdown-menu submenu-show submenu-hide">
+                                    <li><a href="#">Level 1.1.1</a></li>
+                                    <li><a href="#">Level 1.1.2</a></li>
+                                    <li><a href="#">Level 1.1.3</a></li>
+                                    <li><a href="#">Level 1.1.4</a></li>
+                            </ul>
+                        </li>
+                        <li class="dropdown submenu">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.2</a>
+                            <ul class="dropdown-menu submenu-hide">
+                                    <li><a href="#">Level 1.2.1</a></li>
+                                    <li><a href="#">Level 1.2.2</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Level 1.3</a></li>
+                        <li><a href="#">Level 1.4</a></li>
+                        <li><a href="#">Level 1.5</a></li>
+                    </ul>
+                </li>
+                {% for date in all_dates %}
+                    <li><a href="/date/{{date }}">{{date }}</a> </li>
+                {% endfor %}
+              </ul>
 						</div>
           </ul>
 					</li>
+
+
           <li>
             <li id="search" ><a href="/search" >Advanced search</a></li>
           </li>
@@ -97,6 +179,8 @@ $("document").ready( function() {
   			</div>
 		</div>
 
+<br />
+<br />
 {% block body %}
 
 {% endblock %} 
diff --git a/templates/pyvis.py b/templates/pyvis.py
deleted file mode 100644
index 3dfded4..0000000
--- a/templates/pyvis.py
+++ /dev/null
@@ -1,11 +0,0 @@
-import numpy as np
-import scipy
-import pylab
-import pymorph
-import mahotas
-from scipy import ndimage
-
-dna = mahotas.imread('dna.jpeg')
-
-pylab.imshow(dna)
-pylab.show()
\ No newline at end of file