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.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.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.24. - Terminar el sitio](#1624---terminar-el-sitio)
|
||||
- [Ficheros y documentación](#ficheros-y-documentación)
|
||||
@ -1090,7 +1090,120 @@ Ha cambiado alguna cosa del estilo anterior ;)
|
||||
|
||||
|
||||
|
||||
## 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í:
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
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í:
|
||||
|
||||
|
||||
|
||||
Verás que voy corrigiendo otros errores...
|
||||
|
||||
## 16.23. - Estilo de la barra de cerca
|
||||
|
||||
|
||||
@ -47,6 +47,47 @@
|
||||
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>
|
||||
|
||||
</head>
|
||||
|
||||
@ -9,9 +9,6 @@
|
||||
</div>
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
<p>
|
||||
{{request.user}}
|
||||
</p>
|
||||
|
||||
<a href="{% url 'logout' %}">Salir</a>
|
||||
|
||||
@ -23,42 +20,56 @@
|
||||
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Lista de pendientes</h1>
|
||||
|
||||
|
||||
<!--
|
||||
<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>
|
||||
</form>
|
||||
-->
|
||||
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Elementos</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<div class="envoltorio-items-tarea">
|
||||
|
||||
{% for tarea in tareas %}
|
||||
|
||||
<tr>
|
||||
<td>{{ tarea.titulo }}</td>
|
||||
<td><a href="{% url 'editar-tarea' tarea.id %}">Editar</a></td>
|
||||
<td><a href="{% url 'eliminar-tarea' tarea.id %}">Eliminar</a></td>
|
||||
</tr>
|
||||
<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>
|
||||
<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 %}
|
||||
<h3>No hay elementos en esta lista</h3>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% 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