# HG changeset patch
# User dellsystem <ilostwaldo@gmail.com>
# Date 1345866348 14400
# Node ID e0348cfbdf4853190cfc41e12e5d84d5ad057c0c
# Parent  f97125d45898cc4c137f7836f889a2f8d355156e
Update styling of snippets page

Some other CSS changes too.

Work-in-progress.

diff -r f97125d45898 -r e0348cfbdf48 static/css/agora.less
--- a/static/css/agora.less	Fri Aug 24 23:42:18 2012 -0400
+++ b/static/css/agora.less	Fri Aug 24 23:45:48 2012 -0400
@@ -174,13 +174,60 @@
 }
 
 h1 {
-    font-size: 3.0em;
+    font-size: 2.1em;
 }
 
 h2 {
-    font-size: 2.0em;
+    font-size: 1.7em;
 }
 
 p {
     padding: 5px 0;
 }
+
+.snippetform {
+    input[type=text], textarea {
+        width: @nonSidebarWidth - @inputPadding * 2 - 2;
+        padding: 5px;
+        margin: 10px 0;
+        outline: none;
+        border: 1px solid @mediumGrey;
+        .border-radius(3px);
+        line-height: 20px;
+
+        &:focus {
+            border-color: @lightBlue;
+        }
+    }
+}
+
+#sidebar {
+    width: @sidebarWidth - @sidebarPadding * 2;
+    padding: @sidebarPadding;
+    min-height: 300px;
+    background: @lighterGrey;
+    .inline-block;
+}
+
+#non-sidebar {
+    .inline-block;
+    width: @nonSidebarWidth;
+    padding-right: @sidebarLeftSpace;
+    vertical-align: top;
+}
+
+.hint {
+    border: 1px solid @lightBlue;
+    background: lighten(@mediumBlue, 40%);
+    padding-left: 10px;
+    margin-bottom: 10px;
+    padding-top: 10px;
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid @mediumGrey;
+    & + p {
+        margin-top: 10px;
+    }
+}
diff -r f97125d45898 -r e0348cfbdf48 static/css/grid.less
--- a/static/css/grid.less	Fri Aug 24 23:42:18 2012 -0400
+++ b/static/css/grid.less	Fri Aug 24 23:45:48 2012 -0400
@@ -1,3 +1,7 @@
+.row {
+    clear: both;
+}
+
 .span3 {
     width: 300px;
     .inline-block;
diff -r f97125d45898 -r e0348cfbdf48 static/css/mixins.less
--- a/static/css/mixins.less	Fri Aug 24 23:42:18 2012 -0400
+++ b/static/css/mixins.less	Fri Aug 24 23:45:48 2012 -0400
@@ -41,16 +41,17 @@
 
 .right-float {
     float: right;
-    margin-left: 10px;
 }
 
 .button {
+    line-height: 20px;
     .inline-block;
     #gradient(@mediumBlue, @darkBlue);
     .border-radius(5px);
-    padding: 10px 10px 5px 10px;
+    padding: 10px;
     color: @white;
     text-shadow: @darkSheer 0px 1px 0;
+    border: 1px solid @darkBlue;
 
     &:hover {
         color: @white;
@@ -61,4 +62,32 @@
     &.large {
         font-size: 1.5em;
     }
+
 }
+
+button.button {
+    cursor: pointer;
+    outline: 0;
+}
+
+.pill {
+    .inline-block;
+    background: @lighterGrey;
+    border: 1px solid lighten(@mediumGrey, 10%);
+    .border-radius(3px);
+    color: @darkGrey;
+    padding: 8px 20px;
+    font-weight: bold;
+    line-height: 1;
+    text-shadow: 0 1px 0 @white;
+    .box-shadow(inset 0 0 3px 0px @white);
+
+    &:hover {
+        color: @white;
+        text-decoration: none;
+        background: @mediumBlue;
+        border-color: @mediumBlue;
+        text-shadow: 0 1px 0 @darkBlue;
+        .box-shadow(inset 0 0 2px 0 @lightBlue);
+    }
+}
diff -r f97125d45898 -r e0348cfbdf48 static/css/variables.less
--- a/static/css/variables.less	Fri Aug 24 23:42:18 2012 -0400
+++ b/static/css/variables.less	Fri Aug 24 23:45:48 2012 -0400
@@ -21,3 +21,8 @@
 @fixedWidth:        960px;
 @headerHeight:      100px;
 @headerIconHoverY:  -60px;
+@sidebarWidth:      250px;
+@sidebarLeftSpace:  20px;
+@nonSidebarWidth:   @fixedWidth - @sidebarWidth - @sidebarLeftSpace;
+@inputPadding:      5px;
+@sidebarPadding:    10px;
diff -r f97125d45898 -r e0348cfbdf48 templates/snippet/base.djhtml
--- a/templates/snippet/base.djhtml	Fri Aug 24 23:42:18 2012 -0400
+++ b/templates/snippet/base.djhtml	Fri Aug 24 23:45:48 2012 -0400
@@ -1,1 +1,5 @@
-{% extends "whitebox.djhtml" %}
+{% extends "base.djhtml" %}
+
+{% block breadcrumbs %}
+<a href="{% url snippet_explore %}">Snippets</a> &raquo; {% block title %}{% endblock %}
+{% endblock %}
diff -r f97125d45898 -r e0348cfbdf48 templates/snippet/snippet_form.djhtml
--- a/templates/snippet/snippet_form.djhtml	Fri Aug 24 23:42:18 2012 -0400
+++ b/templates/snippet/snippet_form.djhtml	Fri Aug 24 23:45:48 2012 -0400
@@ -1,9 +1,7 @@
 {% load i18n %}
-<form method="post" action="." class="snippetform">
+<form method="post" action="" class="snippetform">
 {% csrf_token %}
-<ol>
     {% for field in snippet_form %}
-    <li>
         {{ field.errors }}
         {{ field.label_tag }}
         {{ field }}
@@ -14,11 +12,10 @@
                    id="guess_lexer_btn"/>
         {% endifequal %}
         {% endif %}
-    </li>
     {% endfor %}
-    <li class="submit">
-      <input type="submit"   value="{% trans "Paste it" %}"/>
-    </li>
-</ol>
+    <br />
+    <div class="center-align">
+        <button type="submit" class="button large">{% trans "Paste it" %}</button>
+    </div>
 </form>
 
diff -r f97125d45898 -r e0348cfbdf48 templates/snippet/snippet_new.djhtml
--- a/templates/snippet/snippet_new.djhtml	Fri Aug 24 23:42:18 2012 -0400
+++ b/templates/snippet/snippet_new.djhtml	Fri Aug 24 23:45:48 2012 -0400
@@ -2,12 +2,32 @@
 {% load i18n %}
 
 {% block title %}{% trans "New snippet" %}{% endblock %}
-{% block headline %}<h1>{% trans "Paste a new snippet" %}</h1>{% endblock %}
 
 {% block content %}
-    <h2>{% trans "New snippet" %}</h2>
-    <div class="whitebox">
-      {% include "snippet/snippet_form.djhtml" %}
+    <div id="non-sidebar">
+        <h1>{% trans "Paste a new snippet" %}</h1>
+        <p class="hint">Snippets are a lorem ipsum</p>
+        {% include "snippet/snippet_form.djhtml" %}
+    </div><div id="sidebar">
+        <h2>Recent snippets</h2>
+        {% for snippet in recent_snippets %}
+        <hr />
+        <p><a href="{% url snippet_details snippet %}">
+        {% if snippet.title %}
+        {{ snippet.title }}
+        {% else %}
+        Snippet #{{ snippet.id }}
+        {% endif %}
+        </a>
+        <br />
+        by
+        {% if snippet.author %}
+            <a href="{% url show_profile snippet.author %}">{{ snippet.author }}</a>
+        {% else %}
+            anonymous
+        {% endif %}
+        </p>
+        {% endfor %}
     </div>
 {% endblock %}