Merge pull request 'Arreglo UX: barra de búsqueda y redireccionamiento login/logout' (#16) from develop into master

Reviewed-on: #16

source/main/static/css/main.css

@@ -23,6 +23,10 @@
 	width: 100%;
 }
 
+.navbar-burger {
+  margin-left: 0;
+}
+
 /* Cada flecha en los títulos de secciones */
 .arrows {
   font-size: 1.5rem;
@@ -297,17 +301,35 @@ section#notice a {
 
 /* SEARCH */
 
+#search-form {
+  width: 80vw;
+  margin: auto auto auto 3rem;
+}
+
 .search-div > * {
   display: inline-block;
 }
 
 .search-div input {
   width: calc(100% - 4.1rem);
+  vertical-align: text-top;
 }
 
 .search-div button {
-  width: 3.8rem;
-  height: 3.8rem;
+  width: 2.9rem;
+  height: 2.9rem;
+}
+
+/* LOGIN / LOGOUT */
+
+#login-form {
+  width: 16rem;
+  margin: auto;
+  text-align: center;
+}
+
+#login-form > * {
+  margin-top: .5rem;
 }
 
 /* ICONS; cfr: https://css.gg */

source/main/views.py

@@ -44,3 +44,7 @@ def movie(request, id):
 def api(request):
     context = Movie.objects.api(request)
     return JsonResponse(context)
+
+
+def error_404(request, exception):
+    return render(request, "404.html")

source/mauflix/urls.py

@@ -17,4 +17,7 @@ urlpatterns = [
     path("movie/<int:id>", views.movie, name="movie"),
     path("ultimas/rss/", LatestMoviesFeed()),
     path("admin/", admin.site.urls),
+    path("user/", include("django.contrib.auth.urls")),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+
+handler404 = views.error_404

source/static/css/main.css

@@ -297,17 +297,26 @@ section#notice a {
 
 /* SEARCH */
 
+#search-form {
+  width: calc(100% - 7em);
+}
+
+.search-div {
+  margin-top: .5em;
+}
+
 .search-div > * {
   display: inline-block;
 }
 
 .search-div input {
   width: calc(100% - 4.1rem);
+  font-size: 1.25rem;
 }
 
 .search-div button {
-  width: 3.8rem;
-  height: 3.8rem;
+  width: 3.1rem;
+  height: 3.1rem;
 }
 
 /* ICONS; cfr: https://css.gg */

source/templates/404.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<section class="hero">
+  <div class="hero-body">
+    <p class="title"> ¡Ups! Página no encontrada.</p>
+  </div>
+</section>
+
+{% endblock %}

source/templates/nav.html

@@ -4,6 +4,11 @@
     <a class="navbar-item" href="{% url 'home' %}">
       <img src="{% static 'img/logo-mauflix.png' %}" width="112" height="28">
     </a>
+    {% if query %}
+      {% include 'search-bar.html' with query=query %}
+    {% else %}
+      {% include 'search-bar.html' %}
+    {% endif %}
     <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="menu">
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
@@ -12,30 +17,22 @@
   </div>
   <div id="menu" class="navbar-menu force-display">
     <div class="navbar-start">
-      {% if request.get_full_path != "/" %}
-        <a class="navbar-item" href="{% url 'home' %}">Inicio</a>
-      {% endif %}
-      {% if request.path != "/search/" %}
-        <a class="navbar-item" href="{% url 'search' %}">Buscar</a>
-      {% endif %}
       <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">Más</a>
         <div class="navbar-dropdown">
           <a class="navbar-item" href="{% url 'about' %}" >Acerca</a>
           <a class="navbar-item" href="{% url 'help' %}" >Ayuda</a>
-          <!--
           <hr class="navbar-divider">
+          {% if user.is_authenticated %}
+            <a class="navbar-item" href="{% url 'logout' %}?next={{ request.path }}">Salir</a>
+          {% else %}
+            <a class="navbar-item" href="{% url 'login' %}?next={{ request.path }}">Ingresa</a>
+          {% endif %}
+          <!--
           <a class="navbar-item" href="{% url 'bugs' %}">Reporta un problema</a>
           -->
         </div>
       </div>
     </div>
-    <div class="navbar-end">
-      <div class="navbar-item">
-        <div class="buttons">
-          <a class="button is-primary" href="{% url 'admin:index' %}">Ingresa</a>
-        </div>
-      </div>
-    </div>
   </div>
 </nav>

source/templates/registration/login.html

@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="hero full">
+  <div class="hero-body">
+    <form id="login-form" method="post">
+      {% csrf_token %}
+      <input class="input is-primary" placeholder="Usuario" type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
+      <input class="input is-primary" placeholder="Contraseña" type="password" name="password" autocomplete="current-password" required="" id="id_password">
+      <button class="button is-primary" type="submit">Ingresa</button>
+    </form>
+  </div>
+</div>
+{% endblock %}

source/templates/search-bar.html

@@ -0,0 +1,8 @@
+<form id="search-form" action="/search" method="get">
+  <div class="search-div">
+    <input id="search-bar" class="input is-primary" type="text" placeholder="Quiero ver…" value="{{ query }}" name="q">
+    <div class="control">
+      <button class="button is-primary"><i class="gg-search"></i></button>
+    </div>
+  </div>
+</form>

source/templates/search.html

@@ -2,17 +2,6 @@
 
 {% block content %}
 
-<div class="hero">
-  <form action="/search" method="get">
-    <div class="hero-body search-div">
-      <input id="search-bar" class="input is-primary is-large" type="text" placeholder="Quiero ver…" value="{{ query }}" name="q">
-      <div class="control">
-        <button class="button is-primary"><i class="gg-search"></i></button>
-      </div>
-    </div>
-  </form>
-</div>
-
 {% if movies %}
   {% include 'section.html' with section='Resultados de búsqueda.' content=movies %}
 {% else %}