Inicio de diseño

source/main/models.py

@@ -1,6 +1,9 @@
-
+import requests
+import shutil
+import random
 from django.conf import settings
 from django.db import models
+from pathlib import Path
 
 
 class Gender(models.Model):
@@ -8,10 +11,10 @@ class Gender(models.Model):
     name = models.CharField(max_length=250)
 
     class Meta:
-        unique_together = ['name']
+        unique_together = ["name"]
-        ordering = ['name']
+        ordering = ["name"]
-        verbose_name = 'Género'
+        verbose_name = "Género"
-        verbose_name_plural = 'Generos'
+        verbose_name_plural = "Generos"
 
     def __str__(self):
         return self.name
@@ -19,162 +22,167 @@ class Gender(models.Model):
 
 class Country(models.Model):
     id = models.AutoField(primary_key=True)
-    name = models.CharField(max_length=250, verbose_name='País')
+    name = models.CharField(max_length=250, verbose_name="País")
 
     class Meta:
-        unique_together = ['name']
+        unique_together = ["name"]
-        ordering = ['name']
+        ordering = ["name"]
-        verbose_name = 'País'
+        verbose_name = "País"
-        verbose_name_plural = 'Paises'
+        verbose_name_plural = "Paises"
 
     def __str__(self):
         return self.name
 
 
 class PersonQuerySet(models.QuerySet):
-
     def directors(self):
-        rows = self.filter(is_director=True).values_list('name', flat=True)
+        rows = self.filter(is_director=True).values_list("name", flat=True)
         return rows
 
     def actors(self):
-        rows = self.filter(is_actor=True).values_list('name', flat=True)
+        rows = self.filter(is_actor=True).values_list("name", flat=True)
         return rows
 
 
 class Person(models.Model):
     id = models.AutoField(primary_key=True)
-    name = models.CharField('Nombre',
+    name = models.CharField("Nombre", max_length=500)
-        max_length=500)
+    country = models.ForeignKey(
-    country = models.ForeignKey(Country,
+        Country, related_name="country", on_delete=models.PROTECT
-        related_name='country', on_delete=models.PROTECT)
+    )
-    date_born = models.DateField('Fecha de nacimiento',
+    date_born = models.DateField("Fecha de nacimiento", null=True, blank=True)
-        null=True, blank=True)
+    is_actor = models.BooleanField("Es Actor", default=False)
-    is_actor = models.BooleanField('Es Actor',
+    is_director = models.BooleanField("Es Director", default=False)
-        default=False)
+    is_woman = models.BooleanField("Es mujer", default=False)
-    is_director = models.BooleanField('Es Director',
+    photo = models.ImageField(
-        default=False)
+        "Fotografía", upload_to="%Y/%m/%d/", null=True, blank=True
-    is_woman = models.BooleanField('Es mujer',
+    )
-        default=False)
-    photo = models.ImageField('Fotografía', upload_to='%Y/%m/%d/',
-        null=True, blank=True)
     objects = PersonQuerySet.as_manager()
 
     class Meta:
-        unique_together = ['name']
+        unique_together = ["name"]
-        ordering = ['name']
+        ordering = ["name"]
-        verbose_name = 'Persona'
+        verbose_name = "Persona"
-        verbose_name_plural = 'Personas'
+        verbose_name_plural = "Personas"
 
     def __str__(self):
         return self.name
 
 
 class MovieQuerySet(models.QuerySet):
-
     def _to_str(self, q):
-        return ','.join([r.name for r in q.all()])
+        return ",".join([r.name for r in q.all()])
 
     def _to_link(self, file_name):
         # ~ folder = file_name[0].upper()
         # ~ if folder.isdigit():
-            # ~ folder = '0'
+        # ~ folder = '0'
         url = settings.URL_CDN.format(file_name)
         return url
 
-    def _to_image(self, img, director=''):
+    def _to_image(self, img, director=""):
-        data = ''
+        if settings.DEBUG:
-        if img:
+            path = Path(settings.BASE_DIR + img.url)
-            url = '../'
+            remote = settings.URL_CDN.format(img.url)
-            if director:
+            remote = remote.replace("/media/", "")
-                url = '../../'
+            if not path.exists():
-            data = url + img.url
+                if not path.parent.exists():
-        return data
+                    path.parent.mkdir()
+                res = requests.get(remote, stream=True)
+                if res.status_code == 200:
+                    with open(path, "wb") as f:
+                        shutil.copyfileobj(res.raw, f)
+        url = ""
+        if director:
+            url = "../../"
+        return url + img.url
 
-    def to_dict(self, query='', director='', id=0):
+    def random_pick (self, random_max = 5, **kwargs):
-        rows = self.all().order_by('-id')[:10]
+        all = list(Movie.objects.filter(**kwargs).values())
-        if query == 'all':
+        if len(all) > random_max:
-            rows = self.all()
+            return random.sample(all, random_max)
-        elif id:
-            rows = self.filter(id=id)
-            director = ' '
         else:
-            if director:
+            return all
-                rows = self.filter(directors__name__iexact=director)
-            elif query:
-                rows = self.filter(name__icontains=query)
 
-        movies = []
+    def top_pick (self, key, top_max = 5):
-        for row in rows:
+        all = list(Movie.objects.order_by(f'-{key}').values())
-            data = {}
+        return all[:top_max]
-            data['id'] = row.id
-            data['url'] = self._to_link(row.file_name)
-            data['name'] = row.name
-            data['year'] = row.year
-            data['original_name'] = row.original_name
-            data['duration'] = row.duration
-            data['director'] = self._to_str(row.directors)
-            data['country'] = self._to_str(row.countries)
-            data['count'] = row.count
-            data['image'] = self._to_image(row.cartel, director)
-            movies.append(data)
 
-        matrix = []
+    def top_random_pick(self, key, top_max = 5):
-        for i in range (0, len(movies), 4):
+        all = list(Movie.objects.order_by(f'-{key}').values())
-            matrix.append(movies[i:i+4])
+        top = []
-        return matrix
+        for movie in all:
+            if movie[key] == all[0][key]:
+                top.append(movie)
+            else:
+                break
+        if len(top) > top_max:
+            return random.sample(top, top_max)
+        else:
+            return top
+
+    def home_pick(self):
+        genders = list(Gender.objects.values_list('id', flat = True))
+        sections = {
+            'Novedades': self.top_pick('id'),
+            'Mejor valorados': self.top_random_pick('stars'),
+            'Más descargados': self.top_pick('count'),
+            'genders': {},
+        }
+        for gender in genders:
+            key = Gender.objects.get(pk=gender).name
+            sections['genders'][key] = self.random_pick(genders=gender)
+        return sections
 
     def get_directors(self):
-        data = self.distinct().values_list(
+        data = (
-            'directors__name', flat=True).order_by('directors')
+            self.distinct()
+            .values_list("directors__name", flat=True)
+            .order_by("directors")
+        )
         return data
 
 
 def upload_cartel(instance, filename):
     first = filename[0].upper()
     if first.isdigit():
-        first = '0'
+        first = "0"
-    return f'{first}/{filename}'
+    return f"{first}/{filename}"
 
 
 class Movie(models.Model):
     id = models.AutoField(primary_key=True)
-    name = models.CharField('Nombre',
+    name = models.CharField("Nombre", max_length=1000)
-        max_length=1000)
+    original_name = models.CharField(
-    original_name = models.CharField('Nombre original',
+        "Nombre original", max_length=1000, default="", blank=True
-        max_length=1000, default='', blank=True)
+    )
-    file_name = models.CharField('Nombre archivo',
+    file_name = models.CharField(
-        max_length=1000, default='', blank=True)
+        "Nombre archivo", max_length=1000, default="", blank=True
-    year = models.PositiveSmallIntegerField('Año',
+    )
-        default=1900)
+    year = models.PositiveSmallIntegerField("Año", default=1900)
-    duration = models.PositiveSmallIntegerField('Duración',
+    duration = models.PositiveSmallIntegerField("Duración", default=0)
-        default=0)
+    directors = models.ManyToManyField(
-    directors = models.ManyToManyField(Person, verbose_name='Director',
+        Person, verbose_name="Director", related_name="directors"
-        related_name='directors')
+    )
-    actors = models.ManyToManyField(Person,
+    actors = models.ManyToManyField(Person, related_name="actors", blank=True)
-        related_name='actors', blank=True)
+    countries = models.ManyToManyField(
-    countries = models.ManyToManyField(Country,
+        Country, related_name="countries", verbose_name="País", blank=True
-        related_name='countries', verbose_name='País', blank=True)
+    )
-    genders = models.ManyToManyField(Gender,
+    genders = models.ManyToManyField(
-        related_name='genders', verbose_name='Género', blank=True)
+        Gender, related_name="genders", verbose_name="Género", blank=True
-    cartel = models.ImageField('Cartel', upload_to=upload_cartel,
+    )
-        null=True, blank=True)
+    cartel = models.ImageField("Cartel", upload_to=upload_cartel, null=True, blank=True)
-    count = models.PositiveIntegerField('Descargas',
+    count = models.PositiveIntegerField("Descargas", default=0)
-        default=0)
+    stars = models.PositiveSmallIntegerField("Estrellas", default=0)
-    stars = models.PositiveSmallIntegerField('Estrellas',
+    published = models.BooleanField("¿Publicar?", default=True)
-        default=0)
+    is_digital = models.BooleanField("Es digital", default=False)
-    published = models.BooleanField('¿Publicar?',
-        default=True)
-    is_digital = models.BooleanField('Es digital',
-        default=False)
     objects = MovieQuerySet.as_manager()
 
     class Meta:
-        unique_together = ['name', 'original_name']
+        unique_together = ["name", "original_name"]
-        ordering = ['name']
+        ordering = ["name"]
-        verbose_name = 'Película'
+        verbose_name = "Película"
-        verbose_name_plural = 'Películas'
+        verbose_name_plural = "Películas"
 
     def __str__(self):
         return self.name
-

source/main/static/css/main.css

@@ -0,0 +1,4 @@
+.navbar.is-fixed-top {
+  position: sticky;
+  top: -1px;
+}

source/main/static/js/main.js

@@ -0,0 +1,16 @@
+// Para menú en móviles; cfr: https://bulma.io/documentation/components/navbar/#navbar-burger
+document.addEventListener('DOMContentLoaded', () => {
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+  // Add a click event on each of them
+  $navbarBurgers.forEach( el => {
+    el.addEventListener('click', () => {
+      // Get the target from the "data-target" attribute
+      const target = el.dataset.target;
+      const $target = document.getElementById(target);
+      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+      el.classList.toggle('is-active');
+      $target.classList.toggle('is-active');
+    });
+  });
+});

source/main/views.py

@@ -7,58 +7,9 @@ from .models import Movie, Person
 
 
 def home(request):
-    context = {}
+    context = {'sections': Movie.objects.home_pick()}
     return render(request, 'home.html', context)
 
-
+def search (request):
-def movies(request, args=''):
+    context = {}
-    if args:
+    return render(request, 'search.html', context)
-        try:
-            id = int(args)
-            return by_id(request, id)
-        except ValueError:
-            pass
-
-    count = 0
-    data = Movie.objects.to_dict(args.strip())
-    directors = Person.objects.directors()
-    if data:
-        count = (len(data) - 1) * 4 + (len(data[-1]))
-    context = {'movies': data, 'args': args, 'count': count,
-        'directors': directors, 'selected_director': ''}
-    return render(request, 'movies.html', context)
-
-
-def by_id(request, id):
-    count = 0
-    data = Movie.objects.to_dict(id=id)
-    directors = Person.objects.directors()
-    if data:
-        count = (len(data) - 1) * 4 + (len(data[-1]))
-    context = {'movies': data, 'args': id, 'count': count,
-        'directors': directors, 'selected_director': ''}
-    return render(request, 'movies.html', context)
-
-
-def by_director(request, name):
-    data = Movie.objects.to_dict(director=name)
-    directors = Person.objects.directors()
-    count = (len(data) - 1) * 4 + (len(data[-1]))
-    context = {'movies': data, 'args': 'by_director', 'count': count,
-        'directors': directors, 'selected_director': name}
-    return render(request, 'movies.html', context)
-
-
-def addcount(request, id):
-    response = ''
-    if id:
-        try:
-            movie = Movie.objects.get(id=id)
-            count = movie.count
-            movie.count = F('count') + 1
-            movie.save()
-            response = count + 1
-        except Movie.DoesNotExist:
-            pass
-
-    return HttpResponse(response)

source/mauflix/urls.py

