Skip to content

Commit 6212cba

Browse files
author
Keith Thompson
authored
Merge pull request #10 from coderjourney/style-ui
Style User Interface with Twitter Bootstrap
2 parents 607bc80 + e814796 commit 6212cba

File tree

20 files changed

+143
-71
lines changed

20 files changed

+143
-71
lines changed

‎Dockerfile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ COPY Gemfile* ./
1515
RUN bundle install
1616
COPY . .
1717

18-
CMD rails server -b 0.0.0.0 -P /tmp/puma.pid
18+
CMD script/start

‎Gemfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
44
gem 'pg', '~> 0.18'
55
gem 'puma', '~> 3.0'
66
gem 'sass-rails', '~> 5.0'
7+
gem 'bootstrap-sass', '~> 3.3.6'
78
gem 'uglifier', '>= 1.3.0'
89
gem 'jquery-rails'
910
gem 'clearance', '~> 1.15.1'

‎Gemfile.lock

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,12 @@ GEM
3939
minitest (~> 5.1)
4040
tzinfo (~> 1.1)
4141
arel (7.1.4)
42+
autoprefixer-rails (6.5.4)
43+
execjs
4244
bcrypt (3.1.11)
45+
bootstrap-sass (3.3.7)
46+
autoprefixer-rails (>= 5.2.1)
47+
sass (>= 3.3.4)
4348
builder (3.2.2)
4449
byebug (9.0.6)
4550
clearance (1.15.1)
@@ -152,6 +157,7 @@ PLATFORMS
152157
ruby
153158

154159
DEPENDENCIES
160+
bootstrap-sass (~> 3.3.6)
155161
byebug
156162
clearance (~> 1.15.1)
157163
factory_girl_rails

‎app/assets/javascripts/application.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@
1111
// about supported directives.
1212
//
1313
//= require jquery
14+
//= require bootstrap-sprockets
1415
//= require jquery_ujs
1516
//= require_tree .

‎app/assets/stylesheets/application.css

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎app/assets/stylesheets/application.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import "bootstrap-sprockets";
2+
@import "bootstrap";
3+
4+
.margin-vertial-none {
5+
margin-top: 0px;
6+
margin-bottom: 0px;
7+
}
8+
9+
.title-container {
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
margin-bottom: 20px;
14+
15+
h1 {
16+
margin: 0;
17+
}
18+
}
19+
20+
.recipes {
21+
display: flex;
22+
flex-wrap: wrap;
23+
justify-content: space-around;
24+
}
25+
26+
.recipe {
27+
width: 30%;
28+
min-width: 300px;
29+
}

‎app/helpers/application_helper.rb

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,12 @@
11
module ApplicationHelper
2+
def alert_class(flash_type)
3+
case flash_type.to_sym
4+
when :notice
5+
"alert-success"
6+
when :alert
7+
"alert-warning"
8+
when :error
9+
"alert-danger"
10+
end
11+
end
212
end

‎app/models/meal_plan.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@ def build_meals
2525
end
2626

2727
def to_s
28-
"#{start_date} - #{end_date}"
28+
"#{I18n.localize(start_date)} - #{I18n.localize(end_date)}"
2929
end
3030
end

‎app/views/layouts/application.html.erb

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,40 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<title>MealPlan</title>
55
<%= csrf_meta_tags %>
66

77
<%= stylesheet_link_tag 'application', media: 'all' %>
88
<%= javascript_include_tag 'application' %>
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
910
</head>
1011

1112
<body>
1213

13-
<header>
14-
<% if signed_in? %>
15-
Signed in as: <%= current_user.email %>
16-
<%= button_to 'Sign out', sign_out_path, method: :delete %>
17-
<% else %>
18-
<%= link_to 'Sign in', sign_in_path %>
19-
<% end %>
20-
</header>
14+
<header class="container">
15+
<nav class="navbar navbar-default">
16+
<div class="container-fluid">
17+
<div class="navbar-header">
18+
<%= link_to "Meal Planning", root_path, class: "navbar-brand" %>
19+
</div>
2120

