Simplified content cell markup and made some changes to fluid row sca…

…ffolds
concerto · Jul 6, 2012 · c8fee41 · c8fee41
1 parent 7e3c7c0
commit c8fee41
Show file tree

Hide file tree

Showing 30 changed files with 176 additions and 284 deletions.
diff --git a/app/assets/stylesheets/application/common/variables.scss.erb b/app/assets/stylesheets/application/common/variables.scss.erb
@@ -94,8 +94,8 @@ $gridGutterWidthLarge:    30px !default;
 
 // Default
 // -------------------------
-$fluidGridColumnWidth:         6.382978723% !default;
-$fluidGridGutterWidth:         2.127659574% !default;
+$fluidGridColumnWidth:         7.2996453905% !default;  /* changed from 6.382978723% !default; */
+$fluidGridGutterWidth:         1.127659574% !default;   /* changed from 2.127659574% !default; */
 
 // Portrait tablet to default desktop
 // -------------------------

diff --git a/app/assets/stylesheets/application/layout/contentcell.scss.erb b/app/assets/stylesheets/application/layout/contentcell.scss.erb
@@ -5,116 +5,47 @@
 
 //////////////////
 
-
-@mixin contentcell-base {
-	@include box-shadow(0 3px 2px #ababab);
-	//float:left; 
-	display: block;
-  	margin-bottom: 18px;
-}
-
 section.C {
-	@include contentcell-base;
-	@include border-radius-corners(8px, 8px, 0px, 0px);
-
-	header {
+	@include box-shadow(0 3px 2px #ababab);
+  display: block;
+  margin-bottom: 18px;
+  @include border-radius-corners(8px, 8px, 0px, 0px);
+
+	.C-header {
    	@include border-radius-corners(8px, 8px, 0px, 0px);
+    @include vertical-gradient(#f3f3f3, #d1d1d1);
 		display: block;
-   	background: #FFF image-url('layout/C/header_bg.png') bottom left repeat-x;
    	padding: 8px 14px 6px 14px;
    	padding-bottom: 5px;
    	border: solid 1px #ababab;
    	border-bottom: 0px;
-	
+
    	h1 {
    		color: #666;
    		font-size: 1.4em;
    		letter-spacing: 0.05em;
    		text-shadow: 0 1px #eee;
-			//text-transform: uppercase;
-		} 
+		}
 
-		// element inside the header that can be optionally used for right-aligned 
+		// element inside the header that can be optionally used for right-aligned
 		// contextual buttons relevant to this section of the page
 		.C-header_right {
 	  	float: right;
-	  	margin-left: 20px; 
+	  	margin-left: 20px;
 		}
-		
+
 		// this element is only included when the back_button helper is used to place a back button
 		.C-header_back {
 	  	float: left;
 	  	margin-left: -25px;
-	  	margin-right: 8px; 
-		}
-
-	}
-
-	.C-cont {
-  	padding-left: 204px;
-  	border: solid 1px #ababab;
-		background: white image-url('layout/C/bg_sm.png') top left repeat-y;  // the default variant is a small sidebar
-
-  	article, aside {
-    	float: left; 
-		} 
-
-		article {
-			padding: 0px;
-    	width: 100%;
+	  	margin-right: 8px;
 		}
-
-		aside {
-			background: image-url('layout/C/sidebar_light.png') top right no-repeat;
-    	min-height: 300px;
-    	width: 204px;
-    	right: 204px;
-      margin-left: -100%;
-      position: relative;
-
-      > div {
-        padding: 10px;
-
-        &:hover {
-          background-color: rgba(255,255,255,.3);
-        }
-      }
 
-		}
-
 	}
-
-	// VARIANTS: Different classes can be applied to change the layout of the content cell:
-
-	// large: make a larger sidebar
- 	&.lg {
-
-   	.C-cont {
-   		background: white image-url('layout/C/bg_lg.png') top left repeat-y;
-   		padding-left: 318px; 
-		}
-
- 		aside {
-   		width: 298px;
-   		right: 318px; 
-		} 
-
-	}
-
-	// no: remove the sidebar completely
-	&.no {
-
- 		.C-cont {
-  		background: #FFF;
-  		padding-left: 0px; 
-		}
-
-		aside {
-  		background: #FFF;
-  		width: 0;
-  		display: none; 
-		} 
-
+
+	.C-cont {
+  	padding: 0px;
+    border: solid 1px #ababab;
+		background: $white;
 	}
-
 }
diff --git a/app/assets/stylesheets/application/layout/responsive-767px-max.scss b/app/assets/stylesheets/application/layout/responsive-767px-max.scss
@@ -69,11 +69,6 @@
 
 @media (max-width: 767px) {
 
-  // Padding to set content in a bit
-  body {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
   // Negative indent the now static "fixed" navbar
   .navbar-fixed-top, .navbar-fixed-bottom {
     margin-left: -20px;

diff --git a/app/views/contents/new.html.erb b/app/views/contents/new.html.erb
@@ -10,15 +10,13 @@
     </ul>
   </div>
   <div class="span10">
-    <section class="C no">
-    	<header>
+    <section class="C">
+    	<header class="C-header">
     		<div class="C-header_right"><a class="button" href="#"><%=t(:design_graphic)%></a></div>
     		<h1><%= t(:add) + " " + @content.class.to_s + " " + t(:content) %></h1>
     	</header> 
     	<div class="C-cont">
-    		<article>
-    			<%= render 'form' %>
-    		</article>
+    		<%= render 'form' %>
     		<div class="clear"></div>
     	</div>
     </section>

diff --git a/app/views/contents/show.html.erb b/app/views/contents/show.html.erb
@@ -1,12 +1,9 @@
 <section class="C">
-	<header>
-    <div id="browse-header">
-      <%= render :partial => "contents/show_header" %>
-    </div>
+	<header class="C-header" id="browse-header">
+    <%= render :partial => "contents/show_header" %>
 	</header>
-	<div class="C-cont">
-    <div id="browse-body">
-      <%= render :partial => "contents/show_body" %>
-    </div>
+	<div class="C-cont" id="browse-body">
+    <%= render :partial => "contents/show_body" %>
+    <div class="clear"></div>
 	</div>
 </section>
diff --git a/app/views/feeds/_browse_header.html.erb b/app/views/feeds/_browse_header.html.erb
@@ -1 +1 @@
-  <h1><%=t :browse_content_by_feed %></h1>
+  <h1><%=t :browse_submissions %></h1>
diff --git a/app/views/feeds/edit.html.erb b/app/views/feeds/edit.html.erb
@@ -1,12 +1,10 @@
-<section class="C no">
-	<header>
+<section class="C">
+	<header class="C-header">
 		<%= back_button feeds_path %>
 		<h1><%= t(:edit_feed)%></h1>
 	</header>
 	<div class="C-cont">
-		<article>
-			<%= render 'form' %>
-		</article>
+		<%= render 'form' %>
 		<div class="clear"></div>
 	</div>
 </section>
diff --git a/app/views/feeds/index.html.erb b/app/views/feeds/index.html.erb
@@ -1,8 +1,24 @@
-<section class="C no">
-  <header id="browse-header">
-    <%= render :partial => "feeds/browse_header" %>
-  </header>
-  <div id="browse-body" class="C-cont">
-    <%= render :partial => "feeds/browse_body" %>
+<div class="row-fluid">
+  <div class="span9">
+    <section class="C">
+      <header class="C-header" id="browse-header">
+        <%= render :partial => "feeds/browse_header" %>
+      </header>
+      <div id="browse-body" class="C-cont">
+        <%= render :partial => "feeds/browse_body" %>
+        <div class="clear"></div>
+      </div>
+    </section>
   </div>
-</section>
+  <div class="span3">
+    <section class="C">
+      <header class="C-header">
+        <h3>Network Vitals</h3>
+      </header>
+      <div class="C-cont">
+        <h2># Screens</h2>
+        <div class="clear"></div>
+      </div>
+    </section>
+  </div>
+</div>
diff --git a/app/views/feeds/new.html.erb b/app/views/feeds/new.html.erb
@@ -1,30 +1,10 @@
-<div class="colfr width75x25">
-	<div class="col1">
-		<section class="C no">
-			<header>
-				<%= back_button feeds_path %>
-				<h1><%=t(:new_feed)%></h1>
-			</header>
-			<div class="C-cont">
-				<article>
-					<%= render 'form' %>
-				</article>
-				<div class="clear"></div>
-			</div>
-		</section>
+<section class="C">
+	<header class="C-header">
+		<%= back_button feeds_path %>
+		<h1><%=t(:new_feed)%></h1>
+	</header>
+	<div class="C-cont">
+		<%= render 'form' %>
+		<div class="clear"></div>
 	</div>
-
-	<div class="col2">
-		<section class="C no">
-			<header></header>
-			<div class="C-cont">
-				<article>
-					<p>You already have administrative control over these feeds:</p>
-
-				</article>
-				<div class="clear"></div>
-			</div>
-		</section>
-	</div>
-	<div class="clear"></div>
-</div>
+</section>
diff --git a/app/views/groups/edit.html.erb b/app/views/groups/edit.html.erb
@@ -1,5 +1,5 @@
 <section class="C no">
-	<header>
+	<header class="C-header">
 		<%= back_button groups_path %>
 		<h1>Edit Group</h1>
 	</header>

diff --git a/app/views/groups/index.html.erb b/app/views/groups/index.html.erb
@@ -1,5 +1,5 @@
 <section class="C no">
-	<header>
+	<header class="C-header">
 		<h1>All User Groups <%= link_to 'New Group', new_group_path, :class => "button" %></h1>
 	</header>
 	<div class="C-cont">

diff --git a/app/views/groups/new.html.erb b/app/views/groups/new.html.erb
@@ -1,5 +1,5 @@
 <section class="C no">
-	<header>
+	<header class="C-header">
 		<%= back_button groups_path %>
 		<h1>New Group</h1>
 	</header>

diff --git a/app/views/groups/show.html.erb b/app/views/groups/show.html.erb
@@ -1,5 +1,5 @@
 <section class="C">
-  <header id="groups-header">
+  <header class="C-header" id="groups-header">
     <%= render :partial => "groups/show_header" %>
   </header>
   <div id="groups-body" class="C-cont">

diff --git a/app/views/screens/_index_body.html.erb b/app/views/screens/_index_body.html.erb
@@ -1,25 +1,22 @@
-<article>
-  <div>
-    <% if @screens.size == 0 %>
-      <div class="default-padding">
-        <h3>Oops - there are no screens to display.  <%= link_to "Why not add one?", new_screen_path %></h3>
-      </div>
-    <% else %>
-      <ul class="GL">
-        <% @screens.each do |screen| %>
-          <li>
-            <div class="cont">
-              <%= link_to screen do %>
-                <i class="icon-controller-screens"></i>
-              <% end %>
-              <p><b><%= link_to screen.name, screen %></b></p>
-              <p><%= screen.location %></p>
-              <p><%= screen.fields.count %> fields</p>
-            </div>
-          </li>
-        <% end %>
-      </ul>
-    <% end %>
-  </div>
-</article>
-<div class="clear"></div>
+<div>
+  <% if @screens.size == 0 %>
+    <div class="default-padding">
+      <h3>Oops - there are no screens to display.  <%= link_to "Why not add one?", new_screen_path %></h3>
+    </div>
+  <% else %>
+    <ul class="GL">
+      <% @screens.each do |screen| %>
+        <li>
+          <div class="cont">
+            <%= link_to screen do %>
+              <i class="icon-controller-screens"></i>
+            <% end %>
+            <p><b><%= link_to screen.name, screen %></b></p>
+            <p><%= screen.location %></p>
+            <p><%= screen.fields.count %> fields</p>
+          </div>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+</div>