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

fix alpine-js stuffs blocked by csp

Browse Source
This commit is contained in:
Patrick Mayr
2022-11-20 19:09:45 +00:00
parent ee357cae28
commit 9018fda102
7 changed files with 3250 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3196
fet2020/static/js/alpine-csp.js Normal file
View File

File diff suppressed because it is too large Load Diff

12
fet2020/static/js/scripts.js
View File

@@ -40,3 +40,15 @@ function cookieSet(cname) {
} }
return false; return false;
} }
var spy = new Gumshoe('#scrollspy-subNav a', {
/***** Scrollspy *****/ // Active classes
navClass: 'active', // applied to the nav list item
});
/***** SmoothScroll *****/ // All animations will take exactly 500ms
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 750,
speedAsDuration: true,
easing: 'easeInOutQuad'
});

51
fet2020/templates/base.html
View File

@@ -4,12 +4,12 @@
{% load static %} {% load static %}
{% block body %} {% block body %}
<body x-data="{ showModal: false }" :class="{ 'overflow-y-hidden sm:overflow-y-auto': showModal }"> <body x-data="modal" x-ref="overflow">
<!-- NAVBAR --> <!-- NAVBAR -->
{% if not request.user.is_authenticated %} {% if not request.user.is_authenticated %}
<nav class="navBar-md" x-data="{ showNavBar: false }"> <nav class="navBar-md" x-data="myNavBar">
{% else %} {% else %}
<nav class="navBar-lg" x-data="{ showNavBar: false }"> <nav class="navBar-lg" x-data="myNavBar">
{% endif %} {% endif %}
<div> <div>
<a href="{% url 'home' %}"> <a href="{% url 'home' %}">
@@ -17,14 +17,14 @@
<img src="{% static 'img/FET-Logo-2014_64_dark.svg' %}" alt="FET-Logo" class="navbar-logo p-2 hidden dark:block"> <img src="{% static 'img/FET-Logo-2014_64_dark.svg' %}" alt="FET-Logo" class="navbar-logo p-2 hidden dark:block">
</a> </a>
<button class="navbar-toggle" <button class="navbar-toggle"
@click="showNavBar = ! showNavBar" @click="toggleShowNavBar"
> >
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button> </button>
{% if not request.user.is_authenticated %} {% if not request.user.is_authenticated %}
<ul id="navBarContent" class="navbar-content" x-show="showNavBar || $screen('md')" x-collapse.min.0px> <ul id="navBarContent" class="navbar-content" x-show="getShowNavBarMd" x-collapse.min.0px>
{% else %} {% else %}
<ul id="navBarContent" class="navbar-content" x-show="showNavBar || $screen('lg')" x-collapse.min.0px> <ul id="navBarContent" class="navbar-content" x-show="getShowNavBarLg" x-collapse.min.0px>
{% endif %} {% endif %}
<li class="{% if 'posts' in request.path %}active{% endif %}"><a href="{% url 'posts:index' %}">News</a></li> <li class="{% if 'posts' in request.path %}active{% endif %}"><a href="{% url 'posts:index' %}">News</a></li>
<li class="{% if 'members' in request.path %}active{% endif %}"><a href="{% url 'members:members' 'active' %}">Fachschaft</a></li> <li class="{% if 'members' in request.path %}active{% endif %}"><a href="{% url 'members:members' 'active' %}">Fachschaft</a></li>
@@ -41,12 +41,12 @@
{% else %} {% else %}
<hr class="border-proprietary"> <hr class="border-proprietary">
<div href="#" class="navbar-subcontent" <div href="#" class="navbar-subcontent"
x-data="{ showPopupNav: false }" x-data="PopupNav"
@click.outside="showPopupNav = false" @click.outside="closeShowPopupNav"
> >
<div class="navbar-subcontentButton"> <div class="navbar-subcontentButton">
<a class="rounded-l" href="#" <a class="rounded-l" href="#"
@click="showPopupNav = !showPopupNav" @click="toggleShowPopupNav"
> >
{% if request.user.first_name %} {% if request.user.first_name %}
Hallo {{ request.user.first_name }} Hallo {{ request.user.first_name }}
@@ -57,7 +57,7 @@
<a class="rounded-r" href="{% url 'authentications:logout' %}?next={{ request.path }}"><i class="fa-solid fa-power-off"></i></a> <a class="rounded-r" href="{% url 'authentications:logout' %}?next={{ request.path }}"><i class="fa-solid fa-power-off"></i></a>
</div> </div>
<div class="navbar-subcontentList" <div class="navbar-subcontentList"
x-show="showPopupNav || !$screen('lg')" x-show="getShowPopupNavLg"
x-transition:enter="transition ease-out duration-300" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="transform origin-top opacity-0 scale-95" x-transition:enter-start="transform origin-top opacity-0 scale-95"
x-transition:enter-end="transform origin-top opacity-100 scale-100" x-transition:enter-end="transform origin-top opacity-100 scale-100"
@@ -70,7 +70,7 @@
<li class="navInternal"><a href="{% url 'intern:index' %}"><i class="fa-fw fa-solid fa-database mr-2"></i>Intern</a></li> <li class="navInternal"><a href="{% url 'intern:index' %}"><i class="fa-fw fa-solid fa-database mr-2"></i>Intern</a></li>
<li class="navInternal"><a href="https://legacy.fet.at/home/intern"><i class="fa-fw fa-solid fa-box-archive mr-2"></i>Legacy</a></li> <li class="navInternal"><a href="https://legacy.fet.at/home/intern"><i class="fa-fw fa-solid fa-box-archive mr-2"></i>Legacy</a></li>
<li class="navInternal" <li class="navInternal"
x-show="!$screen('lg')" x-show="!getScreenLg"
><a href="{% url 'authentications:logout' %}?next={{ request.path }}"><i class="fa-fw fa-solid fa-power-off mr-2"></i>Abmelden</a></li> ><a href="{% url 'authentications:logout' %}?next={{ request.path }}"><i class="fa-fw fa-solid fa-power-off mr-2"></i>Abmelden</a></li>
</div> </div>
</div> </div>
@@ -109,35 +109,22 @@
<hr class="legal-divider"> <hr class="legal-divider">
<p class="copyright">© {% now 'Y' %} FET - Alle Rechte vorbehalten.</p> <p class="copyright">© {% now 'Y' %} FET - Alle Rechte vorbehalten.</p>
</footer> </footer>
<div class="super-duper-awesome-signature" x-data="{ counter: 0 }"> <div class="super-duper-awesome-signature" x-data="counter">
<span :class="counter>=4 && 'text-purple-300'">Handcrafted </span> <span x-ref="countFour">Handcrafted </span>
<span :class="counter>=5 && 'text-green-400'">with </span> <span x-ref="countFive">with </span>
<i class="fa-solid fa-heart" aria-label="love" @click="counter++" :class="counter>=2 ? 'text-proprietary hover:text-proprietary-dark' : 'text-red-600 hover:text-red-700'"></i> <i class="fa-solid fa-heart text-red-600 hover:text-red-700" aria-label="love" @click="increment" x-ref="countTwo"></i>
<span :class="counter>=6 && 'text-pink-400'"> by</span> <span x-ref="countSix"> by</span>
<span class="font-normal" :class="counter>=3 && 'text-yellow-500'"> FET</span> <span class="font-normal" x-ref="countThree"> FET</span>
</div> </div>
<script src="{% static 'js/alpine-csp.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> <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>
<script>
var spy = new Gumshoe('#scrollspy-subNav a', {
/***** Scrollspy *****/ // Active classes
navClass: 'active', // applied to the nav list item
});
/***** SmoothScroll *****/ // All animations will take exactly 500ms
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 750,
speedAsDuration: true,
easing: 'easeInOutQuad'
});
</script>
</body> </body>
{% endblock %} {% endblock %}