@@ -18,12 +18,10 @@ v1_api.register(ResourceMovies())
 
 urlpatterns = [
     path('', views.home, name='home'),
-    path('movies/', views.movies, name='movies'),
+    path('search/', views.search, name='search'),
-    path('movies/<str:args>', views.movies, name='movies'),
+    #path('movies/<str:args>', views.movies, name='movies'),
-    path('movies/director/<str:name>', views.by_director, name='by_director'),
-    path('addcount/<int:id>/', views.addcount, name='addcount'),
     path('ultimas/rss/', LatestMoviesFeed()),
     path('admin/', admin.site.urls),
-    path('api/', include(v1_api.urls)),
+    #path('api/', include(v1_api.urls)),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 

source/static/admin/css/autocomplete.css

@@ -14,7 +14,7 @@ select.admin-autocomplete {
 
 .select2-container--admin-autocomplete.select2-container--focus .select2-selection,
 .select2-container--admin-autocomplete.select2-container--open .select2-selection {
-    border-color: #999;
+    border-color: var(--body-quiet-color);
     min-height: 30px;
 }
 
@@ -29,13 +29,13 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete .select2-selection--single {
-    background-color: #fff;
+    background-color: var(--body-bg);
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 4px;
 }
 
 .select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
-    color: #444;
+    color: var(--body-fg);
     line-height: 30px;
 }
 
@@ -46,7 +46,7 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete .select2-selection--single .select2-selection__placeholder {
-    color: #999;
+    color: var(--body-quiet-color);
 }
 
 .select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
@@ -80,7 +80,7 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single {
-    background-color: #eee;
+    background-color: var(--darkened-bg);
     cursor: default;
 }
 
@@ -94,8 +94,8 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete .select2-selection--multiple {
-    background-color: white;
+    background-color: var(--body-bg);
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 4px;
     cursor: text;
 }
@@ -104,8 +104,10 @@ select.admin-autocomplete {
     box-sizing: border-box;
     list-style: none;
     margin: 0;
-    padding: 0 5px;
+    padding: 0 10px 5px 5px;
     width: 100%;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered li {
@@ -113,7 +115,7 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__placeholder {
-    color: #999;
+    color: var(--body-quiet-color);
     margin-top: 5px;
     float: left;
 }
@@ -123,11 +125,13 @@ select.admin-autocomplete {
     float: right;
     font-weight: bold;
     margin: 5px;
+    position: absolute;
+    right: 0;
 }
 
 .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice {
-    background-color: #e4e4e4;
+    background-color: var(--darkened-bg);
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 4px;
     cursor: default;
     float: left;
@@ -137,7 +141,7 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove {
-    color: #999;
+    color: var(--body-quiet-color);
     cursor: pointer;
     display: inline-block;
     font-weight: bold;
@@ -145,7 +149,7 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove:hover {
-    color: #333;
+    color: var(--body-fg);
 }
 
 .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-search--inline {
@@ -163,12 +167,12 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete.select2-container--focus .select2-selection--multiple {
-    border: solid #999 1px;
+    border: solid var(--body-quiet-color) 1px;
     outline: 0;
 }
 
 .select2-container--admin-autocomplete.select2-container--disabled .select2-selection--multiple {
-    background-color: #eee;
+    background-color: var(--darkened-bg);
     cursor: default;
 }
 
@@ -186,12 +190,20 @@ select.admin-autocomplete {
     border-bottom-right-radius: 0;
 }
 
+.select2-container--admin-autocomplete .select2-search--dropdown {
+    background: var(--darkened-bg);
+}
+
 .select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
-    border: 1px solid #ccc;
+    background: var(--body-bg);
+    color: var(--body-fg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
 }
 
 .select2-container--admin-autocomplete .select2-search--inline .select2-search__field {
     background: transparent;
+    color: var(--body-fg);
     border: none;
     outline: 0;
     box-shadow: none;
@@ -201,6 +213,8 @@ select.admin-autocomplete {
 .select2-container--admin-autocomplete .select2-results > .select2-results__options {
     max-height: 200px;
     overflow-y: auto;
+    color: var(--body-fg);
+    background: var(--body-bg);
 }
 
 .select2-container--admin-autocomplete .select2-results__option[role=group] {
@@ -208,11 +222,12 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete .select2-results__option[aria-disabled=true] {
-    color: #999;
+    color: var(--body-quiet-color);
 }
 
 .select2-container--admin-autocomplete .select2-results__option[aria-selected=true] {
-    background-color: #ddd;
+    background-color: var(--selected-bg);
+    color: var(--body-fg);
 }
 
 .select2-container--admin-autocomplete .select2-results__option .select2-results__option {
@@ -249,8 +264,8 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
-    background-color: #79aec8;
+    background-color: var(--primary);
-    color: white;
+    color: var(--primary-fg);
 }
 
 .select2-container--admin-autocomplete .select2-results__group {

source/static/admin/css/base.css

@@ -4,6 +4,93 @@
 
 @import url(fonts.css);
 
+/* VARIABLE DEFINITIONS */
+:root {
+  --primary: #79aec8;
+  --secondary: #417690;
+  --accent: #f5dd5d;
+  --primary-fg: #fff;
+
+  --body-fg: #333;
+  --body-bg: #fff;
+  --body-quiet-color: #666;
+  --body-loud-color: #000;
+
+  --header-color: #ffc;
+  --header-branding-color: var(--accent);
+  --header-bg: var(--secondary);
+  --header-link-color: var(--primary-fg);
+
+  --breadcrumbs-fg: #c4dce8;
+  --breadcrumbs-link-fg: var(--body-bg);
+  --breadcrumbs-bg: var(--primary);
+
+  --link-fg: #447e9b;
+  --link-hover-color: #036;
+  --link-selected-fg: #5b80b2;
+
+  --hairline-color: #e8e8e8;
+  --border-color: #ccc;
+
+  --error-fg: #ba2121;
+
+  --message-success-bg: #dfd;
+  --message-warning-bg: #ffc;
+  --message-error-bg: #ffefef;
+
+  --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
+  --selected-bg: #e4e4e4; /* E.g. selected table cells */
+  --selected-row: #ffc;
+
+  --button-fg: #fff;
+  --button-bg: var(--primary);
+  --button-hover-bg: #609ab6;
+  --default-button-bg: var(--secondary);
+  --default-button-hover-bg: #205067;
+  --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
+  --close-button-hover-bg: #747474;
+  --delete-button-bg: #ba2121;
+  --delete-button-hover-bg: #a41515;
+
+  --object-tools-fg: var(--button-fg);
+  --object-tools-bg: var(--close-button-bg);
+  --object-tools-hover-bg: var(--close-button-hover-bg);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary: #264b5d;
+    --primary-fg: #eee;
+
+    --body-fg: #eeeeee;
+    --body-bg: #121212;
+    --body-quiet-color: #e0e0e0;
+    --body-loud-color: #ffffff;
+
+    --breadcrumbs-link-fg: #e0e0e0;
+    --breadcrumbs-bg: var(--primary);
+
+    --link-fg: #81d4fa;
+    --link-hover-color: #4ac1f7;
+    --link-selected-fg: #6f94c6;
+
+    --hairline-color: #272727;
+    --border-color: #353535;
+
+    --error-fg: #e35f5f;
+    --message-success-bg: #006b1b;
+    --message-warning-bg: #583305;
+    --message-error-bg: #570808;
+
+    --darkened-bg: #212121;
+    --selected-bg: #1b1b1b;
+    --selected-row: #00363a;
+
+    --close-button-bg: #333333;
+    --close-button-hover-bg: #666666;
+  }
+}
+
 html, body {
     height: 100%;
 }
@@ -13,19 +100,20 @@ body {
     padding: 0;
     font-size: 14px;
     font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
-    color: #333;
+    color: var(--body-fg);
-    background: #fff;
+    background: var(--body-bg);
 }
 
 /* LINKS */
 
 a:link, a:visited {
-    color: #447e9b;
+    color: var(--link-fg);
     text-decoration: none;
+    transition: color 0.15s, background 0.15s;
 }
 
 a:focus, a:hover {
-    color: #036;
+    color: var(--link-hover-color);
 }
 
 a:focus {
@@ -37,7 +125,7 @@ a img {
 }
 
 a.section:link, a.section:visited {
-    color: #fff;
+    color: var(--header-link-color);
     text-decoration: none;
 }
 
@@ -64,7 +152,7 @@ h1 {
     margin: 0 0 20px;
     font-weight: 300;
     font-size: 20px;
-    color: #666;
+    color: var(--body-quiet-color);
 }
 
 h2 {
@@ -80,7 +168,7 @@ h2.subhead {
 h3 {
     font-size: 14px;
     margin: .8em 0 .3em 0;
-    color: #666;
+    color: var(--body-quiet-color);
     font-weight: bold;
 }
 
@@ -93,7 +181,7 @@ h4 {
 h5 {
     font-size: 10px;
     margin: 1.5em 0 .5em 0;
-    color: #666;
+    color: var(--body-quiet-color);
     text-transform: uppercase;
     letter-spacing: 1px;
 }
@@ -131,7 +219,7 @@ fieldset {
     min-width: 0;
     padding: 0;
     border: none;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--hairline-color);
 }
 
 blockquote {
@@ -144,14 +232,14 @@ blockquote {
 
 code, pre {
     font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
-    color: #666;
+    color: var(--body-quiet-color);
     font-size: 12px;
     overflow-x: auto;
 }
 
 pre.literal-block {
     margin: 10px;
-    background: #eee;
+    background: var(--darkened-bg);
     padding: 6px 8px;
 }
 
@@ -161,8 +249,8 @@ code strong {
 
 hr {
     clear: both;
-    color: #eee;
+    color: var(--hairline-color);
-    background-color: #eee;
+    background-color: var(--hairline-color);
     height: 1px;
     border: none;
     margin: 0;
@@ -183,7 +271,7 @@ hr {
 
 .help, p.help, form p.help, div.help, form div.help, div.help li {
     font-size: 11px;
-    color: #999;
+    color: var(--body-quiet-color);
 }
 
 div.help ul {
@@ -199,7 +287,7 @@ p img, h1 img, h2 img, h3 img, h4 img, td img {
 }
 
 .quiet, a.quiet:link, a.quiet:visited {
-    color: #999;
+    color: var(--body-quiet-color);
     font-weight: normal;
 }
 
@@ -211,20 +299,23 @@ p img, h1 img, h2 img, h3 img, h4 img, td img {
     white-space: nowrap;
 }
 
+.hidden {
+    display: none;
+}
+
 /* TABLES */
 
 table {
     border-collapse: collapse;
-    border-color: #ccc;
+    border-color: var(--border-color);
 }
 
 td, th {
     font-size: 13px;
     line-height: 16px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--hairline-color);
     vertical-align: top;
     padding: 8px;
-    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
 }
 
 th {
@@ -234,37 +325,37 @@ th {
 
 thead th,
 tfoot td {
-    color: #666;
+    color: var(--body-quiet-color);
     padding: 5px 10px;
     font-size: 11px;
-    background: #fff;
+    background: var(--body-bg);
     border: none;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--hairline-color);
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--hairline-color);
 }
 
 tfoot td {
     border-bottom: none;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--hairline-color);
 }
 
 thead th.required {
-    color: #000;
+    color: var(--body-loud-color);
 }
 
 tr.alt {
-    background: #f6f6f6;
+    background: var(--darkened-bg);
 }
 
 tr:nth-child(odd), .row-form-errors {
-    background: #fff;
+    background: var(--body-bg);
 }
 
 tr:nth-child(even),
 tr:nth-child(even) .errorlist,
 tr:nth-child(odd) + .row-form-errors,
 tr:nth-child(odd) + .row-form-errors .errorlist {
-    background: #f9f9f9;
+    background: var(--darkened-bg);
 }
 
 /* SORTABLE TABLES */
@@ -273,15 +364,15 @@ thead th {
     padding: 5px 10px;
     line-height: normal;
     text-transform: uppercase;
-    background: #f6f6f6;
+    background: var(--darkened-bg);
 }
 
 thead th a:link, thead th a:visited {
-    color: #666;
+    color: var(--body-quiet-color);
 }
 
 thead th.sorted {
-    background: #eee;
+    background: var(--selected-bg);
 }
 
 thead th.sorted .text {
@@ -300,7 +391,7 @@ table thead th .text a {
 }
 
 table thead th .text a:focus, table thead th .text a:hover {
-    background: #eee;
+    background: var(--selected-bg);
 }
 
 thead th.sorted a.sortremove {
@@ -347,12 +438,12 @@ table thead th.sorted .sortoptions a.sortremove:after {
     left: 3px;
     font-weight: 200;
     font-size: 18px;
-    color: #999;
+    color: var(--body-quiet-color);
 }
 
 table thead th.sorted .sortoptions a.sortremove:focus:after,
 table thead th.sorted .sortoptions a.sortremove:hover:after {
-    color: #447e9b;
+    color: var(--link-fg);
 }
 
 table thead th.sorted .sortoptions a.sortremove:focus,
@@ -399,16 +490,18 @@ textarea {
 
 input[type=text], input[type=password], input[type=email], input[type=url],
 input[type=number], input[type=tel], textarea, select, .vTextField {
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 4px;
     padding: 5px 6px;
     margin-top: 0;
+    color: var(--body-fg);
+    background-color: var(--body-bg);
 }
 
 input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
 input[type=url]:focus, input[type=number]:focus, input[type=tel]:focus,
 textarea:focus, select:focus, .vTextField:focus {
-    border-color: #999;
+    border-color: var(--body-quiet-color);
 }
 
 select {
@@ -424,12 +517,13 @@ select[multiple] {
 /* FORM BUTTONS */
 
 .button, input[type=submit], input[type=button], .submit-row input, a.button {
-    background: #79aec8;
+    background: var(--button-bg);
     padding: 10px 15px;
     border: none;
     border-radius: 4px;
-    color: #fff;
+    color: var(--button-fg);
     cursor: pointer;
+    transition: background 0.15s;
 }
 
 a.button {
@@ -439,7 +533,7 @@ a.button {
 .button:active, input[type=submit]:active, input[type=button]:active,
 .button:focus, input[type=submit]:focus, input[type=button]:focus,
 .button:hover, input[type=submit]:hover, input[type=button]:hover {
-    background: #609ab6;
+    background: var(--button-hover-bg);
 }
 
 .button[disabled], input[type=submit][disabled], input[type=button][disabled] {
@@ -450,13 +544,13 @@ a.button {
     float: right;
     border: none;
     font-weight: 400;
-    background: #417690;
+    background: var(--default-button-bg);
 }
 
 .button.default:active, input[type=submit].default:active,
 .button.default:focus, input[type=submit].default:focus,
 .button.default:hover, input[type=submit].default:hover {
-    background: #205067;
+    background: var(--default-button-hover-bg);
 }
 
 .button[disabled].default,
@@ -471,7 +565,7 @@ input[type=button][disabled].default {
 .module {
     border: none;
     margin-bottom: 30px;
-    background: #fff;
+    background: var(--body-bg);
 }
 
 .module p, .module ul, .module h3, .module h4, .module dl, .module pre {
@@ -497,8 +591,8 @@ input[type=button][disabled].default {
     font-weight: 400;
     font-size: 13px;
     text-align: left;
-    background: #79aec8;
+    background: var(--primary);
-    color: #fff;
+    color: var(--header-link-color);
 }
 
 .module caption,
@@ -525,18 +619,18 @@ ul.messagelist li {
     font-size: 13px;
     padding: 10px 10px 10px 65px;
     margin: 0 0 10px 0;
-    background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
+    background: var(--message-success-bg) url(../img/icon-yes.svg) 40px 12px no-repeat;
     background-size: 16px auto;
-    color: #333;
+    color: var(--body-fg);
 }
 
 ul.messagelist li.warning {
-    background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat;
+    background: var(--message-warning-bg) url(../img/icon-alert.svg) 40px 14px no-repeat;
     background-size: 14px auto;
 }
 
 ul.messagelist li.error {
-    background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat;
+    background: var(--message-error-bg) url(../img/icon-no.svg) 40px 12px no-repeat;
     background-size: 16px auto;
 }
 
@@ -546,24 +640,26 @@ ul.messagelist li.error {
     display: block;
     padding: 10px 12px;
     margin: 0 0 10px 0;
-    color: #ba2121;
+    color: var(--error-fg);
-    border: 1px solid #ba2121;
+    border: 1px solid var(--error-fg);
     border-radius: 4px;
-    background-color: #fff;
+    background-color: var(--body-bg);
     background-position: 5px 12px;
+    overflow-wrap: break-word;
 }
 
 ul.errorlist {
     margin: 0 0 4px;
     padding: 0;
-    color: #ba2121;
+    color: var(--error-fg);
-    background: #fff;
+    background: var(--body-bg);
 }
 
 ul.errorlist li {
     font-size: 13px;
     display: block;
     margin-bottom: 4px;
+    overflow-wrap: break-word;
 }
 
 ul.errorlist li:first-child {
@@ -587,7 +683,7 @@ td ul.errorlist li {
 .form-row.errors {
     margin: 0;
     border: none;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--hairline-color);
     background: none;
 }
 
@@ -597,7 +693,7 @@ td ul.errorlist li {
 
 .errors input, .errors select, .errors textarea,
 td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
-    border: 1px solid #ba2121;
+    border: 1px solid var(--error-fg);
 }
 
 .description {
@@ -608,20 +704,19 @@ td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
 /* BREADCRUMBS */
 
 div.breadcrumbs {
-    background: #79aec8;
+    background: var(--breadcrumbs-bg);
     padding: 10px 40px;
     border: none;
-    font-size: 14px;
+    color: var(--breadcrumbs-fg);
-    color: #c4dce8;
     text-align: left;
 }
 
 div.breadcrumbs a {
-    color: #fff;
+    color: var(--breadcrumbs-link-fg);
 }
 
 div.breadcrumbs a:focus, div.breadcrumbs a:hover {
-    color: #c4dce8;
+    color: var(--breadcrumbs-fg);
 }
 
 /* ACTION ICONS */
@@ -647,11 +742,11 @@ div.breadcrumbs a:focus, div.breadcrumbs a:hover {
 }
 
 a.deletelink:link, a.deletelink:visited {
-    color: #CC3434;
+    color: #CC3434; /* XXX Probably unused? */
 }
 
 a.deletelink:focus, a.deletelink:hover {
-    color: #993333;
+    color: #993333; /* XXX Probably unused? */
     text-decoration: none;
 }
 
@@ -666,14 +761,6 @@ a.deletelink:focus, a.deletelink:hover {
     margin-top: -48px;
 }
 
-.form-row .object-tools {
-    margin-top: 5px;
-    margin-bottom: 5px;
-    float: none;
-    height: 2em;
-    padding-left: 3.5em;
-}
-
 .object-tools li {
     display: block;
     float: left;
@@ -689,29 +776,29 @@ a.deletelink:focus, a.deletelink:hover {
     display: block;
     float: left;
     padding: 3px 12px;
-    background: #999;
+    background: var(--object-tools-bg);
+    color: var(--object-tools-fg);
     font-weight: 400;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: #fff;
 }
 
 .object-tools a:focus, .object-tools a:hover {
-    background-color: #417690;
+    background-color: var(--object-tools-hover-bg);
 }
 
 .object-tools a:focus{
     text-decoration: none;
 }
 
-.object-tools a.viewsitelink, .object-tools a.golink,.object-tools a.addlink {
+.object-tools a.viewsitelink, .object-tools a.addlink {
     background-repeat: no-repeat;
     background-position: right 7px center;
     padding-right: 26px;
 }
 
-.object-tools a.viewsitelink, .object-tools a.golink {
+.object-tools a.viewsitelink {
     background-image: url(../img/tooltag-arrowright.svg);
 }
 
@@ -813,13 +900,13 @@ table#change-history tbody th {
     justify-content: space-between;
     align-items: center;
     padding: 10px 40px;
-    background: #417690;
+    background: var(--header-bg);
-    color: #ffc;
+    color: var(--header-color);
     overflow: hidden;
 }
 
 #header a:link, #header a:visited {
-    color: #fff;
+    color: var(--header-link-color);
 }
 
 #header a:focus , #header a:hover {
@@ -835,11 +922,11 @@ table#change-history tbody th {
     margin: 0 20px 0 0;
     font-weight: 300;
     font-size: 24px;
-    color: #f5dd5d;
+    color: var(--accent);
 }
 
 #branding h1, #branding h1 a:link, #branding h1 a:visited {
-    color: #f5dd5d;
+    color: var(--accent);
 }
 
 #branding h2 {
@@ -847,7 +934,7 @@ table#change-history tbody th {
     font-size: 14px;
     margin: -8px 0 8px 0;
     font-weight: normal;
-    color: #ffc;
+    color: var(--header-color);
 }
 
 #branding a:hover {
@@ -871,14 +958,14 @@ table#change-history tbody th {
 
 #user-tools a:focus, #user-tools a:hover {
     text-decoration: none;
-    border-bottom-color: #79aec8;
+    border-bottom-color: var(--primary);
-    color: #79aec8;
+    color: var(--primary);
 }
 
 /* SIDEBAR */
 
 #content-related {
-    background: #f8f8f8;
+    background: var(--darkened-bg);
 }
 
 #content-related .module {
@@ -886,8 +973,7 @@ table#change-history tbody th {
 }
 
 #content-related h3 {
-    font-size: 14px;
+    color: var(--body-quiet-color);
-    color: #666;
     padding: 0 16px;
     margin: 0 0 16px;
 }
@@ -916,22 +1002,22 @@ table#change-history tbody th {
     background: none;
     padding: 16px;
     margin-bottom: 16px;
-    border-bottom: 1px solid #eaeaea;
+    border-bottom: 1px solid var(--hairline-color);
     font-size: 18px;
-    color: #333;
+    color: var(--body-fg);
 }
 
 .delete-confirmation form input[type="submit"] {
-    background: #ba2121;
+    background: var(--delete-button-bg);
     border-radius: 4px;
     padding: 10px 15px;
-    color: #fff;
+    color: var(--button-fg);
 }
 
 .delete-confirmation form input[type="submit"]:active,
 .delete-confirmation form input[type="submit"]:focus,
 .delete-confirmation form input[type="submit"]:hover {
-    background: #a41515;
+    background: var(--delete-button-hover-bg);
 }
 
 .delete-confirmation form .cancel-link {
@@ -939,17 +1025,17 @@ table#change-history tbody th {
     vertical-align: middle;
     height: 15px;
     line-height: 15px;
-    background: #ddd;
     border-radius: 4px;
     padding: 10px 15px;
-    color: #333;
+    color: var(--button-fg);
+    background: var(--close-button-bg);
     margin: 0 0 0 10px;
 }
 
 .delete-confirmation form .cancel-link:active,
 .delete-confirmation form .cancel-link:focus,
 .delete-confirmation form .cancel-link:hover {
-    background: #ccc;
+    background: var(--close-button-hover-bg);
 }
 
 /* POPUP */

source/static/admin/css/changelists.css

@@ -40,13 +40,13 @@
 }
 
 #changelist .toplinks {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--hairline-color);
 }
 
 #changelist .paginator {
-    color: #666;
+    color: var(--body-quiet-color);
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--hairline-color);
-    background: #fff;
+    background: var(--body-bg);
     overflow: hidden;
 }
 
@@ -68,7 +68,7 @@
 }
 
 #changelist table tfoot {
-    color: #666;
+    color: var(--body-quiet-color);
 }
 
 /* TOOLBAR */
@@ -76,22 +76,22 @@
 #toolbar {
     padding: 8px 10px;
     margin-bottom: 15px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--hairline-color);
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--hairline-color);
-    background: #f8f8f8;
+    background: var(--darkened-bg);
-    color: #666;
+    color: var(--body-quiet-color);
 }
 
 #toolbar form input {
     border-radius: 4px;
     font-size: 14px;
     padding: 5px;
-    color: #333;
+    color: var(--body-fg);
 }
 
 #toolbar #searchbar {
     height: 19px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     padding: 2px 5px;
     margin: 0;
     vertical-align: top;
@@ -100,24 +100,24 @@
 }
 
 #toolbar #searchbar:focus {
-    border-color: #999;
+    border-color: var(--body-quiet-color);
 }
 
 #toolbar form input[type="submit"] {
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     font-size: 13px;
     padding: 4px 8px;
     margin: 0;
     vertical-align: middle;
-    background: #fff;
+    background: var(--body-bg);
     box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
     cursor: pointer;
-    color: #333;
+    color: var(--body-fg);
 }
 
 #toolbar form input[type="submit"]:focus,
 #toolbar form input[type="submit"]:hover {
-    border-color: #999;
+    border-color: var(--body-quiet-color);
 }
 
 #changelist-search img {
@@ -128,9 +128,9 @@
 /* FILTER COLUMN */
 
 #changelist-filter {
+    flex: 0 0 240px;
     order: 1;
-    width: 240px;
+    background: var(--darkened-bg);
-    background: #f8f8f8;
     border-left: none;
     margin: 0 0 0 30px;
 }
@@ -146,7 +146,6 @@
 
 #changelist-filter h3 {
     font-weight: 400;
-    font-size: 14px;
     padding: 0 15px;
     margin-bottom: 10px;
 }
@@ -154,7 +153,7 @@
 #changelist-filter ul {
     margin: 5px 0;
     padding: 0 15px 15px;
-    border-bottom: 1px solid #eaeaea;
+    border-bottom: 1px solid var(--hairline-color);
 }
 
 #changelist-filter ul:last-child {
@@ -169,31 +168,31 @@
 
 #changelist-filter a {
     display: block;
-    color: #999;
+    color: var(--body-quiet-color);
     text-overflow: ellipsis;
     overflow-x: hidden;
 }
 
 #changelist-filter li.selected {
-    border-left: 5px solid #eaeaea;
+    border-left: 5px solid var(--hairline-color);
     padding-left: 10px;
     margin-left: -15px;
 }
 
 #changelist-filter li.selected a {
-    color: #5b80b2;
+    color: var(--link-selected-fg);
 }
 
 #changelist-filter a:focus, #changelist-filter a:hover,
 #changelist-filter li.selected a:focus,
 #changelist-filter li.selected a:hover {
-    color: #036;
+    color: var(--link-hover-color);
 }
 
 #changelist-filter #changelist-filter-clear a {
     font-size: 13px;
     padding-bottom: 10px;
