Styled flash and errors in admin panel

3 files changed, 61 insertions, 14 deletions

@@ -12,7 +12,7 @@ body {
   background-color: #7bf;
 
   a {
-    display: block;
+    display: inline-block;
     text-decoration: none;
     font-size: 2em;
     margin: .25em 1em;
@@ -188,3 +188,47 @@ body {
     border: 1px solid #ddd;
   }
 }
+
+#errors {
+  padding-left: 0;
+  border: 2px solid red;
+
+  h3 {
+    margin: 0 0 .25em 0;
+    text-align: center;
+  }
+
+  ul {
+    margin: 0;
+    padding-left: 1em;
+    font-size: 0.75em;
+  }
+
+  li {
+    display: block;
+  }
+}
+
+#flash {
+  display: inline-block;
+  color: black;
+  background-color: white;
+  padding: .5em .75em;
+  font-size: .8em;
+  -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
+  -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
+  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
+  vertical-align: text-bottom;
+}
+
+.flash-tag {
+  font-weight: bold;
+}
+
+.flash-alert {
+  border-left: 5px solid red;
+}
+
+.flash-notice {
+  border-left: 5px solid green;
+}
@@ -1,7 +1,3 @@
-- if f.object.errors.any?
-  %ul#errors
-    - f.object.errors.full_messages.each do |error|
-      %li= error
 %fieldset#content
   .title-field
     = f.label :title
@@ -13,6 +9,12 @@
     = f.label :body
     = f.cktext_area :body
 %fieldset#details
+  - if f.object.errors.any?
+    #errors.details-module
+      %h3 Error!
+      %ul
+        - f.object.errors.full_messages.each do |error|
+          %li= error
   .details-module
     = f.fields_for :records, Record.new do |builder|
       .should-create-record-field
@@ -6,7 +6,16 @@
     = stylesheet_link_tag    'admin', media: 'all', 'data-turbolinks-track': 'reload'
     = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
   %body
-    #banner= link_to "Thoughts", root_url
+    #banner
+      = link_to "Thoughts", root_url
+      - if flash[:alert]
+        #flash.flash-alert
+          %span.flash-tag ERROR:
+          = flash.alert
+      - if flash[:notice]
+        #flash.flash-notice
+          %span.flash-tag NOTICE:
+          = flash.notice
     #container
       %ul#sidebar
         %li{major_sidebar_attrs("dashboard")}
@@ -16,12 +25,4 @@
           %ul.minors
             %li.minor= link_to "New blog", new_admin_blog_url
       #main
-        - if flash[:alert]
-          #flash.flash-alert
-            %span.flash-tag ERROR:
-            = flash.alert
-        - if flash[:notice]
-          #flash.flash-notice
-            %span.flash-tag NOTICE:
-            = flash.notice
         = yield