# HG changeset patch
# User Nicolas Chauvat <nicolas.chauvat@logilab.fr>
# Date 1272523153 -7200
# Node ID c52124b7a00e24ff1a25c665e5f92c077beeaf91
# Parent  f79c39be0b9b43f99cb8214a561311fffd886d91
[css] progressively fixing rhythm

diff -r a1dbdf887ef4 web/data/banner.png
Binary file web/data/banner.png has changed

diff -r a1dbdf887ef4 web/data/banner.png
Binary file web/data/banner.png has changed

diff -r f79c39be0b9b -r c52124b7a00e web/data/cubicweb.css
--- a/web/data/cubicweb.css	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.css	Thu Apr 29 08:39:13 2010 +0200
@@ -9,33 +9,46 @@
 /***************************************/
 
 /* scale and rhythm cf http://lamb.cc/typograph/ */
-body { font-size:100%; line-height:1.25; }
+body {
+  font-family:  Verdana,sans-serif;
+  font-size: 12px;
+  line-height: 1.5;
+}
 h1, h2, h3 { margin-top:0; margin-bottom:0; }
 
-/* scale traditional */
-h1 { font-size:1.5em; padding:1.45833em 0; }
-h2 { font-size:1.33333em; padding:1.25em 0; }
-h3 { font-size:1.16667em; padding:1.51785em 0; }
-.rhythm_bg { background: url(/data/rhythm20.png) repeat ! important; }
+/* got rhythm ? beat of 12*1.25 = 15 px */
+.rhythm_bg { background: url(/data/rhythm18.png) repeat ! important; }
 
 /* scale 3:5 stranded */
-/* h1 { font-size:2em; padding:1.25em 0; } */
-/* h2 { font-size:1.61538em; padding:1.30936em 0; } */
-/* h3 { font-size:1.23077em; padding:1.40579em 0; } */
-/* .rhythm_bg { background: url(/data/rhythm20.png) repeat ! important; } */
+/* h1 { font-size:2em; } */
+/* h2 { font-size:1.61538em; } */
+/* h3 { font-size:1.23077em; } */
 
 /* scale le corbusier */
-/* h1 { font-size:2.11538em; padding:1.44305em 0; } */
-/* h2 { font-size:1.61538em; padding:1.30936em 0; } */
-/* h3 { font-size:1.30769em; padding:1.28686em 0; } */
-/* .rhythm_bg { background: url(/data/rhythm20.png) repeat ! important; } */
+/* h1 { font-size:2.11538em; } */
+/* h2 { font-size:1.61538em; } */
+/* h3 { font-size:1.30769em; } */
+
+/* scale traditional */
+h1 { font-size: 1.5em; }
+h2 { font-size: 1.33333em; }
+h3 { font-size: 1.16667em; }
+
+/* paddings */
+h1 {
+    border-bottom: 0.06em solid black;
+    padding-top: 0.9em;
+    margin-bottom: 0.44em;
+}
+h2 { padding: 0.4em 0 0.25em 0; }
+h3 { padding: 0.5em 0 0.57em 0; }
 
 html, body {
   background: #e2e2e2;
 }
 
 a, a:active, a:visited, a:link {
-  color: #ff4500;
+  color: #ff4500; /*  XXX make this configurable */
   text-decoration: none;
 }
 
@@ -43,20 +56,6 @@
   text-decoration: underline;
 }
 
-/* a img, img { */
-/*   border: none; */
-/*   text-align: center; */
-/* } */
-
-/* p { */
-/*   margin: 0em 0px 0.2em; */
-/*   padding-top: 2px; */
-/* } */
-
-/* table, td, input, select{ */
-/*   font-size: 100%; */
-/* } */
-
 table {
   border: none;
 }
@@ -65,49 +64,6 @@
   vertical-align: top;
 }
 
