rails_apps_composer: front-end framework

RailsApps · Feb 26, 2014 · 2b023f3 · 2b023f3
1 parent 73f15af
commit 2b023f3
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 16 deletions.
diff --git a/app/assets/stylesheets/application.css → app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css → app/assets/stylesheets/application.css.scss
@@ -5,11 +5,9 @@
  * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
  * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
  *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any styles
- * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
- * file per style scope.
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
  *
- *= require_tree .
  *= require_self
+ *= require_tree .
  */
diff --git a/app/assets/stylesheets/simple.css b/app/assets/stylesheets/simple.css
@@ -0,0 +1,50 @@
+/*
+ * Simple CSS stylesheet for a navigation bar and flash messages.
+ */
+main {
+  background-color: #eee;
+  padding-bottom: 80px;
+  width: 100%;
+  }
+header {
+  border: 1px solid #d4d4d4;
+  background-image: linear-gradient(to bottom, white, #f2f2f2);
+  background-color: #f9f9f9;
+  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+ul.nav li {
+  display: inline;
+}
+ul.nav li a {
+  padding: 10px 15px 10px;
+  color: #777777;
+  text-decoration: none;
+  text-shadow: 0 1px 0 white;
+}
+.flash_notice, .flash_alert {
+  padding: 8px 35px 8px 14px;
+  margin-bottom: 20px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  border: 1px solid #fbeed5;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+}
+.flash_notice {
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  color: #468847;
+}
+.flash_alert {
+  background-color: #f2dede;
+  border-color: #eed3d7;
+  color: #b94a48;
+}
+
diff --git a/app/views/layouts/_messages.html.erb b/app/views/layouts/_messages.html.erb
@@ -0,0 +1,5 @@
+<% flash.each do |name, msg| %>
+  <% if msg.is_a?(String) %>
+    <%= content_tag :div, msg, :class => "flash_#{name}" %>
+  <% end %>
+<% end %>
diff --git a/app/views/layouts/_navigation.html.erb b/app/views/layouts/_navigation.html.erb
@@ -0,0 +1,4 @@
+<ul class="nav">
+  <li><%= link_to 'Home', root_path %></li>
+  <%= render 'layouts/navigation_links' %>
+</ul>
diff --git a/app/views/layouts/_navigation_links.html.erb b/app/views/layouts/_navigation_links.html.erb
@@ -0,0 +1 @@
+<%# add navigation links to this file %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,14 +1,20 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>RailsOmniauth</title>
-  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
-  <%= csrf_meta_tags %>
-</head>
-<body>
-
-<%= yield %>
-
-</body>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= content_for?(:title) ? yield(:title) : "Rails Omniauth" %></title>
+    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Rails Omniauth" %>">
+    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
+    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
+    <%= csrf_meta_tags %>
+  </head>
+  <body>
+    <header>
+      <%= render 'layouts/navigation' %>
+    </header>
+    <main role="main">
+      <%= render 'layouts/messages' %>
+      <%= yield %>
+    </main>
+  </body>
 </html>