Adición de más estilos

requirements.txt

@@ -5,3 +5,4 @@ psycopg2-binary
 httpx
 django-tastypie
 django-admin-list-filter-dropdown
+wikipedia-api

source/main/models.py

@@ -1,6 +1,8 @@
 import requests
 import shutil
 import random
+import time
+import wikipediaapi
 from django.conf import settings
 from django.db import models
 from pathlib import Path
@@ -72,7 +74,6 @@ class Person(models.Model):
 class MovieQuerySet(models.QuerySet):
     def random_pick(self, random_max=6, min_items=20, **kwargs):
         all = list(Movie.objects.filter(**kwargs).values())
-        all = self.fix_all_data(all)
         if len(all) < min_items:
             return None
         elif len(all) < random_max:
@@ -82,12 +83,10 @@ class MovieQuerySet(models.QuerySet):
 
     def top_pick(self, key, top_max=6):
         all = list(Movie.objects.order_by(f"-{key}").values())
-        all = self.fix_all_data(all)
         return all[:top_max]
 
     def top_random_pick(self, key, top_max=6):
         all = list(Movie.objects.order_by(f"-{key}").values())
-        all = self.fix_all_data(all)
         top = []
         for movie in all:
             if movie[key] == all[0][key]:
@@ -106,27 +105,31 @@ class MovieQuerySet(models.QuerySet):
             key = Gender.objects.get(pk=gender).name
             picked = self.random_pick(genders=gender)
             if picked:
-                sections["genders"][key] = picked
+                sections["genders"][key] = self.fix_all_data(picked)
         return sections
 
     def home_sections(self):