-/* table td img { */
-/*   vertical-align: middle; */
-/*   margin-right: 10px; */
-/* } */
-
-/* ol { */
-/*   margin: 1px 0px 1px 16px; */
-/* } */
-
-/* ul{ */
-/*   margin: 1px 0px 1px 4px; */
-/* } */
-
-/* ul li { */
-/*   margin-top: 2px; */
-/*   padding: 0px 0px 2px 8px; */
-/*   background: url("bullet_orange.png") 0% 6px no-repeat; */
-/* } */
-
-/* dt { */
-/*   font-size:1.17em; */
-/*   font-weight:600; */
-/* } */
-
-/* dd { */
-/*   margin: 0.6em 0 1.5em 2em; */
-/* } */
-
-/* fieldset { */
-/*   border: none; */
-/* } */
-
-/* legend { */
-/*   padding: 0px 2px; */
-/*   font: bold 1em Verdana, sans-serif; */
-/* } */
-
-/* input, textarea { */
-/*   padding: 0.2em; */
-/*   vertical-align: middle; */
-/*   border: 1px solid #ccc; */
-/* } */
-
 input:focus {
   border: 1px inset #ff7700;
 }
@@ -117,28 +73,42 @@
 }
 
 pre {
-  font-family: Courier, "Courier New", Monaco, monospace;
-/*   font-size: 100%; */
-/*   color: #000; */
-/*   background-color: #f2f2f2; */
-/*   border: 1px solid #ccc; */
+  clear: both;
+  font-family: 'Courier New', monospace;
+  letter-spacing: 0.015em;
+  padding: 0.5em;
+  margin: 0 1.5em 1.5em;
+  background-color: #F0F0F0;
+  border: 1px solid #CCBCA7;
+}
+
+p {
+  text-align: justify;
+  margin-bottom: 1.5em;
 }
 
-/* code { */
-/*   font-size: 120%; */
-/*   color: #000; */
-/*   background-color: #f2f2f2; */
-/*   border: 1px solid #ccc; */
-/* } */
+ol, ul {
+  list-style-type: disc;
+  margin-bottom: 1.25em;
+}
+
+p + ul {
+  margin-top: -1.5em;
+}
 
-/* blockquote { */
-/*   font-family: Courier, "Courier New", serif; */
-/*   font-size: 120%; */
-/*   margin: 5px 0px; */
-/*   padding: 0.8em; */
-/*   background-color: #f2f2f2; */
-/*   border: 1px solid #ccc; */
-/* } */
+li {
+  margin-left: 1.5em;
+}
+
+fieldset {
+  border: none;
+}
+
+h2 a, h2 a:active, h2 a:visited, h2 a:link,
+h3 a, h3 a:active, h3 a:visited, h3 a:link {
+  color: inherit;
+  text-decoration: none;
+}
 
 /***************************************/
 /* generic classes                     */
@@ -154,7 +124,7 @@
 
 .hr {
   border-bottom: 1px dotted #ccc;
-  margin: 1em 0px;
+  margin: 19px 0px 20px 0px;
 }
 
 .left {
@@ -174,8 +144,11 @@
   visibility: hidden;
 }
 
-li.invisible { list-style: none; background: none; padding: 0px 0px
-1px 1px; }
+li.invisible {
+  list-style: none;
+  background: none;
+  padding: 0px 0px 1px 1px;
+}
 
 li.invisible div{
   display: inline;
@@ -191,6 +164,7 @@
 table#header {
   background: #ff7700 url("banner.png") left top repeat-x;
   text-align: left;
+  height: 45px; /* height counts in font-size -> 2.5*16 = 40 */
 }
 
 table#header td {
@@ -198,28 +172,27 @@
 }
 
 table#header a {
-color: #000;
+  color: #000;
+}
+
+table#header img#logo{
+  vertical-align: middle;
 }
 
 span#appliName {
- font-weight: bold;
- color: #000;
- white-space: nowrap;
+  font-weight: bold;
+  color: #000;
+  white-space: nowrap;
 }
 
 table#header td#headtext {
   width: 100%;
 }
 
-/* FIXME appear with 4px width in IE6 */
-div#stateheader{
-  min-width: 66%;
-}
-
 /* Popup on login box and userActionBox */
 div.popupWrapper{
- position:relative;
- z-index:100;
+  position:relative;
+  z-index:100;
 }
 
 div.popup {
@@ -227,7 +200,7 @@
   background: #fff;
   border: 1px solid black;
   text-align: left;
-  z-index:400;
+  z-index: 400;
 }
 
 div.popup ul li a {
@@ -235,40 +208,48 @@
   color: black;
 }
 
