Introduce a no content style

* Used in the empty state * Create a bordered variant to mimic tables, in the bootstrap way * Add to style guide * Remove the defaultBorderRadius, we've got a bootstrap variable for this
alphagov · Oct 15, 2013 · e44f61b · rgarner · Oct 16, 2013 · e44f61b
1 parent e3ce6b2
commit e44f61b
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 3 deletions.
diff --git a/app/assets/stylesheets/_structure.css.scss b/app/assets/stylesheets/_structure.css.scss
@@ -1,2 +1 @@
 $defaultBtnHeight: 30px;
-$defaultBorderRadius: 4px;
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
@@ -85,3 +85,16 @@ main a {
   margin: -$baseLineHeight 0 $baseLineHeight;
   font-size: $fontSizeLarge;
 }
+
+.no-content {
+  color: lighten($grayLight, 20%); // Large text needs a lighter colour for balance
+  font-size: $baseFontSize * 2;
+  line-height: $baseLineHeight * 2;
+  text-align: center;
+  padding: ($baseLineHeight * 4) 0;
+}
+
+.no-content-bordered {
+  border: 1px solid $tableBorder;
+  border-radius: $baseBorderRadius;
+}
diff --git a/app/assets/stylesheets/pagination.css.scss b/app/assets/stylesheets/pagination.css.scss
@@ -32,12 +32,12 @@
   .first a,
   .page:first-child {
     border-left-width: 1px;
-    border-radius: $defaultBorderRadius 0 0 $defaultBorderRadius;
+    border-radius: $baseBorderRadius 0 0 $baseBorderRadius;
   }
 
   .last a,
   .page:last-child  {
-    border-radius: 0 $defaultBorderRadius $defaultBorderRadius 0;
+    border-radius: 0 $baseBorderRadius $baseBorderRadius 0;
   }
 
 }
diff --git a/app/views/mappings/index.html.erb b/app/views/mappings/index.html.erb
@@ -52,4 +52,9 @@
     </tbody>
   </table>
   <%= paginate(@mappings, :window => 2) %>
+  
+<% else %>
+  <p class="no-content no-content-bordered">
+    No mappings found
+  </p>
 <% end %>
diff --git a/app/views/style/index.html.erb b/app/views/style/index.html.erb
@@ -171,3 +171,14 @@
     </ul>
   </div>
 </div>
+<hr>
+
+<h2>No content</h2>
+<div class="row">
+  <p class="span6 lead">A large but light style which applies to the empty state, eg when there are no mappings or hits. The bordered version mimics bootstrap table styles.</p>
+  <div class="span6">
+    <p class="no-content">No mappings available</p>
+    <p class="no-content no-content-bordered">Bordered message</p>
+    <p class="no-content">A longer, multi-line no content message. Do labore et <a href="#">dolore magna aliqua</a>.</p>
+  </div>
+</div>