Mercurial > hg > agora-dellsystem
changeset 87:e0348cfbdf48
Update styling of snippets page
Some other CSS changes too.
Work-in-progress.
author | dellsystem <ilostwaldo@gmail.com> |
---|---|
date | Fri, 24 Aug 2012 23:45:48 -0400 |
parents | f97125d45898 |
children | f15934c73eb2 |
files | static/css/agora.less static/css/grid.less static/css/mixins.less static/css/variables.less templates/snippet/base.djhtml templates/snippet/snippet_form.djhtml templates/snippet/snippet_new.djhtml |
diffstat | 7 files changed, 123 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/static/css/agora.less +++ b/static/css/agora.less @@ -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; + } +}
--- a/static/css/grid.less +++ b/static/css/grid.less @@ -1,3 +1,7 @@ +.row { + clear: both; +} + .span3 { width: 300px; .inline-block;
--- a/static/css/mixins.less +++ b/static/css/mixins.less @@ -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); + } +}
--- a/static/css/variables.less +++ b/static/css/variables.less @@ -21,3 +21,8 @@ @fixedWidth: 960px; @headerHeight: 100px; @headerIconHoverY: -60px; +@sidebarWidth: 250px; +@sidebarLeftSpace: 20px; +@nonSidebarWidth: @fixedWidth - @sidebarWidth - @sidebarLeftSpace; +@inputPadding: 5px; +@sidebarPadding: 10px;
--- a/templates/snippet/base.djhtml +++ b/templates/snippet/base.djhtml @@ -1,1 +1,5 @@ -{% extends "whitebox.djhtml" %} +{% extends "base.djhtml" %} + +{% block breadcrumbs %} +<a href="{% url snippet_explore %}">Snippets</a> » {% block title %}{% endblock %} +{% endblock %}
--- a/templates/snippet/snippet_form.djhtml +++ b/templates/snippet/snippet_form.djhtml @@ -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>
--- a/templates/snippet/snippet_new.djhtml +++ b/templates/snippet/snippet_new.djhtml @@ -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 %}