diff --git a/python-total/dia_16/README.md b/python-total/dia_16/README.md index 842e35f..e4d1a62 100644 --- a/python-total/dia_16/README.md +++ b/python-total/dia_16/README.md @@ -1048,6 +1048,48 @@ Y por ahora queda así: ## 16.21. - Estilo de barra superiores +En tarea_list.html, añadimos un div al principio del "block content" con un h1 de saludo al usuario (El nombre se transforma con title, para que la primera letra sea mayúscula) y un h3 que muestre las tareas incompletas (Lo muestra en singular y en plural con {{count|pluralize}} ). Tendremos que añadir en el div el bloque de usuario que ya construimos. Queda así: +```html +
+
+

Hola {{request.user|title}}

+

Tienes {{count}} tarea{{count|pluralize}} incompleta{{count|pluralize}}

+
+ {% if request.user.is_authenticated %} +

+ {{request.user}} +

+ Salir + {% else %} + Iniciar sesión + {% endif %} +
+``` + +Ahora vamos a darle estilo en la página principal.html para que se aplique a la clase del div: +```html +.barra_superior { + display: flex; + justify-content: space-between; + color: #fff; + padding: 10px; + border-radius: 5px 5px 0 0; + background: linear-gradient(90deg, #1e7dcb 0%, #547482 65%, #77c2e2 100%); +} +.barra_superior a { + color: #fff; +} +``` + +Por ahora tenemos esto: + +![](../img/dia16_43.png) + +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) + + ## 16.22. - estilo de la lista ## 16.23. - Estilo de la barra de cerca diff --git a/python-total/dia_16/mi_web/src/proyecto/base/templates/base/principal.html b/python-total/dia_16/mi_web/src/proyecto/base/templates/base/principal.html index 53c9360..11729b3 100644 --- a/python-total/dia_16/mi_web/src/proyecto/base/templates/base/principal.html +++ b/python-total/dia_16/mi_web/src/proyecto/base/templates/base/principal.html @@ -21,7 +21,7 @@ background-color: #E1DFDE; -webkit-box-shadow: 2px 2px 13px -4px rgba(0,0,0,0.21); box-shadow: 2px 2px 13px -4px rgba(0,0,0,0.21); - padding: 30px; + border-radius: 10px 10px 0 0; } h1,h2,h3,h4,h5,h6 { @@ -34,6 +34,19 @@ color: #996E66; } + .barra_superior { + display: flex; + justify-content: space-between; + color: #fff; + padding: 10px; + border-radius: 10px 10px 0 0; + background: linear-gradient(90deg, #1e7dcb 0%, #547482 65%, #77c2e2 100%); + } + + .barra_superior a { + color: #fff; + } + diff --git a/python-total/dia_16/mi_web/src/proyecto/base/templates/base/tarea_list.html b/python-total/dia_16/mi_web/src/proyecto/base/templates/base/tarea_list.html index 9966cf9..1ca685c 100644 --- a/python-total/dia_16/mi_web/src/proyecto/base/templates/base/tarea_list.html +++ b/python-total/dia_16/mi_web/src/proyecto/base/templates/base/tarea_list.html @@ -2,17 +2,26 @@ {% block content %} -{% if request.user.is_authenticated %} +
+
+

Hola {{request.user|title}}

+

Tienes {{count}} tarea{{count|pluralize}} incompleta{{count|pluralize}}

+
+ + {% if request.user.is_authenticated %}

{{request.user}}

+ Salir -{% else %} + {% else %} Iniciar sesión -{% endif %} + {% endif %} + +

diff --git a/python-total/img/dia16_43.png b/python-total/img/dia16_43.png new file mode 100644 index 0000000..5256f59 Binary files /dev/null and b/python-total/img/dia16_43.png differ