-        return {
+        sections = {
-            "Novedades": self.top_pick("id"),
+            "Novedades": self.fix_all_data(self.top_pick("id")),
-            "Mejor valorados": self.top_random_pick("stars"),
+            "Mejor valorados": self.fix_all_data(self.top_random_pick("stars")),
-            "Más descargados": self.top_pick("count"),
+            "Más descargados": self.fix_all_data(self.top_pick("count")),
-            "genders": {},
         }
+        sections['genders'] = {}
+        return sections
 
     def fix_all_data(self, movies):
         for movie in movies:
-            self.fix_data(movie)
+            self.fix_data(movie, wikipedia=False)
         return movies
 
-    def fix_data(self, movie):
+    def fix_data(self, movie, wikipedia=True):
-        movie["count_formatted"] = self.set_count(movie["count"])
+        movie["duration_formatted"] = self.format_duration(movie["duration"])
-        movie["stars_icons"] = self.set_stars(movie["stars"])
+        movie["count_formatted"] = self.format_count(movie["count"])
+        movie["stars_icons"] = self.format_stars(movie["stars"])
         movie["file_name"] = self.fix_path(movie["file_name"])
         movie["cartel"] = self.fix_path(movie["cartel"])
+        if wikipedia:
+            movie['wiki'] = self.get_wiki(movie)
 
     def fix_path(self, el):
         if settings.DEBUG:
@@ -134,22 +137,55 @@ class MovieQuerySet(models.QuerySet):
         else:
             return settings.MEDIA_ROOT / el
 
-    def set_stars(self, num):
+    def fix_summ(self, raw):
+        # TODO: quitar .reference
+        return raw
+
+    def format_stars(self, num):
         stars = "★" * num
         while len(stars) < 5:
             stars += "☆"
         return stars
 
-    def set_count(self, num):
+    def format_count(self, num):
         return "{:,}".format(num)
 
+    def format_duration(self, num):
+        secs = num * 60
+        return time.strftime("%H:%M", time.gmtime(secs))
+
+    def get_wiki(self, movie, again=True):
+        wiki = self.get_wiki_page(movie['original_name'])
+        if not wiki:
+             wiki = self.get_wiki_page(movie['name'])
+        return wiki
+        
+
+    def get_wiki_page(self, title):
+        try:
+            lang = settings.LANGUAGE_CODE.split('-')[0]
+            wiki = wikipediaapi.Wikipedia(lang, 
+                extract_format=wikipediaapi.ExtractFormat.HTML)
+            page = wiki.page(title)
+            if page.exists():
+                return {
+                    "title": page.title,
+                    "url": page.fullurl,
+                    "summary": self.fix_summ(page.summary),
+                }
+            else:
+                return None
+        except NameError:
+            return None
+
     def get_movie(self, id):
-        movie = Movie.objects.get(pk=id).__dict__
+        movie = Movie.objects.select_related().get(pk=id).__dict__
         movie.pop("_state")
         self.fix_data(movie)
         return movie
 
 
+
 def upload_cartel(instance, filename):
     first = filename[0].upper()
     if first.isdigit():

source/main/static/css/main.css

@@ -48,39 +48,39 @@
 
 @media screen and (min-width: 300px) {
   .cartels {
-    grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media screen and (min-width: 450px) {
   .cartels {
-    grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   }
 }
 
 @media screen and (min-width: 600px) {
   .cartels {
-    grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   }
 }
 
 @media screen and (min-width: 750px) {
   .cartels {
-    grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   }
 }
 
 @media screen and (min-width: 900px) {
   .cartels {
-    grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(6, 1fr);
   }
 }
 
 @media screen and (min-width: 1920px) {
   .cartels {
-    width: auto;
+  width: auto;
-    margin: 0 !important;
+  margin: 0 !important;
-    grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(6, 1fr);
   }
 }
 
@@ -99,14 +99,13 @@
   object-fit: cover;
 }
 
-.cartel .info-container {
+.cartel .info {
   display: none;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100vh;
+  height: 100%;
-  background-color: rgba(0,0,0,.5);
   z-index: 102;
 }
 
@@ -122,20 +121,23 @@
   padding: 2rem !important;
 }
 
+.full .movie-body {
+  padding: 0 2rem !important;
+  line-height: 2;
+}
+
 .movie-body video {
-  width: 100%;
+  display: block;
-  height: auto;
+  height: 100%;
+  width: auto;
+  margin: auto;
 }
 
 .info {
-  position: fixed;
-  width: 90%;
-  height: 90vh;
   background-color: var(--color-background);
-  z-index: 103;
 }
 
-.info .is-fullheight {
+.info .full {
   height: 100%;
   min-height: 100%;
 }
@@ -144,19 +146,53 @@
   padding-right: 2rem;
 }
 
+.stats i {
+  display: inline-block;
+  margin-right: .5rem;
+}
+
+.stats i.gg-time {
+  font-size: 1rem;
+}
+
 .stars {
   font-size: 1.5rem;
 }
 
+.about {
+  max-width: 70rem;
+  margin: auto;
+  margin-bottom: 2rem;
+}
+
+.about p + p {
+  margin-top: 1rem;
+}
+
+.about *:not(h2) + h2 {
+  margin-top: 1.5rem;
+}
+
+.infobox td:first-child {
+  text-align: right;
+  width: 8rem;
+}
+
+.about figure {
+  width: 50%;
+  height: auto;
+  max-width: 300px;
+  max-height: 450px;
+  margin: auto;
+}
+
 /* Despliegue de la ficha; Cfr: 
  * https://stackoverflow.com/questions/42177216/manipulate-css-class-without-javascript 
  * https://stackoverflow.com/questions/55858255/custom-checkbox-with-css-before-not-working-in-firefox-edge
  */
 
-.toggle:checked ~ .info-container {
+.toggle:checked ~ .info {
-  display: flex;
+  display: block;
-  align-items: center;
-  justify-content: center;
 }
 
 .toggle {
@@ -168,35 +204,118 @@
   cursor: pointer;
 }
 
-.toggle + label {
-  visibility: visible;
-  content: "";
-  display: none;
-  color: white;
-  text-align: center;
-  font-size: 3rem;
-  background: var(--color-background);
-  cursor: pointer;
-}
-
 .toggle:checked {
   display: block;
-  visibility: 0;
+  z-index: 103; 
-  z-index: 104; 
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: calc(100% - 3em);
 }
 
-.toggle:checked ~ label {
+/* ICONS; cfr: https://css.gg */
-  z-index: 103;
+
-  display: flex;
+.gg-time {
-  align-items: center;
+  box-sizing: border-box;
-  justify-content: center;
+  position: relative;
+  display: block;
+  transform: scale(var(--ggs,1));
+  width: 14px;
+  height: 14px;
+  border-radius: 100%;
+  border: 2px solid transparent;
+  box-shadow: 0 0 0 2px currentColor;
 }
 
-.toggle:checked,
+.gg-time::after {
-.toggle:checked ~ label {
+  content: "";
-  position: fixed;
+  display: block;
-  top: calc(5vh + 1rem);
+  box-sizing: border-box;
-  right: calc(5vw + 1rem);
+  position: absolute;
-  width: 2rem;
+  width: 6px;
-  height: 2rem;
+  height: 6px;
+  border-left: 2px solid;
+  border-bottom: 2px solid;
+  top: 0;
+  left: 4px;
+}
+
+.gg-software-download {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  transform: scale(var(--ggs,1));
+  width: 16px;
+  height: 6px;
+  border: 2px solid;
+  border-top: 0;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  margin-top: 8px
+}
+
+.gg-software-download::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-left: 2px solid;
+  border-bottom: 2px solid;
+  transform: rotate(-45deg);
+  left: 2px;
+  bottom: 4px
+}
+
+.gg-software-download::before {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  border-radius: 3px;
+  width: 2px;
+  height: 10px;
+  background: currentColor;
+  left: 5px;
+  bottom: 5px
+}
+
+.gg-link {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  transform: rotate(-45deg) scale(var(--ggs,1));
+  width: 8px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 4px
+}
+
+.gg-link::after,
+.gg-link::before {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  border-radius: 3px;
+  width: 8px;
+  height: 10px;
+  border: 2px solid;
+  top: -4px
+}
+
+.gg-link::before {
+  border-right: 0;
+  border-top-left-radius: 40px;
+  border-bottom-left-radius: 40px;
+  left: -6px
+}
+
+.gg-link::after {
+  border-left: 0;
+  border-top-right-radius: 40px;
+  border-bottom-right-radius: 40px;
+  right: -6px
 }

source/templates/base.html

@@ -6,8 +6,8 @@
   <title>MauFlix</title>
   {% load static %}
   <link rel="shortcut icon" href="{% static 'img/favicon.png' %}">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+  <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}">
-  <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/darkly/bulmaswatch.min.css">
+  <link rel="stylesheet" href="{% static 'css/bulma.darkly.min.css' %}">
   <link rel="stylesheet" href="{% static 'css/main.css' %}">
   <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
 </head>

source/templates/info.html

@@ -1,16 +1,77 @@
-<section class="hero {% if request.get_full_path == "/" %}is-fullheight{% else %}is-large{% endif%}">
+<section class="hero {% if request.get_full_path == "/" %}is-primary full{% else %}is-large{% endif%}">
   <div class="hero-head movie-head">
     <p class="title">{{ movie.name }}</p>
-    <p class="stats">
+    {% if request.get_full_path != "/" %}
-      <span>{{ movie.duration }} min</span>
+      <p class="stats">
-      <span>{{ movie.count_formatted }} descargas</span>
+        <span class="stars">{{ movie.stars_icons }}</span>
-      <span class="stars">{{ movie.stars_icons }}</span>
+        <span><i class="gg-time"></i>{{ movie.duration_formatted }}</span>
-    </p>
+        <span><i class="gg-software-download"></i>{{ movie.count_formatted }}</span>
+      </p>
+    {% endif %}
   </div>
   <div class="hero-body movie-body">
-    <video controls>
+    {% if request.get_full_path == "/" %}
-      <source src="{{ movie.file_name }}"  type="video/mp4">
+      <div class="stats">
-    </video>
+        <p class="stars">{{ movie.stars_icons }}</p>
+        <p><i class="gg-time"></i>{{ movie.duration_formatted }}</p>
+        <p><i class="gg-software-download"></i>{{ movie.count_formatted }}</p>
+      </div>
+    {% else %}
+      <div class="about">
+        <div class="columns is-desktop">
+          <div class="column">
+            <h2 class="subtitle">Cartel</h2>
+            <figure>
+              <img src="{{ movie.cartel }}">
+            </figure>
+          </div>
+          <div class="column">
+            <h2 class="subtitle">Ficha técnica</h2>
+            <table class="table is-fullwidth infobox">
+              <tbody>
+                <tr>
+                  <td>Título original</td>
+                  <td>{{ movie.original_name }}<td>
+                </tr>
+                <tr>
+                  <td>Año</td>
+                  <td>{{ movie.year }}<td>
+                </tr>
+                <tr>
+                  <td>País</td>
+                  <td>{{ movie.countries }}<td>
+                </tr>
+                <tr>
+                  <td>Duración</td>
+                  <td>{{ movie.duration }} min<td>
+                </tr>
+                <tr>
+                  <td>Dirección</td>
+                  <td>{{ movie.directors }}<td>
+                </tr>
+                <tr>
+                  <td>Reparto</td>
+                  <td>{{ movie.actors }}<td>
+                </tr>
+                <tr>
+                  <td>Género</td>
+                  <td>{{ movie.genders }}<td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        {% if movie.wiki.summary %}
+          <h2 class="subtitle">Sinopsis de <a href="{{ movie.wiki.url }}" target="_blank">Wikipedia</a></h2>
+          {{ movie.wiki.summary | safe }}
+        {% endif %}
+      </div>
+      {% if user.is_superuser %}
+        <video controls>
+          <source src="{{ movie.file_name }}"  type="video/mp4">
+        </video>
+      {% endif %}
+    {% endif %}
   </div>
   <div class="hero-foot">
     <nav class="tabs is-boxed is-fullwidth">
@@ -25,6 +86,3 @@
     </nav>
   </div>
 </section>
-{% if request.get_full_path != "/" %}
-  TODO: {{ movie }}
-{% endif %}

source/templates/section.html

@@ -5,11 +5,8 @@
       {% for movie in content %}
         <div class="cartel">
           <input type="checkbox" class="toggle">
-          <label for="checkbox">×</label>
+          <div class="info">
-          <div class="info-container">
+            {% include 'info.html' with movie=movie %}
-            <div class="info">
-              {% include 'info.html' with movie=movie %}
-            </div>
           </div>
           <figure class="image is-2by3">
             <img src="{{ movie.cartel }}">