Merge branch 'test' of git.imaniti.org:/Tomas/Ucebnice

lectures/migrations/0011_lecturegroup_description_alter_lecture_description.py

+# Generated by Django 4.1.4 on 2023-04-19 08:20
+
+from django.db import migrations
+import markdownx.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('lectures', '0010_alter_lecturegroup_options'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='lecturegroup',
+            name='description',
+            field=markdownx.models.MarkdownxField(blank=True, help_text='Můžeš použít Markdown.', null=True, verbose_name='Popis'),
+        ),
+        migrations.AlterField(
+            model_name='lecture',
+            name='description',
+            field=markdownx.models.MarkdownxField(blank=True, help_text='Můžeš použít Markdown.', null=True, verbose_name='Popis'),
+        ),
+    ]

lectures/models.py

@@ -17,11 +17,18 @@ class LectureGroup(NameStrMixin, models.Model):
         verbose_name="Jméno",
     )
 
+    description = MarkdownxField(
+        null=True,
+        blank=True,
+        verbose_name="Popis",
+        help_text="Můžeš použít Markdown.",
+    )
+
     user_groups = models.ManyToManyField(
         Group,
         blank=True,
         verbose_name="Uživatelské skupiny",
-        help_text=("Pokud nedefinuješ žádné, lekce ve skupině jsou dostupné všem."),
+        help_text="Pokud nedefinuješ žádné, lekce ve skupině jsou dostupné všem.",
     )
 
     class Meta:
@@ -65,7 +72,7 @@ class Lecture(NameStrMixin, models.Model):
         blank=True,
         null=True,
         verbose_name="Popis",
-        help_text="Můžeš použít markdown.",
+        help_text="Můžeš použít Markdown.",
     )
 
     @property

lectures/templates/lectures/index.html

-{% extends "shared/includes/base.html" %}
-{% load markdownify %}
-
-{% block content %}
-    a
-{% endblock %}

lectures/templates/lectures/view_groups.html

+{% extends "shared/includes/base.html" %}
+{% load markdownify %}
+
+{% block content %}
+    <div class="prose max-w-none mb-10">
+        <p>
+            Rerum in quibusdam repellendus repellat doloremque sit ad rerum. Aperiam aut architecto non repudiandae tenetur assumenda quidem alias. Adipisci omnis aut rem. <a href="#">Repellat et enim</a> et sed aperiam eligendi <i>accusamus</i>. Molestiae vel vitae sunt pariatur. Aut consectetur perspiciatis alias ut maxime.
+        </p>
+    </div>
+    <h1 class="head-alt-md mb-10">Výukové skupiny</h1>
+    <ul class="grid grid-cols-2 gap-3">
+        {% for group in lecture_groups %}
+            <li>
+                <a href="{% url "lectures:view_lectures" group.id %}" class="hover:no-underline">
+                    <div class="card elevation-6">
+                        <div class="card__body hover:bg-gray-100 duration-100">
+                            <h2 class="head-alt-sm">{{ group.name }}</h2>
+                            {% if group.description %}
+                                <div class="prose max-w-none mt-4">
+                                    {{ group.description|markdownify|safe }}
+                                </div>
+                            {% endif %}
+                        </div>
+                    </div>
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+{% endblock %}

lectures/templates/lectures/view_lecture_index.html