+/* FIXME appear with 4px width in IE6 */
+div#stateheader{
+  min-width: 66%;
+}
+
 /* main zone */
 
 div#page {
-  background: #e2e2e2;
-  position: relative;
   min-height: 800px;
+  margin: 8px;
 }
 
-table#mainLayout{
- margin:0px 3px;
+table#mainLayout #navColumnLeft {
+  width: 16em;
+  padding-right: 8px;
 }
 
-table#mainLayout td#contentcol {
-  padding: 8px 10px 5px;
+table#mainLayout #navColumnRight {
+  width: 16em;
+  padding-left: 8px;
 }
 
-table#mainLayout td.navcol {
-  width: 16em;
+div#pageContent {
+  clear: both;
+/*  margin-top:-1px; /* enable when testing rhythm */
+  background: #ffffff;
+  border: 1px solid #ccc;
 }
 
+/* */
 #contentheader {
   margin: 0px;
   padding: 0.2em 0.5em 0.5em 0.5em;
+  border:2px solid blue;
 }
 
 #contentheader a {
   color: #000;
 }
 
-div#pageContent {
-  clear: both;
-/*   padding: 10px 1em 2em; */
-  background: #ffffff;
-  border: 1px solid #ccc;
+div#contentmain {
+  padding: 0 1em 1em;
 }
 
 /* rql bar */
@@ -285,9 +266,6 @@
 }
 
 /* boxes */
-div.navboxes {
- margin-top: 8px;
-}
 
 div.boxFrame {
   width: 100%;
@@ -367,17 +345,17 @@
 }
 
 ul.boxListing a.boxMenu:hover {
-                                background: #eeedd9 url(puce_down.png) no-repeat scroll 98% 6px;
-                                cursor:pointer;
-                                border-top:medium none;
-                                }
+  background: #eeedd9 url(puce_down.png) no-repeat scroll 98% 6px;
+  cursor:pointer;
+  border-top:medium none;
+}
+
 a.boxMenu {
   background: transparent url("puce_down.png") 98% 6px no-repeat;
   display: block;
   padding: 1px 9px 1px 3px;
 }
 