4
fet2020/templates/home.html
View File

@@ -83,7 +83,7 @@
</div> </div>
<div id="infoBox" class="sticky bottom-4 mt-8 p-4 rounded-lg shadow-lg bg-gray-600 dark:bg-gray-800 text-gray-200 dark:text-gray-300 flex gap-x-4 items-center leading-none dark:border-2 dark:border-gray-700" <div id="infoBox" class="sticky bottom-4 mt-8 p-4 rounded-lg shadow-lg bg-gray-600 dark:bg-gray-800 text-gray-200 dark:text-gray-300 flex gap-x-4 items-center leading-none dark:border-2 dark:border-gray-700"
x-data="{ consent: true }" x-data="infoBox"
x-show="consent" x-show="consent"
x-transition:leave="transition ease-in-out duration-500" x-transition:leave="transition ease-in-out duration-500"
x-transition:leave-start="transform origin-bottom opacity-100 scale-100 translate-y-0" x-transition:leave-start="transform origin-bottom opacity-100 scale-100 translate-y-0"
@@ -101,7 +101,7 @@
<span class="hidden lg:inline text-sm text-gray-300 dark:text-gray-400">Du hast Fragen zum Studium oder möchtest dich einfach mich anderen Studierenden austauschen? </span><span class="text-sm text-gray-300 dark:text-gray-400">Klicke hier zum Beitreten <span class="hidden sm:inline"><i class="fa-solid fa-angle-right"></i></span></span> <span class="hidden lg:inline text-sm text-gray-300 dark:text-gray-400">Du hast Fragen zum Studium oder möchtest dich einfach mich anderen Studierenden austauschen? </span><span class="text-sm text-gray-300 dark:text-gray-400">Klicke hier zum Beitreten <span class="hidden sm:inline"><i class="fa-solid fa-angle-right"></i></span></span>
</a> </a>
<button id="infoBox-closeButton" class="flex-none self-stretch px-2 -mr-2" onclick="hideInfoBox('m', 1)" <button id="infoBox-closeButton" class="flex-none self-stretch px-2 -mr-2" onclick="hideInfoBox('m', 1)"
@click="consent = false" @click="closeBox"
><i class="fa-solid fa-xmark text-gray-300 dark:text-gray-500"></i></button> ><i class="fa-solid fa-xmark text-gray-300 dark:text-gray-500"></i></button>
</div> </div>
</main> </main>

