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

add alpine-js stuffs blocked by csp

Browse Source
This commit is contained in:
Patrick Mayr
2022-11-24 17:17:26 +00:00
parent 7a5b888152
commit 75cad5cc4c
8 changed files with 125 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
fet2020/static/js/alpine-csp.js
View File

@@ -3108,6 +3108,9 @@
}
return this.showModal;
},
getNotShowModal() {
return !this.showModal;
},
toggle() {
this.showModal = !this.showModal;
this.setClass();
@@ -3155,7 +3158,7 @@
},
getShowNavBarMd() {
if (screen.width >= 766) {
return this.showNavBar = true;
this.showNavBar = true;
}
return this.showNavBar;
},
@@ -3166,7 +3169,7 @@
return this.showNavBar;
}
}));
alpine_default.data("PopupNav", () => ({
alpine_default.data("popupNav", () => ({
showPopupNav: false,
toggleShowPopupNav() {
this.showPopupNav = !this.showPopupNav;
@@ -3180,9 +3183,9 @@
}
return this.showPopupNav;
},
getScreenLg() {
getNotScreenLg() {
if (screen.width >= 1024) {
return true;
return false;
}
}
}));
@@ -3198,6 +3201,85 @@
return this.showSearch;
}
}));
alpine_default.data("prevArticleButton", () => ({
showPrevArticleButton: false,
openShowPrevArticleButton() {
this.showPrevArticleButton = true;
},
closeShowPrevArticleButton() {
this.showPrevArticleButton = false;
},
getShowPrevArticleButton() {
return this.showPrevArticleButton;
}
}));
alpine_default.data("nextArticleButton", () => ({
showNextArticleButton: false,
openShowNextArticleButton() {
this.showNextArticleButton = true;
},
closeShowNextArticleButton() {
this.showNextArticleButton = false;
},
getShowNextArticleButton() {
return this.showNextArticleButton;
}
}));
alpine_default.data("options", () => ({
showOptions: false,
openShowOptions() {
this.showOptions = true;
},
closeShowOptions() {
this.showOptions = false;
},
getShowOptions() {
if (screen.width >= 766) {
this.showOptions = true;
}
return this.showOptions;
}
}));
alpine_default.data("memberExpandList", () => ({
expandList: false,
toggleExpandList() {
this.expandList = !this.expandList;
this.setClass();
},
openExpandList() {
this.expandList = true;
this.setClass();
},
closeExpandList() {
this.expandList = false;
this.setClass();
},
getExpandList() {
return this.expandList;
},
getNotExpandList() {
return !this.expandList;
},
setClass() {
if (this.getExpandList() == false) {
this.$refs.rotate.classList.remove("-rotate-90");
} else {
this.$refs.rotate.classList.add("-rotate-90");
}
}
}));
alpine_default.data("pin", () => ({
showPin: true,
openShowPin() {
this.showPin = true;
},
closeShowPin() {
this.showPin = false;
},
getShowPin() {
return this.showPin;
}
}));
// packages/csp/builds/cdn.js
window.Alpine = src_default2;

4
fet2020/templates/base.html
View File

@@ -87,7 +87,7 @@
{% else %}
<hr class="border-proprietary">
<div href="#" class="navbar-subcontent"
x-data="PopupNav"
x-data="popupNav"
@click.outside="closeShowPopupNav"
>
<div class="navbar-subcontentButton">
@@ -116,7 +116,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="https://legacy.fet.at/home/intern"><i class="fa-fw fa-solid fa-box-archive mr-2"></i>Legacy</a></li>
<li class="navInternal"
x-show="!getScreenLg"
x-show="getNotScreenLg"
><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>

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

@@ -92,7 +92,7 @@
</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"
@click="openModal"
x-show="!getShowModal"
x-show="getNotShowModal"
x-transition:enter="transition duration-100 ease-in"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"

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

@@ -16,7 +16,7 @@
<!-- Alternativtext auf jede Person anpassen: Name im alt="" dynamisch erzeugen -->
<div>
<img loading="lazy" src="{{ member.image.portrait.url }}" alt="Portraitfoto von {{ member.firstname }} {{ member.surname }}" class="md:float-left w-36 mr-2 mb-2">
<div x-data="{ expandList: false }">
<div>
<h2 class="mb-2 text-lg text-gray-900 dark:text-gray-100 text-left">{{ member.firstname }} {{ member.surname }}</h2>
<div class="mb-2">
Spitzname: {{ member.nickname }}<br>
@@ -27,15 +27,15 @@
</div>
</div>
{% if active_jobs or inactive_jobs %}
<div x-data="{ expandList: false }" class="clear-left">
<div x-data="memberExpandList" class="clear-left">
<h3 class="group mt-4 mb-2 text-lg text-gray-900 dark:text-gray-100">Ehrenamtliche Tätigkeiten:
{% if inactive_jobs %}
<button class="inline float-right text-sm px-2 py-1 text-gray-600 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-400 border rounded border-gray-500 dark:border-gray-500 md:border-gray-400 dark:md:border-gray-600 group-hover:border-gray-500 dark:group-hover:border-gray-500"
@click="expandList = ! expandList"
@click="toggleExpandList"
>
<span x-show="!expandList">Mehr</span><span x-show="expandList">Weniger</span><span class="hidden md:inline"> anzeigen</span>
<span x-show="getNotExpandList">Mehr</span><span x-show="getExpandList">Weniger</span><span class="hidden md:inline"> anzeigen</span>
<i class="fa-fw fa-solid fa-angle-left transition transform -ml-1"
:class="expandList ? '-rotate-90' : ''"
x-ref="rotate"
></i>
</button>
{% endif %}
@@ -50,7 +50,7 @@
{% endfor %}
</ul>
<ul class="flex flex-col gap-1 mt-1"
x-show="expandList"
x-show="getExpandList"
x-transition:enter="transition duration-100 ease-in"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"

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

