GNOME.org
 

[snowy] Redesign the note viewer and sidebar based on Jeff Fortin's mockups

commit c33d77b69ad3afbb3ab9da06a85473f5a7169996
Author: Leon Handreke <leon handreke gmail com>
Date:   Fri Nov 26 07:16:30 2010 +0100

    Redesign the note viewer and sidebar based on Jeff Fortin's mockups
    
    - Implement the design and color scheme from Jeff Fortin's mockups
      as discussed at the hackfest
    - Add note categories to the sidebar
    - Change the color scheme to a yellow-gray combination
    - Add a toolbar-style header above the note content
    - Display "All Notes" list in the content area instead of on a seperate
      page
    - Add new "Tomboy Online" logo made by Jeff Fortin
    - Split the CSS into multiple files
    - Remove the "More Notes" link in the sidebar when no notes are
      available

 notes/templates/notes/base.html              |    5 +-
 notes/templates/notes/note_detail.html       |   54 +++++--
 notes/templates/notes/note_index.html        |    1 -
 notes/templates/notes/note_list.html         |    5 +-
 notes/templates/notes/note_list_snippet.html |    2 +-
 notes/views.py                               |    3 +-
 site_media/css/content.css                   |   87 ++++++++++
 site_media/css/screen.css                    |  236 +++-----------------------
 site_media/css/sidebar.css                   |  121 +++++++++++++
 site_media/img/selected-arrow.gif            |  Bin 249 -> 0 bytes
 site_media/img/tomboy-logo.png               |  Bin 7711 -> 8404 bytes
 templates/base.html                          |   17 ++-
 12 files changed, 288 insertions(+), 243 deletions(-)
---
diff --git a/notes/templates/notes/base.html b/notes/templates/notes/base.html
index b0fc2ee..23f38af 100644
--- a/notes/templates/notes/base.html
+++ b/notes/templates/notes/base.html
@@ -3,12 +3,13 @@
 {% load i18n %}
 
 {% block sidebar %}
+    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sidebar.css" media="screen">
 {% if author %}
 <form method="GET" name="searchForm" action="">
     {% if request.GET.query %}
-    <input type="text" id="search" name="query" accesskey="s" value="{{request.GET.query}}">
+    <input type="search" id="search" name="query" accesskey="s" value="{{request.GET.query}}">
     {% else %}
-    <input type="text" id="search" class="dim" name="query" accesskey="s" value="{% trans "Search your notes" %}">
+    <input type="search" id="search" class="dim" name="query" accesskey="s" placeholder="{% trans "Search your notes" %}" value="{% trans "Search your notes" %}">
     {% endif %}
 </form>
 {% endif %}
diff --git a/notes/templates/notes/note_detail.html b/notes/templates/notes/note_detail.html
index 78fb671..f8b76a0 100644
--- a/notes/templates/notes/note_detail.html
+++ b/notes/templates/notes/note_detail.html
@@ -18,19 +18,20 @@
 {{ block.super }}
 {% user_notes_list request author as list_notes %}
 <div id="sidebar-note-list">
+    <h3><a href="{% url note_list author.username %}">All Notes</a></h3>
+    <h3>Recent Notes</h3>
     <ul>
         {% for n in list_notes %}
-        <li class="note-item{% if n.pinned %} pinned{% endif %}{% ifequal n note %} selected{% endifequal %}"><a href="{{ n.get_absolute_url }}{% if request.GET.query %}?query={{request.GET.query}}{% endif %}">{{ n.title|safe }}</a></li>
-        {% endfor %}
-        {% if request.GET.query %}
-        <div style="text-align: center; margin: 3px;">
-            <a href="."><input type="button" value="{% trans "Clear Search" %}" style="width:90%;"></a>
-        </div>
-        {% else %}
-        <li class="more-item"><a href="{% url note_list author.username %}">{% trans "More Notes..." %}</a></li>
+        {% if not n.pinned %}
+        <li class="note-item{% if n.pinned %} pinned{% endif %}{% ifequal n note %} note-selected{% endifequal %}"><a href="{{ n.get_absolute_url }}{% if request.GET.query %}?query={{request.GET.query}}{% endif %}">{{ n.title|safe }}</a></li>
         {% endif %}
