rely on explicit styles for clearer code

javiera-vasquez · Feb 14, 2010 · 5f8a535 · 5f8a535
1 parent bf5828c
commit 5f8a535
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 32 deletions.
diff --git a/app/views/admin/pages/_fields.html.haml b/app/views/admin/pages/_fields.html.haml
@@ -14,8 +14,8 @@
         = render :partial => "meta_row", :collection => @meta, :locals => {:f => fields}
         = render_region :extended_metadata, :locals => {:f => fields}
     %p.more_or_less
-      %a{:id=>"more_extended_metadata", :href=>"javascript: $('extended_metadata').show(); $('less_extended_metadata').show(); $('more_extended_metadata').hide(); this.stop()", :style=>(meta_errors? ? "display: none" : nil)} More
-      %a{:id=>"less_extended_metadata", :href=>"javascript: $('extended_metadata').hide(); $('more_extended_metadata').show(); $('less_extended_metadata').hide(); this.stop()", :style=>(!meta_errors? ? "display: none" : nil)} Hide
+      %a{:id=>"more_extended_metadata", :href=>"javascript: $('extended_metadata').show(); $('less_extended_metadata').show(); $('more_extended_metadata').hide(); this.stop()", :class => "rounded_bottom_right rounded_bottom_left#{(meta_errors? ? ' hidden' : '')}"} More
+      %a{:id=>"less_extended_metadata", :href=>"javascript: $('extended_metadata').hide(); $('more_extended_metadata').show(); $('less_extended_metadata').hide(); this.stop()", :class => "rounded_bottom_right rounded_bottom_left#{(meta_errors? ? '' : ' hidden')}"} Hide
   - form.edit_page_parts do
     #tab_control
       #tabs.tabs
@@ -45,7 +45,7 @@
   - form_bottom.edit_buttons do
     - @buttons_partials.each do |partial|
       = render :partial => partial, :locals => {:f => fields}
-    %p.buttons{:style=>"clear: left"}
+    %p.buttons
       = save_model_button(@page)
       = save_model_and_continue_editing_button(@page)
       or

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -25,7 +25,7 @@
           %ul#navigation
             - nav_tabs.each do |tab|
               - if tab.visible?(current_user)
-                %li{:class=>('current' if current_tab?(tab))}
+                %li{:class=>('current ' if current_tab?(tab)).to_s + 'rounded_top_left rounded_top_right'}
                   %a{:href=>(tab.first.relative_url if tab.first)}
                     = tab.name
                   - if current_tab?(tab)

diff --git a/public/javascripts/admin/tabcontrol.js b/public/javascripts/admin/tabcontrol.js
@@ -113,7 +113,7 @@ TabControl.Tab = Class.create({
   },
 
   toElement: function() {
-    this.element = $a({'href': '#'}, $span(this.caption), $img({'src': relative_url_root + '/images/admin/tab_close.png', 'class': 'close', 'alt': 'Remove part', 'title': 'Remove part'})).addClassName('tab');
+    this.element = $a({'href': '#', 'class':'rounded_top_right rounded_top_left'}, $span(this.caption), $img({'src': relative_url_root + '/images/admin/tab_close.png', 'class': 'close', 'alt': 'Remove part', 'title': 'Remove part'})).addClassName('tab');
     return this.element;
   }
 });