@@ -97,7 +97,7 @@
</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"
@click="openModal"
x-show="!getShowModal"
x-show="getNotShowModal"
x-transition:enter="transition duration-100 ease-in"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"

8
fet2020/templates/posts/partials/_posts_pinned.html
View File

@@ -2,12 +2,12 @@
<div class="article-cover-desc">
<div class="article-cover-desc-items">
<div class="absolute rounded-full px-2 py-1 bg-gray-800 text-gray-200 bg-opacity-90 capitalize"
x-data="{ pin: true }"
@mouseover="pin = true"
@mouseover.away="pin = false"
x-data="pin"
@mouseover="openShowPin"
@mouseover.away="closeShowPin"
>
<i class="fa-solid fa-thumbtack rotate-45 mx-0.5"></i>
<span class="ml-0.5" x-show="pin">Angepinnt</span>
<span class="ml-0.5" x-show="getShowPin">Angepinnt</span>
</div>
<ul class="article-cover-tags">
{% for t in post.three_tag_names %}

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

@@ -16,13 +16,13 @@
<!-- Main Content -->
<main class="container mx-auto w-full flex-1 my-8 sm:flex flex-col sm:px-4">
<a href="{% url 'posts:show' previous %}" 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 }"
@mouseleave="showPrevArticleButton = false"
@mouseover="showPrevArticleButton = true"
x-data="prevArticleButton"
@mouseleave="closeShowPrevArticleButton"
@mouseover="openShowPrevArticleButton"
>
<i class="fa-solid fa-chevron-left text-5xl -m-2 p-2 bg-gray-100 dark:bg-gray-700 rounded-md"></i>
<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="getShowPrevArticleButton"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90"
x-transition:enter-end="opacity-100 transform scale-100"
@@ -32,12 +32,12 @@
>Vorheriger<br>Artikel</span>
</a>
<a href="{% url '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 }"
@mouseleave="showNextArticleButton = false"
@mouseover="showNextArticleButton = true"
x-data="nextArticleButton"
@mouseleave="closeShowNextArticleButton"
@mouseover="openShowNextArticleButton"
>
<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="getShowNextArticleButton"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90"
x-transition:enter-end="opacity-100 transform scale-100"
@@ -188,15 +188,15 @@
{% if request.user.is_authenticated %}
{% if post.has_agenda %}
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="options">
<span class="flex-1">Agenda</span>
<div class="relative">
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="openShowOptions">
<i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
</button>
<ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
@click.outside="showOptions = false"
x-show="showOptions || $screen('sm')"
@click.outside="closeShowOptions"
x-show="getShowOptions"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="transform origin-right opacity-0 scale-95"
x-transition:enter-end="transform origin-right opacity-100 scale-100"
@@ -224,15 +224,15 @@
{% endif %}
{% if post.has_protocol %}
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="options">
<span class="flex-1">Protokoll</span>
<div class="relative">
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="openShowOptions">
<i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
</button>
<ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
@click.outside="showOptions = false"
x-show="showOptions || $screen('sm')"
@click.outside="closeShowOptions"
x-show="getShowOptions"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="transform origin-right opacity-0 scale-95"
x-transition:enter-end="transform origin-right opacity-100 scale-100"
@@ -261,15 +261,15 @@
{% if post.post_type == 'F' %}
{% get_flatpages '/bs/' for user as pages %}
{% if pages %}
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="options">
<span class="flex-1">{{ pages.first.title }}</span>
<div class="relative">
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="openShowOptions">
<i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
</button>
<ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
@click.outside="showOptions = false"
x-show="showOptions || $screen('sm')"
@click.outside="closeShowOptions"
x-show="getShowOptions"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="transform origin-right opacity-0 scale-95"
x-transition:enter-end="transform origin-right opacity-100 scale-100"
@@ -290,15 +290,15 @@
{% endif %}
{% for file in files %}
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="options">
<span class="flex-1">{{ file.title }}</span>
<div class="relative">
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="openShowOptions">
<i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
</button>
<ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
@click.outside="showOptions = false"
x-show="showOptions || $screen('sm')"
@click.outside="closeShowOptions"
x-show="getShowOptions"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="transform origin-right opacity-0 scale-95"
x-transition:enter-end="transform origin-right opacity-100 scale-100"

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

@@ -70,7 +70,7 @@
</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"
@click="openModal"
x-show="!getShowModal"
x-show="getNotShowModal"
x-transition:enter="transition duration-100 ease-in"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"