-    border-bottom: 1px solid #eaeaea;
+    border-bottom: 1px solid var(--hairline-color);
 }
 
 /* DATE DRILLDOWN */
@@ -214,12 +213,12 @@
 }
 
 .change-list ul.toplinks .date-back a {
-    color: #999;
+    color: var(--body-quiet-color);
 }
 
 .change-list ul.toplinks .date-back a:focus,
 .change-list ul.toplinks .date-back a:hover {
-    color: #036;
+    color: var(--link-hover-color);
 }
 
 /* PAGINATOR */
@@ -230,26 +229,26 @@
     padding-bottom: 10px;
     line-height: 22px;
     margin: 0;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--hairline-color);
     width: 100%;
 }
 
 .paginator a:link, .paginator a:visited {
     padding: 2px 6px;
-    background: #79aec8;
+    background: var(--button-bg);
     text-decoration: none;
-    color: #fff;
+    color: var(--button-fg);
 }
 
 .paginator a.showall {
     border: none;
     background: none;
-    color: #5b80b2;
+    color: var(--link-fg);
 }
 
 .paginator a.showall:focus, .paginator a.showall:hover {
     background: none;
-    color: #036;
+    color: var(--link-hover-color);
 }
 
 .paginator .end {
@@ -265,7 +264,7 @@
 
 .paginator a:focus, .paginator a:hover {
     color: white;
-    background: #036;
+    background: var(--link-hover-color);
 }
 
 /* ACTIONS */
@@ -280,22 +279,22 @@
 }
 
 #changelist table tbody tr.selected {
