News frontpage layout changes

Signed-off-by: Dan McGee <dan@archlinux.org>

3 files changed, 44 insertions, 10 deletions

diff --git a/media/archweb.css b/media/archweb.css
index 85fdb610..ce1ece1d 100644
--- a/media/archweb.css
+++ b/media/archweb.css
@@ -21,7 +21,7 @@ p { margin: .33em 0 1em; }
 ol, ul { margin-bottom: 1em; padding-left: 2em; }
 ul { list-style: square; }
 code { font: 1.2em monospace; background: #ffd; padding: 0.15em 0.25em; }
-pre { font: 1.2em monospace; border: 1px solid #bdb; background: #dfd; padding: 0.5em; margin: 0.25em 2em; }
+pre { font: 1.2em monospace; border: 1px solid #bdb; background: #dfd; padding: 0.5em; margin: 1em; }
 pre code { display: block; background: none; }
 blockquote { margin: 1.5em 2em; }
 input { vertical-align: middle; }
@@ -44,7 +44,7 @@ a:active { color: #e90; }
 
 /* headings */
 h2 { font-size: 1.5em; margin-bottom: 0.5em; border-bottom: 1px solid #888; }
-h3 { font-size: 1.25em; margin-top: 1em; }
+h3 { font-size: 1.25em; margin-top: .5em; }
 h4 { font-size: 1.15em; margin-top: 1em; }
 h5 { font-size: 1em; margin-top: 1em; }
 
@@ -76,6 +76,12 @@ table.pretty2 { width: auto; margin-top: 0.25em; margin-bottom: 0.5em; border-co
 table.pretty2 th { padding: 0.35em; background: #eee; border: 1px solid #bbb; }
 table.pretty2 td { padding: 0.35em; border: 1px dotted #bbb; }
 
+/* definition lists */
+dl { clear:both; }
+dl dt,
+dl dd { margin-bottom:4px; padding: 8px 0px 4px; font-weight:bold; border-top:1px solid #888; }
+dl dt { color: #333; float:left; padding-right:15px; }
+
 /* forms and input styling */
 form p { margin: 0.5em 0; }
 fieldset { border: 0; }
@@ -105,14 +111,19 @@ ul.errorlist { color: red; }
 
 /* home: news */
 #news { margin-top: 1.5em; }
-#news h3 { border-bottom: 1px solid #888; }
+#news h3 { float:left; padding-bottom: .5em }
 #news div { margin-bottom: 1em; }
 #news div p { margin-bottom: 0.5em; }
 #news .more { font-weight: normal; }
-#news .rss-icon { float: right; margin: -1.6em 0.4em 0 0; }
-#news h4 { font-size: 1em; margin-top: 1.5em; border-bottom: 1px dotted #bbb; }
+#news .rss-icon { float: right; margin-top: 1em; }
+#news h4 { clear:both; font-size: 1em; margin-top: 1.5em; border-bottom: 1px dotted #bbb; }
 #news .timestamp { float: right; font-size: 0.85em; margin: -1.8em 0.5em 0 0; }
 
+/* home: arrowed headings */
+#news h3 a { display: block; background: #1794D1; font-size: 15px; padding: 2px 10px; color: white; }
+#news a:active { color: white; }
+h3 span.arrow { display: block; width: 0px; height: 0px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #1794D1; margin: 0 auto; font-size: 0px; line-height: 0px; }
+
 /* home: pkgsearch box */
 #pkgsearch { padding: 1em 0.75em; background: #3ad; color: #fff; border: 1px solid #08b; } 
 #pkgsearch label { width: auto; padding: 0.1em 0; }
diff --git a/public/views.py b/public/views.py
index 46291b88..e3f3b02f 100644
--- a/public/views.py
+++ b/public/views.py
@@ -13,7 +13,7 @@ from django.views.generic.simple import direct_to_template
 def index(request):
     pkgs = utils.get_recent_updates()
     context = {
-        'news_updates': News.objects.order_by('-postdate', '-id')[:10],
+        'news_updates': News.objects.order_by('-postdate', '-id')[:15],
         'pkg_updates': pkgs,
     }
     return direct_to_template(request, 'public/index.html', context)
diff --git a/templates/public/index.html b/templates/public/index.html
index e68943c8..c8b6def0 100644
--- a/templates/public/index.html
+++ b/templates/public/index.html
@@ -40,17 +40,40 @@
 
 <div id="news">
 
-    <h3>Latest News <span class="more">(<a href="{% url news-list %}"
-                title="Browse the news archives">more</a>)</span></h3>
+    <h3>
+        <a href="{% url news-list %}" title="Browse the news archives">Latest News</a>
+        <span class="arrow"></span>
+    </h3>
 
     <a href="/feeds/news/" title="Arch News RSS Feed"
         class="rss-icon"><img src="{% cdnprefix %}/media/rss.png" alt="RSS Feed" /></a>
 
     {% for news in news_updates %}
-    <h4><a href="{{ news.get_absolute_url }}"
-            title="View full article: {{ news.title }}">{{ news.title }}</a></h4>
+    {% if forloop.counter0 < 5 %}
+    <h4>
+        <a href="{{ news.get_absolute_url }}"
+            title="View full article: {{ news.title }}">{{ news.title }}</a>
+    </h4>
     <p class="timestamp">{{ news.postdate|date }}</p>
     <div class="article-content">{{ news.content|markdown|truncatewords_html:75 }}</div>
+    {% else %}
+    {% if forloop.counter0 == 5 %}
+    <h3>
+        <a href="{% url news-list %}"
+            title="Browse the news archives">Older News</a>
+        <span class="arrow"></span>
+    </h3>
+    <dl class="newslist">
+    {% endif %}
+        <dt>{{ news.postdate|date }}</dt>
+        <dd>
+            <a href="{{ news.get_absolute_url }}"
+                title="View full article: {{ news.title }}">{{ news.title }}</a>
+        </dd>
+    {% if forloop.last %}
+    </dl>
+    {% endif %}
+    {% endif %}
     {% endfor %}
 
 </div><!-- #news -->