Mercurial > hg > agora-dellsystem

changeset 17:cb9a7c6c3800

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Implement rounded boxes and titles for holding content
author Jordi Gutiérrez Hermoso <jordigh@gmail.com>
date Sat, 26 Jun 2010 18:57:46 -0500
parents c2043cd474cd
children 8059d39dc6ef
files static/djangodocs.css templates/base.djhtml templates/bundle/index.djhtml templates/index.djhtml
diffstat 4 files changed, 126 insertions(+), 68 deletions(-) [+]
line wrap: on
line diff
--- a/static/djangodocs.css
+++ b/static/djangodocs.css
@@ -2,31 +2,64 @@
 html { background:#DEDFDB; color: #575955;}
 body { font:16px/1.5 Verdana,sans-serif; color: white;}
 #header {
-    background: #4877B1; color: white; 
-    padding: 4px 0 12px 0; text-align: left; 
+    background: #4877B1; color: white;
+    padding: 4px 0 12px 0; text-align: left;
 
     /* for IE */
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #6F9DCD', endColorstr='#4877B1'); 
     /* for webkit browsers */
     background: -webkit-gradient(linear, left top, left bottom, from( #6F9DCD), to(#4877B1));
     /* for firefox 3.6+ */
-    background: -moz-linear-gradient(top,   #6F9DCD,  #4877B1); 
+    background: -moz-linear-gradient(top,   #6F9DCD,  #4877B1);
 }
 
 #header h1 a { color: white; margin-left: 1em}
-#columnwrap { 
-    background: #DFE0DC; color: black; 
+#columnwrap {
+    background: #DFE0DC; color: black;
     background-image: url("agora-grey-large.png");
     background-position: bottom right;
     background-repeat: no-repeat;
+    overflow: hidden;
+    width: 85%;
+    margin: 0 auto;
 }
-#footer { 
-    background-color:#8F918C; font-size:80%; 
+#footer {
+    background-color:#8F918C; font-size:80%;
     padding-top: 0.75em; text-align:center;
     padding-bottom: 0.75em;
 }
+
+.info{
+    overflow: hidden;
+}
+
+.whitebox{
+    background-color: white;
+    color: black;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border: 1px solid #000;
+    float: left;
+    padding: 10px;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
 #copyright {margin-left: 1em;}
 #agora-logo{float: right;}
+
+#content-main{
+    float: left;
+    overflow: hidden;
+    width: 60%;
+}
+
+#content-related{
+    float: right;
+    overflow: hidden;
+    width: 30%;
+}
+
 /*** links ***/
 a {text-decoration: none;}
 a img {border: none;}
@@ -38,7 +71,7 @@
 #nav-top {height: 0.85em; background:#F8BF69; width: 100%; position: absolute;}
 #nav-bot {height: 0.85em; background:#FCAF3E; width: 100%; position: absolute;}
 #nav-main{position: relative; z-index: 1; height: 0.85em;}
-#nav{ 
+#nav{
     margin: 0; font-size: 12px; text-align: right;
     font-weight: bold; width: 100%;
     font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
@@ -76,10 +109,15 @@
 /*** basic styles ***/
 
 dd { margin-left:15px; }
-h1,h2,h3,h4 { margin-top:1em; font-family:"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-weight:normal; }
+h1,h2,h3,h4 {
+    margin-top:1em;
+    font-family:"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
+    font-weight:normal;
+}
+
 h1 { font-size:218%; margin-bottom:.4em; line-height:1.1em; }
-h2 { font-size:175%; margin-bottom:.6em; line-height:1.2em;}
-h3 { font-size:150%; font-weight:bold; margin-bottom:.2em;}
+h2 { font-size:175%; margin-bottom:.6em; line-height:1.2em; font-weight:bold;}
+h3 { font-size:150%; font-weight:normal; margin-bottom:.2em; text-align:left;}
 h4 { font-size:125%; font-weight:bold; margin-top:1.5em; margin-bottom:3px; }
 div.figure { text-align: center; }
 div.figure p.caption { font-size:1em; margin-top:0; margin-bottom:1.5em; color: #555;}
--- a/templates/base.djhtml
+++ b/templates/base.djhtml
@@ -29,7 +29,7 @@
 
   <div id="container">
     <div id="header">
-      <img src="static/agora.png" id="agora-logo">
+      <img src="/static/agora.png" id="agora-logo">
       <h1 id="logo"><a href="http://www.octave.org/">Agora Octave</a> 
       </h1>
       <div id="nav">
@@ -37,7 +37,7 @@
         <ul  id="nav-main">
           <li id="nav-homepage"><a href="/bundles" class="first">Latest</a></li>
           <li id="nav-snippets"><a href="/about">Snippets</a></li>
-          <li id="nav-discuss"><a href="/news">Discussions</a></li>
+          <li id="nav-discuss"><a href="/discuss">Discussions</a></li>
           <li id="nav-about"><a href="/news">About</a></li>
 
         </ul>
@@ -47,20 +47,25 @@
     <!-- END Header -->
     <div id="billboard">{% block billboard %}{% endblock %}</div>
     <div id="columnwrap">
-      {% block columnwrap %}
-        <div id="content-main">
-        {% block content %}{% endblock %}
-        </div>
-        <!-- END #content-main -->
-      {% endblock %}
+
+		  <div id="content-main">
+		    {% block content %}
+		    {% endblock %}
+		  </div>
+		  <!-- END #content-main -->
+		  <div id="content-related" class="sidebar">
+		    {% block content-related %}
+		    {% endblock %}
+		  </div>
+		  <!-- END #content-related -->
+
     </div>
     <!-- END #content -->
     <div id="footer">
       <p id="copyright">
         &copy; 1998-{% now "Y"%} 
         <a href="http://www.gnu.org/software/octave/acknowledgments.html">
-          John W. Eaton and others</a> 
-        unless otherwise noted.
+          John W. Eaton and others</a> unless otherwise noted.
       </p>
     </div>
     <!-- END #footer -->
--- a/templates/bundle/index.djhtml
+++ b/templates/bundle/index.djhtml
@@ -1,26 +1,33 @@
-{% extends "base.djhtml" %}
+{% extends "controls.djhtml" %}
 
 {% block content %}
-{% if bundle %}
-<p>
-  Sup, this is {{ bundle.uploader }}'s {{ bundle.name }} bundle.
-</p>
-
-{% if files %}
-<ul>
-  {% for f in files%}
-  <li><a href="/{{f.bundle_file}}">{{f}}</a></li>
-  {% endfor %}
-</ul>
+<div class="info">
+  {% if bundle %}
+  <h3>
+    {{bundle.name}} by <a href="/{{bundle.uploader}}/">{{bundle.uploader}}</a>
+  </h3>
 
-{% else %}
-<p>
-  No files in this bundle!
-</p>
-{% endif %}
+  <div class="whitebox">
+    {% if files %}
+    <p>
+      files:
+    </p>
+    <ul>
+      {% for f in files%}
+      <li><a href="/{{f.bundle_file}}">{{f}}</a></li>
+      {% endfor %}
+    </ul>
+  </div>
 
-{% else %}
-Bundle not found!
-{% endif %}
-</p>
+  {% else %}
+  <p>
+    No files in this bundle!
+  </p>
+  {% endif %}
+
+
+  {% else %}
+  Bundle not found!
+  {% endif %}
+</div>
 {% endblock %}
--- a/templates/index.djhtml
+++ b/templates/index.djhtml
@@ -1,28 +1,36 @@
-{% extends "base.djhtml" %}
+{% extends "controls.djhtml" %}
+
 {% block content %}
-<p>
-Main screen turn on!
-</p>
-<p>
-<a href="">Lorem</a> ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
-nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
-volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
-ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
-molestie consequat, vel illum dolore eu feugiat nulla facilisis at
-vero eros et accumsan et iusto odio dignissim qui blandit praesent
-luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
-Nam liber tempor cum soluta nobis eleifend option congue nihil
-imperdiet doming id quod mazim placerat facer possim assum. Typi non
-habent claritatem insitam; est usus legentis in iis qui facit eorum
-claritatem. Investigationes demonstraverunt lectores legere me lius
-quod ii legunt saepius. Claritas est etiam processus dynamicus, qui
-sequitur mutationem consuetudium lectorum. Mirum est notare quam
-littera gothica, quam nunc putamus parum claram, anteposuerit
-litterarum formas humanitatis per seacula quarta decima et quinta
-decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant
-sollemnes in futurum.
-</p>
-<p>
+<h2>
+  Welcome to Agora Octave
+</h2>
+<div class="info">
+<h3>
+  information
+</h3>
+<div class="whitebox">
+  <p>
+    Main screen turn on!
+  </p>
+</div>
+</div>
+<div class="info">
+  <h3>
+    latest submissions
+  </h3>
+  <div class="whitebox">
+    <p>
+      <a href="">Lorem</a> ipsum dolor sit amet, consectetuer adipiscing
+      elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
+      magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
+      nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+      aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
+      in hendrerit in vulputate velit esse molestie consequat, vel illum
+      dolore eu feugiat nulla facilisis at vero eros et accumsan et
+      iusto odio dignissim qui blandit praesent luptatum zzril delenit
+      augue duis dolore te feugait nulla facilisi.
+    </p>
+  </div>
+</div class="info">
+{% endblock %}
 
-{% endblock %}