+{% extends "shared/includes/base.html" %}
+{% load markdownify %}
+
+{% block content %}
+    <h1 class="head-alt-md mb-10">{{ group.name }} - výuka</h1>
+    {% if group.description %}
+        <div class="prose max-w-none mb-10">
+            {{ group.description|markdownify|safe }}
+        </div>
+    {% endif %}
+    <div class="__js-root">
+        <ui-view-provider
+            :initial="{current_lectures: true, calendar: false, recordings: false}"
+            :sync-location="true"
+            v-slot="{ isCurrentView, toggleView }"
+        >
+            <div class="flex justify-center mb-10">
+                <ui-horizontal-scrollable>
+                    <div class="switch">
+                        <a
+                            @click="toggleView('current_lectures')"
+                            class="switch__item"
+                            :class="{'switch__item--active': isCurrentView('current_lectures')}"
+                        >Aktuálně</a>
+                        <a
+                            @click="toggleView('calendar')"
+                            class="switch__item"
+                            :class="{'switch__item--active': isCurrentView('calendar')}"
+                        >Kalendář</a>
+                        <a
+                            @click="toggleView('recordings')"
+                            class="switch__item"
+                            :class="{'switch__item--active': isCurrentView('recordings')}"
+                        >Záznamy</a>
+                    </div>
+                </ui-horizontal-scrollable>
+            </div>
+            <div>
+                <template v-if="isCurrentView('current_lectures')">
+                    <ul class="grid md:grid-cols-2 grid-cols-1 gap-4">
+                        {% for lecture in current_lectures %}
+                            <li class="card elevation-6">
+                                <div class="card__body p-5">
+                                    <h2 class="head-alt-sm mb-4">{{ lecture.name }}</h2>
+
+                                    <span class="flex gap-2 mb-4">
+                                        <span>
+                                            <i class="ico--clock mr-1"></i> {{ lecture.timestamp }}
+                                        </span>
+                                    </span>
+
+                                    {% if lecture.description %}
+                                        <div class="prose max-w-none">
+                                            {{ lecture.description|markdownify|safe }}
+                                        </div>
+                                    {% endif %}
+                                </div>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </template>
+                <template v-if="isCurrentView('calendar')">
+                    b
+                </template>
+                <template v-if="isCurrentView('recordings')">
+                    c
+                </template>
+            </div>
+        </ui-view-provider>
+    </div>
+{% endblock %}

lectures/urls.py

@@ -5,4 +5,9 @@ from . import models, views
 app_name = "lectures"
 urlpatterns = [
     path("", views.view_avilable_groups, name="view_avilable_groups"),
+    path(
+        "lectures/<int:group_id>",
+        views.view_lecture_index,
+        name="view_lecture_index"
+    )
 ]

lectures/views.py

+from django.conf import settings
 from django.db import models
 from django.shortcuts import get_object_or_404, render
+from django.utils import timezone
 from guardian.shortcuts import get_objects_for_user
 
-from .models import LectureGroup
+from .models import Lecture, LectureGroup
+
+
+def get_base_context(request) -> dict:
+    return {
+        "site_url": settings.SITE_URL,
+    }
 
 
 def view_avilable_groups(request):
@@ -17,8 +25,8 @@ def view_avilable_groups(request):
         request,
         "lectures/view_groups.html",
         {
+            **get_base_context(request),
             "title": "Výukové skupiny",
-            "site_url": "https://ucebnice.pirati.cz",  # TODO
             "description": "Kurzy a školení zaměřené na politickou práci a organizaci kampaní.",
             "header_name": "Pirátský e-Learning",
             "lecture_groups": lecture_groups,
@@ -26,26 +34,41 @@ def view_avilable_groups(request):
     )
 
 
-def view_lectures(request, group_id: int):
+def view_lecture_index(request, group_id: int):
     group = get_object_or_404(
         get_objects_for_user(request.user, "lectures.view_lecturegroup"),
         id=group_id,
     )
 
-    lectures = (
+    timestamp_separator = timezone.now() - Lecture.is_current_treshold
+
+    current_lectures = (
+        get_objects_for_user(request.user, "lectures.view_lecture")
+        .filter(
+            groups=group,
+            timestamp__gte=timestamp_separator,
+        )
+        .all()
+    )
+    past_lectures = (
         get_objects_for_user(request.user, "lectures.view_lecture")
-        .filter(groups=group)
+        .filter(
+            groups=group,
+            timestamp__lt=timestamp_separator,
+        )
         .all()
     )
 
     return render(
         request,
-        "lectures/view_lectures.html",
+        "lectures/view_lecture_index.html",
         {
+            **get_base_context(request),
             "title": f"Výuka pro {group.name}",
-            "site_url": "https://ucebnice.pirati.cz",  # TODO
             "description": f"e-Learningová výuka pro skupinu {group.name}.",
             "header_name": group.name,
-            "lectures": lectures,
+            "group": group,
+            "current_lectures": current_lectures,
+            "past_lectures": past_lectures,
         },
     )

package-lock.json

@@ -14,11 +14,24 @@
         "jquery": "^3.6.3",
         "style-loader": "^3.3.1",
         "tailwindcss": "^3.2.4",
+        "tippy.js": "^6.3.7",
+        "vue": "v2-latest",
         "webpack": "^5.76.2",
         "webpack-bundle-tracker": "^1.8.0",
         "webpack-cli": "^5.0.1"
       }
     },