+        {% endfor %}
+    {% if request.GET.query %}
+    <div style="text-align: center; margin: 3px;">
+        <a href="."><input type="button" value="{% trans "Clear Search" %}" style="width:90%;"></a>
+    </div>
+    {% endif %}
     </ul>
-    <hr />
     <ul>
 {# Enable when we allow editing #}
 {% comment %}
@@ -38,21 +39,44 @@
 {% endcomment %}
     </ul>
 </div>
+<div id="sidebar-pinned-notes-list">
+    <h3>{% trans "Pinned Notes" %}</h3>
+    <ul>
+        {% for n in list_notes %}
+        {% if n.pinned %}
+        <li class="note-item note-pinned{% ifequal n note %} note-selected{% endifequal %}"><a href="{{ n.get_absolute_url }}{% if request.GET.query %}?query={{request.GET.query}}{% endif %}">{{ n.title|safe }}</a></li>
+        {% endif %}
+        {% endfor %}
+    </ul>
+</div>
+
+<div id="sidebar-shared-notes-list">
+    <h3>{% trans "Other's Notes" %}</h3>
+</div>
+
 <div id="sidebar-notebook-list">
     <h3>{% trans "Notebooks" %}</h3>
-    <ul> 
+    <ul>
 {% user_notebook_list request author as all_notebooks %}
 {% include "notes/notebook_list_snippet.html" %}
-        <li class="more-item"><a href="#">{% trans "More Notebooks..." %}</a></li>
     </ul>
 </div>
 {% endblock %}
 
-{% block content %}
-<div id="note_topbar">
-    <span id="breadcrumb">{% if notebook %} {{ notebook|safe }} &raquo; {{ title|safe }}{% endif %}</span>
+{% block content-header %}
+<div id="note-header">
+    <button class="header-button">Share</button>
+    <button class="header-button">Delete</button>
+    <button class="header-button" style="float:right;">Edit</button>
 </div>
+{% endblock %}
+{% block content %}
 <table id="content-layout" cellspacing="0" cellpadding="0">
+    {% if notebook %}
+    <tr><td>
+        <span id="breadcrumb">{{ notebook|safe }} &raquo; {{ title|safe }}</span>
+    </td></tr>
+    {% endif %}
     <tr>
         <td id="note">
             <h1>{{ title|safe }}</h1>
@@ -89,7 +113,7 @@
             </div>
 {% endcomment %}
         </td>
-    </br>
+    </tr>
 </table>
 {% comment %}
 <script type="text/javascript">
diff --git a/notes/templates/notes/note_index.html b/notes/templates/notes/note_index.html
index bc1ce73..c7e050c 100644
--- a/notes/templates/notes/note_index.html
+++ b/notes/templates/notes/note_index.html
@@ -17,7 +17,6 @@
 {% for n in all_notes %}
         <li class="note-item{% if n.pinned %} pinned{% endif %}"><a href="{{ n.get_absolute_url }}">{{ n.title|safe }}</a></li>
 {% endfor %}
-        <li class="more-item"><a href="{% url note_list author.username %}">{% trans "More Notes..." %}</a></li>
     </ul>
     <hr />
     <ul>
diff --git a/notes/templates/notes/note_list.html b/notes/templates/notes/note_list.html
index 152dfb1..f76a20a 100644
--- a/notes/templates/notes/note_list.html
+++ b/notes/templates/notes/note_list.html
@@ -1,10 +1,9 @@
-{% extends 'notes/base.html' %}
+{% extends 'notes/note_detail.html' %}
 
 {% load i18n %}
 
 {% block title %}{% trans "All Notes" %} | {{ block.super }}{% endblock %}
 
-{% block content-container %}
-<h1>{% trans "All Notes" %}</h1>
+{% block content %}
 {% include "notes/note_list_snippet.html" %}
 {% endblock %}
diff --git a/notes/templates/notes/note_list_snippet.html b/notes/templates/notes/note_list_snippet.html
index 968b4ed..f397292 100644
--- a/notes/templates/notes/note_list_snippet.html
+++ b/notes/templates/notes/note_list_snippet.html
@@ -11,7 +11,7 @@
     <tbody>
 {% autopaginate notes %}
 {% for note in notes %}
-        <tr class="{% cycle 'row-odd' 'row-even' %}">
+        <tr class="note-list-row">
 {% if note.pinned %}
             <td class="icon"><img src="{{ MEDIA_URL }}img/pin-down_16.png" width="16" height="16" alt="Pinned"/></td>
 {% else %}
diff --git a/notes/views.py b/notes/views.py
index 57bc572..cff7f78 100644
--- a/notes/views.py
+++ b/notes/views.py
@@ -52,7 +52,8 @@ def note_list(request, username,
     author = get_object_or_404(User, username=username)
     notes = Note.objects.user_viewable(request.user, author)
     return render_to_response(template_name,
-                              {'notes': notes},
+                              {'notes': notes,
+                               'author': author},
                               context_instance=RequestContext(request))
 
 def note_detail(request, username, note_id, slug='',
diff --git a/site_media/css/content.css b/site_media/css/content.css
new file mode 100644
index 0000000..57bfc4c
--- /dev/null
+++ b/site_media/css/content.css
@@ -0,0 +1,87 @@
+#content-container {
+    border-radius: 5px;
+    border: 1px solid black;
+    /* In case the content does not fill up the container just blend in */
+    vertical-align: top;
+    background-color: #ffffff;
+}
+
+#content {
+    vertical-align: top;
+    font-family: Candara, Verdana, Tahmoa, Arial, sans-serif;
+    height: inherit;
+    padding: 12px 12px 12px 24px;
+}
+
+#content h1 {
+    margin: 0.2em 0 0.5em 0;
+}
+
+#note-header {
+    position: relative;
+    top: 0px;
+    /* border-bottom is a visual divider between the header/toolbar and the content */
+    border-bottom: 1px solid black;
+    padding: 8px 12px 8px 24px;
+    /* Set border-radius-top to something crazy, else the div somehow overlaps with the rounded corners
+     * in the parent conainer and it looks weird - webkit bug?
+     */
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    /* Yellow-to-white gradient in the toolbar */
+    background: -webkit-gradient(linear, left top, left bottom, from(#f5e599), to(#ffffff));
+    background: -moz-linear-gradient(top,  #f5e599, #ffffff);
+}
+.header-button {
+    padding: 0.6em 1.5em 0.6em 1.5em;
+}
+
+#content-layout td {
+    padding: 8px;
+    vertical-align: top;
+}
+
+table#content-layout {
+    width: 100%;
+}
+
+/* Note-specific styles */
+
+.note-datetime {
+    color: #666666;
+    font-style: italic;
+    font-size: 0.8em;
+}
+
+.note-highlight {
+    background-color: yellow;
+}
+
+.note-monospace {
+    font-family: Consolas, monospace;
+}
+
+.note-size-small {
+    font-size: 0.8em;
+}
+
+.note-size-large {
+    font-size: 1.5em;
+}
+
+.note-size-huge {
+    font-size: 2.0em;
+}
+
+a.link-internal {
+    color: #204A87;
+}
+
+a.link-broken {
+    color: #555753;
+}
+
+a.link-url {
+    color: #3465A4;
+}
+
diff --git a/site_media/css/screen.css b/site_media/css/screen.css
index 2f582dd..3126b27 100644
--- a/site_media/css/screen.css
+++ b/site_media/css/screen.css
@@ -1,5 +1,5 @@
 html, body {
-    background-color: #4e6960;
+    background-color: #f5e590;
     font-size: 0.95em;
     margin: 0;
     padding: 0;
@@ -24,7 +24,7 @@ h1 {
 }
 
 #body {
-    background-color: #94c7b6;
+    background-color: #f5e599;
     padding: 10px;
 }
 
