Skip to content

Commit 38ebbdb

Browse files
vandodevvandodev
committed
Utilizando block na pagina resultado da pesquisa e fazendo retoques
1 parent ba649f0 commit 38ebbdb

File tree

4 files changed

+81
-60
lines changed

4 files changed

+81
-60
lines changed

‎public/styles/create-point.css

+9
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,22 @@ form fieldset{
4444
}
4545

4646
form legend{
47+
width: 100%;
4748
margin-bottom: 40px;
49+
display: flex;
50+
align-items: center;
51+
justify-content: space-between;
4852
}
4953

5054
form legend h2{
5155
font-size: 24px;
5256
}
5357

58+
form legend span{
59+
color: var(--title-color);
60+
font-size: 14px;
61+
}
62+
5463
form .field{
5564
flex: 1;
5665
display: flex;

‎public/styles/responsive.css

+8
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,14 @@
2323
#page-search-results .cards{
2424
grid-template-columns: 2fr;
2525
}
26+
27+
#page-create-point .field-group{
28+
flex-direction: column;
29+
}
30+
31+
#page-create-point .field-group .field + .field{
32+
margin-left: 0;
33+
}
2634
}
2735

2836
@media (min-width:1700px){

‎src/views/create-point.html

+14-4
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,21 @@ <h1>Cadastro do ponto de coleta</h1>
2121
<h2>Dados da entidade</h2>
2222
</legend>
2323

24-
<div class="field">
25-
<input type="text" name="name" required="required">
26-
<label for="name">Nome da entidade</label>
24+
<div class="field-group">
25+
26+
<div class="field">
27+
<input type="text" name="name" required="required" >
28+
<label for="name">Nome da entidade</label>
29+
</div>
30+
31+
<div class="field">
32+
<input type="url" name="image" required="required" placeholder="http://">
33+
<label for="name">Imagem da eltidade</label>
34+
</div>
2735

2836
</div>
2937

38+
3039
<div class="field-group">
3140

3241
<div class="field">
@@ -68,7 +77,8 @@ <h2>Dados da entidade</h2>
6877

6978
<fieldset>
7079
<legend>
71-
<h2>Intems de coleta</h2>
80+
<h2>Intens de coleta</h2>
81+
<span>Selecione um ou mais itens abaixo</span>
7282
</legend>
7383

7484
<div class="items-grid">

‎src/views/search-results.html

+50-56
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,53 @@
1-
<!DOCTYPE html>
2-
<html lang="pt-br">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Resultado da pesquisa</title>
7-
8-
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
9-
10-
<link rel="stylesheet" href="styles/main.css">
11-
<link rel="stylesheet" href="styles/search-results.css">
12-
<link rel="stylesheet" href="styles/responsive.css">
13-
14-
</head>
15-
<body>
16-
<div id="page-search-results">
17-
18-
{% include "partials/page-header.html" %}
19-
20-
<main>
21-
22-
<h4>
23-
<strong>2 pontos</strong>
24-
Encontrados</h4>
25-
26-
<div class="cards">
27-
28-
<div class="card">
29-
<img src="https://images.unsplash.com/photo-1528323273322-d81458248d40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1101&q=80" alt="Colectoria">
30-
<h1>Colectoria</h1>
31-
<h3>Resíduos eletronicos, lâmpada</h3>
32-
<p>Morro Agudo, São Paulo
33-
<br>
34-
Sete de setembro, Centro
35-
<br>
36-
Numero 287
37-
</p>
38-
</div>
39-
40-
<div class="card">
41-
<img src="https://images.unsplash.com/photo-1567393528677-d6adae7d4a0a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="Paperside">
42-
<h1>Paperside</h1>
43-
<h3>Papéis e papelão</h3>
44-
<p>Morro Agudo, São Paulo
45-
<br>
46-
Sete de setembro, Centro
47-
<br>
48-
Numero 287
49-
</p>
50-
</div>
51-
52-
</div>
53-
54-
</main>
1+
{% extends "layout.html"%}
2+
3+
{% set pageId = "page-search-results" %}
4+
5+
{% block title %}
6+
<title>Resultado da pesquisa</title>
7+
{% endblock title %}
8+
9+
{% block styles %}
10+
<link rel="stylesheet" href="styles/search-results.css">
11+
{% endblock styles %}
12+
13+
{% block content %}
14+
15+
{% include "partials/page-header.html" %}
16+
17+
<main>
18+
19+
<h4>
20+
<strong>2 pontos</strong>
21+
Encontrados</h4>
22+
23+
<div class="cards">
24+
25+
<div class="card">
26+
<img src="https://images.unsplash.com/photo-1528323273322-d81458248d40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1101&q=80" alt="Colectoria">
27+
<h1>Colectoria</h1>
28+
<h3>Resíduos eletronicos, lâmpada</h3>
29+
<p>Morro Agudo, São Paulo
30+
<br>
31+
Sete de setembro, Centro
32+
<br>
33+
Numero 287
34+
</p>
35+
</div>
36+
37+
<div class="card">
38+
<img src="https://images.unsplash.com/photo-1567393528677-d6adae7d4a0a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="Paperside">
39+
<h1>Paperside</h1>
40+
<h3>Papéis e papelão</h3>
41+
<p>Morro Agudo, São Paulo
42+
<br>
43+
Sete de setembro, Centro
44+
<br>
45+
Numero 287
46+
</p>
47+
</div>
5548

5649
</div>
5750

58-
</body>
59-
</html>
51+
</main>
52+
53+
{% endblock content %}

0 commit comments

Comments
 (0)