Adición de más estilos
This commit is contained in:
parent
098cb26fd6
commit
2dabc4a09a
|
|
@ -5,3 +5,4 @@ psycopg2-binary
|
|||
httpx
|
||||
django-tastypie
|
||||
django-admin-list-filter-dropdown
|
||||
wikipedia-api
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
"Novedades": self.top_pick("id"),
|
||||
"Mejor valorados": self.top_random_pick("stars"),
|
||||
"Más descargados": self.top_pick("count"),
|
||||
"genders": {},
|
||||
sections = {
|
||||
"Novedades": self.fix_all_data(self.top_pick("id")),
|
||||
"Mejor valorados": self.fix_all_data(self.top_random_pick("stars")),
|
||||
"Más descargados": self.fix_all_data(self.top_pick("count")),
|
||||
}
|
||||
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):
|
||||
movie["count_formatted"] = self.set_count(movie["count"])
|
||||
movie["stars_icons"] = self.set_stars(movie["stars"])
|
||||
def fix_data(self, movie, wikipedia=True):
|
||||
movie["duration_formatted"] = self.format_duration(movie["duration"])
|
||||
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():
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
margin: 0 !important;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
width: auto;
|
||||
margin: 0 !important;
|
||||
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;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
height: 100%;
|
||||
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%;
|
||||
height: auto;
|
||||
display: block;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.toggle:checked ~ .info {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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: 104;
|
||||
z-index: 103;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 3em);
|
||||
}
|
||||
|
||||
.toggle:checked ~ label {
|
||||
z-index: 103;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* ICONS; cfr: https://css.gg */
|
||||
|
||||
.gg-time {
|
||||
box-sizing: border-box;
|
||||
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,
|
||||
.toggle:checked ~ label {
|
||||
position: fixed;
|
||||
top: calc(5vh + 1rem);
|
||||
right: calc(5vw + 1rem);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
.gg-time::after {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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="https://jenil.github.io/bulmaswatch/darkly/bulmaswatch.min.css">
|
||||
<link rel="stylesheet" href="{% static 'css/bulma.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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<span>{{ movie.duration }} min</span>
|
||||
<span>{{ movie.count_formatted }} descargas</span>
|
||||
<span class="stars">{{ movie.stars_icons }}</span>
|
||||
</p>
|
||||
{% if request.get_full_path != "/" %}
|
||||
<p class="stats">
|
||||
<span class="stars">{{ movie.stars_icons }}</span>
|
||||
<span><i class="gg-time"></i>{{ movie.duration_formatted }}</span>
|
||||
<span><i class="gg-software-download"></i>{{ movie.count_formatted }}</span>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="hero-body movie-body">
|
||||
<video controls>
|
||||
<source src="{{ movie.file_name }}" type="video/mp4">
|
||||
</video>
|
||||
{% if request.get_full_path == "/" %}
|
||||
<div class="stats">
|
||||
<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 %}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,8 @@
|
|||
{% for movie in content %}
|
||||
<div class="cartel">
|
||||
<input type="checkbox" class="toggle">
|
||||
<label for="checkbox">×</label>
|
||||
<div class="info-container">
|
||||
<div class="info">
|
||||
{% include 'info.html' with movie=movie %}
|
||||
</div>
|
||||
<div class="info">
|
||||
{% include 'info.html' with movie=movie %}
|
||||
</div>
|
||||
<figure class="image is-2by3">
|
||||
<img src="{{ movie.cartel }}">
|
||||
|
|
|
|||
Loading…
Reference in New Issue