@@ -56,11 +56,7 @@ h1 {
     width: 64px;
 }
 
-#header-avatar img {
-    border: 2px solid #FFFFFF;
-}
-
-table#content-container {
+table#layout-container {
     padding: 0 10px 20px 10px;
     width: 100%;
     border: 0;
@@ -73,154 +69,6 @@ td#sidebar-container {
     vertical-align: top;
 }
 
-#sidebar {
-    margin: 20px 0 20px 0;
-    padding-bottom: 20px;
-
-    background-color: #403b33;
-    font-family: Trebuchet MS, Calibri, Verdana, Arial, sans-serif;
-    font-size: 1.05em;
-}
-
-#sidebar h3 {
-    font-family: Verdana, Candara, Tahoma, Arial, sans-serif;
-    text-transform: uppercase;
-}
-
-#sidebar input#search {
-    width: 250px;
-    margin: 4px;
-    padding: 3px 3px 3px 30px;
-    
-    border: 1px solid #bababa;
-    background: #73685d url('/site_media/img/search.png') center left no-repeat;
-    
-    color: #FFFFFF;
-}
-
-#sidebar input#search.dim {
-    color: #aba49e;
-    font-style: italic;
-}
-
-#sidebar hr {
-    height: 1px;
-    margin: 0.6em 0;
-    background-color: #aba49e;
-    border: 0;
-}
-
-#sidebar ul {
-    margin: 0;
-    padding: 0;
-}
-
-#sidebar li {
-    padding: 0.5em 0 0.25em 14px;
-    list-style-position: inside;
-}
-
-#sidebar li a {
-    position: relative;
-    top: -0.2em;
-
-    color: #ffffff;
-    text-decoration: none;
-}
-
-#sidebar .more-item {
-    list-style-type: none; 
-    padding-left: 37px;
-}
-
-#sidebar .more-item a {
-    text-decoration: underline;
-}
-
-#sidebar-note-list, #sidebar-notebook-list {
-    margin: 3px 0 0 0;
-}
-
-#sidebar-note-list .note-item {
-    list-style-image: url('/site_media/img/note_16.png'); 
-    padding-right: 12px;
-}
-
-#sidebar-note-list .pinned {
-    list-style-image: url('/site_media/img/pin-down_16.png'); 
-}
-
-#sidebar-note-list .selected {
-    background-color: #d6e1c7;
-    color: #545247;
-}
-
-#sidebar-note-list .selected::before {
-    content: ' ';
-    float: right;
-    display: block;
-    background-color: #edece6;
-    margin-top: -7.5px;
-    margin-right: -23.5px;
-    border-top: 15.5px solid transparent;
-    border-right: 0 solid transparent;
-    border-bottom: 15.5px solid transparent;
-    border-left: 12px solid #d6e1c7;
-}
-
-#sidebar-note-list .selected a {
-    color: #000000;
-}
-
-#sidebar-note-list #new-note {
-    list-style-image: url('/site_media/img/note-new_16.png'); 
-}
-
-#sidebar-note-list .more-item a {
-    color: #8c8985;
-}
-
-#sidebar-notebook-list {
-    margin: 0;
-    background-color: #8ecbd2;
-    color: #ffffff;
-}
-
-#sidebar-notebook-list h3 {
-    margin: 0.3em 14px;
-    font-size: 1.0em;
-    color: #578186;
-    padding-top: 7px;
-}
-
-#sidebar-notebook-list .notebook-item {
-    list-style-image: url('/site_media/img/notebook_16.png'); 
-}
-
-#sidebar-notebook-list .more-item a {
-    color: #bbe0e4;
-}
-
-#content {
-    padding: 12px 12px 12px 24px;
-    background-color: #edece6;
-    vertical-align: top;
-    font-family: Candara, Verdana, Tahmoa, Arial, sans-serif;
-}
-
-#content h1 {
-    margin: 0.2em 0 0.5em 0;
-}
-
-#content-layout td {
-    padding: 8px;
-    vertical-align: top;
-}
-
-table#content-layout {
-    width: 100%;
-}
-
 #toolbar {
     position: relative;
     float: right;
