Update day 16

Signed-off-by: Manuel Vergara <manuel@vergaracarmona.es>

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
+<div class="barra_superior">
+    <div>
+        <h1>Hola {{request.user|title}}</h1>
+        <h3 style="margin:0">Tienes <i>{{count}}</i> tarea{{count|pluralize}} incompleta{{count|pluralize}}</h3>
+    </div>
+    {% if request.user.is_authenticated %}
+    <p>
+        {{request.user}}
+    </p>
+    <a href="{% url 'logout' %}">Salir</a>
+    {% else %}
+    <a href="{% url 'login' %}">Iniciar sesión</a>
+    {% endif %}
+</div>
+```
+
+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

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;
+            }
+
         </style>
 
     </head>

python-total/dia_16/mi_web/src/proyecto/base/templates/base/tarea_list.html

@@ -2,10 +2,17 @@
 
 {% block content %}
 
+<div class="barra_superior">
+    <div>
+        <h1>Hola {{request.user|title}}</h1>
+        <h3 style="margin:0">Tienes <i>{{count}}</i> tarea{{count|pluralize}} incompleta{{count|pluralize}}</h3>
+    </div>
+
     {% if request.user.is_authenticated %}
     <p>
         {{request.user}}
     </p>
+
     <a href="{% url 'logout' %}">Salir</a>
 
     {% else %}
@@ -14,6 +21,8 @@
 
     {% endif %}
 
+</div>
+
 <hr>
 
 <h1>Lista de pendientes</h1>