+    "node_modules/@babel/parser": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+      "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -116,6 +129,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.9",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
@@ -163,6 +185,16 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
       "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q=="
     },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+      "dependencies": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -639,6 +671,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2016,6 +2053,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2070,6 +2115,15 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/vue": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
+      "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.14",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -7,9 +7,9 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://gitlab.pirati.cz/to/elearning.git"
+    "url": "https://gitlab.pirati.cz/to/ucebnice.git"
   },
-  "author": "",
+  "author": "Tomáš Valenta",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@tailwindcss/typography": "^0.5.9",
@@ -17,6 +17,8 @@
     "jquery": "^3.6.3",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.2.4",
+    "tippy.js": "^6.3.7",
+    "vue": "v2-latest",
     "webpack": "^5.76.2",
     "webpack-bundle-tracker": "^1.8.0",
     "webpack-cli": "^5.0.1"

shared/static/shared/base.js.LICENSE.txt

+/*!
+ * Sizzle CSS Selector Engine v2.3.10
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://js.foundation/
+ *
+ * Date: 2023-02-14
+ */
+
+/*!
+ * Vue.js v2.7.14
+ * (c) 2014-2022 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * jQuery JavaScript Library v3.6.4
+ * https://jquery.com/
+ *
+ * Includes Sizzle.js
+ * https://sizzlejs.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2023-03-08T15:28Z
+ */

shared/static/shared/runtime.js

-(()=>{"use strict";var r,e={},n={};function o(r){var t=n[r];if(void 0!==t)return t.exports;var i=n[r]={exports:{}};return e[r](i,i.exports,o),i.exports}o.m=e,r=[],o.O=(e,n,t,i)=>{if(!n){var a=1/0;for(l=0;l<r.length;l++){for(var[n,t,i]=r[l],s=!0,c=0;c<n.length;c++)(!1&i||a>=i)&&Object.keys(o.O).every((r=>o.O[r](n[c])))?n.splice(c--,1):(s=!1,i<a&&(a=i));if(s){r.splice(l--,1);var f=t();void 0!==f&&(e=f)}}return e}i=i||0;for(var l=r.length;l>0&&r[l-1][2]>i;l--)r[l]=r[l-1];r[l]=[n,t,i]},o.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={666:0};o.O.j=e=>0===r[e];var e=(e,n)=>{var t,i,[a,s,c]=n,f=0;if(a.some((e=>0!==r[e]))){for(t in s)o.o(s,t)&&(o.m[t]=s[t]);if(c)var l=c(o)}for(e&&e(n);f<a.length;f++)i=a[f],o.o(r,i)&&r[i]&&r[i][0](),r[i]=0;return o.O(l)},n=self.webpackChunkucebnice=self.webpackChunkucebnice||[];n.forEach(e.bind(null,0)),n.push=e.bind(null,n.push.bind(n))})()})();
+(()=>{"use strict";var e,r={},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var i=t[e]={id:e,exports:{}};return r[e].call(i.exports,i,i.exports,n),i.exports}n.m=r,e=[],n.O=(r,t,o,i)=>{if(!t){var a=1/0;for(f=0;f<e.length;f++){for(var[t,o,i]=e[f],c=!0,l=0;l<t.length;l++)(!1&i||a>=i)&&Object.keys(n.O).every((e=>n.O[e](t[l])))?t.splice(l--,1):(c=!1,i<a&&(a=i));if(c){e.splice(f--,1);var u=o();void 0!==u&&(r=u)}}return r}i=i||0;for(var f=e.length;f>0&&e[f-1][2]>i;f--)e[f]=e[f-1];e[f]=[t,o,i]},n.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return n.d(r,{a:r}),r},n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{n.b=document.baseURI||self.location.href;var e={666:0};n.O.j=r=>0===e[r];var r=(r,t)=>{var o,i,[a,c,l]=t,u=0;if(a.some((r=>0!==e[r]))){for(o in c)n.o(c,o)&&(n.m[o]=c[o]);if(l)var f=l(n)}for(r&&r(t);u<a.length;u++)i=a[u],n.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return n.O(f)},t=self.webpackChunkucebnice=self.webpackChunkucebnice||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})(),n.nc=void 0})();
\ No newline at end of file