-
 a.popupMenu {
   background: transparent url("puce_down_black.png") 2% 6px no-repeat;
   padding-left: 2em;
@@ -527,12 +505,6 @@
 /* entity views                        */
 /***************************************/
 
-.mainInfo  {
-  margin-right: 1em;
-  padding: 0.2em;
-}
-
-
 div.mainRelated {
   border: none;
   margin-right: 1em;
@@ -551,7 +523,7 @@
 }
 
 div.section {
-  margin-top: 0.5em;
+/*  margin-top: 0.5em; */
   width:100%;
 }
 
@@ -792,10 +764,10 @@
 /* footer                              */
 /***************************************/
 
-div.footer {
+div#footer {
   text-align: center;
 }
-div.footer a {
+div#footer a {
   color: #000;
   text-decoration: none;
 }
diff -r f79c39be0b9b -r c52124b7a00e web/data/cubicweb.rhythm.js
--- a/web/data/cubicweb.rhythm.js	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.rhythm.js	Thu Apr 29 08:39:13 2010 +0200
@@ -1,6 +1,7 @@
 $(document).ready(function() {
     $('a.rhythm').click(function (event){
         $('div#pageContent').toggleClass('rhythm_bg');
+        $('div#page').toggleClass('rhythm_bg');
 	event.preventDefault();
 	});
     });
diff -r f79c39be0b9b -r c52124b7a00e web/data/logo.png
Binary file web/data/logo.png has changed
diff -r f79c39be0b9b -r c52124b7a00e web/views/basecomponents.py
--- a/web/views/basecomponents.py	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/views/basecomponents.py	Thu Apr 29 08:39:13 2010 +0200
@@ -78,7 +78,7 @@
     site_wide = True
 
     def call(self):
-        self.w(u'<a href="%s"><img class="logo" src="%s" alt="logo"/></a>'
+        self.w(u'<a href="%s"><img id="logo" src="%s" alt="logo"/></a>'
                % (self._cw.base_url(), self._cw.uiprops['LOGO']))
 
 
diff -r f79c39be0b9b -r c52124b7a00e web/views/basetemplates.py
--- a/web/views/basetemplates.py	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/views/basetemplates.py	Thu Apr 29 08:39:13 2010 +0200
@@ -168,7 +168,7 @@
         self.wview('header', rset=self.cw_rset, view=view)
         w(u'<div id="page"><table width="100%" border="0" id="mainLayout"><tr>\n')
         self.nav_column(view, 'left')
-        w(u'<td id="contentcol">\n')
+        w(u'<td id="contentColumn">\n')
         components = self._cw.vreg['components']
         rqlcomp = components.select_or_none('rqlinput', self._cw, rset=self.cw_rset)
         if rqlcomp:
@@ -190,7 +190,7 @@
         boxes = list(self._cw.vreg['boxes'].poss_visible_objects(
             self._cw, rset=self.cw_rset, view=view, context=context))
         if boxes:
-            self.w(u'<td class="navcol"><div class="navboxes">\n')
+            self.w(u'<td id="navColumn%s"><div class="navboxes">\n' % context.capitalize())
             for box in boxes:
                 box.render(w=self.w, view=view)
             self.w(u'</div></td>\n')
@@ -254,7 +254,7 @@
         w(u'<body>\n')
         w(u'<div id="page">')
         w(u'<table width="100%" height="100%" border="0"><tr>\n')
-        w(u'<td class="navcol">\n')
+        w(u'<td id="navColumnLeft">\n')
         self.topleft_header()
         boxes = list(self._cw.vreg['boxes'].poss_visible_objects(
             self._cw, rset=self.cw_rset, view=view, context='left'))
@@ -389,7 +389,7 @@
 
     def call(self, **kwargs):
         req = self._cw
-        self.w(u'<div class="footer">')
+        self.w(u'<div id="footer">')
         actions = self._cw.vreg['actions'].possible_actions(self._cw,
                                                             rset=self.cw_rset)
         footeractions = actions.get('footer', ())
diff -r f79c39be0b9b -r c52124b7a00e web/views/startup.py
--- a/web/views/startup.py	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/views/startup.py	Thu Apr 29 08:39:13 2010 +0200
@@ -42,7 +42,7 @@
     def call(self, **kwargs):
         """The default view representing the instance's management"""
         self._cw.add_css('cubicweb.manageview.css')
-        self.w(u'<div>\n')
+        self.w(u'<h1>%s</h1>' % self._cw.property_value('ui.site-title'))
         if not self.display_folders():
             self._main_index()
         else:
@@ -53,7 +53,6 @@
             self.folders()
             self.w(u'</td>')
             self.w(u'</tr></table>\n')
-        self.w(u'</div>\n')
 
     def _main_index(self):
         req = self._cw
@@ -79,7 +78,7 @@
             self.w(u'<br/><a href="%s">%s</a>\n' % (xml_escape(href), label))
 
     def folders(self):
-        self.w(u'<h4>%s</h4>\n' % self._cw._('Browse by category'))
+        self.w(u'<h2>%s</h2>\n' % self._cw._('Browse by category'))
         self._cw.vreg['views'].select('tree', self._cw).render(w=self.w)
 
     def create_links(self):
@@ -93,7 +92,7 @@
         self.w(u'</ul>')
 
     def startup_views(self):
-        self.w(u'<h4>%s</h4>\n' % self._cw._('Startup views'))
+        self.w(u'<h2>%s</h2>\n' % self._cw._('Startup views'))
         self.startupviews_table()
 
     def startupviews_table(self):
@@ -105,7 +104,7 @@
 
     def entities(self):
         schema = self._cw.vreg.schema
-        self.w(u'<h4>%s</h4>\n' % self._cw._('The repository holds the following entities'))
+        self.w(u'<h2>%s</h2>\n' % self._cw._('Browse by entity type'))
         manager = self._cw.user.matching_groups('managers')
         self.w(u'<table class="startup">')
         if manager: