Finalizando los estilos de la vista de detalle

Curso de Django Intermedio: Testing, Static Files, Django Admin

Bienvenida

Continuamos tu aprendizaje de Django

Testing

¿Qué son los tests?

Escribiendo nuestro primer test

Solucionando el error encontrado

Testing de Views

Creando más tests para IndexView

Ajustando detalles en los tests para IndexView

Creando tests para DetailView

Static Files

Agregando estilos a nuestro proyecto

Añadiendo una imagen de fondo

Django Admin

Mejorando el Admin: Questions

Mejorando el Admin: Change List

Bonus: ajustes finales

Comenzando a crear un Frontend

Añadiendo estilos al home de nuestra aplicación

Creando la estructura de la vista de detalle

Finalizando los estilos de la vista de detalle

Conclusiones

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 17

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Kenny Lazo

hace un año

Minuto 5:09 ✨ “Silencio incómodo, no voy a votar porque esto puede hacer que me despidan” ✨

David Geronimo Quiroga Torres

hace un año

Esta clase, estas clases, este curso. Son los mejores que hay en Platzi!! 💚😎

Spyderp

hace un año

Aporte del CSS de la clase. (agregue uno detalles para una mejora estética)

form {
    background: linear-gradient(
        to right,
        hsl(98, 100%, 62%),
        hsl(204, 100%,  59%)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
fieldset {
    align-items: center;
    border: 1px solid white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 40px;
}

input[type="submit"] {
    -webkit-text-fill-color: white;
    background-color: hsl(205, 100%, 5%);
    border: 1px solid white;
    font-size: 20px;
    height: 40px;
    margin-top: 20px;
    width: 100%;
    cursor: pointer;
}
input[type="submit"]:hover, input[type="submit"]:active {
    background: linear-gradient(
        to right,
        hsl(98, 100%, 62%),
        hsl(204, 100%,  59%)
    );
}

Karen Lorena Pineda Albarracín

hace un año

Este curso será el inicio de mi primer millón de dólares… Gracias Facundo!

Luis Kennedy Saavedra Fuentes

hace un año

results.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <link rel="stylesheet" href="{% static 'polls/results.css' %}">
    <title>Document</title>
</head>
<body>
    <header>
        <p>{{ question.question_text }}</p>
    </header>
    <ul>
        {% for choice in question.choice_set.all %}
            <li>{{ choice.choice_text }} &nbsp; | &nbsp; {{ choice.votes }} vote{{ choice.votes|pluralize:"s"}}</li>
        {% endfor %}
    </ul>    
    <a href="{% url 'polls:detail' question.id %}">Do you want to vote again?</a>
</body>
</html>

results.css

body{
    display: flex;
    align-items: center;
    justify-content: center;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 50px;
    padding-top: 100px;

    height: 60px;
    font-size: 62px;   
    color: #71632d;
}

main a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    font-size: 20px;
}

Miguel Ángel Reyes Moreno

hace 9 meses

Mis propios estilos:

Código HTML:

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{% static 'polls/reset.css' %}" />
    <link rel="stylesheet" href="{% static 'polls/style.css' %}" />
    <link rel="stylesheet" href="{% static 'polls/results.css' %}" />
    <title>{{ question.question_text }}</title>
  </head>
  <body>
    <h1 class="h1">{{ question.question_text }}</h1>
    <ul class="choices-list">
      {% for choice in question.choice_set.all %}
      <li>
        {{ choice.choice_text }} -- {{ choice.votes }}
        vote{{choice.votes|pluralize}}
      </li>
      {% endfor %}
    </ul>
    <a href="{% url 'polls:detail' question.id %}" class="vote-again"
      >Vote again?</a
    >
  </body>
</html>

código CSS:

.h1 {
  font-size: 2em;
  height: 15vh;
  margin-bottom: 50px;
  margin-top: 50px;
}

.choices-list {
  height: 85vh;
}

.choices-list li {
  font-size: 1.2em;
  margin: 50px 0;
  text-decoration: underline;
}

.vote-again {
  align-items: center;
  border-radius: 6px;
  border: 2px solid white;
  color: white;
  display: flex;
  height: 20vh;
  justify-content: center;
  padding: 0 10px;
  text-decoration: none;
}

.vote-again:hover {
  -webkit-animation: color-change-2x 2s linear infinite alternate both;
  animation: color-change-2x 2s linear infinite alternate both;
}

@-webkit-keyframes color-change-2x {
  0% {
    background: white;
    color: #4b6cb7;
  }

  100% {
    background: #4b6cb7;
    color: white;
  }
}

@keyframes color-change-2x {
  0% {
    background: #4b6cb7;
    color: white;
  }

  100% {
    background: white;
    color: #4b6cb7;
  }
}

Junior Peves

hace un año

Mi css de results:

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

#container {
    background: linear-gradient(
        to right,
        hsl(98, 100%, 62%),
        hsl(204, 100%,  59%)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
a{
    background: linear-gradient(
        to right,
        hsl(98, 100%, 62%),
        hsl(204, 100%,  59%)
    );
    outline: none;
    text-decoration: none;
    display: inline-block;
    width: 19.5%;
    margin-right: 0.625%;
    text-align: center;
    line-height: 2;
    -webkit-text-fill-color: black;
    border-radius: 10px;

Mauricio Gonzalez Falcon

hace 9 meses

Así me quedo 😄

Nicolas Velasquez Lopez

hace 3 meses

Seguí la misma plantilla y quedó algo talqueasí uwU

Mateo Paloma

hace 3 meses

Mi aporte

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

a{
    text-align: center;
    width: 20%;
    height: 30px;
    margin-top: 20px;

    background: linear-gradient(
        to right,
        hsl(98 100% 62%),
        hsl(204 100% 59%)
    );
    background-color: hsl(204 100% 5%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    border-bottom: 1px solid white;
    font-size: 20px;

}

Ángel Abad

hace un mes

Tremendo profesor, podría explicar hasta html y css perfectamente.

Ivek Martínez Herrera

hace 2 meses

Premoritorio el mensaje del 5:25, una pena un excelente tutor, hay pocos así que explican con una facilidad impresionante, muy ameno sus curso. gracias Facundo

Juan Agustin Di Pasquo

hace 6 meses

Mis ultimos toques

Agregue un link para volver al index view.
Cree un base.html para extenderlo en las otras views. Documentación aqui
Hice unos pequeños cambios al css para adaptarlo en dispositivos móviles.

💚Acepto feedback, gracias💚

Vistas en dispositivos moviles

Index view

Details view

Results view

base.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block stylesheet %}
        <link rel="stylesheet" href="{% static 'polls/reset.css' %}">
        <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    {% endblock stylesheet %}
    <title>{% block title %} Premios Platzi App {% endblock title %}</title>
</head>

<body>

    <div id="index">
        {% block index %}
        <a href="{% url 'polls:index' %}" referrerpolicy="origin">Ir al inicio </a>
        {% endblock %}
    </div>

    {% comment "Section content" %}section with the main content{% endcomment %}
    <section id="content">
        {% block content %}{% endblock %}
    </section>
    <footer>
        <a href="https://platzi.com">Platzi</a>
        <a href="#">Contacto</a>
        <a href="#">¿Quires ser profe?</a>
        <a href="#">Politica de Pirvacidad</a>
        <a href="#">Terminos y condiciones</a>
    </footer>
</body>
</html>

index.html

{% extends 'polls/base.html' %}
{% load static %}

<body>
    {% block content %}
    <header>
        <h1>Premios Platzi App</h1>
    </header>
    <main>
        {% if latest_question_list %}
            <ul>
                {% for question in latest_question_list %}
                <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
                {% endfor %}
            </ul>
            {% else %}
            <p>No polls are available.</p>
            {% endif %}
        </main>
    {% endblock content %}
</body>

detail.html

{% extends 'polls/base.html' %}
{% load static %}

<head>
    {% block stylesheet %}
        <link rel="stylesheet" href="{% static 'polls/style.css' %}">
        <link rel="stylesheet" href="{% static 'polls/detail.css' %}">
    {% endblock stylesheet %}
    <title>{% block title %} {{ question.question_text }} {% endblock title %}</title>
</head>
<body>
    {% block content %}
    <form action="{% url 'polls:vote' question.id %}" method="post">
        {% csrf_token %}
        <fieldset>
            <legend><h1>{{ question.question_text }}</h1></legend>
            {% if error_message %}
                <p><strong>{{ error_message }}</strong></p>
            {% endif %}
            {% for choice in question.choice_set.all %}
                <input 
                id="choice{{ forloop.counter }}"
                name="choice"
                type="radio"
                value="{{ choice.id }}"
                >
                <label for="choice{{ forloop.counter }}">
                    {{ choice.choice_text }}
                </label>
                <br>
            {% endfor %}
        </fieldset>
        <input name="vote" type="submit" value="votar">
    </form>
    {% endblock content %}
</body>

results.html

{% extends 'polls/base.html' %}
{% load static %}

<head>
    {% block stylesheet %}
        <link rel="stylesheet" href="{% static 'polls/style.css' %}">
        <link rel="stylesheet" href="{% static 'polls/result.css' %}">
    {% endblock stylesheet %}
    <title>{% block title %} {{ question.question_text }} {% endblock title %}</title>
</head>
<body>
    {% block content %}
    <header>
        <h1>{{ question.question_text }}</h1>
    </header>
    <ul>
        {% for choice in question.choice_set.all %}
        <li>
            {{ choice.choice_text }} -- {{ choice.votes }} vote{{choice.votes|pluralize }}
        </li>
        {% endfor %}
    </ul>
    <section id="vote_again">
        <a href="{% url 'polls:detail' question.id %}">¿Te gustaria votar de nuevo?</a>
    </section>
    {% endblock content %}
</body>

style.css

body {
    display: grid;
    grid-template-rows: [Index] 75px [Index-end] auto [Footer] auto [Footer-end];
    grid-column-gap: 10px;

    background-color: hsl(204, 100%, 5%);
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;

    padding-top: 100px;
    padding: 50px;

    color: #71632d;
    font-size: 72px;
    height: 60px;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    padding: 50px 2px;
    width: 100vw;
}

/* Index link*/
#index {
    background: linear-gradient(
        to right,
        hsl(204, 100%, 59%),
        hsl(98, 100%, 62%)
    );
    -webkit-background-clip: text;
    align-self: flex-start;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    padding: 25px 20px;
}

/* Mobile adaptatation 
with a 550px or less
*/
@media only screen and (max-width: 550px) {
    header {
        font-size: 50px
    }
    li {
        font-size: 4.9vw;
        width: 54.5vw;
    }

    footer {
        flex-direction: column;
        font-size: 3.8vw;
    }

    footer a {
        padding-top: 15px;
    }
}

results.css

header {
    font-size: 3.5vw;
}

#vote_again {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    
    padding: 15px 2px;
    width: 100vw;
    font-size: 23px; 
}

Alejandro Vargas

hace 8 meses

Así dejé el results.css

body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}

form {
    background: linear-gradient(
        to right,
        hsl(98 100% 62%),
        hsl(204 100% 59%)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

body h1 {
    color: white;
}

Jose Gerley Morales

hace 9 meses

En mi caso agregue los mismos estilos que se utilizaron para el index

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'polls/reset.css' %}">
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <title>{{question.question_text}}</title>
</head>
<body>
    <h1>{{question.question_text}}</h1>
    <ul>
        {% for choice in question.choice_set.all %}
            <li>{{choice.choice_text}}: {{choice.votes}} vote{{choice.votes|pluralize}}</li>
        {% endfor %}
    </ul>
    <a href="{% url 'polls:detail' question.id %}">Vota de nuevo aqui!</a>
</body>
</html>

dlimon

hace un año

Excelente

Carlos Felipe Saldarriaga Bejarano

hace un año

Trabajé también las visualizaciones de details y results con los estilos que creamos, funciona y es coherente a lo que creamos.
Les dejo el código y cómo se ve, mis disculpas si cometí alguna burrada de frontend. att: un Data Scientist haciendo su mejor esfuerzo 😅

Creating the structure of the details view

We still don’t have style for for details and results soo we have to make an specific style for them, that’s why we create an detail.css file

    form {
        background: linear-gradient(
            to right,
            hsl(98, 100%, 62%),
            hsl(204, 100%,  59%)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
    }
    
    h1 {
        font-size: 2em;
        font-weight: bold
    }
    
    fieldset {
        align-items: center;
        border: 1px solid white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 40px;
    }
    
    input[type="submit"] {
        -webkit-text-fill-color: white;
        background-color: hsl(205, 100%, 5%);
        border: 1px solid white;
        font-size: 20px;
        height: 40px;
        margin-top: 20px;
        width: 100%;
        cursor: pointer;
    }
    input[type="submit"]:hover, input[type="submit"]:active {
        background: linear-gradient(
            to right,
            hsl(98, 100%, 62%),
            hsl(204, 100%,  59%)
        );
    }

detail.html
Notice that we import the style.css and then the detail.css not the reset

    {% load static %}
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        **<link rel="stylesheet" href="{% static 'polls/style.css' %}">
        <link rel="stylesheet" href="{% static 'polls/detail.css' %}">**
        <title> {{question.question_text}} </title>
    </head>
    
    <body>
        <form action="{% url 'polls:vote' question.id %}" method="post">
        {% csrf_token %}
        <fieldset>
            <legend><h1>{{ question.question_text }}</h1></legend>
            {% if error_message %}
                <p><strong>{{ error_message }}</strong></p>
            {% endif %}
            {% for choice in question.choice_set.all %}
                <input 
                    type="radio"
                    name="choice"
                    id="choice{{ forloop.counter }}"
                    value="{{choice.id}}"
                >
                <label for="choice{{ forloop.counter }}">
                    {{choice.choice_text}}
                </label>
                <br>
            {% endfor %}
        </fieldset>
        <input type="submit" value="Votar">
        </form>
    </body>
    
    <!-- <h1>{{question.question_text}}</h1>
    <ul>
    {% for choice in question.choice_set.all %}
        <li>{{ choice.choice_text }}</li>
    {% endfor %}
    </ul> -->

results.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <link rel="stylesheet" href="{% static 'polls/detail.css' %}">
    <title>Resultados: {{question.question_text}}</title>
</head>

<body>
    <form> <!-- * i added this to correct an error of the h1 visualization 😅 */ -->
    <fieldset>
        <legend><h1>Resultados: {{ question.question_text }}</h1></legend>
        <ul>
        {% for choice in question.choice_set.all %}
            <li>{{ choice.choice_text }}: {{ choice.votes }} vote{{ choice.votes|pluralize}} </li>
        {% endfor %}
        </ul>
    <fieldset>
    </form>
    <a href="{% url 'polls:detail' question.id %}">¿Te gustaría votar de nuevo?</a>
</body>