21+
<ul class="nav navbar-nav navbar-right">
22+
<% if signed_in? %>
23+
<li><%= link_to "Meal Plans", meal_plans_path %></li>
24+
<li><%= link_to "Recipes", recipes_path %></li>
25+
<li><%= link_to "Sign out", sign_out_path, method: :delete %></li>
26+
<% else %>
27+
<li><%= link_to "Sign In", sign_in_path %></li>
28+
<% end %>
29+
</ul>
30+
</div>
31+
</nav>
32+
</header>
2233

23-
<section>
34+
<section class="container">
2435
<div id="flash">
2536
<% flash.each do |key, value| %>
26-
<div class="flash <%= key %>"><%= value %></div>
37+
<div class="flash alert <%= alert_class(key) %>"><%= value %></div>
2738
<% end %>
2839
</div>
2940
<%= yield %>

‎app/views/meal_plans/_form.html.erb

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
11
<%= render partial: "shared/errors" %>
22

3-
<%= form_for @meal_plan do |form| %>
3+
<%= form_for @meal_plan, html: { class: "form-horizontal" } do |form| %>
44
<%= form.hidden_field :start_date %>
55
<%= form.hidden_field :end_date %>
66

77
<div class="meals">
88
<%= form.fields_for :meals do |meal_fields| %>
99
<%= meal_fields.hidden_field :id %>
1010
<%= meal_fields.hidden_field :date %>
11-
<p><%= meal_fields.object.date.to_s %></p>
12-
<div class="form-control">
13-
<%= meal_fields.label :recipe_id %>
14-
<%= meal_fields.select :recipe_id, current_user.recipe_options %>
11+
<div class="form-group margin-vertial-none">
12+
<div class="col-sm-11 col-sm-offset-1">
13+
<p><%= localize(meal_fields.object.date) %></p>
14+
</div>
15+
</div>
16+
<div class="form-group">
17+
<%= meal_fields.label :recipe_id, class: "col-sm-1 control-label" %>
18+
<div class="col-sm-11">
19+
<%= meal_fields.select :recipe_id, current_user.recipe_options, {}, class: "form-control" %>
20+
</div>
1521
</div>
1622
<% end %>
1723
</div>
1824

19-
<div class="actions">
20-
<%= form.submit %>
25+
<div class="form-group">
26+
<div class="col-sm-11 col-sm-offset-1">
27+
<%= form.submit class: "btn btn-primary" %>
28+
</div>
2129
</div>
2230
<% end %>

‎app/views/meal_plans/edit.html.erb

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
<h1>Edit Meal Plan: <%= @meal_plan %></h1>
1+
<div class="title-container">
2+
<h1>Edit Meal Plan: <%= @meal_plan %></h1>
3+
</div>
24

35
<%= render partial: "form" %>

‎app/views/meal_plans/new.html.erb

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
1-
<h1>New Meal Plan</h1>
1+
<div class="title-container">
2+
<h1>New Meal Plan</h1>
3+
</div>
4+
<div class="panel panel-default">
5+
<div class="panel-body">
6+
<%= form_for @meal_plan, url: new_meal_plan_path, method: "GET", html: { class: "form-inline" } do |form| %>
7+
<div class="form-group">
8+
<%= form.label :start_date %>
9+
<%= form.text_field :start_date, type: "date", class: "form-control" %>
10+
</div>
211

3-
<%= form_for @meal_plan, url: new_meal_plan_path, method: "GET" do |form| %>
4-
<div class="form-control">
5-
<%= form.label :start_date %>
6-
<%= form.text_field :start_date, type: "date" %>
7-
</div>
8-
9-
<div class="form-control">
10-
<%= form.label :end_date %>
11-
<%= form.text_field :end_date, type: "date" %>
12-
</div>
12+
<div class="form-group">
13+
<%= form.label :end_date %>
14+
<%= form.text_field :end_date, type: "date", class: "form-control" %>
15+
</div>
1316

14-
<div class="action">
15-
<%= form.submit "Generate Plan" %>
17+
<div class="form-group action">
18+
<%= form.submit "Generate Plan", class: "btn btn-default" %>
19+
</div>
20+
<% end %>
1621
</div>
17-
<% end %>
22+
</div>
1823

