Added header icon sprites to close #137

concerto · Jul 13, 2012 · 8c2ab1b · 8c2ab1b
1 parent ff0869e
commit 8c2ab1b
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 70 deletions.
diff --git a/app/assets/images/elements/icons_headers_sprites.png b/app/assets/images/elements/icons_headers_sprites.png
diff --git a/app/assets/images/elements/icons_headers_sprites@2x.png b/app/assets/images/elements/icons_headers_sprites@2x.png
diff --git a/app/assets/stylesheets/application/controls/sprites.scss.erb b/app/assets/stylesheets/application/controls/sprites.scss.erb
@@ -10,7 +10,7 @@
 // (screens, templates, user groups, etc.).  They are 
 // 60px x 60px in size.
 
-// <i class="icon-controller-screens"></i>.
+// <i class="icon-controller-screens"></i>
 
 [class^="icon-controller-"],
 [class*=" icon-controller-"] {
@@ -29,6 +29,33 @@
 .icon-controller-templates { background-position: -60px 0px; }
 .icon-controller-groups { background-position: -120px 0px; }
 
+
+// HEADER ICONS (42px x 40px)
+// -----
+
+// <i class="icon-header-activecontent"></i>
+
+[class^="icon-header-"],
+[class*=" icon-header-"] {
+  display: inline-block;
+  width: 42px;
+  height: 40px;
+  line-height: 40px;
+  vertical-align: text-top;
+  @include at2x('elements/icons_headers_sprites', 168px, 40px, '.png');
+  background-position: 42px 40px;
+  background-repeat: no-repeat;
+
+  @include ie7-restore-right-whitespace();
+}
+.icon-header-activecontent { background-position: 0px 0px; }
+.icon-header-deniedcontent { background-position: -42px 0px; }
+.icon-header-expiredcontent { background-position: -84px 0px; }
+.icon-header-pendingcontent { background-position: -126px 0px; }
+
+
+// MISC ICONS
+
 .icon-logobutton {
   display: block;
   width: 45px;

diff --git a/app/assets/stylesheets/application/layout/headers.scss.erb b/app/assets/stylesheets/application/layout/headers.scss.erb
diff --git a/app/assets/stylesheets/application/layout/type.scss.erb b/app/assets/stylesheets/application/layout/type.scss.erb
@@ -100,6 +100,17 @@ h7 {
 	@include header-base;
 }
 
+.header-with-icon {
+  padding-top: 10px; 
+  border-bottom: solid 1px #eee;
+
+  [class^="icon-header-"], [class*=" icon-header-"] {
+    margin-top: -10px; 
+    margin-bottom: -10px; 
+    margin-right: 12px;
+  }
+}
+
 
 // COLORS
 // ------

diff --git a/app/views/submissions/_index_body.html.erb b/app/views/submissions/_index_body.html.erb
@@ -39,7 +39,7 @@
 
 <% if @can_moderate_feed and @pending_submissions.count > 0 %>
 <div class="default-padding">
-  <h3><%= @pending_submissions.count %> content<% if @pending_submissions.count != 1 %>s<% end %> pending your moderation</h3>
+  <h3 class="header-with-icon"><i class="icon-header-pendingcontent"></i><%= @pending_submissions.count %> content<% if @pending_submissions.count != 1 %>s<% end %> pending your moderation</h3>
 </div>
 <ul class="list-grid">
   <% @pending_submissions.each do |submission| %>
@@ -109,7 +109,7 @@
 </div>
 <% else %>
 <div class="default-padding">
-  <h3><%= @approved_submissions.count %> active content<% if @approved_submissions.count != 1 %>s<% end %></h3>
+  <h3 class="header-with-icon"><i class="icon-header-activecontent"></i><%= @approved_submissions.count %> active content<% if @approved_submissions.count != 1 %>s<% end %></h3>
 </div>
 <ul class="list-grid">
   <% @approved_submissions.each do |submission| %>