Skip to content

Commit 8a04543

Browse files
danieldanilovdanieldanilov
committed
style: Refactor application styles and improve layout consistency
- Added global styles for body, headings, and form elements in application.css to enhance typography and layout. - Updated application layout to remove inline styles and utilize CSS classes for better maintainability. - Improved structure of learning-related views by applying consistent styling and removing unnecessary inline styles. - Enhanced error display in forms with a dedicated class for form errors.
1 parent a94104e commit 8a04543

File tree

7 files changed

+165
-33
lines changed

7 files changed

+165
-33
lines changed

‎app/assets/stylesheets/application.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,135 @@
88
*
99
* Consider organizing styles into separate files for maintainability.
1010
*/
11+
12+
body {
13+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
14+
line-height: 1.5;
15+
margin: 2rem;
16+
color: #333;
17+
}
18+
19+
h1 {
20+
font-size: 2rem;
21+
font-weight: bold;
22+
margin-bottom: 1rem;
23+
}
24+
25+
p {
26+
margin-bottom: 1rem;
27+
}
28+
29+
a {
30+
color: #007bff;
31+
text-decoration: none;
32+
}
33+
34+
a:hover {
35+
text-decoration: underline;
36+
}
37+
38+
/* Typography */
39+
h2 {
40+
font-size: 1.5rem;
41+
font-weight: bold;
42+
margin-top: 1.5rem;
43+
margin-bottom: 0.75rem;
44+
}
45+
46+
h3 {
47+
font-size: 1.25rem;
48+
font-weight: bold;
49+
margin-top: 1rem;
50+
margin-bottom: 0.5rem;
51+
}
52+
53+
/* Forms */
54+
label {
55+
display: block;
56+
margin-bottom: 0.5rem;
57+
font-weight: bold;
58+
}
59+
60+
input[type="text"],
61+
input[type="email"],
62+
input[type="password"],
63+
textarea {
64+
width: 100%;
65+
padding: 0.5rem;
66+
margin-bottom: 1rem;
67+
border: 1px solid #ccc;
68+
border-radius: 4px;
69+
box-sizing: border-box; /* Prevent padding from increasing width */
70+
}
71+
72+
textarea {
73+
min-height: 100px;
74+
resize: vertical;
75+
}
76+
77+
input[type="submit"],
78+
button {
79+
display: inline-block;
80+
padding: 0.75rem 1.5rem;
81+
background-color: #007bff;
82+
color: white;
83+
border: none;
84+
border-radius: 4px;
85+
cursor: pointer;
86+
font-size: 1rem;
87+
text-align: center;
88+
}
89+
90+
input[type="submit"]:hover,
91+
button:hover {
92+
background-color: #0056b3;
93+
}
94+
95+
/* Layout / Header */
96+
header {
97+
padding: 1rem 0;
98+
border-bottom: 1px solid #eee;
99+
margin-bottom: 2rem;
100+
}
101+
102+
header nav a {
103+
margin-right: 1rem;
104+
}
105+
106+
header nav a:last-child {
107+
margin-right: 0;
108+
}
109+
110+
/* Component-specific styles */
111+
112+
/* Learnings Index */
113+
.learnings-list li {
114+
border: 1px solid #eee;
115+
padding: 1rem;
116+
margin-bottom: 1rem;
117+
}
118+
119+
.learnings-list input[type="checkbox"] {
120+
margin-right: 0.5rem;
121+
vertical-align: top; /* Align checkbox with the text block */
122+
}
123+
124+
.learnings-list .learning-details {
125+
display: inline-block;
126+
vertical-align: top;
127+
/* Adjust width if needed, e.g., width: calc(100% - 30px); */
128+
}
129+
130+
/* Learnings New / Form Errors */
131+
.field_with_errors {
132+
/* Rails default, might need adjustments */
133+
display: contents; /* Avoid extra divs affecting layout */
134+
}
135+
136+
.form-errors {
137+
color: red;
138+
margin-bottom: 1rem;
139+
border: 1px solid red;
140+
padding: 1rem;
141+
background-color: #ffeeee;
142+
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@
2222
</head>
2323

2424
<body>
25-
<header style="padding: 1rem; border-bottom: 1px solid #eee; margin-bottom: 1rem;">
25+
<header>
2626
<nav>
27-
<%= link_to "Home", root_path, style: "margin-right: 1rem;" %>
28-
<%= link_to "Learnings", learnings_path, style: "margin-right: 1rem;" %>
29-
<%= link_to "New Learning", new_learning_path, style: "margin-right: 1rem;" %>
30-
<%= link_to "About", about_path, style: "margin-right: 1rem;" %>
27+
<%= link_to "Home", root_path %>
28+
<%= link_to "Learnings", learnings_path %>
29+
<%= link_to "New Learning", new_learning_path %>
30+
<%= link_to "About", about_path %>
3131
<%= link_to "Hire Me", hire_me_path %>
3232
</nav>
3333
</header>

‎app/views/learnings/create.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div>
2-
<h1 class="font-bold text-4xl">Learnings#create</h1>
2+
<h1>Learnings#create</h1>
33
<p>Find me in app/views/learnings/create.html.erb</p>
44
</div>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<h1>Learnings</h1>
22
<p>All the things I've learned, newest first.</p>
33

4-
<div style="margin-bottom: 1rem;">
4+
<div>
55
<%= link_to "Log New Learning", new_learning_path %>
66
</div>
77

88
<%= form_with(url: destroy_multiple_learnings_path, method: :delete) do |form| %>
99
<% if @learnings.any? %>
10-
<ul>
10+
<ul class="learnings-list">
1111
<% @learnings.each do |learning| %>
12-
<li style="border: 1px solid #ccc; padding: 1rem; margin-bottom: 1rem;">
13-
<input type="checkbox" name="learning_ids[]" value="<%= learning.id %>" style="margin-right: 0.5rem;">
14-
<span style="display: inline-block; vertical-align: top;">
12+
<li>
13+
<input type="checkbox" name="learning_ids[]" value="<%= learning.id %>">
14+
<span class="learning-details">
1515
<h2><%= learning.title %></h2>
1616
<p><%= learning.body %></p>
1717
<% if learning.tags.present? %>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<%= form_with(model: @learning, url: learnings_path, method: :post) do |form| %>
44
<% if @learning.errors.any? %>
5-
<div style="color: red;">
5+
<div class="form-errors">
66
<h2><%= pluralize(@learning.errors.count, "error") %> prohibited this learning from being saved:</h2>
77
<ul>
88
<% @learning.errors.full_messages.each do |message| %>
@@ -12,19 +12,19 @@
1212
</div>
1313
<% end %>
1414

15-
<div style="margin-bottom: 1rem;">
15+
<div>
1616
<%= form.label :title %><br>
17-
<%= form.text_field :title, style: "width: 100%;" %>
17+
<%= form.text_field :title %>
1818
</div>
1919

20-
<div style="margin-bottom: 1rem;">
20+
<div>
2121
<%= form.label :body %><br>
22-
<%= form.text_area :body, rows: 5, style: "width: 100%;" %>
22+
<%= form.text_area :body, rows: 5 %>
2323
</div>
2424

25-
<div style="margin-bottom: 1rem;">
25+
<div>
2626
<%= form.label :tags, "Tags (comma-separated)" %><br>
27-
<%= form.text_field :tags, style: "width: 100%;" %>
27+
<%= form.text_field :tags %>
2828
</div>
2929

3030
<div>

‎app/views/static_pages/hire_me.html.erb‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
<div class="container mx-auto px-4 py-8">
2-
<h1 class="font-bold text-4xl mb-6">Hire Me</h1>
1+
<div>
2+
<h1>Hire Me</h1>
33

4-
<div class="prose lg:prose-xl">
4+
<div>
55
<p>
66
[Placeholder: Introduce yourself here. Briefly mention your interest in the role, relevant skills (especially Ruby/Rails), and enthusiasm for 37signals' values/products.]
77
</p>
88

9-
<h2 class="text-2xl font-semibold mt-8 mb-4">Why This Role?</h2>
9+
<h2>Why This Role?</h2>
1010
<p>
1111
[Placeholder: Explain why you are applying specifically to 37signals and this role. Connect your skills/experience to the job description or company mission.]
1212
</p>
1313

14-
<h2 class="text-2xl font-semibold mt-8 mb-4">Links & Contact</h2>
14+
<h2>Links & Contact</h2>
1515
<ul>
1616
<li>[Placeholder: Link to your Resume/CV]</li>
1717
<li>[Placeholder: Link to your Portfolio/GitHub]</li>
1818
<li>[Placeholder: Your Email Address]</li>
1919
</ul>
2020

21-
<p class="mt-8">
21+
<p>
2222
Thank you for considering my application!
2323
</p>
2424
</div>

‎app/views/static_pages/home.html.erb‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
<div class="container mx-auto px-4 py-8">
2-
<h1 class="font-bold text-4xl mb-6">TIL Tracker Home</h1>
1+
<div>
2+
<h1>TIL Tracker Home</h1>
33

4-
<div class="mb-8">
5-
<%= link_to "Log a New Learning", new_learning_path, class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>
4+
<div>
5+
<%= link_to "Log a New Learning", new_learning_path %>
66
</div>
77

8-
<h2 class="text-2xl font-semibold mb-4">Recent Learnings</h2>
8+
<h2>Recent Learnings</h2>
99

1010
<% if @recent_learnings.any? %>
11-
<ul class="space-y-4">
11+
<ul>
1212
<% @recent_learnings.each do |learning| %>
13-
<li class="border p-4 rounded shadow">
14-
<h3 class="text-xl font-medium"><%= learning.title %></h3>
15-
<p class="text-sm text-gray-600 mb-2">Logged on: <%= learning.created_at.strftime("%B %d, %Y") %></p>
13+
<li>
14+
<h3><%= learning.title %></h3>
15+
<p>Logged on: <%= learning.created_at.strftime("%B %d, %Y") %></p>
1616
<%# Display body and tags later if needed %>
1717
</li>
1818
<% end %>

0 commit comments

Comments
 (0)