Move to a 2-column layout - comments on the right.
authorAdam Gomaa <code@adam.gomaa.us>
Sun Feb 01 02:05:35 2009 -0500
changeset 41741bb13fc4f7d
parent 416 5a586a8c2f8f
child 418 c24ca37823b9
Move to a 2-column layout - comments on the right.
agdj/blog/forms.py
agdj/core/templates/base.html
agdj/core/templates/blog/blog.html
agdj/core/templates/blog/single_post.html
agdj/static/css/agdj-complete.css
agdj/static/js/agdj.js
     1.1 --- a/agdj/blog/forms.py	Sun Feb 01 01:35:02 2009 -0500
     1.2 +++ b/agdj/blog/forms.py	Sun Feb 01 02:05:35 2009 -0500
     1.3 @@ -7,5 +7,5 @@
     1.4          model = models.Comment
     1.5          fields = "name url text".split()
     1.6      name = forms.CharField(required=False)
     1.7 -    url = forms.URLField(required=False)
     1.8 -    text = forms.CharField(widget=forms.Textarea)
     1.9 +    url = forms.URLField(required=False, label="URL")
    1.10 +    text = forms.CharField(widget=forms.Textarea, label="Comment")
     2.1 --- a/agdj/core/templates/base.html	Sun Feb 01 01:35:02 2009 -0500
     2.2 +++ b/agdj/core/templates/base.html	Sun Feb 01 02:05:35 2009 -0500
     2.3 @@ -36,6 +36,7 @@
     2.4  <div class="grid_12" id="content">
     2.5    {% block content %}{% endblock %}
     2.6  </div>
     2.7 +</div>
     2.8  {% endblock body %}
     2.9  </body>
    2.10  </html>
     3.1 --- a/agdj/core/templates/blog/blog.html	Sun Feb 01 01:35:02 2009 -0500
     3.2 +++ b/agdj/core/templates/blog/blog.html	Sun Feb 01 02:05:35 2009 -0500
     3.3 @@ -6,9 +6,7 @@
     3.4  <link rel="alternate" title="Adam Gomaa's Blog Feed" href="/blog/feed/" type="application/rss+xml">
     3.5  {% endblock rss %}
     3.6  
     3.7 -
     3.8  {% block header %}
     3.9  <h1><a href="/">My</a> <a href="{% url agdj.blog.views.post_list %}">Blog</a></h1>
    3.10  {% endblock %}
    3.11  
    3.12 -{% block appcss %}{% endblock %}
     4.1 --- a/agdj/core/templates/blog/single_post.html	Sun Feb 01 01:35:02 2009 -0500
     4.2 +++ b/agdj/core/templates/blog/single_post.html	Sun Feb 01 02:05:35 2009 -0500
     4.3 @@ -4,43 +4,49 @@
     4.4  
     4.5  {% block title %}{{ post.title }}{% endblock %}
     4.6  
     4.7 -{% block header %}
     4.8 -  <h1>
     4.9 -    <a href="{% url agdj.blog.views.post_list %}">blog:</a>
    4.10 -    <a href="{{ post.urls.view }}">{{ post.title }}</a></h1>
    4.11 -{% endblock %}
    4.12 -
    4.13 -{% block metadata %}
    4.14 -<p class="timestamp">
    4.15 -  <a href="{% url index %}">posted
    4.16 -    <span class="humanize iso8601">{{ post.pub_date|iso8601 }}</span></a></p>
    4.17 -<div class="tag-container">tagged: 
    4.18 -{% with post as object %}
    4.19 -{% include "blog/render_post_tags_list.html" %}
    4.20 -{% endwith %}
    4.21 +{% block body %}
    4.22 +<div class="container_12">
    4.23 +    <h1>
    4.24 +        <a href="{% url agdj.blog.views.post_list %}">blog:</a>
    4.25 +        <a href="{{ post.urls.view }}">{{ post.title }}</a>
    4.26 +    </h1>
    4.27 +    <div class="grid_12" id="metadata">
    4.28 +        <p class="timestamp">
    4.29 +            <a href="{% url index %}">posted
    4.30 +                <span class="humanize iso8601">{{ post.pub_date|iso8601 }}</span></a></p>
    4.31 +        <div class="tag-container">tagged:
    4.32 +            {% with post as object %}
    4.33 +            {% include "blog/render_post_tags_list.html" %}
    4.34 +            {% endwith %}
    4.35 +        </div>
    4.36 +    </div>
    4.37 +    <div class="grid_6 suffix_1" id="content">
    4.38 +        <div class="post-content">
    4.39 +            {{ post.source|markdown2 }}
    4.40 +        </div>
    4.41 +    </div>
    4.42 +    <div class="grid_5" id="comments">
    4.43 +        <div class="comments">
    4.44 +            <h3>Comments</h3>
    4.45 +            <p>{{ post.spam_count }} spam comment{{ post.spam_count|pluralize }} omitted.</p>
    4.46 +            <form class="add nospam-me" action="" method="post">
    4.47 +                <fieldset>
    4.48 +                    <legend>Add Comment</legend>
    4.49 +                    <p>You can
    4.50 +                        use <a href="http://daringfireball.net/projects/markdown/">Markdown</a>
    4.51 +                        formatting. Raw HTML will be stripped.</p>
    4.52 +                    {% for field in comment_form %}
    4.53 +                    <div class="field field-{{ field.name }}">
    4.54 +                        {{ field.label_tag }}{{ field }}{{ field.errors }}
    4.55 +                    </div>
    4.56 +                    {% endfor %}
    4.57 +                    <div><input type="submit" class="submit" value="Add Comment" /></div>
    4.58 +                </fieldset>
    4.59 +            </form>
    4.60 +            {% for object in comments %}
    4.61 +            {% include "blog/render_comment.html" %}
    4.62 +            {% endfor %}
    4.63 +        </div>
    4.64 +    </div>
    4.65  </div>
    4.66 -{% endblock %}
    4.67 -
    4.68 -{% block content %}
    4.69 -
    4.70 -<div class="post-content">
    4.71 -{{ post.source|markdown2 }}
    4.72 -</div>
    4.73 -<div class="comments">
    4.74 -  <h3>Comments</h3>
    4.75 -  <p>{{ post.spam_count }} spam comments omitted.</p>
    4.76 -  <form class="add nospam-me" action="" method="post">
    4.77 -    <fieldset class="collapsed">
    4.78 -      <legend>Add Comment</legend>
    4.79 -      <p>Comments can
    4.80 -        use <a href="http://daringfireball.net/projects/markdown/">Markdown</a>
    4.81 -        formatting. Raw HTML will be stripped.</p>
    4.82 -      {{ comment_form.as_p }}
    4.83 -      <input type="submit" class="submit" value="Add Comment" />
    4.84 -    </fieldset>
    4.85 -  </form>
    4.86 -{% for object in comments %}
    4.87 -{% include "blog/render_comment.html" %}
    4.88 -{% endfor %}
    4.89 -</div>
    4.90 -{% endblock %}
    4.91 +{% endblock body %}
     5.1 --- a/agdj/static/css/agdj-complete.css	Sun Feb 01 01:35:02 2009 -0500
     5.2 +++ b/agdj/static/css/agdj-complete.css	Sun Feb 01 02:05:35 2009 -0500
     5.3 @@ -16,14 +16,16 @@
     5.4  th, td,
     5.5  img
     5.6  {
     5.7 -  margin:0;
     5.8 -  padding:0;
     5.9 +    margin:0;
    5.10 +    padding:0;
    5.11  }
    5.12  
    5.13 +.clear{clear: both;}
    5.14 +
    5.15  img
    5.16 -{ 
    5.17 -  border:solid black 1px;
    5.18 - }
    5.19 +{
    5.20 +    border:solid black 1px;
    5.21 +}
    5.22  
    5.23  body
    5.24  {
    5.25 @@ -41,13 +43,13 @@
    5.26  
    5.27  address,caption,cite,code,dfn,em,strong,th,var
    5.28  {
    5.29 -  font-style:normal;
    5.30 -  font-weight:normal;
    5.31 +    font-style:normal;
    5.32 +    font-weight:normal;
    5.33  }
    5.34  
    5.35  caption,th
    5.36  {
    5.37 -text-align:left;
    5.38 +    text-align:left;
    5.39  }
    5.40  
    5.41  /* Get rid of the dashed border by moz browsers */
    5.42 @@ -100,11 +102,13 @@
    5.43  
    5.44  /* Now start styling the actual documents, not just layout. */
    5.45  
    5.46 -h1 { 
    5.47 +h1
    5.48 +{
    5.49      font-size:30px;
    5.50  }
    5.51  
    5.52 -a, .linklookalike { 
    5.53 +a, .linklookalike
    5.54 +{
    5.55      text-decoration:underline;
    5.56      cursor:pointer;
    5.57  }
    5.58 @@ -140,7 +144,7 @@
    5.59  .function,
    5.60  .tag,
    5.61  .attribute
    5.62 -{ 
    5.63 +{
    5.64      font-family:monospace;
    5.65  }
    5.66  
    5.67 @@ -163,19 +167,19 @@
    5.68  {color:#000; text-decoration:none;}
    5.69  
    5.70  .footnotes
    5.71 -{ 
    5.72 +{
    5.73      font-size:75%;
    5.74  }
    5.75  
    5.76  ul.tags
    5.77 -{ 
    5.78 +{
    5.79      display:inline;
    5.80      margin-left:20px;
    5.81      margin:0;padding:0;
    5.82  }
    5.83  ul.tags li
    5.84  {
    5.85 -    display:inline; 
    5.86 +    display:inline;
    5.87      margin:0;padding:0;
    5.88  }
    5.89  ul.tags li a
    5.90 @@ -184,62 +188,54 @@
    5.91      margin:0;padding:0;
    5.92  }
    5.93  ul.tags li a:hover
    5.94 -{ 
    5.95 +{
    5.96      background-color:transparent;
    5.97  }
    5.98  .comments
    5.99  {
   5.100 -    max-width:825px;
   5.101 +    max-width: 825px;
   5.102  }
   5.103  
   5.104  .comments .add fieldset
   5.105  {
   5.106 -    height: 450px;
   5.107 -    position: relative;
   5.108 -}
   5.109 -.comments .add fieldset.collapsed
   5.110 -{
   5.111 -    height: 25px;
   5.112 +    padding: 15px;
   5.113 +    border: solid #aaa 1px;
   5.114 +    margin-bottom: 30px;
   5.115  }
   5.116  
   5.117 -.comments .add fieldset p
   5.118 +.comments .add fieldset div.field
   5.119  {
   5.120 -    height:50px;
   5.121 +    margin-bottom: 25px;
   5.122  }
   5.123  
   5.124 -.comments .add fieldset p input, 
   5.125 -.comments .add fieldset p textarea
   5.126 +.comments .add fieldset div.field label
   5.127  {
   5.128 -    position:absolute;
   5.129 -    left:75px;
   5.130 +    display: block;
   5.131  }
   5.132 -.comments .add fieldset p input:focus, 
   5.133 -.comments .add fieldset p textarea:focus
   5.134 +.comments .add fieldset div.field input,
   5.135 +.comments .add fieldset div.field textarea
   5.136 +{
   5.137 +    margin-left: 25px;
   5.138 +}
   5.139 +.comments .add fieldset div.field input:focus,
   5.140 +.comments .add fieldset div.field textarea:focus
   5.141  {
   5.142      background-color:#ffc;
   5.143  }
   5.144  
   5.145 -.comments .add fieldset p input
   5.146 +.comments .add fieldset div.field input
   5.147  {
   5.148      border: solid black 2px;
   5.149 -    padding:3px;
   5.150 -    width:300px;
   5.151 +    padding: 3px;
   5.152 +    width: 300px;
   5.153  }
   5.154  
   5.155 -.comments .add fieldset input.submit
   5.156 +.comments .add fieldset div.field textarea
   5.157  {
   5.158 -    position:absolute;
   5.159 -    bottom:20px;
   5.160 -    padding:5px;
   5.161 -    margin:5px;
   5.162 -}
   5.163 -
   5.164 -.comments .add fieldset p textarea
   5.165 -{
   5.166 -    height:200px;
   5.167 -    width:600px;
   5.168 -    border:solid black 2px;
   5.169 -    padding:5px;
   5.170 +    border: solid black 2px;
   5.171 +    height: 200px;
   5.172 +    padding: 5px;
   5.173 +    width: 300px;
   5.174  }
   5.175  
   5.176  .comments .comment
   5.177 @@ -253,7 +249,7 @@
   5.178  
   5.179  /* Update styles. */
   5.180  .update, .comment-summary, .post-summary
   5.181 -{ 
   5.182 +{
   5.183      margin-top:25px;
   5.184      margin-left:15px;
   5.185      font-size:100%;
   5.186 @@ -293,22 +289,23 @@
   5.187  }
   5.188  
   5.189  .codehilite
   5.190 -{ 
   5.191 -  /* The source code snippet box */
   5.192 -  color:#ccc;
   5.193 -  background-color:#222;
   5.194 -  padding:.5em;
   5.195 -  line-height:1.35em;
   5.196 -  max-height:300px;
   5.197 -  overflow:auto;
   5.198 +{
   5.199 +    /* The source code snippet box */
   5.200 +    color:#ccc;
   5.201 +    background-color:#222;
   5.202 +    padding:.5em;
   5.203 +    line-height:1.35em;
   5.204 +    max-height:300px;
   5.205 +    overflow:auto;
   5.206  }
   5.207  
   5.208  .codehilite li
   5.209 -{ /* Each line is an li */
   5.210 -  border-bottom:solid 1px #333;
   5.211 -  margin-bottom:-1px;
   5.212 -  white-space:pre;
   5.213 -  font-family:monospace;
   5.214 +{
   5.215 +    /* Each line is an li */
   5.216 +    border-bottom:solid 1px #333;
   5.217 +    margin-bottom:-1px;
   5.218 +    white-space:pre;
   5.219 +    font-family:monospace;
   5.220  }
   5.221  
   5.222  /* self */
   5.223 @@ -344,15 +341,15 @@
   5.224  
   5.225  
   5.226  .codehilite:hover
   5.227 -{ 
   5.228 -    background-color:#000;
   5.229 -    color:#fff;
   5.230 +{
   5.231 +    background-color: #000;
   5.232 +    color: #fff;
   5.233  }
   5.234  
   5.235  .codehilite span:hover
   5.236 -{ 
   5.237 -  font-weight:bold; 
   5.238 -  color:#fff;
   5.239 +{
   5.240 +    color: #fff;
   5.241 +    font-weight: bold;
   5.242  }
   5.243  
   5.244  
   5.245 @@ -365,16 +362,6 @@
   5.246      left: -20px;
   5.247      position: relative;
   5.248  }
   5.249 -fieldset.collapsed *
   5.250 -{
   5.251 -    display: none;
   5.252 -}
   5.253 -fieldset.collapsed legend
   5.254 -{
   5.255 -    display: block;
   5.256 -    cursor: pointer;
   5.257 -    text-decoration: underline;
   5.258 -}
   5.259  .facts
   5.260  {
   5.261      font-size: 150%;
     6.1 --- a/agdj/static/js/agdj.js	Sun Feb 01 01:35:02 2009 -0500
     6.2 +++ b/agdj/static/js/agdj.js	Sun Feb 01 02:05:35 2009 -0500
     6.3 @@ -3,7 +3,6 @@
     6.4  $(function(){
     6.5          humanize_timestamps();
     6.6          nospam_comments();
     6.7 -        fieldset_collapse();
     6.8    });
     6.9  
    6.10  
    6.11 @@ -122,9 +121,3 @@
    6.12  }
    6.13  
    6.14  
    6.15 -function fieldset_collapse(){
    6.16 -    $("fieldset.collapsed legend").click(function(){
    6.17 -        $(this).unbind('click');
    6.18 -        $(this).parents("fieldset").removeClass("collapsed");
    6.19 -    });
    6.20 -}