1924
<%= render partial: "form" %>

‎app/views/meal_plans/show.html.erb

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
<h1>Meal Plan: <%= @meal_plan %></h1>
1+
<div class="title-container">
2+
<h1>Meal Plan: <%= @meal_plan %></h1>
3+
</div>
24

35
<ul class="meals">
46
<% @meal_plan.meals.each do |meal| %>
57
<li class="meal">
6-
<%= meal.date %> - <%= link_to meal.recipe, recipe_path(meal.recipe) %>
8+
<%= localize(meal.date) %> - <%= link_to meal.recipe, recipe_path(meal.recipe) %>
79
</li>
810
<% end %>
911
</ul>

‎app/views/recipes/_form.html.erb

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
<%= form_for @recipe do |form| %>
44
<div class="form-group">
55
<%= form.label :name %>
6-
<%= form.text_field :name %>
6+
<%= form.text_field :name, class: "form-control" %>
77
</div>
88

99
<div class="form-group">
1010
<%= form.label :description %>
11-
<%= form.text_area :description %>
11+
<%= form.text_area :description, class: "form-control" %>
1212
</div>
1313

1414
<div class="actions">
15-
<%= form.submit %>
15+
<%= form.submit class: "btn btn-primary" %>
1616
</div>
1717
<% end %>

‎app/views/recipes/edit.html.erb

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
<h1>Edit Recipe</h1>
1+
<div class="title-container">
2+
<h1>Edit Recipe</h1>
3+
</div>
24

35
<%= render partial: "form" %>

‎app/views/recipes/index.html.erb

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1-
<h1>Recipes</h1>
2-
3-
<div>
4-
<%= link_to "New Recipe", new_recipe_path %>
1+
<div class="title-container">
2+
<h1>Recipes</h1>
3+
<%= link_to "New Recipe", new_recipe_path, class: "btn btn-default" %>
54
</div>
65

76
<div class="recipes">
87
<% @recipes.each do |recipe| %>
98
<div class="recipe">
10-
<h3><%= link_to recipe.name, recipe_path(recipe) %></h3>
11-
<p><%= recipe.description %></p>
12-
<ul class="recipe-actions">
13-
<li><%= link_to "Edit", edit_recipe_path(recipe) %></li>
14-
<li><%= link_to "Delete", recipe_path(recipe), data: {
15-
confirm: "Are you sure you want to delete: #{recipe.name}?",
16-
}, method: :delete %></li>
17-
</ul>
9+
<div class="thumbnail">
10+
<div class="caption">
11+
<h3><%= link_to truncate(recipe.name), recipe_path(recipe) %></h3>
12+
<p><%= truncate(recipe.description, length: 150) %></p>
13+
<p>
14+
<%= link_to "Edit", edit_recipe_path(recipe), class: "btn btn-default" %>
15+
<%= link_to "Delete", recipe_path(recipe), data: {
16+
confirm: "Are you sure you want to delete: #{recipe.name}?",
17+
}, method: :delete %>
18+
</p>
19+
</div>
20+
</div>
1821
</div>
1922
<% end %>
2023
</div>

‎app/views/recipes/new.html.erb

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
<h1>New Recipe</h1>
1+
<div class="title-container">
2+
<h1>New Recipe</h1>
3+
</div>
24

35
<%= render partial: "form" %>

‎app/views/shared/_errors.html.erb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<% if @errors.present? %>
2-
<div class="errors">
2+
<div class="alert alert-danger errors">
33
<ul>
44
<% @errors.each do |error| %>
55
<li><%= error %></li>

‎config/locales/en.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,6 @@
2020
# available at http://guides.rubyonrails.org/i18n.html.
2121

2222
en:
23-
hello: "Hello world"
23+
date:
24+
formats:
25+
default: "%m/%d/%Y"

‎script/start

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#!/bin/sh
2+
rm /tmp/puma.pid
3+
rails server -b 0.0.0.0 -P /tmp/puma.pid

0 commit comments

Comments
 (0)