bootstrap

batdevis · Jun 8, 2016 · 0b7b2d5 · 0b7b2d5
1 parent 76f052a
commit 0b7b2d5
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 65 deletions.
diff --git a/Gemfile b/Gemfile
@@ -57,3 +57,7 @@ gem 'remotipart', github: 'mshibuya/remotipart', ref: '3a6acb3'
 gem 'devise', git: 'git@github.com:plataformatec/devise.git'
 gem 'omniauth-google-oauth2'
 gem 'figaro'
+gem 'bootstrap', '~> 4.0.0.alpha3'
+source 'https://rails-assets.org' do
+  gem 'rails-assets-tether', '>= 1.1.0'
+end
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -51,6 +51,7 @@ GIT
 
 GEM
   remote: https://rubygems.org/
+  remote: https://rails-assets.org/
   specs:
     actioncable (5.0.0.rc1)
       actionpack (= 5.0.0.rc1)
@@ -90,7 +91,12 @@ GEM
       minitest (~> 5.1)
       tzinfo (~> 1.1)
     arel (7.0.0)
+    autoprefixer-rails (6.3.6.2)
+      execjs
     bcrypt (3.1.11)
+    bootstrap (4.0.0.alpha3)
+      autoprefixer-rails (>= 6.0.3)
+      sass (>= 3.4.19)
     builder (3.2.2)
     byebug (9.0.5)
     carrierwave (0.11.2)
@@ -194,6 +200,7 @@ GEM
       bundler (>= 1.3.0, < 2.0)
       railties (= 5.0.0.rc1)
       sprockets-rails (>= 2.0.0)
+    rails-assets-tether (1.3.2)
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
     rails-dom-testing (1.0.7)
@@ -254,6 +261,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bootstrap (~> 4.0.0.alpha3)
   byebug
   carrierwave
   coffee-rails (~> 4.1.0)
@@ -267,6 +275,7 @@ DEPENDENCIES
   puma (~> 3.0)
   rack-pjax!
   rails (>= 5.0.0.rc1, < 5.1)
+  rails-assets-tether (>= 1.1.0)!
   rails_admin!
   remotipart!
   sass-rails (~> 5.0)

diff --git a/app/assets/images/google/glogin.png b/app/assets/images/google/glogin.png
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -1,15 +1,4 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file. JavaScript code in this file should be added after the last require_* statement.
-//
-// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
-// about supported directives.
-//
 //= require jquery
 //= require jquery_ujs