@@ -275,49 +123,12 @@ table#content-layout {
     text-align: left;
 }
 
-/* Note-specific styles */
-#note h1 {
-    text-decoration: underline;
-}
-
-.note-datetime {
-    color: #666666;
-    font-style: italic;
-    font-size: 0.8em;
-}
-
-.note-highlight {
-    background-color: yellow;
-}
-
-.note-monospace {
-    font-family: Consolas, monospace;
-}
-
-.note-size-small {
-    font-size: 0.8em;
-}
-
-.note-size-large {
-    font-size: 1.5em;
-}
-
-.note-size-huge {
-    font-size: 2.0em;
-}
-
-a.link-internal {
-    color: #204A87;
-}
-
-a.link-broken {
-    color: #555753;
+.center {
+    text-align: center;
 }
 
-a.link-url {
-    color: #3465A4;
-}
 
+/* CSS for the list pages */
 table.input-form {
     border-spacing: 13px;
 }
@@ -337,37 +148,35 @@ table.input-form {
 }
 
 .object_list {
-    width: 800px;
+    width: 100%;
 }
 
 .object_list thead tr {
-    background-color: #73685d;
-    font-family: Verdana, Candara, Tahoma, Arial, sans-serif;
     text-transform: uppercase;
-    color: #FFFFFF;
 }
 
-.object_list tfoot tr {
-    background-color: #403b33;
-    text-align: center;
-    color: #ffffff;
-    height: 1.7em;
+.object_list thead th {
+    border-bottom: 1px dashed black;
+    text-align: left;
+    padding: 8px;
 }
 
-.object_list tfoot a {
-    color: #8ecbd2;
+.object_list tbody {
+    border-top: 2px dashed black;
 }
 
-.object_list td {
-    padding: 5px 3px;
+.object_list tfoot tr {
+    text-align: center;
+    height: 1.7em;
 }
 
-.row-even {
-    background-color: #d4e1d9;
+.object_list td {
+    padding: 7px 3px;
 }
 
-.row-odd {
-    background-color: #edece6;
+.object_list td a {
+    text-decoration: none;
+    color: #000000;
 }
 
 .object_list td.icon {
@@ -383,6 +192,3 @@ table.input-form {
     text-align: center;
 }
 
-.center {
-    text-align: center;
-}
diff --git a/site_media/css/sidebar.css b/site_media/css/sidebar.css
new file mode 100644
index 0000000..05b19f9
--- /dev/null
+++ b/site_media/css/sidebar.css
@@ -0,0 +1,121 @@
+#sidebar {
+    margin: 20px 0 20px 0;
+    padding-bottom: 20px;
+
+    background-color: #ffffff;
+    border: 1px solid black;
+    border-right: none;
+    font-family: Trebuchet MS, Calibri, Verdana, Arial, sans-serif;
+    font-size: 1.05em;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+/* For section headers in the sidebar */
+#sidebar h3 {
+    font-family: Verdana, Candara, Tahoma, Arial, sans-serif;
+    margin: 0.3em 14px;
+    font-size: 1.0em;
+    color: #578186;
+    padding-top: 7px;
+    text-transform: uppercase;
+}
+#sidebar h3 a {
+    /* do not underline links */
+    text-decoration: none;
+}
+
+/* Search field */
+#sidebar input#search {
+    width: 250px;
+    margin: 10px;
+    margin-bottom: 5px;
+    /*padding: 3px 3px 3px 30px;*/
+    padding: 3px 3px 3px 3px;
+    
+    border: 1px solid #bababa;
+    border-radius: 5px; 
+    /* TODO convert the search bar image to fit in with the white layout */
+    /* background: url('/site_media/img/search.png') center left no-repeat; */
+}
+
+#sidebar input#search.dim {
+    color: #aba49e;
+    font-style: italic;
+}
+
+#sidebar hr {
+    height: 1px;
+    margin: 0.6em 0;
+    background-color: #aba49e;
+    border: 0;
+}
+
+/* List elements */
+#sidebar ul {
+    margin: 0;
+    padding: 0;
+}
+
+#sidebar li {
+    padding: 0.5em 0 0.25em 25px;
+    list-style-position: inside;
+}
+
+#sidebar li a {
+    position: relative;
+    top: -0.2em;
+
+    color: black;
+    text-decoration: none;
+}
+
+#sidebar-note-list, #sidebar-notebook-list {
+    margin: 3px 0 0 0;
+}
+
+.note-item {
+    list-style-image: url('/site_media/img/note_16.png'); 
+    padding-right: 12px;
+}
+
+.note-pinned {
+    list-style-image: url('/site_media/img/pin-down_16.png'); 
+}
+
+.note-selected {
+    background-color: #d6e1c7;
+    color: #545247;
+}
+
+.note-selected::before {
+    content: ' ';
+    float: right;
+    display: block;
+    background-color: #edece6;
+    /* The fancy selected arrow pointing into the editable area is no longer needed */
+    /*margin-top: -7.5px;
+    margin-right: -23.5px;
+    border-top: 15.5px solid transparent;
+    border-right: 0 solid transparent;
+    border-bottom: 15.5px solid transparent;
+    border-left: 12px solid #d6e1c7;*/
+}
+
+.note-selected a {
+    color: #000000;
+}
+
+#new-note {
+    list-style-image: url('/site_media/img/note-new_16.png'); 
+}
+
+#sidebar-notebook-list {
+    margin: 0;
+    color: #ffffff;
+}
+
+#sidebar-notebook-list .notebook-item {
+    list-style-image: url('/site_media/img/notebook_16.png'); 
+}
+
diff --git a/site_media/img/tomboy-logo.png b/site_media/img/tomboy-logo.png
old mode 100755
new mode 100644
index 0eff373..e582b9e
Binary files a/site_media/img/tomboy-logo.png and b/site_media/img/tomboy-logo.png differ
diff --git a/templates/base.html b/templates/base.html
index dbb19be..56dd598 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,6 +8,7 @@
     <title>{% block title %}{{ site.name }}{% endblock %}</title>
     <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/screen.css" media="screen">
     <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/print.css" media="print">
+    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/content.css" media="screen">
 {% if DEBUG %}
     <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.js" charset="utf-8"></script>
     <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui.js" charset="utf-8"></script>
@@ -46,8 +47,8 @@
                 </td>
             </tr>
         </table>
-{% block content-container %}
-        <table id="content-container" cellspacing="0" cellpadding="0">
+{% block layout-container %}
+        <table id="layout-container" cellspacing="0" cellpadding="0">
             <tr>
 {% block sidebar-container %}
                 <td id="sidebar-container">
@@ -57,9 +58,15 @@
                     </div>
                 </td>
 {% endblock %}
-                <td id="content">
-{% block content %}
-{% endblock %}
+                <td id="content-container">
+                    <div id="content-header">
+                        {% block content-header %}
+                        {% endblock %}
+                    </div>
+                    <div id="content">
+                        {% block content %}
+                        {% endblock %}
+                    </div>
                 </td>
             </tr>
         </table>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]