-    background-color: #FFFFCC;
+    background-color: var(--selected-row);
 }
 
 #changelist .actions {
     padding: 10px;
-    background: #fff;
+    background: var(--body-bg);
     border-top: none;
     border-bottom: none;
     line-height: 24px;
-    color: #999;
+    color: var(--body-quiet-color);
     width: 100%;
 }
 
-#changelist .actions.selected {
+#changelist .actions.selected { /* XXX Probably unused? */
-    background: #fffccf;
+    background: var(--body-bg);
-    border-top: 1px solid #fffee8;
+    border-top: 1px solid var(--body-bg);
     border-bottom: 1px solid #edecd6;
 }
 
@@ -305,7 +304,6 @@
 #changelist .actions span.question {
     font-size: 13px;
     margin: 0 0.5em;
-    display: none;
 }
 
 #changelist .actions:last-child {
@@ -315,9 +313,8 @@
 #changelist .actions select {
     vertical-align: top;
     height: 24px;
-    background: none;
+    color: var(--body-fg);
-    color: #000;
+    border: 1px solid var(--border-color);
-    border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 14px;
     padding: 0 0 0 4px;
@@ -326,7 +323,7 @@
 }
 
 #changelist .actions select:focus {
-    border-color: #999;
+    border-color: var(--body-quiet-color);
 }
 
 #changelist .actions label {
@@ -337,18 +334,18 @@
 
 #changelist .actions .button {
     font-size: 13px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 4px;
-    background: #fff;
+    background: var(--body-bg);
     box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
     cursor: pointer;
     height: 24px;
     line-height: 1;
     padding: 4px 8px;
     margin: 0;
-    color: #333;
+    color: var(--body-fg);
 }
 
 #changelist .actions .button:focus, #changelist .actions .button:hover {
-    border-color: #999;
+    border-color: var(--body-quiet-color);
 }

source/static/admin/css/forms.css

@@ -6,7 +6,7 @@
     overflow: hidden;
     padding: 10px;
     font-size: 13px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--hairline-color);
 }
 
 .form-row img, .form-row input {
@@ -22,21 +22,17 @@ form .form-row p {
     padding-left: 0;
 }
 
-.hidden {
-    display: none;
-}
-
 /* FORM LABELS */
 
 label {
     font-weight: normal;
-    color: #666;
+    color: var(--body-quiet-color);
     font-size: 13px;
 }
 
 .required label, label.required {
     font-weight: bold;
-    color: #333;
+    color: var(--body-fg);
 }
 
 /* RADIO BUTTONS */
@@ -219,24 +215,24 @@ fieldset.collapsed h2, fieldset.collapsed {
 }
 
 fieldset.collapsed {
-    border: 1px solid #eee;
+    border: 1px solid var(--hairline-color);
     border-radius: 4px;
     overflow: hidden;
 }
 
 fieldset.collapsed h2 {
-    background: #f8f8f8;
+    background: var(--darkened-bg);
-    color: #666;
+    color: var(--body-quiet-color);
 }
 
 fieldset .collapse-toggle {
-    color: #fff;
+    color: var(--header-link-color);
 }
 
 fieldset.collapsed .collapse-toggle {
     background: transparent;
     display: inline;
-    color: #447e9b;
+    color: var(--link-fg);
 }
 
 /* MONOSPACE TEXTAREAS */
@@ -250,8 +246,8 @@ fieldset.monospace textarea {
 .submit-row {
     padding: 12px 14px;
     margin: 0 0 20px;
-    background: #f8f8f8;
+    background: var(--darkened-bg);
-    border: 1px solid #eee;
+    border: 1px solid var(--hairline-color);
     border-radius: 4px;
     text-align: right;
     overflow: hidden;
@@ -283,35 +279,35 @@ body.popup .submit-row {
 
 .submit-row a.deletelink {
     display: block;
-    background: #ba2121;
+    background: var(--delete-button-bg);
     border-radius: 4px;
     padding: 10px 15px;
     height: 15px;
     line-height: 15px;
-    color: #fff;
+    color: var(--button-fg);
 }
 
 .submit-row a.closelink {
     display: inline-block;
-    background: #bbbbbb;
+    background: var(--close-button-bg);
     border-radius: 4px;
     padding: 10px 15px;
     height: 15px;
     line-height: 15px;
     margin: 0 0 0 5px;
-    color: #fff;
+    color: var(--button-fg);
 }
 
 .submit-row a.deletelink:focus,
 .submit-row a.deletelink:hover,
 .submit-row a.deletelink:active {
-    background: #a41515;
+    background: var(--delete-button-hover-bg);
 }
 
 .submit-row a.closelink:focus,
 .submit-row a.closelink:hover,
 .submit-row a.closelink:active {
-    background: #aaaaaa;
+    background: var(--close-button-hover-bg);
 }
 
 /* CUSTOM FORM FIELDS */
@@ -390,12 +386,12 @@ body.popup .submit-row {
 
 .inline-related h3 {
     margin: 0;
-    color: #666;
+    color: var(--body-quiet-color);
     padding: 5px;
     font-size: 13px;
-    background: #f8f8f8;
+    background: var(--darkened-bg);
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--hairline-color);
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--hairline-color);
 }
 
 .inline-related h3 span.delete {
@@ -409,7 +405,7 @@ body.popup .submit-row {
 
 .inline-related fieldset {
     margin: 0;
-    background: #fff;
+    background: var(--body-bg);
     border: none;
     width: 100%;
 }
@@ -421,7 +417,7 @@ body.popup .submit-row {
     text-align: left;
     font-weight: bold;
     background: #bcd;
-    color: #fff;
+    color: var(--body-bg);
 }
 
 .inline-group .tabular fieldset.module {
@@ -460,7 +456,7 @@ body.popup .submit-row {
     overflow: hidden;
     font-size: 9px;
     font-weight: bold;
-    color: #666;
+    color: var(--body-quiet-color);
     _width: 700px;
 }
 
@@ -477,15 +473,15 @@ body.popup .submit-row {
 
 .inline-group div.add-row,
 .inline-group .tabular tr.add-row td {
-    color: #666;
+    color: var(--body-quiet-color);
-    background: #f8f8f8;
+    background: var(--darkened-bg);
     padding: 8px 10px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--hairline-color);
 }
 
 .inline-group .tabular tr.add-row td {
     padding: 8px 10px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--hairline-color);
 }
 
 .inline-group ul.tools a.add,

source/static/admin/css/login.css

@@ -1,7 +1,7 @@
 /* LOGIN FORM */
 
 .login {
-    background: #f8f8f8;
+    background: var(--darkened-bg);
     height: auto;
 }
 
@@ -16,7 +16,7 @@
 }
 
 .login #header h1 a {
-    color: #fff;
+    color: var(--header-link-color);
 }
 
 .login #content {
@@ -24,8 +24,8 @@
 }
 
 .login #container {
-    background: #fff;
+    background: var(--body-bg);
-    border: 1px solid #eaeaea;
+    border: 1px solid var(--hairline-color);
     border-radius: 4px;
     overflow: hidden;
     width: 28em;
@@ -34,44 +34,25 @@
     height: auto;
 }
 
-.login #content-main {
-    width: 100%;
-}
-
 .login .form-row {
     padding: 4px 0;
-    float: left;
-    width: 100%;
-    border-bottom: none;
 }
 
 .login .form-row label {
-    padding-right: 0.5em;
+    display: block;
     line-height: 2em;
-    font-size: 1em;
-    clear: both;
-    color: #333;
 }
 
 .login .form-row #id_username, .login .form-row #id_password {
-    clear: both;
     padding: 8px;
     width: 100%;
     box-sizing: border-box;
 }
 
-.login span.help {
-    font-size: 10px;
-    display: block;
-}
-
 .login .submit-row {
-    clear: both;
+    padding: 1em 0 0 0;
-    padding: 1em 0 0 9.4em;
     margin: 0;
-    border: none;
+    text-align: center;
-    background: none;
-    text-align: left;
 }
 
 .login .password-reset-link {

source/static/admin/css/nav_sidebar.css

@@ -12,22 +12,23 @@
     justify-content: center;
     flex: 0 0 23px;
     width: 23px;
-    border-right: 1px solid #eaeaea;
+    border: 0;
-    background-color: #ffffff;
+    border-right: 1px solid var(--hairline-color);
+    background-color: var(--body-bg);
     cursor: pointer;
     font-size: 20px;
-    color: #447e9b;
+    color: var(--link-fg);
     padding: 0;
 }
 
 [dir="rtl"] .toggle-nav-sidebar {
-    border-left: 1px solid #eaeaea;
+    border-left: 1px solid var(--hairline-color);
     border-right: 0;
 }
 
 .toggle-nav-sidebar:hover,
 .toggle-nav-sidebar:focus {
-    background-color: #f6f6f6;
+    background-color: var(--darkened-bg);
 }
 
 #nav-sidebar {
@@ -36,13 +37,13 @@
     left: -276px;
     margin-left: -276px;
     border-top: 1px solid transparent;
-    border-right: 1px solid #eaeaea;
+    border-right: 1px solid var(--hairline-color);
-    background-color: #ffffff;
+    background-color: var(--body-bg);
     overflow: auto;
 }
 
 [dir="rtl"] #nav-sidebar {
-    border-left: 1px solid #eaeaea;
+    border-left: 1px solid var(--hairline-color);
     border-right: 0;
     left: 0;
     margin-left: 0;
@@ -91,12 +92,12 @@
 
 #nav-sidebar .current-app .section:link,
 #nav-sidebar .current-app .section:visited {
-    color: #ffc;
+    color: var(--header-color);
     font-weight: bold;
 }
 
 #nav-sidebar .current-model {
-    background: #ffc;
+    background: var(--selected-row);
 }
 
 .main > #nav-sidebar + .content {

source/static/admin/css/responsive.css

@@ -140,7 +140,7 @@ input[type="submit"], button {
     }
 
     #changelist .actions select {
-        background: #fff;
+        background: var(--body-bg);
     }
 
     #changelist .actions .button {
@@ -157,7 +157,7 @@ input[type="submit"], button {
     }
 
     #changelist-filter {
-        width: 200px;
+        flex-basis: 200px;
     }
 
     .change-list .filtered .results,
@@ -166,7 +166,7 @@ input[type="submit"], button {
     .filtered .actions,
 
     #changelist .paginator {
-        border-top-color: #eee;
+        border-top-color: var(--hairline-color); /* XXX Is this used at all? */
     }
 
     #changelist .results + .paginator {