12
fet2020/templates/members/index.html
View File

@@ -11,7 +11,7 @@
<div class="sm:flex sm:flex-row justify-center my-8"> <div class="sm:flex sm:flex-row justify-center my-8">
<aside class="flex-none max-w-min sm:mr-8"> <aside class="flex-none max-w-min sm:mr-8">
<div class="fixed sm:sticky top-0 sm:top-4 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center" <div class="fixed sm:sticky top-0 sm:top-4 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
x-show="showModal || $screen('sm')" x-show="getShowModal"
x-transition:enter="transition duration-300 ease-out" x-transition:enter="transition duration-300 ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:enter-end="opacity-100"
@@ -20,8 +20,8 @@
x-transition:leave-end="opacity-0" x-transition:leave-end="opacity-0"
> >
<div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 sm:p-0 bg-white dark:bg-gray-700 sm:bg-transparent rounded sm:rounded-none" <div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 sm:p-0 bg-white dark:bg-gray-700 sm:bg-transparent rounded sm:rounded-none"
@click.outside="showModal = ! showModal" @click.outside="toggle"
x-show="showModal || $screen('sm')" x-show="getShowModal"
x-transition:enter="transition transform ease-out duration-300" x-transition:enter="transition transform ease-out duration-300"
x-transition:enter-start="scale-110 opacity-0" x-transition:enter-start="scale-110 opacity-0"
x-transition:enter-end="scale-100 opacity-100" x-transition:enter-end="scale-100 opacity-100"
@@ -36,7 +36,7 @@
</span> </span>
Kategorien Kategorien
</h2> </h2>
<div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="showModal = false"> <div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="closeModal">
<i class="fa-solid fa-xmark"></i> <i class="fa-solid fa-xmark"></i>
</div> </div>
</div> </div>
@@ -91,8 +91,8 @@
</div> </div>
</div> </div>
<button class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden" <button class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden"
@click="showModal = true" @click="openModal"
x-show="!showModal" x-show="!getShowModal"
x-transition:enter="transition duration-100 ease-in" x-transition:enter="transition duration-100 ease-in"
x-transition:enter-start="opacity-0" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:enter-end="opacity-100"

17
fet2020/templates/posts/index.html
View File

