Skip to content

Commit 42f1b3a

Browse files
wlsf82wlsf82
committed
Better style the app
CSS might still need adjusments.
1 parent 07ad4b0 commit 42f1b3a

File tree

4 files changed

+119
-47
lines changed

4 files changed

+119
-47
lines changed

‎cypress/e2e/mealSuggestion.cy.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ describe('Meal suggestion', () => {
3939
cy.contains('button', 'Outra sugestão')
4040
.as('button')
4141
.should('be.visible')
42-
cy.get('body').should('have.css', 'background-color', 'rgb(254, 246, 228)')
42+
cy.get('body').should('have.css', 'background-color', 'rgb(255, 255, 255)')
4343
cy.section('End of pre-conditions')
4444
})
4545

‎src/index.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ <h1>Refeição vegana 🌱</h1>
2222
<div id="search-container">
2323
<label>Busca:</label>
2424
<input type="text" id="search-field" placeholder="Ex.: Arroz e feijão">
25-
<button type="submit">></button>
25+
<button type="submit">Buscar</button>
2626
</div>
27-
<div id="meal-container">
28-
<h2 id="meal-name"></h2>
29-
<h3 id="ingredients-label"></h3>
30-
<ul id="ingredients-list"></ul>
31-
</div>
32-
<div>
27+
<div id="content-wrapper">
28+
<div id="meal-container">
29+
<h2 id="meal-name" title="Refeição"></h2>
30+
<h3 id="ingredients-label" title="Ingredientes"></h3>
31+
<ul id="ingredients-list"></ul>
32+
</div>
3333
<button id="generate-meal-button">Outra sugestão</button>
3434
</div>
3535
<script type="application/javascript" src="meals.js"></script>

‎src/script.js

+1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ function generateMeal() {
5959

6060
function showMealName(meal) {
6161
mealName.innerHTML = `Refeição: ${meal.name} (${mealEnum[meal.type]}${meal.highProtein ? ' com alto teor de proteína' : ''})`
62+
mealName.title = `${meal.name} (${mealEnum[meal.type]}${meal.highProtein ? ' com alto teor de proteína' : ''})`
6263
}
6364

6465
function showIngredients(ingredients) {

‎src/style.css

+110-39
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,137 @@
11
* {
2-
font-family: Arial, Helvetica, sans-serif;
3-
background-color: #fef6e4;
4-
color: #001858;
5-
margin-left: 6px;
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
66
}
77

8-
label {
9-
font-weight: bold;
8+
body {
9+
max-width: 640px;
10+
background-color: #ffffff;
11+
color: #333333;
12+
line-height: 1.6;
13+
padding: 20px;
14+
margin: auto;
1015
}
1116

12-
select {
13-
border: 2px solid #001858;
14-
border-radius: 4px;
15-
margin-left: 21px;
16-
height: 1.5rem;
17+
h1, h2, h3 {
18+
color: #007BFF;
1719
}
1820

19-
#search-container {
20-
margin-top: 12px;
21+
h1 {
22+
text-align: center;
23+
margin-bottom: 40px;
2124
}
2225

23-
#search-container input[type="text"] {
24-
width: 180px;
25-
border: 2px solid #001858;
26-
border-radius: 4px;
26+
#ingredients-label {
27+
color: #0056B3;
2728
}
2829

29-
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
30-
color: #f582ae;
31-
opacity: 1; /* Firefox */
30+
#filter-container, #search-container {
31+
display: flex;
32+
align-items: center;
33+
justify-content: space-between;
34+
margin-bottom: 20px;
3235
}
3336

34-
:-ms-input-placeholder { /* Internet Explorer 10-11 */
35-
color: #f582ae;
37+
select, input[type="text"], button {
38+
font-size: 1rem;
39+
padding: 8px 10px;
40+
border: 1px solid #007BFF;
41+
border-radius: 10px;
42+
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.1);
43+
width: 100%;
44+
margin: 0 10px 0 1px;
3645
}
3746

38-
::-ms-input-placeholder { /* Microsoft Edge */
39-
color: #f582ae;
47+
#generate-meal-button {
48+
width: unset;
49+
padding: 8px;
50+
margin-top: 10px;
4051
}
4152

42-
h1 {
43-
color: #f582ae;
53+
label {
54+
font-weight: 600;
55+
min-width: 70px;
56+
margin-right: 1px;
57+
margin-bottom: 15px;
58+
}
59+
60+
select:hover, input[type="text"]:hover, button:hover {
61+
border-color: #0056b3;
62+
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
4463
}
4564

4665
button {
47-
padding: 4px 8px;
48-
background-color: #f582ae;
49-
border-radius: 8px;
50-
border: 2px solid #001858;
66+
background-color: #007bff;
67+
color: white;
68+
cursor: pointer;
69+
transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
5170
}
5271

53-
#generate-meal-button {
54-
font-size: large;
72+
button:hover {
73+
background-color: #0056b3;
5574
}
5675

57-
@media only screen and (max-width: 600px) {
58-
h1 {
59-
text-align: center;
60-
}
76+
button:active {
77+
background-color: #004085;
78+
}
79+
80+
ul {
81+
list-style: none;
82+
padding-left: 0;
83+
margin-top: 20px;
84+
border-left: 3px solid #007BFF;
85+
padding-left: 20px;
86+
background-color: #f8f9fa;
87+
box-shadow: 2px 2px 8px rgba(0, 123, 255, 0.1);
88+
max-height: 300px;
89+
overflow-y: auto;
90+
position: relative
91+
}
92+
93+
ul::after {
94+
content: "";
95+
position: absolute;
96+
left: 0;
97+
right: 0;
98+
bottom: 0;
99+
height: 20px;
100+
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
101+
pointer-events: none;
102+
}
103+
104+
li {
105+
padding: 10px 0;
106+
border-bottom: 1px solid #e1e5ea;
107+
margin-bottom: 6px;
108+
transition: background-color 0.3s;
109+
}
110+
111+
li:last-child {
112+
border-bottom: none;
113+
}
114+
115+
li:hover {
116+
background-color: #e9ecef;
117+
}
118+
119+
#content-wrapper {
120+
display: flex;
121+
flex-direction: column;
122+
justify-content: space-between;
123+
min-height: 50vh;
124+
}
125+
126+
#meal-name {
127+
min-height: 100px;
128+
line-height: normal;
129+
overflow: visible;
130+
white-space: normal;
131+
}
61132

62-
#generate-meal-button {
63-
margin: 0 auto;
64-
display: block;
133+
@media (max-width: 480px) {
134+
ul {
135+
max-height: 150px;
65136
}
66137
}

0 commit comments

Comments
 (0)