@@ -213,7 +213,7 @@ input[type="submit"], button {
     fieldset .fieldBox + .fieldBox {
         margin-top: 10px;
         padding-top: 10px;
-        border-top: 1px solid #eee;
+        border-top: 1px solid var(--hairline-color);
     }
 
     textarea {
@@ -399,11 +399,11 @@ input[type="submit"], button {
     .datetime .timezonewarning {
         display: block;
         font-size: 11px;
-        color: #999;
+        color: var(--body-quiet-color);
     }
 
     .datetimeshortcuts {
-        color: #ccc;
+        color: var(--border-color); /* XXX Redundant, .datetime span also sets #ccc */
     }
 
     .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
@@ -655,7 +655,7 @@ input[type="submit"], button {
         margin-bottom: -3px;
     }
 
-    form .aligned ul.radiolist li + li {
+    form .aligned ul.radiolist:not(.inline) li + li {
         margin-top: 5px;
     }
 
@@ -740,7 +740,7 @@ input[type="submit"], button {
     /* Inlines */
 
     .inline-group[data-inline-type="stacked"] .inline-related {
-        border: 2px solid #eee;
+        border: 1px solid var(--hairline-color);
         border-radius: 4px;
         margin-top: 15px;
         overflow: auto;
@@ -750,18 +750,19 @@ input[type="submit"], button {
         box-sizing: border-box;
     }
 
-    .inline-group[data-inline-type="stacked"] .inline-related + .inline-related {
-        margin-top: 30px;
-    }
-
     .inline-group[data-inline-type="stacked"] .inline-related .module {
         padding: 0 10px;
     }
 
-    .inline-group[data-inline-type="stacked"] .inline-related .module .form-row:last-child {
+    .inline-group[data-inline-type="stacked"] .inline-related .module .form-row {
+        border-top: 1px solid var(--hairline-color);
         border-bottom: none;
     }
 
+    .inline-group[data-inline-type="stacked"] .inline-related .module .form-row:first-child {
+        border-top: none;
+    }
+
     .inline-group[data-inline-type="stacked"] .inline-related h3 {
         padding: 10px;
         border-top-width: 0;
@@ -791,7 +792,7 @@ input[type="submit"], button {
 
     .inline-group[data-inline-type="stacked"] div.add-row {
         margin-top: 15px;
-        border: 1px solid #eee;
+        border: 1px solid var(--hairline-color);
         border-radius: 4px;
     }
 
@@ -885,9 +886,7 @@ input[type="submit"], button {
     }
 
     .login .form-row label {
-        display: block;
         margin: 0 0 5px;
-        padding: 0;
         line-height: 1.2;
     }
 
@@ -895,7 +894,7 @@ input[type="submit"], button {
         padding: 15px 0 0;
     }
 
-    .login br, .login .submit-row label {
+    .login br {
         display: none;
     }
 
@@ -963,7 +962,7 @@ input[type="submit"], button {
     }
 
     .timelist a {
-        background: #fff;
+        background: var(--body-bg);
         padding: 4px;
     }
 

source/static/admin/css/rtl.css

@@ -1,25 +1,3 @@
-body {
-    direction: rtl;
-}
-
-/* LOGIN */
-
-.login .form-row {
-    float: right;
-}
-
-.login .form-row label {
-    float: right;
-    padding-left: 0.5em;
-    padding-right: 0;
-    text-align: left;
-}
-
-.login .submit-row {
-    clear: both;
-    padding: 1em 9.4em 0 0;
-}
-
 /* GLOBAL */
 
 th {
@@ -119,7 +97,7 @@ thead th.sorted .text {
     border-left: none;
     padding-left: 10px;
     margin-left: 0;
-    border-right: 5px solid #eaeaea;
+    border-right: 5px solid var(--hairline-color);
     padding-right: 10px;
     margin-right: -15px;
 }

source/static/admin/css/widgets.css

@@ -22,26 +22,25 @@
 }
 
 .selector-available h2, .selector-chosen h2 {
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 4px 4px 0 0;
 }
 
 .selector-chosen h2 {
-    background: #79aec8;
+    background: var(--primary);
-    color: #fff;
+    color: var(--header-link-color);
 }
 
 .selector .selector-available h2 {
-    background: #f8f8f8;
+    background: var(--darkened-bg);
-    color: #666;
+    color: var(--body-quiet-color);
 }
 
 .selector .selector-filter {
-    background: white;
+    border: 1px solid var(--border-color);
-    border: 1px solid #ccc;
     border-width: 0 1px;
     padding: 8px;
-    color: #999;
+    color: var(--body-quiet-color);
     font-size: 10px;
     margin: 0;
     text-align: left;
@@ -66,7 +65,7 @@
 .selector ul.selector-chooser {
     float: left;
     width: 22px;
-    background-color: #eee;
+    background-color: var(--selected-bg);
     border-radius: 10px;
     margin: 10em 5px 0 5px;
     padding: 0;
@@ -91,7 +90,7 @@
     text-indent: -3000px;
     overflow: hidden;
     cursor: default;
-    opacity: 0.3;
+    opacity: 0.55;
 }
 
 .active.selector-add, .active.selector-remove {
@@ -126,14 +125,14 @@ a.selector-chooseall, a.selector-clearall {
     overflow: hidden;
     font-weight: bold;
     line-height: 16px;
-    color: #666;
+    color: var(--body-quiet-color);
     text-decoration: none;
-    opacity: 0.3;
+    opacity: 0.55;
 }
 
 a.active.selector-chooseall:focus, a.active.selector-clearall:focus,
 a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
-    color: #447e9b;
+    color: var(--link-fg);
 }
 
 a.active.selector-chooseall, a.active.selector-clearall {
@@ -261,7 +260,7 @@ p.datetime {
     line-height: 20px;
     margin: 0;
     padding: 0;
-    color: #666;
+    color: var(--body-quiet-color);
     font-weight: bold;
 }
 
@@ -269,7 +268,7 @@ p.datetime {
     white-space: nowrap;
     font-weight: normal;
     font-size: 11px;
-    color: #ccc;
+    color: var(--body-quiet-color);
 }
 
 .datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
@@ -313,7 +312,7 @@ table p.datetime {
 
 .timezonewarning {
     font-size: 11px;
-    color: #999;
+    color: var(--body-quiet-color);
 }
 
 /* URL */
@@ -322,7 +321,7 @@ p.url {
     line-height: 20px;
     margin: 0;
     padding: 0;
-    color: #666;
+    color: var(--body-quiet-color);
     font-size: 11px;
     font-weight: bold;
 }
@@ -337,7 +336,7 @@ p.file-upload {
     line-height: 20px;
     margin: 0;
     padding: 0;
-    color: #666;
+    color: var(--body-quiet-color);
     font-size: 11px;
     font-weight: bold;
 }
@@ -355,7 +354,7 @@ p.file-upload {
 }
 
 span.clearable-file-input label {
-    color: #333;
+    color: var(--body-fg);
     font-size: 11px;
     display: inline;
     float: none;
@@ -368,8 +367,9 @@ span.clearable-file-input label {
     font-size: 12px;
     width: 19em;
     text-align: center;
-    background: white;
+    background: var(--body-bg);
-    border: 1px solid #ddd;
+    color: var(--body-fg);
+    border: 1px solid var(--hairline-color);
     border-radius: 4px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
     overflow: hidden;
@@ -397,20 +397,20 @@ span.clearable-file-input label {
     margin: 0;
     text-align: center;
     border-top: none;
-    background: #f5dd5d;
     font-weight: 700;
     font-size: 12px;
     color: #333;
+    background: var(--accent);
 }
 
 .calendar th {
     padding: 8px 5px;
-    background: #f8f8f8;
+    background: var(--darkened-bg);
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--border-color);
     font-weight: 400;
     font-size: 12px;
     text-align: center;
-    color: #666;
+    color: var(--body-quiet-color);
 }
 
 .calendar td {
@@ -418,17 +418,17 @@ span.clearable-file-input label {
     font-size: 12px;
     text-align: center;
     padding: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--hairline-color);
     border-bottom: none;
 }
 
 .calendar td.selected a {
-    background: #79aec8;
+    background: var(--primary);
-    color: #fff;
+    color: var(--button-fg);
 }
 
 .calendar td.nonday {
-    background: #f8f8f8;
+    background: var(--darkened-bg);
 }
 
 .calendar td.today a {
@@ -440,17 +440,17 @@ span.clearable-file-input label {
     font-weight: 400;
     padding: 6px;
     text-decoration: none;
-    color: #444;
+    color: var(--body-quiet-color);
 }
 
 .calendar td a:focus, .timelist a:focus,
 .calendar td a:hover, .timelist a:hover {
-    background: #79aec8;
+    background: var(--primary);
     color: white;
 }
 
 .calendar td a:active, .timelist a:active {
-    background: #417690;
+    background: var(--header-bg);
     color: white;
 }
 
@@ -464,16 +464,16 @@ span.clearable-file-input label {
 
 .calendarnav a:link, #calendarnav a:visited,
 #calendarnav a:focus, #calendarnav a:hover {
-    color: #999;
+    color: var(--body-quiet-color);
 }
 
 .calendar-shortcuts {
-    background: white;
+    background: var(--body-bg);
+    color: var(--body-quiet-color);
     font-size: 11px;
     line-height: 11px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--hairline-color);
     padding: 8px 0;
-    color: #ccc;
 }
 
 .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
@@ -511,8 +511,8 @@ span.clearable-file-input label {
     padding: 4px 0;
     font-size: 12px;
     background: #eee;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--border-color);
-    color: #333;
+    color: var(--body-fg);
 }
 
 .calendar-cancel:focus, .calendar-cancel:hover {

source/static/admin/js/SelectBox.js

@@ -13,6 +13,7 @@
         redisplay: function(id) {
             // Repopulate HTML select box from cache
             const box = document.getElementById(id);
+            const scroll_value_from_top = box.scrollTop;
             box.innerHTML = '';
             for (const node of SelectBox.cache[id]) {
                 if (node.displayed) {
@@ -22,6 +23,7 @@
                     box.appendChild(new_option);
                 }
             }
+            box.scrollTop = scroll_value_from_top;
         },
         filter: function(id, text) {
             // Redisplay the HTML select box, displaying only the choices containing ALL
@@ -31,7 +33,7 @@
                 node.displayed = 1;
                 const node_text = node.text.toLowerCase();
                 for (const token of tokens) {
-                    if (node_text.indexOf(token) === -1) {
+                    if (!node_text.includes(token)) {
                         node.displayed = 0;
                         break; // Once the first token isn't found we're done
                     }

source/static/admin/js/actions.js

@@ -1,154 +1,201 @@
 /*global gettext, interpolate, ngettext*/
 'use strict';
 {
-    const $ = django.jQuery;
+    function show(selector) {
-    let lastChecked;
+        document.querySelectorAll(selector).forEach(function(el) {
+            el.classList.remove('hidden');
+        });
+    }
 
-    $.fn.actions = function(opts) {
+    function hide(selector) {
-        const options = $.extend({}, $.fn.actions.defaults, opts);
+        document.querySelectorAll(selector).forEach(function(el) {
-        const actionCheckboxes = $(this);
+            el.classList.add('hidden');
-        let list_editable_changed = false;
-        const showQuestion = function() {
-                $(options.acrossClears).hide();
-                $(options.acrossQuestions).show();
-                $(options.allContainer).hide();
-            },
-            showClear = function() {
-                $(options.acrossClears).show();
-                $(options.acrossQuestions).hide();
-                $(options.actionContainer).toggleClass(options.selectedClass);
-                $(options.allContainer).show();
-                $(options.counterContainer).hide();
-            },
-            reset = function() {
-                $(options.acrossClears).hide();
-                $(options.acrossQuestions).hide();
-                $(options.allContainer).hide();
-                $(options.counterContainer).show();
-            },
-            clearAcross = function() {
-                reset();
-                $(options.acrossInput).val(0);
-                $(options.actionContainer).removeClass(options.selectedClass);
-            },
-            checker = function(checked) {
-                if (checked) {
-                    showQuestion();
-                } else {
-                    reset();
-                }
-                $(actionCheckboxes).prop("checked", checked)
-                    .parent().parent().toggleClass(options.selectedClass, checked);
-            },
-            updateCounter = function() {
-                const sel = $(actionCheckboxes).filter(":checked").length;
-                // data-actions-icnt is defined in the generated HTML
-                // and contains the total amount of objects in the queryset
-                const actions_icnt = $('.action-counter').data('actionsIcnt');
-                $(options.counterContainer).html(interpolate(
-                    ngettext('%(sel)s of %(cnt)s selected', '%(sel)s of %(cnt)s selected', sel), {
-                        sel: sel,
-                        cnt: actions_icnt
-                    }, true));
-                $(options.allToggle).prop("checked", function() {
-                    let value;
-                    if (sel === actionCheckboxes.length) {
-                        value = true;
-                        showQuestion();
-                    } else {
-                        value = false;
-                        clearAcross();
-                    }
-                    return value;
-                });
-            };
-        // Show counter by default
-        $(options.counterContainer).show();
-        // Check state of checkboxes and reinit state if needed
-        $(this).filter(":checked").each(function(i) {
-            $(this).parent().parent().toggleClass(options.selectedClass);
-            updateCounter();
-            if ($(options.acrossInput).val() === 1) {
-                showClear();
-            }
         });
-        $(options.allToggle).show().on('click', function() {
+    }
-            checker($(this).prop("checked"));
+
-            updateCounter();
+    function showQuestion(options) {
+        hide(options.acrossClears);
+        show(options.acrossQuestions);
+        hide(options.allContainer);
+    }
+
+    function showClear(options) {
+        show(options.acrossClears);
+        hide(options.acrossQuestions);
+        document.querySelector(options.actionContainer).classList.remove(options.selectedClass);
+        show(options.allContainer);
+        hide(options.counterContainer);
+    }
+
+    function reset(options) {
+        hide(options.acrossClears);
+        hide(options.acrossQuestions);
+        hide(options.allContainer);
+        show(options.counterContainer);
+    }
+
+    function clearAcross(options) {
+        reset(options);
+        const acrossInputs = document.querySelectorAll(options.acrossInput);
+        acrossInputs.forEach(function(acrossInput) {
+            acrossInput.value = 0;
         });
-        $("a", options.acrossQuestions).on('click', function(event) {
+        document.querySelector(options.actionContainer).classList.remove(options.selectedClass);
-            event.preventDefault();
+    }
-            $(options.acrossInput).val(1);
+
-            showClear();
+    function checker(actionCheckboxes, options, checked) {
+        if (checked) {
+            showQuestion(options);
+        } else {
+            reset(options);
+        }
+        actionCheckboxes.forEach(function(el) {
+            el.checked = checked;
+            el.closest('tr').classList.toggle(options.selectedClass, checked);
         });
-        $("a", options.acrossClears).on('click', function(event) {
+    }
-            event.preventDefault();
+
-            $(options.allToggle).prop("checked", false);
+    function updateCounter(actionCheckboxes, options) {
-            clearAcross();
+        const sel = Array.from(actionCheckboxes).filter(function(el) {
-            checker(0);
+            return el.checked;
-            updateCounter();
+        }).length;
-        });
+        const counter = document.querySelector(options.counterContainer);
-        lastChecked = null;
+        // data-actions-icnt is defined in the generated HTML
-        $(actionCheckboxes).on('click', function(event) {
+        // and contains the total amount of objects in the queryset
-            if (!event) { event = window.event; }
+        const actions_icnt = Number(counter.dataset.actionsIcnt);
-            const target = event.target ? event.target : event.srcElement;
+        counter.textContent = interpolate(
-            if (lastChecked && $.data(lastChecked) !== $.data(target) && event.shiftKey === true) {
+            ngettext('%(sel)s of %(cnt)s selected', '%(sel)s of %(cnt)s selected', sel), {
-                let inrange = false;
+                sel: sel,
-                $(lastChecked).prop("checked", target.checked)
+                cnt: actions_icnt
-                    .parent().parent().toggleClass(options.selectedClass, target.checked);
+            }, true);
-                $(actionCheckboxes).each(function() {
+        const allToggle = document.getElementById(options.allToggleId);
-                    if ($.data(this) === $.data(lastChecked) || $.data(this) === $.data(target)) {
+        allToggle.checked = sel === actionCheckboxes.length;
-                        inrange = (inrange) ? false : true;
+        if (allToggle.checked) {
-                    }
+            showQuestion(options);
-                    if (inrange) {
+        } else {
-                        $(this).prop("checked", target.checked)
+            clearAcross(options);
-                            .parent().parent().toggleClass(options.selectedClass, target.checked);
+        }
-                    }
+    }
-                });
+
-            }
+    const defaults = {
-            $(target).parent().parent().toggleClass(options.selectedClass, target.checked);
-            lastChecked = target;
-            updateCounter();
-        });
-        $('form#changelist-form table#result_list tr').on('change', 'td:gt(0) :input', function() {
-            list_editable_changed = true;
-        });
-        $('form#changelist-form button[name="index"]').on('click', function(event) {
-            if (list_editable_changed) {
-                return confirm(gettext("You have unsaved changes on individual editable fields. If you run an action, your unsaved changes will be lost."));
-            }
-        });
-        $('form#changelist-form input[name="_save"]').on('click', function(event) {
-            let action_changed = false;
-            $('select option:selected', options.actionContainer).each(function() {
-                if ($(this).val()) {
-                    action_changed = true;
-                }
-            });
-            if (action_changed) {
-                if (list_editable_changed) {
-                    return confirm(gettext("You have selected an action, but you haven’t saved your changes to individual fields yet. Please click OK to save. You’ll need to re-run the action."));
-                } else {
-                    return confirm(gettext("You have selected an action, and you haven’t made any changes on individual fields. You’re probably looking for the Go button rather than the Save button."));
-                }
-            }
-        });
-    };
-    /* Setup plugin defaults */
-    $.fn.actions.defaults = {
         actionContainer: "div.actions",
         counterContainer: "span.action-counter",
         allContainer: "div.actions span.all",
         acrossInput: "div.actions input.select-across",
         acrossQuestions: "div.actions span.question",
         acrossClears: "div.actions span.clear",
-        allToggle: "#action-toggle",
+        allToggleId: "action-toggle",
         selectedClass: "selected"
     };
-    $(document).ready(function() {
+
-        const $actionsEls = $('tr input.action-select');
+    window.Actions = function(actionCheckboxes, options) {
-        if ($actionsEls.length > 0) {
+        options = Object.assign({}, defaults, options);
-            $actionsEls.actions();
+        let list_editable_changed = false;
+        let lastChecked = null;
+        let shiftPressed = false;
+
+        document.addEventListener('keydown', (event) => {
+            shiftPressed = event.shiftKey;
+        });
+
+        document.addEventListener('keyup', (event) => {
+            shiftPressed = event.shiftKey;
+        });
+
+        document.getElementById(options.allToggleId).addEventListener('click', function(event) {
+            checker(actionCheckboxes, options, this.checked);
+            updateCounter(actionCheckboxes, options);
+        });
+
+        document.querySelectorAll(options.acrossQuestions + " a").forEach(function(el) {
+            el.addEventListener('click', function(event) {
+                event.preventDefault();
+                const acrossInputs = document.querySelectorAll(options.acrossInput);
+                acrossInputs.forEach(function(acrossInput) {
+                    acrossInput.value = 1;
+                });
+                showClear(options);
+            });
+        });
+
+        document.querySelectorAll(options.acrossClears + " a").forEach(function(el) {
+            el.addEventListener('click', function(event) {
+                event.preventDefault();
+                document.getElementById(options.allToggleId).checked = false;
+                clearAcross(options);
+                checker(actionCheckboxes, options, false);
+                updateCounter(actionCheckboxes, options);
+            });
+        });
+
+        function affectedCheckboxes(target, withModifier) {
+            const multiSelect = (lastChecked && withModifier && lastChecked !== target);
+            if (!multiSelect) {
+                return [target];
+            }
+            const checkboxes = Array.from(actionCheckboxes);
+            const targetIndex = checkboxes.findIndex(el => el === target);
+            const lastCheckedIndex = checkboxes.findIndex(el => el === lastChecked);
+            const startIndex = Math.min(targetIndex, lastCheckedIndex);
+            const endIndex = Math.max(targetIndex, lastCheckedIndex);
+            const filtered = checkboxes.filter((el, index) => (startIndex <= index) && (index <= endIndex));
+            return filtered;
+        };
+
+        Array.from(document.getElementById('result_list').tBodies).forEach(function(el) {
+            el.addEventListener('change', function(event) {
+                const target = event.target;
+                if (target.classList.contains('action-select')) {
+                    const checkboxes = affectedCheckboxes(target, shiftPressed);
+                    checker(checkboxes, options, target.checked);
+                    updateCounter(actionCheckboxes, options);
+                    lastChecked = target;
+                } else {
+                    list_editable_changed = true;
+                }
+            });
+        });
+
+        document.querySelector('#changelist-form button[name=index]').addEventListener('click', function() {
+            if (list_editable_changed) {
+                const confirmed = confirm(gettext("You have unsaved changes on individual editable fields. If you run an action, your unsaved changes will be lost."));
+                if (!confirmed) {
+                    event.preventDefault();
+                }
+            }
+        });
+
+        const el = document.querySelector('#changelist-form input[name=_save]');
+        // The button does not exist if no fields are editable.
+        if (el) {
+            el.addEventListener('click', function(event) {
+                if (document.querySelector('[name=action]').value) {
+                    const text = list_editable_changed
+                        ? gettext("You have selected an action, but you haven’t saved your changes to individual fields yet. Please click OK to save. You’ll need to re-run the action.")
+                        : gettext("You have selected an action, and you haven’t made any changes on individual fields. You’re probably looking for the Go button rather than the Save button.");
+                    if (!confirm(text)) {
+                        event.preventDefault();
+                    }
+                }
+            });
+        }
+    };
+
+    // Call function fn when the DOM is loaded and ready. If it is already
+    // loaded, call the function now.
+    // http://youmightnotneedjquery.com/#ready
+    function ready(fn) {
+        if (document.readyState !== 'loading') {
+            fn();
+        } else {
+            document.addEventListener('DOMContentLoaded', fn);
+        }
+    }
+
+    ready(function() {
+        const actionsEls = document.querySelectorAll('tr input.action-select');
+        if (actionsEls.length > 0) {
+            Actions(actionsEls);
         }
     });
 }

source/static/admin/js/admin/DateTimeShortcuts.js

@@ -28,8 +28,7 @@
         timezoneWarningClass: 'timezonewarning', // class of the warning for timezone mismatch
         timezoneOffset: 0,
         init: function() {
-            const body = document.getElementsByTagName('body')[0];
+            const serverOffset = document.body.dataset.adminUtcOffset;
-            const serverOffset = body.dataset.adminUtcOffset;
             if (serverOffset) {
                 const localOffset = new Date().getTimezoneOffset() * -60;
                 DateTimeShortcuts.timezoneOffset = localOffset - serverOffset;
@@ -48,8 +47,7 @@
         },
         // Return the current time while accounting for the server timezone.
         now: function() {
-            const body = document.getElementsByTagName('body')[0];
+            const serverOffset = document.body.dataset.adminUtcOffset;
-            const serverOffset = body.dataset.adminUtcOffset;
             if (serverOffset) {
                 const localNow = new Date();
                 const localOffset = localNow.getTimezoneOffset() * -60;

source/static/admin/js/admin/RelatedObjectLookups.js

@@ -7,13 +7,9 @@
 
     function showAdminPopup(triggeringLink, name_regexp, add_popup) {
         const name = triggeringLink.id.replace(name_regexp, '');
-        let href = triggeringLink.href;
+        const href = new URL(triggeringLink.href);
         if (add_popup) {
-            if (href.indexOf('?') === -1) {
+            href.searchParams.set('_popup', 1);
-                href += '?_popup=1';
-            } else {
-                href += '&_popup=1';
-            }
         }
         const win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
         win.focus();

source/static/admin/js/autocomplete.js

@@ -7,7 +7,10 @@
                 data: function(params) {
                     return {
                         term: params.term,
-                        page: params.page
+                        page: params.page,
+                        app_label: $element.data('app-label'),
+                        model_name: $element.data('model-name'),
+                        field_name: $element.data('field-name')
                     };
                 }
             }

source/static/admin/js/calendar.js

@@ -21,6 +21,20 @@ depends on core.js for utility functions like removeChildren or quickElement
             gettext('November'),
             gettext('December')
         ],
+        monthsOfYearAbbrev: [
+            pgettext('abbrev. month January', 'Jan'),
+            pgettext('abbrev. month February', 'Feb'),
+            pgettext('abbrev. month March', 'Mar'),
+            pgettext('abbrev. month April', 'Apr'),
+            pgettext('abbrev. month May', 'May'),
+            pgettext('abbrev. month June', 'Jun'),
+            pgettext('abbrev. month July', 'Jul'),
+            pgettext('abbrev. month August', 'Aug'),
+            pgettext('abbrev. month September', 'Sep'),
+            pgettext('abbrev. month October', 'Oct'),
+            pgettext('abbrev. month November', 'Nov'),
+            pgettext('abbrev. month December', 'Dec')
+        ],
         daysOfWeek: [
             pgettext('one letter Sunday', 'S'),
             pgettext('one letter Monday', 'M'),

source/static/admin/js/cancel.js

@@ -14,10 +14,11 @@
     ready(function() {
         function handleClick(event) {
             event.preventDefault();
-            if (window.location.search.indexOf('&_popup=1') === -1) {
+            const params = new URLSearchParams(window.location.search);
-                window.history.back(); // Go back if not a popup.
+            if (params.has('_popup')) {
+                window.close(); // Close the popup.
             } else {
-                window.close(); // Otherwise, close the popup.
+                window.history.back(); // Otherwise, go back.
             }
         }
 

source/static/admin/js/core.js

@@ -85,6 +85,12 @@ function findPosY(obj) {
         return (this.getSeconds() < 10) ? '0' + this.getSeconds() : this.getSeconds();
     };
 
+    Date.prototype.getAbbrevMonthName = function() {
+        return typeof window.CalendarNamespace === "undefined"
+            ? this.getTwoDigitMonth()
+            : window.CalendarNamespace.monthsOfYearAbbrev[this.getMonth()];
+    };
+
     Date.prototype.getFullMonthName = function() {
         return typeof window.CalendarNamespace === "undefined"
             ? this.getTwoDigitMonth()
@@ -93,6 +99,7 @@ function findPosY(obj) {
 
     Date.prototype.strftime = function(format) {
         const fields = {
+            b: this.getAbbrevMonthName(),
             B: this.getFullMonthName(),
             c: this.toString(),
             d: this.getTwoDigitDate(),

source/static/admin/js/urlify.js

@@ -134,8 +134,7 @@
             for (const lookup of ALL_DOWNCODE_MAPS) {
                 Object.assign(Downcoder.map, lookup);
             }
-            Downcoder.chars = Object.keys(Downcoder.map);
+            Downcoder.regex = new RegExp(Object.keys(Downcoder.map).join('|'), 'g');
-            Downcoder.regex = new RegExp(Downcoder.chars.join('|'), 'g');
         }
     };
 
@@ -149,23 +148,9 @@
 
     function URLify(s, num_chars, allowUnicode) {
         // changes, e.g., "Petty theft" to "petty-theft"
-        // remove all these words from the string before urlifying
         if (!allowUnicode) {
             s = downcode(s);
         }
-        const hasUnicodeChars = /[^\u0000-\u007f]/.test(s);
-        // Remove English words only if the string contains ASCII (English)
-        // characters.
-        if (!hasUnicodeChars) {
-            const removeList = [
-                "a", "an", "as", "at", "before", "but", "by", "for", "from",
-                "is", "in", "into", "like", "of", "off", "on", "onto", "per",
-                "since", "than", "the", "this", "that", "to", "up", "via",
-                "with"
-            ];
-            const r = new RegExp('\\b(' + removeList.join('|') + ')\\b', 'gi');
-            s = s.replace(r, '');
-        }
         s = s.toLowerCase(); // convert to lowercase
         // if downcode doesn't hit, the char will be stripped here
         if (allowUnicode) {

source/static/css/main.css

@@ -1,9 +0,0 @@
-
-
-.custom-article {
-  border-style: solid;
-  border-color: gray;
-  border-width: 1px;
-  padding: 5px;
-  border-left: 3px solid SteelBlue;
-}

source/static/img/home-circle.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19.07,4.93C17.22,3 14.66,1.96 12,2C9.34,1.96 6.79,3 4.94,4.93C3,6.78 1.96,9.34 2,12C1.96,14.66 3,17.21 4.93,19.06C6.78,21 9.34,22.04 12,22C14.66,22.04 17.21,21 19.06,19.07C21,17.22 22.04,14.66 22,12C22.04,9.34 21,6.78 19.07,4.93M17,12V18H13.5V13H10.5V18H7V12H5L12,5L19.5,12H17Z" /></svg>

source/static/js/main.js

@@ -1,48 +0,0 @@
-
-
-$(function() {
-    $('.downmovie').click(function(event) {
-        var id = $(this).attr('id')
-        var href = $(this).attr('href')
-        var hc = window.location.href
-        var url = '../addcount/' + id
-
-        if(hc.search('director')){
-            url = '../../addcount/' + id
-        }
-
-        event.preventDefault();
-        $.ajax({
-            url: url,
-            success : function(data){
-                $('#down' + id).text(data);
-            }
-        })
-
-        var msg = 'Gracias al "honorable" poder legislativo de mi país, ya no es posible compartir nada, contactanos en nuestro canal de Telegram si tienes dudas: @mauflix'
-        alert(msg);
-
-    });
-});
-
-
-function director_change(){
-    var directors = document.getElementById('directors')
-    if(directors.selectedIndex){
-        name = directors.options[directors.selectedIndex].value
-        window.location.href = '/movies/director/' + name
-    }else{
-        window.location.href = '/movies'
-    }
-}
-
-
-function search_movie(){
-    var search = document.getElementById('search')
-    window.location.href = '/movies/' + search.value
-}
-
-
-function search_key_press(ev){
-    alert(ev.keyCode)
-}

source/static/suit/js/autosize.min.js

@@ -1,6 +0,0 @@
-/*!
-	Autosize 3.0.15
-	license: MIT
-	http://www.jacklmoore.com/autosize
-*/
-!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var n={exports:{}};t(n.exports,n),e.autosize=n.exports}}(this,function(e,t){"use strict";function n(e){function t(){var t=window.getComputedStyle(e,null);p=t.overflowY,"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),c="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(c)&&(c=0),i()}function n(t){var n=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=n,p=t,f&&(e.style.overflowY=t),o()}function o(){var t=window.pageYOffset,n=document.body.scrollTop,o=e.style.height;e.style.height="auto";var i=e.scrollHeight+c;return 0===e.scrollHeight?void(e.style.height=o):(e.style.height=i+"px",v=e.clientWidth,document.documentElement.scrollTop=t,void(document.body.scrollTop=n))}function i(){var t=e.style.height;o();var i=window.getComputedStyle(e,null);if(i.height!==e.style.height?"visible"!==p&&n("visible"):"hidden"!==p&&n("hidden"),t!==e.style.height){var r=d("autosize:resized");e.dispatchEvent(r)}}var s=void 0===arguments[1]?{}:arguments[1],a=s.setOverflowX,l=void 0===a?!0:a,u=s.setOverflowY,f=void 0===u?!0:u;if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!r.has(e)){var c=null,p=null,v=e.clientWidth,h=function(){e.clientWidth!==v&&i()},y=function(t){window.removeEventListener("resize",h,!1),e.removeEventListener("input",i,!1),e.removeEventListener("keyup",i,!1),e.removeEventListener("autosize:destroy",y,!1),e.removeEventListener("autosize:update",i,!1),r["delete"](e),Object.keys(t).forEach(function(n){e.style[n]=t[n]})}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",y,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",i,!1),window.addEventListener("resize",h,!1),e.addEventListener("input",i,!1),e.addEventListener("autosize:update",i,!1),r.add(e),l&&(e.style.overflowX="hidden",e.style.wordWrap="break-word"),t()}}function o(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=d("autosize:destroy");e.dispatchEvent(t)}}function i(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=d("autosize:update");e.dispatchEvent(t)}}var r="function"==typeof Set?new Set:function(){var e=[];return{has:function(t){return Boolean(e.indexOf(t)>-1)},add:function(t){e.push(t)},"delete":function(t){e.splice(e.indexOf(t),1)}}}(),d=function(e){return new Event(e)};try{new Event("test")}catch(s){d=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}var a=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(a=function(e){return e},a.destroy=function(e){return e},a.update=function(e){return e}):(a=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return n(e,t)}),e},a.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e},a.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e}),t.exports=a});

source/static/suit/js/suit.js

@@ -1,250 +0,0 @@
-Suit = {};
-window.Suit = Suit;
-
-(function ($) {
-    if (!$)
-        return;
-
-    Suit.$ = $;
-
-// Register callbacks to perform after inline has been added
-    Suit.after_inline = function () {
-        var functions = {};
-        var register = function (fn_name, fn_callback) {
-            functions[fn_name] = fn_callback;
-        };
-
-        var run = function (inline_prefix, row) {
-            for (var fn_name in functions) {
-                functions[fn_name](inline_prefix, row);
-            }
-        };
-
-        return {
-            register: register,
-            run: run
-        };
-    }();
-
-    Suit.ListActionsToggle = function () {
-        var $topActions;
-
-        var init = function () {
-            $(document).ready(function () {
-                $topActions = $('.results').parent().find('.actions').eq(0);
-                if (!$topActions.length)
-                    return;
-
-                $("tr input.action-select, #action-toggle").on('click', checkIfSelected);
-            });
-        };
-
-        var checkIfSelected = function () {
-            if ($('tr.selected').length) {
-                $topActions.slideDown('fast');
-            } else {
-                $topActions.slideUp('fast');
-            }
-        };
-
-        return {
-            init: init
-        }
-
-    }();
-
-
-    Suit.FixedBar = function () {
-        var didScroll = false, $fixedItem, $fixedItemParent, $win, $body,
-            itemOffset,
-            extraOffset = 0,
-            fixed = false;
-
-        function init(selector) {
-            $fixedItem = $(selector || '.submit-row');
-            if (!$fixedItem.length)
-                return;
-
-            $fixedItemParent = $fixedItem.parents('form');
-            itemOffset = $fixedItem.offset();
-            $win = $(window);
-            window.onscroll = onScroll;
-            window.onresize = onScroll;
-            onScroll();
-
-            setInterval(function () {
-                if (didScroll) {
-                    didScroll = false;
-                }
-            }, 200);
-        }
-
-        function onScroll() {
-            didScroll = true;
-
-            var itemHeight = $fixedItem.height(),
-                scrollTop = $win.scrollTop();
-
-            if (scrollTop + $win.height() - itemHeight - extraOffset < itemOffset.top) {
-                if (!fixed) {
-                    $fixedItem.addClass('fixed');
-                    $fixedItemParent.addClass('fixed').css('padding-bottom', itemHeight + 'px');
-                    fixed = true;
-                }
-            } else {
-                if (fixed) {
-                    $fixedItem.removeClass('fixed');
-                    $fixedItemParent.removeClass('fixed').css('padding-bottom', '');
-                    fixed = false;
-                }
-            }
-        }
-
-        return {
-            init: init
-        };
-    }();
-
-    /**
-     * Avoids double-submit issues in the change_form.
-     */
-    $.fn.suitFormDebounce = function () {
-        var $form = $(this),
-            $saveButtons = $form.find('.submit-row button, .submit-row input[type=button], .submit-row input[type=submit]'),
-            submitting = false;
-
-        $form.submit(function () {
-            if (submitting) {
-                return false;
-            }
-
-            submitting = true;
-            $saveButtons.addClass('disabled');
-
-            setTimeout(function () {
-                $saveButtons.removeClass('disabled');
-                submitting = false;
-            }, 5000);
-        });
-    };
-
-    /**
-     * Content tabs
-     */
-    $.fn.suitFormTabs = function () {
-
-        var $tabs = $(this);
-        var tabPrefix = $tabs.data('tab-prefix');
-        if (!tabPrefix)
-            return;
-
-        var $tabLinks = $tabs.find('a');
-
-        function tabContents($link) {
-            return $('.' + tabPrefix + '-' + $link.attr('href').replace('#', ''));
-        }
-
-        function activateTabs() {
-            // Init tab by error, by url hash or init first tab
-            if (window.location.hash) {
-                var foundError;
-                $tabLinks.each(function () {
-                    var $link = $(this);
-                    if (tabContents($link).find('.error, .errorlist').length != 0) {
-                        $link.addClass('has-error');
-                        $link.trigger('click');
-                        foundError = true;
-                    }
-                });
-                !foundError && $($tabs).find('a[href=\\' + window.location.hash + ']').click();
-            } else {
-                $tabLinks.first().trigger('click');
-            }
-        }
-
-        $tabLinks.click(function () {
-            var $link = $(this),
-                showEvent = $.Event('shown.suit.tab', {
-                    relatedTarget: $link,
-                    tab: $link.attr('href').replace('#', '')
-                });
-            $link.parent().parent().find('.active').removeClass('active');
-            $link.addClass('active');
-            $('.' + tabPrefix).removeClass('show').addClass('hidden-xs-up');
-            tabContents($link).removeClass('hidden-xs-up').addClass('show');
-            $link.trigger(showEvent);
-        });
-
-        activateTabs();
-    };
-
-    /* Characters count for CharacterCountTextarea */
-    $.fn.suitCharactersCount = function () {
-        var $elements = $(this);
-
-        if (!$elements.length)
-            return;
-
-        $elements.each(function () {
-            var $el = $(this),
-                $countEl = $('<div class="suit-char-count"></div>');
-            $el.after($countEl);
-            $el.on('keyup', function (e) {
-                updateCount($(e.currentTarget));
-            });
-            updateCount($el);
-        });
-
-        function updateCount($el) {
-            var maxCount = $el.data('suit-maxcount'),
-                twitterCount = $el.data('suit-twitter-count'),
-                value = $el.val(),
-                len = twitterCount ? getTweetLength(value) : value.length,
-                count = maxCount ? maxCount - len : len;
-            if (count < 0)
-                count = '<span class="text-danger">' + count + '</span>';
-
-            $el.next().first().html(count);
-        }
-
-        function getTweetLength(input) {
-            var tmp = "";
-            for (var i = 0; i < 23; i++) {
-                tmp += "o"
-            }
-            return input.replace(/(http:\/\/[\S]*)/g, tmp).length;
-        }
-    };
-
-    /**
-     * Search filters - submit only changed fields
-     */
-    $.fn.suitSearchFilters = function () {
-        $(this).change(function () {
-            var $field = $(this);
-            var $option = $field.find('option:selected');
-            var select_name = $option.data('name');
-            if (select_name) {
-                $field.attr('name', select_name);
-            } else {
-                $field.removeAttr('name');
-            }
-            // Handle additional values for date filters
-            var additional = $option.data('additional');
-            console.log($field, additional)
-            if (additional) {
-                var hiddenId = $field.data('name') + '_add';
-                var $hidden = $('#' + hiddenId);
-                if (!$hidden.length) {
-                    $hidden = $('<input/>').attr('type', 'hidden').attr('id', hiddenId);
-                    $field.after($hidden);
-                }
-                additional = additional.split('=');
-                $hidden.attr('name', additional[0]).val(additional[1])
-            }
-        });
-        $(this).trigger('change');
-    };
-
-
-})(typeof django !== 'undefined' ? django.jQuery : undefined);

source/static/suit/js/suit.sortables.js

@@ -1,183 +0,0 @@
-/**
- * List sortables
- */
-(function ($) {
-    $.fn.suit_list_sortable = function () {
-        var $inputs = $(this);
-        if (!$inputs.length)
-            return;
-
-        // Detect if this is normal or mptt table
-        var mptt_table = $inputs.first().closest('table').hasClass('table-mptt');
-
-        function performMove($arrow, $row) {
-            var $next, $prev;
-
-            $row.closest('table').find('tr.selected').removeClass('selected');
-            if (mptt_table) {
-                function getPadding($tr) {
-                    return parseInt($tr.find('th:first').css('padding-left'));
-                }
-
-                function findWithChildren($tr) {
-                    var padding = getPadding($tr);
-                    return $tr.nextUntil(function () {
-                        return getPadding($(this)) <= padding
-                    }).andSelf();
-                }
-
-                var padding = getPadding($row);
-                var $rows_to_move = findWithChildren($row);
-                if ($arrow.data('dir') === 'down') {
-                    $next = $rows_to_move.last().next();
-                    if ($next.length && getPadding($next) === padding) {
-                        var $after = findWithChildren($next).last();
-                        if ($after.length) {
-                            $rows_to_move.insertAfter($after).addClass('selected');
-                        }
-                    }
-                } else {
-                    $prev = $row.prevUntil(function () {
-                        return getPadding($(this)) <= padding
-                    }).andSelf().first().prev();
-                    if ($prev.length && getPadding($prev) === padding) {
-                        $rows_to_move.insertBefore($prev).addClass('selected')
-                    }
-                }
-            } else {
-                if ($arrow.data('dir') === 'down') {
-                    $next = $row.next();
-                    if ($next.is(':visible') && $next.length) {
-                        $row.insertAfter($next).addClass('selected')
-                    }
-                } else {
-                    $prev = $row.prev();
-                    if ($prev.is(':visible') && $prev.length) {
-                        $row.insertBefore($prev).addClass('selected')
-                    }
-                }
-            }
-            markLastInline($row.parent());
-        }
-
-        function onArrowClick(e) {
-            var $sortable = $(this);
-            var $row = $sortable.closest(
-                $sortable.hasClass('sortable-stacked') ? 'div.inline-related' : 'tr'
-            );
-            performMove($sortable, $row);
-            e.preventDefault();
-        }
-
-        function createLink(text, direction, on_click_func, is_stacked) {
-            return $('<a/>').attr('href', '#')
-                .addClass('sortable sortable-' + direction +
-                    (is_stacked ? ' sortable-stacked' : ''))
-                .attr('data-dir', direction).html(text)
-                .on('click', on_click_func);
-        }
-
-        function markLastInline($rowParent) {
-            $rowParent.find(' > .last-sortable').removeClass('last-sortable');
-            $rowParent.find('tr.form-row:visible:last').addClass('last-sortable');
-        }
-
-        var $lastSortable;
-        $inputs.each(function () {
-            var $inline_sortable = $('<div class="inline-sortable"/>'),
-                icon = '<span class="fa fa-lg fa-arrow-up"></span>',
-                $sortable = $(this),
-                is_stacked = $sortable.hasClass('suit-sortable-stacked');
-
-            var $up_link = createLink(icon, 'up', onArrowClick, is_stacked),
-                $down_link = createLink(icon.replace('-up', '-down'), 'down', onArrowClick, is_stacked);
-
-            if (is_stacked) {
-                var $sortable_row = $sortable.closest('div.form-group'),
-                    $stacked_block = $sortable.closest('div.inline-related'),
-                    $links_span = $('<span/>').attr('class', 'stacked-inline-sortable');
-
-                // Add arrows to header h3, move order input and remove order field row
-                $links_span.append($up_link).append($down_link);
-                $links_span.insertAfter($stacked_block.find('.inline_label'));
-                $stacked_block.append($sortable);
-                $sortable_row.remove();
-            } else {
-                $sortable.parent().append($inline_sortable);
-                $inline_sortable.append($up_link);
-                $inline_sortable.append($down_link);
-                $lastSortable = $sortable;
-            }
-        });
-
-        $lastSortable && markLastInline($lastSortable.closest('.form-row').parent());
-
-        // Filters out unchanged checkboxes, selects and sortable field itself
-        function filter_unchanged(i, input) {
-            if (input.type == 'checkbox') {
-                if (input.defaultChecked == input.checked) {
-                    return false;
-                }
-            } else if (input.type == 'select-one' || input.type == 'select-multiple') {
-                var options = input.options, option;
-                for (var j = 0; j < options.length; j++) {
-                    option = options[j];
-                    if (option.selected && option.selected == option.defaultSelected) {
-                        return false;
-                    }
-                }
-            } else if ($(input).hasClass('suit-sortable')) {
-                if (input.defaultValue == input.value && input.value == 0) {
-                    return false;
-                }
-            }
-            return true;
-        }
-
-        // Update input count right before submit
-        if ($inputs && $inputs.length) {
-            var $last_input = $inputs.last();
-            var selector = $(this).selector;
-            $($last_input[0].form).submit(function (e) {
-                var i = 0, value;
-                // e.preventDefault();
-                $(selector).each(function () {
-                    var $input = $(this);
-                    var fieldset_id = $input.attr('name').split(/-\d+-/)[0];
-                    // Check if any of new dynamic block values has been added
-                    var $set_block = $input.closest('.dynamic-' + fieldset_id);
-                    var $changed_fields = $set_block.find(":input[type!='hidden']:not(.suit-sortable)").filter(
-                        function () {
-                            return $(this).val() != "";
-                        }).filter(filter_unchanged);
-                    // console.log($changed_fields.length, $changed_fields);
-                    var is_changelist = !$set_block.length;
-                    if (is_changelist
-                        || $set_block.hasClass('has_original')
-                        || $changed_fields.serializeArray().length
-                            // Since jQuery serialize() doesn't include type=file do additional check
-                        || $changed_fields.find(":input[type='file']").addBack().length) {
-                        value = i++;
-                        $input.val(value);
-                    }
-                });
-            });
-        }
-
-        Suit.after_inline.register('bind_sortable_arrows', function (prefix, row) {
-            $(row).find('.suit-sortable').on('click', onArrowClick);
-            markLastInline($(row).parent());
-        });
-    };
-
-
-    $(function () {
-        $('.suit-sortable').suit_list_sortable();
-    });
-
-}(django.jQuery));
-
-// Call Suit.after_inline
-django.jQuery(document).on('formset:added', function (e, row, prefix) {
-    Suit.after_inline.run(prefix, row);
-});

source/templates/base.html

@@ -1,57 +1,79 @@
 <!DOCTYPE HTML>
 <html>
-
 <head>
-    <meta charset="utf-8" />
+  <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
-
+  <title>MauFlix</title>
-    <title>MauFlix</title>
+  {% load static %}
-
+  <link rel="shortcut icon" href="{% static 'img/favicon.png' %}">
-    {% load static %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
-    <link rel="shortcut icon" href="{% static 'img/favicon.png' %}">
+  <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/darkly/bulmaswatch.min.css">
-    <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}" type="text/css">
+  <link rel="stylesheet" href="{% static 'css/main.css' %}">
-    <link rel="stylesheet" href="{% static 'css/main.css' %}" type="text/css">
+  <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
-    <script type="text/javascript" src="{% static 'js/jquery-3.4.1.min.js' %}" ></script>
-    <script type="text/javascript" src="{% static 'js/main.js' %}" ></script>
-    {% block media %}{% endblock %}
-
-    <script>
-    $(document).ready(function() {
-    });
-    </script>
 </head>
-
-</head>
-
 <body>
-
+  <section class="hero is-small is-info">
-    <section class="hero is-light">
+    <div class="hero-body has-text-centered">
-      <div class="hero-body">
+      <p>Otras plataformas tienen todas las películas, excepto las que nos gustan :)</p>
-        <div class="container">
+    </div>
-          <h2 class="title"> MauFlix </h1>
+  </section>
-            <p class="subtitle">
+  <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
-                Otras plataformas tienen todas las películas, excepto las que nos gustan  :)
+    <div class="navbar-brand">
-            </p>
+      <a class="navbar-item" href="{% url 'home' %}">
+        <img src="{% static 'img/logo-mauflix.png' %}" width="112" height="28">
+      </a>
+      <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>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+    <div id="menu" class="navbar-menu">
+      <div class="navbar-start">
+        {% if request.get_full_path == "/" %}
+          <a class="navbar-item" href="{% url 'search' %}">Buscar</a>
+        {% else %}
+          <a class="navbar-item" href="{% url 'home' %}">Inicio</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">Acerca</a>
+            <hr class="navbar-divider">
+            <a class="navbar-item">Reporta un problema</a>
+          </div>
+        </div>
+      </div>
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <a class="button is-primary">Ingresa</a>
+          </div>
         </div>
       </div>
-    </section>
-
-    <div id="movies">
-        {% block content %}{% endblock %}
     </div>
-
+  </nav>
-<footer class="footer">
+  <section id="main">
-  <div class="content has-text-centered">
+    {% block content %}{% endblock %}
-    <p>
+  </section>
-      Site develop thanks to:
+  <footer class="footer">
-      <a href="https://python.org" target='_blank'>Python</a>,
+    <div class="content">
-      <a href="https://djangoproject.com/" target='_blank'>Django</a>,
+      <p><b>BCH</b>:&nbsp;<code>qztd3l00xle5tffdqvh2snvadkuau2ml0uqm4n875d</code></p>
-      <a href="https://bulma.io/" target='_blank'>Bulma</a>.
+      <p><b>BTC</b>:&nbsp;<code>3FhiXcXmAesmQzrNEngjHFnvaJRhU1AGWV</code></p>
-      The website content is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target='_blank'>CC BY NC SA 4.0</a>.
+      <p><b>LTC</b>:&nbsp;<code>MBcgQ3LQJA4W2wsXknTdm2fxRSysLaBJHS</code></p>
-    </p>
+      <p><b>ETH</b>:&nbsp;<code>0x61a4f614a30ff686445751ed8328b82b77ecfc69</code></p>
-  </div>
+    </div>
-</footer>
+    <div class="content has-text-centered">
-
+      <p>Te recomendamos <a href="https://www.videolan.org/vlc/" target="_blank">VLC</a> para ver tus películas.</p>
+    </div>
+    <div class="content has-text-centered">
+      <p>
+        Sitio desarrollado con
+        <a href="https://python.org" target='_blank'>Python</a>,
+        <a href="https://djangoproject.com/" target='_blank'>Django</a> y
+        <a href="https://bulma.io/" target='_blank'>Bulma</a>.
+      </p>
+    </div>
+  </footer>
 </body>
-
 </html>

source/templates/home.html

@@ -1,31 +1,12 @@
 {% extends "base.html" %}
-
 {% block content %}
-
+{% for section, content in sections.items %}
-<section class="section">
+  {% if section != "genders"%}
-    <div class="container">
+    {% include 'section.html' with section=section content=content %}
-        <p class="subtitle">
+  {% else %}
-            Te recomendamos usar <a href="https://www.videolan.org/vlc/" target="_blank">VLC</a>
+    {% for gender, val in content.items %}
-            para ver tus <a href="/movies">películas</a>.
+      {% include 'section.html' with section=gender content=val %}
-        </p>
+    {% endfor %}
-    </div>
+  {% endif %}
-</section>
+{% endfor %}
-
-<section class="section">
-    <div class="container">
-        <p class="">
-            <b>BCH</b>: &nbsp;<code>qztd3l00xle5tffdqvh2snvadkuau2ml0uqm4n875d</code>
-        </p>
-        <p class="">
-            <b>BTC</b>: &nbsp;<code>3FhiXcXmAesmQzrNEngjHFnvaJRhU1AGWV</code>
-        </p>
-        <p class="">
-            <b>LTC</b>: &nbsp;<code>MBcgQ3LQJA4W2wsXknTdm2fxRSysLaBJHS</code>
-        </p>
-        <p class="">
-            <b>ETH</b>: &nbsp;<code>0x61a4f614a30ff686445751ed8328b82b77ecfc69</code>
-        </p>
-    </div>
-</section>
-
 {% endblock %}

source/templates/index.html

@@ -1,13 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-
-<script type='text/javascript' charset='utf-8'>
-
-webix.ready(function(){
-    webix.ui(ui_main)
-})
-
-</script>
-
-{% endblock %}

source/templates/movies.html

@@ -1,87 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-
-<BR>
-
-
-<!-- Main container -->
-<nav class="level">
-  <!-- Left side -->
-  <div class="level-left">
-    <div class="level-item">
-      <p class="subtitle is-6">
-        Mostrando <strong>{{count}}</strong> películas
-      </p>
-    </div>
-    <div class="level-item">
-      <div class="field has-addons">
-        <p class="control">
-          <input class="input" id='search' type="text" placeholder="Buscar por nombre">
-        </p>
-        <p class="control">
-          <button class="button is-info is-light" onclick='search_movie();'>Buscar</button>
-        </p>
-      </div>
-    </div>
-    <div class="level-item">
-        <div class="select is-info">
-        <select id='directors' onChange='director_change()'>
-            <option>Por director</option>
-            {% for director in directors %}
-                {% ifequal selected_director director %}
-                    <option selected>{{director}}</option>
-                {% else %}
-                    <option>{{director}}</option>
-                {% endifequal %}
-            {% endfor %}
-        </select>
-        </div>
-    </div>
-  </div>
-
-  <!-- Right side -->
-  <div class="level-right">
-    <p class="level-item">
-        {% if args %}
-            <button class="button is-info is-light"><a href="/movies/">Ultimas</a></button>
-        {% else %}
-            <button class="button is-info is-light"><a href="/movies/all">Ver Todas</a></button>
-        {% endif %}
-    </p>
-  </div>
-</nav>
-
-
-{% for row in movies %}
-<div class="columns is-desktop is-variable is-1">
-    {% for cell in row %}
-      <div class="column" style="padding: 0.5rem;">
-        <article class="media has-background-light custom-article">
-          <figure class="media-left" style="padding-top: 0.75rem;">
-            <img src='{{ cell.image }}' height='150' width='100'>
-          </figure>
-          <div class="media-content">
-            <div class="content">
-              <p>
-                <strong><a class='downmovie' href='{{ cell.url }}' id={{ cell.id }}>{{ cell.name }}</a></strong>
-                <BR>
-                ({{ cell.original_name }})
-              </p>
-              <p>
-                <strong>Director</strong>: {{ cell.director }} <br>
-                <strong>País</strong>: {{ cell.country }} <br>
-                <strong>Año</strong>: {{ cell.year }}, <strong>Duración</strong>: {{ cell.duration }} <br>
-                <strong>Descargas</strong>: <span id='down{{cell.id}}'>{{ cell.count }}</span>
-              </p>
-            </div>
-          </div>
-        </article>
-      </div>
-    {% endfor %}
-</div>
-{% endfor %}
-
-<BR>
-
-{% endblock %}

source/templates/search.html

@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<b>TODO: Búsqueda</b>
+
+{% endblock %}

source/templates/section.html

@@ -0,0 +1,15 @@
+<section class="hero">
+  <div class="hero-body">
+    <p class="title">{{ section }}</p>
+    <div class="columns is-desktop">
+      {% for movie in content %}
+        <div class="column">
+          <figure class="image is-3by4">
+            <img src="../media/{{ movie.cartel }}">
+          </figure>
+          {{ movie }}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>