shared/static/shared/style.css

@@ -554,6 +554,464 @@ html {
   }
 }
 
+.prose {
+  color: var(--tw-prose-body);
+  max-width: 65ch;
+}
+
+.prose :where(p):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-lead);
+  font-size: 1.25em;
+  line-height: 1.6;
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.prose :where(a):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-links);
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.prose :where(strong):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-bold);
+  font-weight: 600;
+}
+
+.prose :where(a strong):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(thead th strong):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(ol):not(:where([class~="not-prose"] *)) {
+  list-style-type: decimal;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-alpha;
+}
+
+.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-alpha;
+}
+
+.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-alpha;
+}
+
+.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-alpha;
+}
+
+.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-roman;
+}
+
+.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-roman;
+}
+
+.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-roman;
+}
+
+.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-roman;
+}
+
+.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: decimal;
+}
+
+.prose :where(ul):not(:where([class~="not-prose"] *)) {
+  list-style-type: disc;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
+  font-weight: 400;
+  color: var(--tw-prose-counters);
+}
+
+.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
+  color: var(--tw-prose-bullets);
+}
+
+.prose :where(hr):not(:where([class~="not-prose"] *)) {
+  border-color: var(--tw-prose-hr);
+  border-top-width: 1px;
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+
+.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--tw-prose-quotes);
+  border-left-width: 0.25rem;
+  border-left-color: var(--tw-prose-quote-borders);
+  quotes: "\201C""\201D""\2018""\2019";
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+}
+
+.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
+  content: open-quote;
+}
+
+.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
+  content: close-quote;
+}
+
+.prose :where(h1):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 800;
+  font-size: 2.25em;
+  margin-top: 0;
+  margin-bottom: 0.8888889em;
+  line-height: 1.1111111;
+}
+
+.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 900;
+  color: inherit;
+}
+
+.prose :where(h2):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 700;
+  font-size: 1.5em;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  line-height: 1.3333333;
+}
+
+.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 800;
+  color: inherit;
+}
+
+.prose :where(h3):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  font-size: 1.25em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
+}
+
+.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 700;
+  color: inherit;
+}
+
+.prose :where(h4):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+}
+
+.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 700;
+  color: inherit;
+}
+
+.prose :where(img):not(:where([class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-captions);
+  font-size: 0.875em;
+  line-height: 1.4285714;
+  margin-top: 0.8571429em;
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-code);
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *))::before {
+  content: "`";
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *))::after {
+  content: "`";
+}
+
+.prose :where(a code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(h1 code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+  font-size: 0.875em;
+}
+
+.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+  font-size: 0.9em;
+}
+
+.prose :where(h4 code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(blockquote code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(thead th code):not(:where([class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(pre):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-pre-code);
+  background-color: var(--tw-prose-pre-bg);
+  overflow-x: auto;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+  border-radius: 0.375rem;
+  padding-top: 0.8571429em;
+  padding-right: 1.1428571em;
+  padding-bottom: 0.8571429em;
+  padding-left: 1.1428571em;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"] *)) {
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-weight: inherit;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"] *))::before {
+  content: none;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"] *))::after {
+  content: none;
+}
+
+.prose :where(table):not(:where([class~="not-prose"] *)) {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+}
+
+.prose :where(thead):not(:where([class~="not-prose"] *)) {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--tw-prose-th-borders);
+}
+
+.prose :where(thead th):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  vertical-align: bottom;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+
+.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--tw-prose-td-borders);
+}
+
+.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
+  border-bottom-width: 0;
+}
+
+.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
+  vertical-align: baseline;
+}
+
+.prose :where(tfoot):not(:where([class~="not-prose"] *)) {
+  border-top-width: 1px;
+  border-top-color: var(--tw-prose-th-borders);
+}
+
+.prose :where(tfoot td):not(:where([class~="not-prose"] *)) {
+  vertical-align: top;
+}
+
+.prose {
+  --tw-prose-body: #374151;
+  --tw-prose-headings: #111827;
+  --tw-prose-lead: #4b5563;
+  --tw-prose-links: #111827;
+  --tw-prose-bold: #111827;
+  --tw-prose-counters: #6b7280;
+  --tw-prose-bullets: #d1d5db;
+  --tw-prose-hr: #e5e7eb;
+  --tw-prose-quotes: #111827;
+  --tw-prose-quote-borders: #e5e7eb;
+  --tw-prose-captions: #6b7280;
+  --tw-prose-code: #111827;
+  --tw-prose-pre-code: #e5e7eb;
+  --tw-prose-pre-bg: #1f2937;
+  --tw-prose-th-borders: #d1d5db;
+  --tw-prose-td-borders: #e5e7eb;
+  --tw-prose-invert-body: #d1d5db;
+  --tw-prose-invert-headings: #fff;
+  --tw-prose-invert-lead: #9ca3af;
+  --tw-prose-invert-links: #fff;
+  --tw-prose-invert-bold: #fff;
+  --tw-prose-invert-counters: #9ca3af;
+  --tw-prose-invert-bullets: #4b5563;
+  --tw-prose-invert-hr: #374151;
+  --tw-prose-invert-quotes: #f3f4f6;
+  --tw-prose-invert-quote-borders: #374151;
+  --tw-prose-invert-captions: #9ca3af;
+  --tw-prose-invert-code: #fff;
+  --tw-prose-invert-pre-code: #d1d5db;
+  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+  --tw-prose-invert-th-borders: #4b5563;
+  --tw-prose-invert-td-borders: #374151;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.prose :where(video):not(:where([class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(figure):not(:where([class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(li):not(:where([class~="not-prose"] *)) {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
+  padding-left: 0.375em;
+}
+
+.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
+  padding-left: 0.375em;
+}
+
+.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+}
+
+.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.25em;
+}
+
+.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+}
+
+.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.25em;
+}
+
+.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+  padding-left: 0;
+}
+
+.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+  padding-right: 0;
+}
+
+.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
+  padding-top: 0.5714286em;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+
+.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
+  padding-left: 0;
+}
+
+.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
+  padding-right: 0;
+}
+
+.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 0;
+}
+
 .static {
   position: static;
 }
@@ -563,6 +1021,14 @@ html {
   margin-bottom: 1rem;
 }
 
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -571,8 +1037,8 @@ html {
   margin-bottom: 1.5rem;
 }
 
-.ml-8 {
-  margin-left: 2rem;
+.mt-4 {
+  margin-top: 1rem;
 }
 
 .block {
@@ -587,6 +1053,10 @@ html {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .w-32 {
   width: 8rem;
 }
@@ -595,10 +1065,18 @@ html {
   width: 2rem;
 }
 
+.max-w-none {
+  max-width: none;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -607,10 +1085,22 @@ html {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -633,10 +1123,6 @@ html {
   align-self: flex-start;
 }
 
-.border-r {
-  border-right-width: 1px;
-}
-
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -659,8 +1145,13 @@ html {
   padding-left: 1rem;
 }
 
-.pr-8 {
-  padding-right: 2rem;
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .text-lg {
@@ -687,6 +1178,10 @@ html {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.no-underline {
+  text-decoration-line: none;
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -695,11 +1190,24 @@ html {
   transition-duration: 150ms;
 }
 
+.duration-100 {
+  transition-duration: 100ms;
+}
+
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:no-underline:hover {
+  text-decoration-line: none;
+}
+
 @media (min-width: 640px) {
   .sm\:flex-row {
     flex-direction: row;
@@ -750,6 +1258,10 @@ html {
     margin-bottom: 0px;
   }
 
+  .lg\:hidden {
+    display: none;
+  }
+
   .lg\:flex-col {
     flex-direction: column;
   }
@@ -770,6 +1282,10 @@ html {
     margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
   }
 
+  .lg\:border-r {
+    border-right-width: 1px;
+  }
+
   .lg\:py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem;
@@ -780,6 +1296,10 @@ html {
     padding-bottom: 6rem;
   }
 
+  .lg\:pr-8 {
+    padding-right: 2rem;
+  }
+
   .lg\:text-right {
     text-align: right;
   }

shared/templates/shared/includes/base.html

@@ -37,12 +37,12 @@
         >
 
         <link
-            href="https://styleguide.pirati.cz/2.12.x/css/styles.css"
+            href="https://styleguide.pirati.cz/2.11.x/css/styles.css"
             rel="stylesheet"
             media="all"
         >
         <link
-            href="https://styleguide.pirati.cz/2.12.x/css/pattern-scaffolding.css"
+            href="https://styleguide.pirati.cz/2.11.x/css/pattern-scaffolding.css"
             rel="stylesheet"
             media="all"
         >
@@ -56,22 +56,22 @@
             <ui-app inline-template>
                 <ui-navbar inline-template>
                     <div>
-                        <div class="container container--default navbar__content navbar__content--initialized">
-                            <div class="navbar__brand flex items-center pr-8 my-4 lg:my-0">
-                                <a href="{% url "lectures:view_avilable_groups" %}">
-                                    <img src="https://styleguide.pirati.cz/2.12.x/images/logo-round-white.svg" class="w-8">
+                        <div class="container container--default navbar__content" :class="{'navbar__content--initialized': true}">
+                            <div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
+                                <a href="/">
+                                    <img src="https://styleguide.pirati.cz/2.12.x/images/logo-round-white.svg" class="w-8" />
                                 </a>
-                                <div class="pl-4 font-bold text-xl border-r border-grey-300 pr-8">
-                                    <a href="{% url "lectures:view_avilable_groups" %}">Učebnice</a>
+                                <a href="/" class="pl-4 font-bold text-xl hover:no-underline lg:border-r lg:border-grey-300 lg:pr-8">Učebnice</a>
+                                <div class="pl-5">{{ header_name }}</div>
                             </div>
-                                {% if header_name %}
-                                    <div class="ml-8">
-                                        {{ header_name }}
-                                    </div>
-                                {% endif %}
+
+                            <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
+                                <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+                                    <i class="ico--menu text-3xl"></i>
+                                </a>
                             </div>
 
-                            <div class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
+                            <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
                                 <ul class="navbar-menu text-white">
                                     {% if user.is_staff %}
                                         <li class="navbar-menu__item">
@@ -87,7 +87,7 @@
                                 </ul>
                             </div>
 
-                            <div class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
+                            <div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
                                 {% if user and not user.is_anonymous %}
                                     <div class="flex items-center space-x-4">
                                         <span class="head-heavy-2xs">{{ user.get_username }}</span>
@@ -192,7 +192,7 @@
         </footer>
 
         <script
-            src="https://styleguide.pirati.cz/2.12.x/js/main.bundle.js"
+            src="https://styleguide.pirati.cz/2.11.x/js/main.bundle.js"
         ></script>
     </body>
 </html>

static_src/base.js

+import $ from "jquery";
+
+import Vue from "vue/dist/vue.esm.browser.min";
+
+import tippy from "tippy.js";
+import "tippy.js/dist/tippy.css";
+import "tippy.js/themes/light-border.css";
+import "tippy.js/animations/scale-subtle.css";
+
+window["Vue"] = Vue;
+
+$(window).ready(
+    () => {
+        // Add tooltips
+        for (const tooltipElement of $('.__tooltipped')) {
+            tippy(
+                tooltipElement,
+                {
+                    content: tooltipElement.getAttribute("aria-label"),
+                    animation: "scale-subtle"
+                }
+            )
+        }
+    }
+);

tailwind.config.js

@@ -15,6 +15,6 @@ module.exports = {
     },
   },
   plugins: [
-    require('@tailwindcss/typography'),
+    require("@tailwindcss/typography"),
   ],
 }