Skip to content

Commit 6b16c33

Browse files
fivefootbotfivefootbot
authored
Styled Languages (#40)
* Styled Languages * fixed language view index spec
1 parent 2027990 commit 6b16c33

File tree

6 files changed

+125
-81
lines changed

6 files changed

+125
-81
lines changed

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

+27-37
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,30 @@
1-
<%= form_with(model: language) do |form| %>
2-
<% if language.errors.any? %>
3-
<div style="color: red">
4-
<h2><%= pluralize(language.errors.count, "error") %> prohibited this language from being saved:</h2>
5-
6-
<ul>
7-
<% language.errors.each do |error| %>
8-
<li><%= error.full_message %></li>
9-
<% end %>
10-
</ul>
11-
</div>
12-
<% end %>
13-
14-
15-
<div class="form-body">
16-
<div class="row">
17-
<div class="col-md-4">
18-
<%= form.label :name, style: "display: block" %>
1+
<div class="card-content">
2+
<div class="card-body">
3+
<p>Languages should ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
4+
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
5+
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
6+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
7+
laborum.</p>
8+
<%= form_with(model: @language, local: true, class: "form") do |f| %>
9+
<div class="row">
10+
<div class="col-md-12 col-12">
11+
<div class="form-group">
12+
<%= f.label :name, "Language Name" %>
13+
<%= f.text_field :name, class: "form-control", placeholder: "Language" %>
14+
</div>
1915
</div>
20-
<div class="col-md-8 form-group">
21-
<%= form.text_field :name %>
16+
<div class="row">
17+
<div class="col-md-12 col-12">
18+
<div class="form-group">
19+
<%= f.label :file_share_folder, style: "display: block" %>
20+
<%= f.text_field :file_share_folder, class: "form-control", placeholder: "File Share Folder" %>
21+
</div>
22+
</div>
23+
<div class="col-12 d-flex justify-content-end">
24+
<%= submit_button(f) %>
25+
<%= link_to "Cancel", languages_path, class: "btn btn-light-secondary me-1 mb-1" %>
26+
</div>
2227
</div>
23-
</div>
28+
<% end %>
2429
</div>
25-
26-
<div class="form-body">
27-
<div class="row">
28-
<div class="col-md-4">
29-
<%= form.label :file_share_folder, style: "display: block" %>
30-
</div>
31-
<div class="col-md-8 form-group">
32-
<%= form.text_field :file_share_folder %>
33-
</div>
34-
</div>
35-
</div>
36-
37-
<div class="col-sm-12 d-flex justify-content-end">
38-
<%= form.submit class: "btn btn-primary me-1 mb-1" %>
39-
</div>
40-
<% end %>
30+
</div>

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

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<% content_for :title, "Editing language" %>
22

3-
<h1>Editing language</h1>
4-
5-
<%= render "form", language: @language %>
6-
7-
<br>
8-
9-
<div>
10-
<%= link_to "Show this language", @language %> |
11-
<%= link_to "Back to languages", languages_path %>
12-
</div>
3+
<section id="multiple-column-form">
4+
<div class="row match-height">
5+
<div class="col-12">
6+
<div class="card">
7+
<div class="card-header">
8+
<h3>Edit Language</h3>
9+
</div>
10+
<%= render "form", language:@language %>
11+
</div>
12+
</div>
13+
</div>
14+
</section>

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

+51-16
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,51 @@
1-
<p style="color: green"><%= notice %></p>
2-
3-
<% content_for :title, "Languages" %>
4-
5-
<h1>Languages</h1>
6-
7-
<div id="languages">
8-
<% @languages.each do |language| %>
9-
<%= render language %>
10-
<p>
11-
<%= link_to "Show this language", language %>
12-
</p>
13-
<% end %>
14-
</div>
15-
16-
<%= link_to "New language", new_language_path %>
1+
<section class="section">
2+
<div class="row" id="table-striped">
3+
<div class="col-12 cold-md-12">
4+
<div class="card">
5+
<div class="card-header d-flex justify-content-between align-items-center">
6+
<h2>Languages</h2>
7+
<%= link_to new_language_path, class: "btn btn-primary" do %>
8+
<i class="bi bi-plus-circle-fill"></i> Add New Language
9+
<% end %>
10+
</div>
11+
<div class="card-content">
12+
<div class="card-body">
13+
<p class="card-text">
14+
Lorem ipsum dolor sit amet, <code>consectetur adipiscing</code> elit. Sed do eiusmod tempor incididunt ut
15+
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
16+
ex ea commodo consequat. Duis aute irure dolor in <code>reprehenderit</code> in voluptate velit esse cillum dolore eu fugiat nulla
17+
pariatur. Excepteur sint <code>occaecat cupidatat</code> non proident, sunt in culpa qui officia deserunt mollit anim id est
18+
laborum.
19+
</p>
20+
<!-- table striped -->
21+
<div class="table-responsive">
22+
<table class="table table-lg table-striped mb-0">
23+
<thead>
24+
<tr>
25+
<th>Language</th>
26+
<th>File Share Folder</th>
27+
<th class="text-end">Language Actions</th>
28+
</tr>
29+
</thead>
30+
<tbody>
31+
<% @languages.each do |language| %>
32+
<tr id="<%= dom_id(language) %>" class="language-listing">
33+
<td class="text-bold-500"><%= language.name %></td>
34+
<td><%= language.file_share_folder %></td>
35+
<td class="text-end">
36+
<%= show_page_tool_link(language, "Show Language Details") %>
37+
<%= link_to edit_language_path(language), class: "btn btn-secondary btn-sm" do %>
38+
<i class="bi bi-pencil"></i>
39+
<% end %>
40+
<%= delete_tool_link(language, "Delete Language") %>
41+
</td>
42+
</tr>
43+
<% end %>
44+
</tbody>
45+
</table>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</section>

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

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
<% content_for :title, "New language" %>
2-
3-
<h1>New language</h1>
4-
5-
<%= render "form", language: @language %>
6-
7-
<br>
8-
9-
<div>
10-
<%= link_to "Back to languages", languages_path %>
11-
</div>
1+
<section id="multiple-column-form">
2+
<div class="row match-height">
3+
<div class="col-12">
4+
<div class="card">
5+
<div class="card-header">
6+
<h3>Create New Language</h3>
7+
</div>
8+
<%= render "form", language:@language %>
9+
</div>
10+
</div>
11+
</div>
12+
</section>

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

+22-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,26 @@
11
<p style="color: green"><%= notice %></p>
22

3-
<%= render @language %>
3+
<section id="multiple-column-form">
4+
<div class="row match-height">
5+
<div class="col-12">
6+
<div class="card">
7+
<div class="card-header">
8+
<h2>Languages</h2>
9+
<h4><%= @language.name %></h4>
10+
</div>
11+
<div class="card-content">
12+
<div class="card-body">
13+
<%= render @language %>
414

5-
<div>
6-
<%= link_to "Edit this language", edit_language_path(@language) %> |
7-
<%= link_to "Back to languages", languages_path %>
15+
<div>
16+
<%= link_to "Edit this language", edit_language_path(@language) %> |
17+
<%= link_to "Back to languages", languages_path %>
818

9-
<%= button_to "Destroy this language", @language, method: :delete %>
10-
</div>
19+
<%= button_to "Destroy this language", @language, method: :delete %>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</section>

‎spec/views/languages/index.html.erb_spec.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
it "renders a list of languages" do
1818
render
19-
cell_selector = 'div>p'
19+
cell_selector = 'tr.language-listing > td'
2020
assert_select cell_selector, text: Regexp.new("Name".to_s), count: 2
2121
assert_select cell_selector, text: Regexp.new("File Share Folder".to_s), count: 2
2222
end

0 commit comments

Comments
 (0)