-//= require_tree .
+//= require tether
+//= require bootstrap-sprockets
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -0,0 +1,3 @@
+@import "style";
+// Custom bootstrap variables must be set or imported before bootstrap itself.
+@import "bootstrap";
diff --git a/app/assets/stylesheets/style.scss b/app/assets/stylesheets/style.scss
@@ -0,0 +1,15 @@
+$font-family-sans-serif:     Consolas, "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif:          Georgia, "Times New Roman", Times, serif !default;
+$font-family-monospace:      Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base:           $font-family-sans-serif !default;
+
+// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
+$font-size-root:             16px !default;
+
+#main{
+  margin-top: 100px;
+}
+.alert-container{
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,4 +1,9 @@
 <% unless user_signed_in? %>
-  <%#= link_to "Sign in with Google", user_omniauth_authorize_path(:google_oauth2) %>
-  <%= link_to "Sign in with Google", user_google_oauth2_omniauth_authorize_path %>
+  <%= link_to(
+    image_tag("google/glogin.png", size: "193x48"),
+    user_google_oauth2_omniauth_authorize_path,
+    title: "Sign in with Google"
+  ) %>
+<% else %>
+  <p><%= link_to("Go to projects page", projects_path) %></p>
 <% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,17 +1,26 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
     <title>Project start page</title>
     <%= csrf_meta_tags %>
 
     <%= stylesheet_link_tag    'application', media: 'all' %>
-    <%= javascript_include_tag 'application' %>
   </head>
 
   <body>
-    <%= render partial: "shared/header" %>
-    <p class="notice"><%= notice %></p>
-    <p class="alert"><%= alert %></p>
-    <%= yield %>
+    <div class="container">
+      <%= render partial: "shared/header" %>
+      <%= render partial: "shared/alert" %>
+
+      <div id="main">
+        <%= yield %>
+      </div><!-- /main-->
+    </div> <!-- /container -->
+
+    <%= javascript_include_tag 'application' %>
   </body>
 </html>
diff --git a/app/views/projects/edit.html.erb b/app/views/projects/edit.html.erb
@@ -1,11 +1,11 @@
 <%= form_for @project do |f| %>
 
-  <p>
+  <div class="form-group">
     <%= f.label :name %>
-    <%= f.text_field :name %>
-  <p>
+    <%= f.text_field :name, class: "form-control" %>
+  </div>
 
-  <p>
+  <div class="form-group">
     <%= f.label :swagger_definitions %>
     <% unless @project.swagger_definitions.blank? %>
       <ul>
@@ -22,19 +22,19 @@
             <% end %>
             <p>
               <%= sf.label :name %>
-              <%= sf.text_field :name %>
+              <%= sf.text_field :name, class: "form-control" %>
             <p>
             <p>
               <%= sf.label :definition %>
-              <%= sf.file_field :definition %>
+              <%= sf.file_field :definition, class: "form-control" %>
             </p>
           </li>
         <% end %>
       </ul>
     <% end %>
-  <p>
+  </div>
 
-  <p>
+  <div class="form-group">
     <%= f.label :links %>
     <ul>
       <%= f.fields_for :links do |sf| %>
@@ -49,27 +49,27 @@
           <% end %>
           <p>
             <%= sf.label :logo %>
-            <%= sf.file_field :logo %>
+            <%= sf.file_field :logo, class: "form-control" %>
           </p>
           <p>
             <%= sf.label :name %>
-            <%= sf.text_field :name %>
+            <%= sf.text_field :name, class: "form-control" %>
           <p>
           <p>
             <%= sf.label :url %>
-            <%= sf.text_field :url %>
+            <%= sf.text_field :url, class: "form-control" %>
           <p>
         </li>
       <% end %>
     </ul>
-  <p>
+  </div>
 
-  <p>
+  <div class="form-group">
     <%= f.label :notes %>
-    <%= f.text_area :notes, cols: 40, rows: 20 %>
-  <p>
+    <%= f.text_area :notes, cols: 40, rows: 20, class: "form-control" %>
+  </div>
 
-  <p>
-    <%= f.submit %>
-  </p>
+  <div class="form-group">
+    <%= f.submit class: "btn btn-success" %>
+  </div>
 <% end %>
diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb
@@ -1,9 +1,9 @@
-<h2>Projects</h2>
-
 <% unless @projects.blank? %>
-  <ul>
+  <div class="list-group">
     <% @projects.each do |project| %>
-      <li><%= link_to(project.name, project) %></li>
+      <%= link_to(project.name, project, class: "list-group-item") %>
     <% end %>
-  </ul>
+  </div>
+<% else %>
+  <p>No projects yet. Let's go to play ping pong!</p>
 <% end %>
diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
@@ -1,9 +1,6 @@
 <h2>Project: <%= @project.name %></h2>
 
-<p><%= link_to("edit", edit_project_path(@project)) %></p>
-
-<p>Created at: <%= @project.created_at %></p>
-<p>Updated at: <%= @project.updated_at %></p>
+<div class="text-xs-right"><%= link_to("edit", edit_project_path(@project), class: "btn btn-warning") %></div>
 
 <h4>Api Docs</h4>
 <% unless @project.swagger_definitions.blank? %>
@@ -37,3 +34,9 @@
 <% else %>
   <p>No notes.</p>
 <% end %>
+
+<h4>Created at</h4>
+<p><%= @project.created_at %></p>
+
+<h4>Updated at</h4>
+<p><%= @project.updated_at %></p>
diff --git a/app/views/shared/_alert.html.erb b/app/views/shared/_alert.html.erb
@@ -0,0 +1,4 @@
+<div class="alert-container">
+  <%= content_tag(:div, notice, class: "alert alert-success", role: "alert") if notice %>
+  <%= content_tag(:div, alert, class: "alert alert-danger", role: "alert") if alert %>
+</div>
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
@@ -1,3 +1,28 @@
-<% if user_signed_in? %>
-  logged as: <%= current_user.email %> <%= image_tag(current_user.avatar, width: '40') unless current_user.avatar.blank? %>
-<% end %>
+<nav class="navbar navbar-light bg-faded">
+  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
+    &#9776;
+  </button>
+  <div class="collapse navbar-toggleable-xs" id="navbar-header">
+    <a class="navbar-brand" href="#">Project Pages</a>
+    <ul class="nav navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="<%= root_path %>">Home <span class="sr-only">(current)</span></a>
+      </li>
+    </ul>
+    <div class="pull-xs-right">
+      <% if user_signed_in? %>
+        <% if current_user.avatar.blank? %>
+          <%= current_user.email %>
+        <% else %>
+          <%= image_tag(current_user.avatar, width: '40', alt: current_user.email) %>
+        <% end %>
+      <% else %>
+        <%= link_to(
+          image_tag("google/glogin.png", size: "193x48"),
+          user_google_oauth2_omniauth_authorize_path,
+          title: "Sign in with Google"
+        ) %>
+      <% end %>
+    </div>
+  </div>
+</nav> <!-- /navbar -->