@@ -9,7 +9,7 @@
<div class="sm:flex sm:flex-row-reverse justify-center"> <div class="sm:flex sm:flex-row-reverse justify-center">
<aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0"> <aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0">
<div class="z-10 fixed sm:sticky top-0 sm:top-4 lg:top-8 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center" <div class="z-10 fixed sm:sticky top-0 sm:top-4 lg:top-8 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
x-show="showModal || $screen('sm')" x-show="getShowModal"
x-transition:enter="transition duration-300 ease-out" x-transition:enter="transition duration-300 ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:enter-end="opacity-100"
@@ -18,8 +18,8 @@
x-transition:leave-end="opacity-0" x-transition:leave-end="opacity-0"
> >
<div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 rounded bg-white dark:bg-gray-800 sm:shadow-lg sm:dark:border-2 sm:dark:border-gray-700" <div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 rounded bg-white dark:bg-gray-800 sm:shadow-lg sm:dark:border-2 sm:dark:border-gray-700"
@click.outside="showModal = ! showModal" @click.outside="toggle"
x-show="showModal || $screen('sm')" x-show="getShowModal"
x-transition:enter="transition transform ease-out duration-300" x-transition:enter="transition transform ease-out duration-300"
x-transition:enter-start="scale-110 opacity-0" x-transition:enter-start="scale-110 opacity-0"
x-transition:enter-end="scale-100 opacity-100" x-transition:enter-end="scale-100 opacity-100"
@@ -34,11 +34,11 @@
</span> </span>
Auswahl einschränken Auswahl einschränken
</h2> </h2>
<div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="showModal = false"> <div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="closeModal">
<i class="fa-solid fa-xmark"></i> <i class="fa-solid fa-xmark"></i>
</div> </div>
</div> </div>
<form action="" method="POST" class="grid grid-cols-1 gap-2 sm:gap-4" x-data="{ selectedYear: '{{ formset.year.value }}' }"> <form action="" method="POST" class="grid grid-cols-1 gap-2 sm:gap-4">
{% csrf_token %} {% csrf_token %}
{% for message in messages %} {% for message in messages %}
@@ -52,7 +52,6 @@
<label class="block"> <label class="block">
<span class="text-gray-700 dark:text-gray-200">Jahr</span> <span class="text-gray-700 dark:text-gray-200">Jahr</span>
<select class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" <select class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
x-model="selectedYear"
id="id_year" id="id_year"
name="year" name="year"
> >
@@ -63,7 +62,7 @@
</label> </label>
<label <label
x-show="selectedYear != ''" x-show="!getSelectedYear"
x-transition:enter="transition ease-out duration-300" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:enter-end="opacity-100"
@@ -97,8 +96,8 @@
</div> </div>
</div> </div>
<button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden" <button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden"
@click="showModal = true" @click="openModal"
x-show="!showModal" x-show="!getShowModal"
x-transition:enter="transition duration-100 ease-in" x-transition:enter="transition duration-100 ease-in"
x-transition:enter-start="opacity-0" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:enter-end="opacity-100"

12
fet2020/templates/tasks/index.html
View File

@@ -9,7 +9,7 @@
<div class="sm:flex sm:flex-row-reverse justify-center"> <div class="sm:flex sm:flex-row-reverse justify-center">
<aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0"> <aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0">
<div class="z-10 fixed sm:sticky top-0 sm:top-4 lg:top-8 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center" <div class="z-10 fixed sm:sticky top-0 sm:top-4 lg:top-8 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
x-show="showModal || $screen('sm')" x-show="getShowModal"
x-transition:enter="transition duration-300 ease-out" x-transition:enter="transition duration-300 ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:enter-end="opacity-100"
@@ -18,8 +18,8 @@
x-transition:leave-end="opacity-0" x-transition:leave-end="opacity-0"
> >
<div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 rounded bg-white dark:bg-gray-800 sm:shadow-lg sm:dark:border-2 sm:dark:border-gray-700" <div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 rounded bg-white dark:bg-gray-800 sm:shadow-lg sm:dark:border-2 sm:dark:border-gray-700"
@click.outside="showModal = ! showModal" @click.outside="toggle"
x-show="showModal || $screen('sm')" x-show="getShowModal"
x-transition:enter="transition transform ease-out duration-300" x-transition:enter="transition transform ease-out duration-300"
x-transition:enter-start="scale-110 opacity-0" x-transition:enter-start="scale-110 opacity-0"
x-transition:enter-end="scale-100 opacity-100" x-transition:enter-end="scale-100 opacity-100"
@@ -34,7 +34,7 @@
</span> </span>
Auswahl einschränken Auswahl einschränken
</h2> </h2>
<div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="showModal = false"> <div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="closeModal">
<i class="fa-solid fa-xmark"></i> <i class="fa-solid fa-xmark"></i>
</div> </div>
</div> </div>
@@ -69,8 +69,8 @@
</div> </div>
</div> </div>
<button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden" <button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden"
@click="showModal = true" @click="openModal"
x-show="!showModal" x-show="!getShowModal"
x-transition:enter="transition duration-100 ease-in" x-transition:enter="transition duration-100 ease-in"
x-transition:enter-start="opacity-0" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:enter-end="opacity-100"