diff --git a/public/stylesheets/admin/main.css b/public/stylesheets/admin/main.css
@@ -44,20 +44,18 @@ a {
 a:hover {
   text-decoration: none; }
 
+h1, h3, h4 {
+  font-weight: bold; }
+
 h1 {
   font-size: 180%;
-  font-weight: bold;
   margin: 0.75em 0; }
 
 h3 {
-  font-weight: bold;
   font-size: 130%;
   margin-top: 1.25em;
   margin-bottom: .5em; }
 
-h4 {
-  font-weight: bold; }
-
 p {
   margin-top: 1em;
   margin-bottom: 1em; }
@@ -111,10 +109,30 @@ table {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px; }
 
-.shadowed {
-  box-shadow: 2px 2px 22px #d9d9d9;
-  -moz-box-shadow: 2px 2px 22px #d9d9d9;
-  -webkit-box-shadow: 2px 2px 22px #d9d9d9; }
+.rounded_top_right {
+  border-top-right-radius: 6px;
+  -moz-border-radius-topright: 6px;
+  -webkit-border-top-right-radius: 6px; }
+
+.rounded_bottom_right {
+  border-bottom-right-radius: 6px;
+  -moz-border-radius-bottomright: 6px;
+  -webkit-border-bottom-right-radius: 6px; }
+
+.rounded_bottom_left {
+  border-bottom-left-radius: 6px;
+  -moz-border-radius-bottomleft: 6px;
+  -webkit-border-bottom-left-radius: 6px; }
+
+.rounded_top_left {
+  border-top-left-radius: 6px;
+  -moz-border-radius-topleft: 6px;
+  -webkit-border-top-left-radius: 6px; }
+
+.box_shadow {
+  box-shadow: 1px 1px 4px #666666;
+  -moz-box-shadow: 1px 1px 4px #666666;
+  -webkit-box-shadow: 1px 1px 4px #666666; }
 
 .clearfix {
   display: inline-block; }
@@ -331,6 +349,7 @@ img.avatar {
     margin: 0;
     margin-right: 1em; }
 #content form .buttons {
+  clear: both;
   color: #666;
   font-size: 80%;
   margin-top: 2.5em; }
@@ -343,12 +362,6 @@ img.avatar {
   padding: 4px 0 5px;
   font-size: 80%; }
   #content form p.more_or_less a {
-    border-bottom-right-radius: 6px;
-    -moz-border-radius-bottomright: 6px;
-    -webkit-border-bottom-right-radius: 6px;
-    border-bottom-left-radius: 6px;
-    -moz-border-radius-bottomleft: 6px;
-    -webkit-border-bottom-left-radius: 6px;
     background: #7e7e7e;
     text-shadow: #666 1px 1px 0;
     text-decoration: none;
@@ -489,9 +502,9 @@ body.reversed #content p.updated_line {
 body.reversed #content textarea {
   border: 1px solid white; }
 body.reversed #content .box {
-  box-shadow: 4px 4px 4px black;
-  -moz-box-shadow: 1px 1px 3px #666;
-  -webkit-box-shadow: 1px 1px 3px #666; }
+  box-shadow: 1px 1px 4px #666666;
+  -moz-box-shadow: 1px 1px 4px #666666;
+  -webkit-box-shadow: 1px 1px 4px #666666; }
 
 body.login #content #login {
   border-radius: 10px;
@@ -861,12 +874,6 @@ div.popup .reference table h2, div.popup .reference table h3, div.popup .referen
     width: 100%;
     margin-right: -4px; }
     #tab_control .tabs .tab {
-      border-top-left-radius: 6px;
-      -moz-border-radius-topleft: 6px;
-      -webkit-border-top-left-radius: 6px;
-      border-top-right-radius: 6px;
-      -moz-border-radius-topright: 6px;
-      -webkit-border-top-right-radius: 6px;
       background-color: #cac8c0;
       color: #7f7f7f;
       display: inline-block;
@@ -933,9 +940,9 @@ input.date {
   width: 11em; }
 
 .calendar_popup {
-  box-shadow: 2px 2px 22px #d9d9d9;
-  -moz-box-shadow: 2px 2px 22px #d9d9d9;
-  -webkit-box-shadow: 2px 2px 22px #d9d9d9;
+  box-shadow: 1px 1px 4px #666666;
+  -moz-box-shadow: 1px 1px 4px #666666;
+  -webkit-box-shadow: 1px 1px 4px #666666;
   border-radius: 6px;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;