Update day 16
Signed-off-by: Manuel Vergara <manuel@vergaracarmona.es>
This commit is contained in:
parent
f4e5dfcf3c
commit
c809ab1dac
@ -28,7 +28,7 @@ El código no está comentado pero veréis en este documento cada detalle, por e
|
|||||||
- [16.19. - Un estilo para todas las vistas](#1619---un-estilo-para-todas-las-vistas)
|
- [16.19. - Un estilo para todas las vistas](#1619---un-estilo-para-todas-las-vistas)
|
||||||
- [16.20. - Estilo general](#1620---estilo-general)
|
- [16.20. - Estilo general](#1620---estilo-general)
|
||||||
- [16.21. - Estilo de barra superiores](#1621---estilo-de-barra-superiores)
|
- [16.21. - Estilo de barra superiores](#1621---estilo-de-barra-superiores)
|
||||||
- [16.22. - estilo de la lista](#1622---estilo-de-la-lista)
|
- [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 cerca](#1623---estilo-de-la-barra-de-cerca)
|
||||||
- [16.24. - Terminar el sitio](#1624---terminar-el-sitio)
|
- [16.24. - Terminar el sitio](#1624---terminar-el-sitio)
|
||||||
- [Ficheros y documentación](#ficheros-y-documentación)
|
- [Ficheros y documentación](#ficheros-y-documentación)
|
||||||
@ -1090,7 +1090,120 @@ Ha cambiado alguna cosa del estilo anterior ;)
|
|||||||
![](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.giphy.com%2Fmedia%2FyYSSBtDgbbRzq%2F200.gif%3Fcid%3D790b76118yhtff6mmxhy9ojr6rdl947gsqlix11omo40cf9a%26rid%3D200.gif%26ct%3Dg&f=1&nofb=1&ipt=cdebe4ce51497641456ad4d87fced65575a7dc985aabade10e3fa770d1c476bd&ipo=images)
|
![](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.giphy.com%2Fmedia%2FyYSSBtDgbbRzq%2F200.gif%3Fcid%3D790b76118yhtff6mmxhy9ojr6rdl947gsqlix11omo40cf9a%26rid%3D200.gif%26ct%3Dg&f=1&nofb=1&ipt=cdebe4ce51497641456ad4d87fced65575a7dc985aabade10e3fa770d1c476bd&ipo=images)
|
||||||
|
|
||||||
|
|
||||||
## 16.22. - estilo de la lista
|
## 16.22. - Estilo de la lista
|
||||||
|
|
||||||
|
En tarea_list.html eliminamos el hr y el h1 de Lista de pendientes.
|
||||||
|
Por ahora comentamos el código del enlace de crear nueva tarea y del formulario de búsqueda.
|
||||||
|
Vamos así:
|
||||||
|
|
||||||
|
![](../img/dia16_44.png)
|
||||||
|
|
||||||
|
Ahora vamos a eliminar la tabla, pero antes vamos a ubicarlo en otro div con una nueva clase. Vamos a meter el loop for de la tareas, tan solo el principio y el final, con el empty. Dentro ponemos otro div con una nueva clase. Dentro añadimos las tareas completas con un if y otro div.
|
||||||
|
|
||||||
|
Por ahora, este código descrito es esto:
|
||||||
|
```html
|
||||||
|
<div class="envoltorio-items-tarea">
|
||||||
|
{% for tarea in tareas %}
|
||||||
|
<div class="envoltorio-tarea">
|
||||||
|
{% if tarea.completo %}
|
||||||
|
<div class="titulo-tarea">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% empty %}
|
||||||
|
<h3>No hay elementos en esta lista</h3>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Ahora, dentro del div con la clase titulo-tarea hacemos una estructura de divs en la que por ahora ponemos tareas completas con la url de la tarea en cursiva y tachado.
|
||||||
|
|
||||||
|
Tenemos este código:
|
||||||
|
```html
|
||||||
|
<div class="envoltorio-items-tarea">
|
||||||
|
{% for tarea in tareas %}
|
||||||
|
<div class="envoltorio-tarea">
|
||||||
|
{% if tarea.completo %}
|
||||||
|
<div class="titulo-tarea">
|
||||||
|
<div class="icono-tarea-completa">
|
||||||
|
</div>
|
||||||
|
<i><s><a href="{% url 'editar-tarea' tarea.id %}">{{tarea}}</a></s></i>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% empty %}
|
||||||
|
<h3>No hay elementos en esta lista</h3>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Y se ve esto:
|
||||||
|
|
||||||
|
![](../img/dia16_45.png)
|
||||||
|
|
||||||
|
Completamos con un else la tarea no completa, que será igual que la anterior pero cambiando la clase a incompleta y quitando la cursiva y el tachado:
|
||||||
|
```html
|
||||||
|
{% else %}
|
||||||
|
<div class="titulo-tarea">
|
||||||
|
<div class="icono-tarea-incompleta">
|
||||||
|
</div>
|
||||||
|
<a href="{% url 'editar-tarea' tarea.id %}">{{tarea}}</a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Ahora vamos a incluir el icono de un x para eliminar las tareas. Aprovechando el enlace que ya teníamos de eliminar tarea pero le vamos a dar clase al enlace y le añadimos el icono x de esta web: https://www.htmlsymbols.xyz/
|
||||||
|
|
||||||
|
Escogemos estas aspas: https://www.htmlsymbols.xyz/unicode/U+2A2F
|
||||||
|
|
||||||
|
Se tendrá que poner antes del endif y del else para que los dos tipos de tarea (completa|incompleta) tengan el aspa:
|
||||||
|
```html
|
||||||
|
<a class="enlace--eliminar" href="{% url 'eliminar-tarea' tarea.id %}">⨯</a>
|
||||||
|
```
|
||||||
|
Ahora ya podemos eliminar toda la tabla.
|
||||||
|
|
||||||
|
Vamos a darle estilo:
|
||||||
|
```css
|
||||||
|
.envoltorio-tarea {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 1px solid rgb(225,225,225);
|
||||||
|
}
|
||||||
|
.titulo-tarea {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.titulo-tarea a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #4B5156;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.icono-tarea-completa {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.icono-tarea-incompleta {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #FFC107;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.enlace-eliminar {
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #FF0000;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Queda así:
|
||||||
|
|
||||||
|
![](../img/dia16_46.png)
|
||||||
|
|
||||||
|
Verás que voy corrigiendo otros errores...
|
||||||
|
|
||||||
## 16.23. - Estilo de la barra de cerca
|
## 16.23. - Estilo de la barra de cerca
|
||||||
|
|
||||||
|
@ -47,6 +47,47 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.envoltorio-tarea {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 1px solid rgb(225,225,225);
|
||||||
|
}
|
||||||
|
|
||||||
|
.titulo-tarea {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titulo-tarea a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #4B5156;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icono-tarea-completa {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icono-tarea-incompleta {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #FFC107;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enlace-eliminar {
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #FF0000;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
@ -9,9 +9,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if request.user.is_authenticated %}
|
{% if request.user.is_authenticated %}
|
||||||
<p>
|
|
||||||
{{request.user}}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<a href="{% url 'logout' %}">Salir</a>
|
<a href="{% url 'logout' %}">Salir</a>
|
||||||
|
|
||||||
@ -23,11 +20,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr>
|
<!--
|
||||||
|
|
||||||
<h1>Lista de pendientes</h1>
|
|
||||||
|
|
||||||
|
|
||||||
<a href="{% url 'crear-tarea' %}">Crear nueva tarea</a>
|
<a href="{% url 'crear-tarea' %}">Crear nueva tarea</a>
|
||||||
|
|
||||||
<form method="get" action="">
|
<form method="get" action="">
|
||||||
@ -35,30 +28,48 @@
|
|||||||
<input type="text" name="area-buscar" value="{{valor_buscado}}">
|
<input type="text" name="area-buscar" value="{{valor_buscado}}">
|
||||||
<input type="submit" value="Buscar">
|
<input type="submit" value="Buscar">
|
||||||
</form>
|
</form>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div class="envoltorio-items-tarea">
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<th>Elementos</th>
|
|
||||||
<th></th>
|
|
||||||
<th></th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
{% for tarea in tareas %}
|
{% for tarea in tareas %}
|
||||||
|
|
||||||
<tr>
|
<div class="envoltorio-tarea">
|
||||||
<td>{{ tarea.titulo }}</td>
|
|
||||||
<td><a href="{% url 'editar-tarea' tarea.id %}">Editar</a></td>
|
{% if tarea.completo %}
|
||||||
<td><a href="{% url 'eliminar-tarea' tarea.id %}">Eliminar</a></td>
|
|
||||||
</tr>
|
<div class="titulo-tarea">
|
||||||
|
|
||||||
|
<div class="icono-tarea-completa">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<i><s><a href="{% url 'editar-tarea' tarea.id %}">{{tarea}}</a></s></i>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<a class="enlace-eliminar" href="{% url 'eliminar-tarea' tarea.id %}">⨯</a>
|
||||||
|
{% else %}
|
||||||
|
<div class="titulo-tarea">
|
||||||
|
|
||||||
|
<div class="icono-tarea-incompleta">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="{% url 'editar-tarea' tarea.id %}">{{tarea}}</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<a class="enlace-eliminar" href="{% url 'eliminar-tarea' tarea.id %}">⨯</a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
{% empty %}
|
{% empty %}
|
||||||
<h3>No hay elementos en esta lista</h3>
|
<h3>No hay elementos en esta lista</h3>
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
BIN
python-total/img/dia16_44.png
Normal file
BIN
python-total/img/dia16_44.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 59 KiB |
BIN
python-total/img/dia16_45.png
Normal file
BIN
python-total/img/dia16_45.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 66 KiB |
BIN
python-total/img/dia16_46.png
Normal file
BIN
python-total/img/dia16_46.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 59 KiB |
Loading…
Reference in New Issue
Block a user