Update day 16

Signed-off-by: Manuel Vergara <manuel@vergaracarmona.es>
This commit is contained in:
Manuel Vergara 2023-05-27 23:49:12 +02:00
parent c809ab1dac
commit 22ef92d980
4 changed files with 115 additions and 10 deletions

View File

@ -29,7 +29,7 @@ El código no está comentado pero veréis en este documento cada detalle, por e
- [16.20. - Estilo general](#1620---estilo-general)
- [16.21. - Estilo de barra superiores](#1621---estilo-de-barra-superiores)
- [16.22. - Estilo de la lista](#1622---estilo-de-la-lista)
- [16.23. - Estilo de la barra de cerca](#1623---estilo-de-la-barra-de-cerca)
- [16.23. - Estilo de la barra de búsquedas](#1623---estilo-de-la-barra-de-búsquedas)
- [16.24. - Terminar el sitio](#1624---terminar-el-sitio)
- [Ficheros y documentación](#ficheros-y-documentación)
@ -1205,7 +1205,69 @@ Queda así:
Verás que voy corrigiendo otros errores...
## 16.23. - Estilo de la barra de cerca
## 16.23. - Estilo de la barra de búsquedas
Vamos a descomentar el form de busquedas para añadirlo también.
Para darle estilo en vez de clase le damos un id ya que será solo una vez que se usará. Metemos el buscador y agregar nueva tarea en un div con id.
Le damos estilo al form con el parámetro:
```css
style="margin-top: 20px;display: flex;
```
Al enlace de crear tarea le damos también un id. Y el texto también lo cambiamos por un signo: https://www.htmlsymbols.xyz/unicode/U+002B
Ahora a darle estilo:
```css
#envoltorio-agregar-buscar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
#enlace-agregar {
text-decoration: none;
color: #fff;
background-color: #4CAF50;
padding: 10px 15px;
border-radius: 5px;
font-size: 1.1em;
font-weight: 900;
}
```
Ahora para darle estilo al botón de buscar tenemos que añadirle una clase al input. Y volvemos a principal a darle estilo:
```css
input[type=text],
input[type=password],
textarea {
padding: 10px;
border-radius: 5px;
border: 1px solid #EB796F;
width: 90%;
font-size: 1.1em;
font-weight: 900;
}
label {
padding-top: 10px !important;
display: block;
font-size: 1.1em;
font-weight: 900;
}
.boton {
text-decoration: none;
color: #fff;
background-color: #4CAF50;
padding: 10px 15px;
border-radius: 5px;
font-size: 1.1em;
font-weight: 900;
}
```
Nos queda así:
![](../img/dia16_47.png)
## 16.24. - Terminar el sitio

View File

@ -88,6 +88,47 @@
line-height: 0;
}
#envoltorio-agregar-buscar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
#enlace-agregar {
text-decoration: none;
color: #fff;
background-color: #4CAF50;
padding: 10px 15px;
border-radius: 5px;
font-size: 1.1em;
font-weight: 900;
}
input[type=text],
input[type=password],
textarea {
padding: 10px;
border-radius: 5px;
border: 1px solid #EB796F;
width: 90%;
}
label {
padding-top: 10px !important;
display: block;
}
.boton {
text-decoration: none;
color: #fff;
background-color: #4CAF50;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>

View File

@ -20,15 +20,17 @@
</div>
<!--
<a href="{% url 'crear-tarea' %}">Crear nueva tarea</a>
<form method="get" action="">
{% csrf_token %}
<input type="text" name="area-buscar" value="{{valor_buscado}}">
<input type="submit" value="Buscar">
</form>
-->
<div id="envoltorio-agregar-buscar">
<form method="get" action="" style="display: flex;">
<input type="text" name="area-buscar" value="{{valor_buscado}}">
<input class="boton" type="submit" value="Buscar">
</form>
<a id="enlace-agregar" href="{% url 'crear-tarea' %}">&#x2B;</a>
</div>
<div class="envoltorio-items-tarea">

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB