bofh/fet2020
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update Redesign to v0.5.0-beta

Browse Source
This commit is contained in:
Patrick Mayr
2022-01-05 23:44:56 +00:00
parent ca9c4649da
commit 3ff497c147
7 changed files with 5134 additions and 200846 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2517
fet2020/static/js/alpinejs@3.2.2.js
View File

File diff suppressed because it is too large Load Diff

34
fet2020/static/js/toolkit-screen@1.0.0.js
View File

@@ -1,34 +0,0 @@
(() => {
// packages/$screen/src/index.js
function src_default(Alpine) {
let data = Alpine.reactive({screensize: window.innerWidth});
const defaultBreakpoints = {
xs: 0,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
"2xl": 1536
};
const breakpoints = window.AlpineMagicHelpersConfig && window.AlpineMagicHelpersConfig.breakpoints ? window.AlpineMagicHelpersConfig.breakpoints : defaultBreakpoints;
let update;
window.addEventListener("resize", () => {
clearTimeout(update);
update = setTimeout(() => data.screensize = window.innerWidth, 150);
});
Alpine.magic("screen", (el) => (breakpoint) => {
let width = data.screensize;
if (Number.isInteger(breakpoint))
return breakpoint <= width;
if (breakpoints[breakpoint] === void 0) {
throw Error("Undefined $screen property: " + breakpoint + ". Supported properties: " + Object.keys(breakpoints).join(", "));
}
return breakpoints[breakpoint] <= width;
});
}
// packages/$screen/builds/cdn.js
document.addEventListener("alpine:init", () => {
window.Alpine.plugin(src_default);
});
})();

4263
fet2020/static/js/vendor.js Normal file
View File

File diff suppressed because it is too large Load Diff

199101
fet2020/static/styles.css
View File

File diff suppressed because it is too large Load Diff

11
fet2020/templates/base.html
View File

@@ -155,18 +155,15 @@
<span class="font-normal" :class="counter>=3 && 'text-yellow-500'"> Matteo Duchscher</span> <span class="font-normal" :class="counter>=3 && 'text-yellow-500'"> Matteo Duchscher</span>
</div> </div>
<script defer src="{% static 'js/scripts.js' %}"></script>
<script src="{% static 'js/gumshoe@5.1.1.js' %}"></script> <script src="{% static 'js/gumshoe@5.1.1.js' %}"></script>
<script src="{% static 'js/smooth-scroll@16.1.2.js' %}"></script> <script src="{% static 'js/smooth-scroll@16.1.2.js' %}"></script>
<script defer src="{% static 'js/vendor.js' %}"></script>
<script defer src="{% static 'js/scripts.js' %}"></script>
<!-- Prism.js Code syntax highlighting --> <!-- Prism.js Code syntax highlighting -->
<script src="{% static 'js/prism-core@1.25.0.js' %}"></script> <script src="{% static 'js/prism-core@1.25.0.js' %}"></script>
<script src="{% static 'js/prism-autoloader@1.25.0.js' %}"></script> <script src="{% static 'js/prism-autoloader@1.25.0.js' %}"></script>
<!-- Alpine.js plugin -->
<script src="{% static 'js/toolkit-screen@1.0.0.js' %}" defer></script>
<!-- Alpine.js -->
<script defer src="{% static 'js/alpinejs@3.2.2.js' %}"></script>
<script> <script>
var spy = new Gumshoe('#scrollspy-subNav a', { var spy = new Gumshoe('#scrollspy-subNav a', {
/***** Scrollspy *****/ // Active classes /***** Scrollspy *****/ // Active classes

2
fet2020/templates/home.html
View File

@@ -5,7 +5,7 @@
{% block content %} {% block content %}
<!--Hero section--> <!--Hero section-->
<section class="hero-image relative z-0 w-full h-56 sm:h-80 lg:h-96 bg-cover-image bg-cover bg-center bg-no-repeat flex-none"> <section class="xl:h-[30rem] relative z-0 w-full h-56 sm:h-80 lg:h-96 bg-cover-image bg-cover bg-center bg-no-repeat flex-none">
<div class="absolute z-10 w-full h-full bg-blue-50 opacity-60"></div> <div class="absolute z-10 w-full h-full bg-blue-50 opacity-60"></div>
<div class="relative container px-4 mx-auto z-20 w-full h-full flex flex-wrap items-center gap-x-2"> <div class="relative container px-4 mx-auto z-20 w-full h-full flex flex-wrap items-center gap-x-2">
<h1 class="w-3/5 flex-1 uppercase font-semibold text-xl sm:text-2xl lg:text-3xl text-center text-gray-900"> <h1 class="w-3/5 flex-1 uppercase font-semibold text-xl sm:text-2xl lg:text-3xl text-center text-gray-900">

52
fet2020/templates/posts/show.html
View File

@@ -13,13 +13,13 @@
{% block content %} {% block content %}
<!-- Main Content --> <!-- Main Content -->
<main class="container mx-auto w-full flex-1 my-8 sm:flex flex-col sm:px-4"> <main class="container mx-auto w-full flex-1 my-8 sm:flex flex-col sm:px-4">
<a href="#" class="hidden z-20 fixed left-0 top-1/2 -mt-8 p-2 xl:flex items-center text-gray-400 rounded-md" <a href="#" class="hidden z-20 fixed left-0 top-1/2 -mt-8 p-2 xl:flex items-center text-gray-400 dark:text-gray-300 rounded-md"
x-data="{ showPrevArticleButton : false }" x-data="{ showPrevArticleButton : false }"
@mouseleave="showPrevArticleButton = false" @mouseleave="showPrevArticleButton = false"
@mouseover="showPrevArticleButton = true" @mouseover="showPrevArticleButton = true"
> >
<i class="fa-light fa-chevron-left text-5xl -m-2 p-2 bg-gray-100 rounded-md"></i> <i class="fa-light fa-chevron-left text-5xl -m-2 p-2 bg-gray-100 dark:bg-gray-700 rounded-md"></i>
<span class="text-gray-600 font-medium bg-gray-100 -m-2 p-2 rounded-r-md origin-left" <span class="text-gray-600 dark:text-gray-300 font-medium bg-gray-100 dark:bg-gray-700 -m-2 p-2 rounded-r-md origin-left"
x-show="showPrevArticleButton" x-show="showPrevArticleButton"
x-transition:enter="transition ease-out duration-300" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90" x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90"
@@ -29,12 +29,12 @@
x-transition:leave-end="opacity-0 bg-opacity-0 transform scale-100" x-transition:leave-end="opacity-0 bg-opacity-0 transform scale-100"
>Vorheriger<br>Artikel</span> >Vorheriger<br>Artikel</span>
</a> </a>
<a href="{% url 'posts:posts.show' next %}" class="hidden z-20 fixed right-0 top-1/2 -mt-8 p-2 xl:flex items-center text-gray-400 rounded-md" <a href="{% url 'posts:posts.show' next %}" class="hidden z-20 fixed right-0 top-1/2 -mt-8 p-2 xl:flex items-center text-gray-400 dark:text-gray-300 rounded-md"
x-data="{ showNextArticleButton : false }" x-data="{ showNextArticleButton : false }"
@mouseleave="showNextArticleButton = false" @mouseleave="showNextArticleButton = false"
@mouseover="showNextArticleButton = true" @mouseover="showNextArticleButton = true"
> >
<span class="z-30 text-gray-600 font-medium bg-gray-100 -m-2 p-2 rounded-l-md text-right origin-right" <span class="z-30 text-gray-600 dark:text-gray-300 font-medium bg-gray-100 dark:bg-gray-700 -m-2 p-2 rounded-l-md text-right origin-right"
x-show="showNextArticleButton" x-show="showNextArticleButton"
x-transition:enter="transition ease-out duration-300" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90" x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90"
@@ -43,16 +43,16 @@
x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 bg-opacity-0 transform scale-100" x-transition:leave-end="opacity-0 bg-opacity-0 transform scale-100"
>Nächster<br>Artikel</span> >Nächster<br>Artikel</span>
<i class="fa-light fa-chevron-right text-5xl -m-2 p-2 bg-gray-100 rounded-md"></i> <i class="fa-light fa-chevron-right text-5xl -m-2 p-2 bg-gray-100 dark:bg-gray-700 rounded-md"></i>
</a> </a>
<section> <section>
<div class="mb-4 flex flex-col sm:flex-col gap-2 mx-auto"> <div class="mb-4 flex flex-col sm:flex-col gap-2 mx-auto">
<ul class="px-4 sm:px-0 mb-2 flex flex-row justify-center gap-2 sm:gap-4 flex-wrap text-blue-700 text-sm uppercase tracking-wide sm:font-medium"> <ul class="px-4 sm:px-0 mb-2 flex flex-row justify-center gap-2 sm:gap-4 flex-wrap text-blue-700 dark:text-blue-200 text-sm uppercase tracking-wide sm:font-medium">
{% for t in post.tag_names %} {% for t in post.tag_names %}
<li class="inline-block py-1 px-2 bg-blue-100 rounded-full"><a href="{% url 'posts:posts.tags' t %}">#{{ t }}</a></li> <li class="inline-block py-1 px-2 bg-blue-100 dark:bg-blue-900 rounded-full"><a href="{% url 'posts:posts.tags' t %}">#{{ t }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
<h1 class="px-4 sm:px-0 text-lg sm:text-xl lg:text-3xl text-center sm:text-left font-medium text-gray-900 font-serif tracking-wider leading-normal" style="line-height: 1.5;">{{ post.title|tags_to_url }}</h1> <h1 class="px-4 sm:px-0 text-lg sm:text-xl lg:text-3xl text-center sm:text-left font-medium text-gray-900 dark:text-gray-100 font-serif tracking-wider leading-normal" style="line-height: 1.5;">{{ post.title|tags_to_url }}</h1>
<div class="mx-auto max-w-max sm:mx-0 sm:max-w-none sm:flex justify-between items-center"> <div class="mx-auto max-w-max sm:mx-0 sm:max-w-none sm:flex justify-between items-center">
<div class="max-w-max flex flex-row justify-center sm:justify-start gap-2 self-center md:self-start"> <div class="max-w-max flex flex-row justify-center sm:justify-start gap-2 self-center md:self-start">
@@ -60,7 +60,7 @@
{% if author_image and author %} {% if author_image and author %}
<img class="hidden sm:block w-12 rounded-full" src="{{ author_image }}" alt="Portraitfoto von {{ author.firstname }}"> <img class="hidden sm:block w-12 rounded-full" src="{{ author_image }}" alt="Portraitfoto von {{ author.firstname }}">
<div class="sm:flex flex-col justify-evenly text-gray-600 text-sm sm:text-base"> <div class="sm:flex flex-col justify-evenly text-gray-600 dark:text-gray-300 text-sm sm:text-base">
<a href="{% url 'member' author.id %}" class="underline">{{ author.firstname }}</a> <a href="{% url 'member' author.id %}" class="underline">{{ author.firstname }}</a>
<span class="sm:hidden"> am </span> <span class="sm:hidden"> am </span>
<span>{{ post.public_date|date:"d. F Y" }}</span> <span>{{ post.public_date|date:"d. F Y" }}</span>
@@ -68,7 +68,7 @@
{% elif post.author %} {% elif post.author %}
<div class="sm:flex flex-col justify-evenly text-gray-600 text-sm sm:text-base"> <div class="sm:flex flex-col justify-evenly text-gray-600 dark:text-gray-300 text-sm sm:text-base">
<a class="underline">{{ post.author|capfirst }}</a> <a class="underline">{{ post.author|capfirst }}</a>
<span class="sm:hidden"> am </span> <span class="sm:hidden"> am </span>
<span>{{ post.public_date|date:"d. F Y" }}</span> <span>{{ post.public_date|date:"d. F Y" }}</span>
@@ -76,7 +76,7 @@
{% else %} {% else %}
<div class="sm:flex flex-col justify-evenly text-gray-600 text-sm sm:text-base"> <div class="sm:flex flex-col justify-evenly text-gray-600 dark:text-gray-300 text-sm sm:text-base">
<a class="underline">fet.at Redaktion</a> <a class="underline">fet.at Redaktion</a>
<span class="sm:hidden"> am </span> <span class="sm:hidden"> am </span>
<span>{{ post.public_date|date:"d. F Y" }}</span> <span>{{ post.public_date|date:"d. F Y" }}</span>
@@ -107,9 +107,9 @@
<div class="relative w-full h-44 sm:h-56 lg:h-64 xl:h-80 bg-center bg-no-repeat bg-cover sm:rounded-md mx-auto" style="background-image: url('{{ post.imageurl }}');"> <div class="relative w-full h-44 sm:h-56 lg:h-64 xl:h-80 bg-center bg-no-repeat bg-cover sm:rounded-md mx-auto" style="background-image: url('{{ post.imageurl }}');">
{% if post.post_type != 'N' %} {% if post.post_type != 'N' %}
<div class="hidden absolute top-0 right-0 bg-white rounded-bl p-2 bg-opacity-80 lg:flex items-center gap-2"> <div class="hidden absolute top-0 right-0 bg-white dark:bg-gray-900 rounded-bl p-2 bg-opacity-80 dark:bg-opacity-70 lg:flex items-center gap-2">
<i class="flex-0 fa-solid fa-calendar-clock text-gray-800"></i> <i class="flex-0 fa-solid fa-calendar-clock text-gray-800 dark:text-gray-200"></i>
<span class="flex-1 text-sm text-gray-800"> <span class="flex-1 text-sm text-gray-800 dark:text-gray-200">
Event-Start: {{ post.event_start|date }} um {{ post.event_start|time }} Uhr<br> Event-Start: {{ post.event_start|date }} um {{ post.event_start|time }} Uhr<br>
Event-Ende: {{ post.event_end|date }} um {{ post.event_end|time }} Uhr Event-Ende: {{ post.event_end|date }} um {{ post.event_end|time }} Uhr
</span> </span>
@@ -119,7 +119,7 @@
</div> </div>
</section> </section>
<section class="mx-4 z-10"> <section class="mx-4 z-10">
<article class="p-4 mt-4 sm:-mt-16 w-full max-w-prose mx-auto bg-white rounded"> <article class="p-4 mt-4 sm:-mt-16 w-full max-w-prose mx-auto bg-white dark:bg-gray-900 rounded sm:dark:border dark:border-gray-800">
<!-- <div class="w-full flex justify-end"> <!-- <div class="w-full flex justify-end">
<div class="hidden lg:block max-w-max text-sm text-gray-600"> <div class="hidden lg:block max-w-max text-sm text-gray-600">
Event-Start: 23. August 2021 um 18:00 Uhr<br> Event-Start: 23. August 2021 um 18:00 Uhr<br>
@@ -179,23 +179,23 @@
{% endif %} {% endif %}
<hr class="lg:hidden -mx-4 border-gray-200 border-1 my-4"> <hr class="lg:hidden -mx-4 border-gray-200 dark:border-gray-800 border-1 my-4">
<div class="lg:hidden"> <div class="lg:hidden">
<h2 class="text-gray-800 font-medium"><i class="fa-solid fa-calendar-days mr-2 text-gray-400"></i>Termindetails:</h2> <h2 class="text-gray-800 dark:text-gray-200 font-medium"><i class="fa-solid fa-calendar-days mr-2 text-gray-400 dark:text-gray-500"></i>Termindetails:</h2>
<ul class="text-base text-gray-700 my-1"> <ul class="text-base text-gray-700 dark:text-gray-300 my-1">
<li>Start:&Tab;{{ post.event_start|date }} um {{ post.event_start|time }} Uhr</li> <li>Start:&Tab;{{ post.event_start|date }} um {{ post.event_start|time }} Uhr</li>
<li>Ende:&Tab;{{ post.event_end|date }} um {{ post.event_end|time }} Uhr</li> <li>Ende:&Tab;{{ post.event_end|date }} um {{ post.event_end|time }} Uhr</li>
</ul> </ul>
</div> </div>
<hr class="-mx-4 border-gray-200 border-1 my-4"> <hr class="-mx-4 border-gray-200 dark:border-gray-800 border-1 my-4">
<div class="-m-4 flex divide-x divide-gray-200 text-sm sm:text-base"> <div class="-m-4 flex divide-x divide-gray-200 dark:divide-gray-800 text-sm sm:text-base">
<a href="#" class="w-1/2 p-4 flex items-center gap-2"> <a href="#" class="w-1/2 p-4 flex items-center gap-2">
<i class="fa-solid fa-chevron-left text-gray-600"></i> <i class="fa-solid fa-chevron-left text-gray-600 dark:text-gray-400"></i>
<span class="text-gray-700 font-medium">Vorheriger Artikel</span> <span class="text-gray-700 dark:text-gray-300 font-medium">Vorheriger Artikel</span>
</a> </a>
<a href="{% url 'posts:posts.show' next %}" class="w-1/2 p-4 flex flex-row-reverse items-center gap-2"> <a href="{% url 'posts:posts.show' next %}" class="w-1/2 p-4 flex flex-row-reverse items-center gap-2">
<i class="fa-solid fa-chevron-right text-gray-600"></i> <i class="fa-solid fa-chevron-right text-gray-600 dark:text-gray-400"></i>
<span class="text-gray-700 font-medium">Nächster Artikel</span> <span class="text-gray-700 dark:text-gray-300 font-medium">Nächster Artikel</span>
</a> </a>
</div> </div>
</article> </article>