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

add subNav and edit Button

Browse Source
This commit is contained in:
Patrick Mayr
2022-01-05 22:49:43 +00:00
committed by root
parent 107092be46
commit e4975011cd
2 changed files with 111 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,85 +7,132 @@
<!-- Main Content -->
<main class="container mx-auto w-full px-4 mt-8 flex-1">
<h1 class="page-title">Über uns</h1>
<div class="sm:flex sm:flex-row justify-center my-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"
x-show="showModal || $screen('sm')"
x-transition:enter="transition duration-300 ease-out"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition duration-150 ease-in"
x-transition:leave-start="opacity-100"
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 sm:bg-transparent rounded sm:rounded-none"
@click.outside="showModal = false"
x-show="showModal || $screen('sm')"
x-transition:enter="transition transform ease-out duration-300"
x-transition:enter-start="scale-110 opacity-0"
x-transition:enter-end="scale-100 opacity-100"
x-transition:leave="transition transform ease-in duration-150"
x-transition:leave-start="scale-100 opacity-100"
x-transition:leave-end="scale-110 opacity-0"
>
<div class="flex justify-between items-center mb-2 sm:hidden">
<h2 class="text-gray-800 sm:section-title sm_section-title-margins sm:w-full">
<span class="mr-1 text-gray-400 sm:hidden">
<i class="fa-solid fa-bars"></i>
</span>
Kategorien
</h2>
<div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 sm:hidden cursor-pointer" @click="showModal = false">
<i class="far fa-times"></i>
</div>
</div>
<ul class="sideBarNav">
<div class="sm:flex sm:flex-row justify-center my-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"
x-show="showModal || $screen('sm')"
x-transition:enter="transition duration-300 ease-out"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition duration-150 ease-in"
x-transition:leave-start="opacity-100"
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 sm:bg-transparent rounded sm:rounded-none"
@click.outside="showModal = false"
x-show="showModal || $screen('sm')"
x-transition:enter="transition transform ease-out duration-300"
x-transition:enter-start="scale-110 opacity-0"
x-transition:enter-end="scale-100 opacity-100"
x-transition:leave="transition transform ease-in duration-150"
x-transition:leave-start="scale-100 opacity-100"
x-transition:leave-end="scale-110 opacity-0"
>
<div class="flex justify-between items-center mb-2 sm:hidden">
<h2 class="text-gray-800 sm:section-title sm_section-title-margins sm:w-full">
<span class="mr-1 text-gray-400 sm:hidden">
<i class="fa-solid fa-bars"></i>
</span>
Kategorien
</h2>
<div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 sm:hidden cursor-pointer" @click="showModal = false">
<i class="far fa-times"></i>
</div>
</div>
<ul class="sideBarNav">
{% for job in pinned_job_groups %}
<li class="{% if job.slug in request.path %} active {% endif %}">
<a href="{% url 'jobs' job.slug %}">{{ job.name|softhyphen|safe }}</a>
<li class="{% if job.slug in request.path %}active{% endif %}">
<a href="{% url 'jobs' job.slug %}">{{ job.name }}</a>
</li>
{% if job.slug in job_members.0.job.job_group.slug %}
{% regroup job_members by job.name as all_jobmem_list %}
<ul id="scrollspy-subNav">
{% for jobmem in all_jobmem_list %}
<li class="{% if jobmem.grouper %}active{% endif %}">
<a href="#{{ jobmem.list.0.job.slug }}">{{ jobmem.grouper }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
{% for job in unpinned_job_groups %}
<li class="{% if job.slug in request.path %} active {% endif %}">
<a href="{% url 'jobs' job.slug %}">{{ job.name|softhyphen|safe }}</a>
<li class="{% if job.slug in request.path %}active{% endif %}">
<a href="{% url 'jobs' job.slug %}">{{ job.name }}</a>
</li>
{% if job.slug in job_members.0.job.job_group.slug %}
{% regroup job_members by job.name as all_jobmem_list %}
<ul id="scrollspy-subNav">
{% for jobmem in all_jobmem_list %}
<li class="{% if jobmem.grouper %}active{% endif %}">
<a href="#{{ jobmem.list.0.job.slug }}">{{ jobmem.grouper }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
<hr class="">
<li class="{% if 'pension' in request.path %} active {% endif %}">
<li class="{% if 'pension' in request.path %}active{% endif %}">
<a href="{% url 'members_view' 'pension' %}">Pension</a>
</li>
<li class="{% if '/members/' == request.path %} active {% endif %}">
<li class="{% if '/members/' == request.path %}active{% endif %}">
<a href="{% url 'members' %}">Alle Mitglieder</a>
</li>
<li class="active"><a href="#">Studienkommission</a></li>
<ul id="scrollspy-subNav">
<li class="active"><a href="#stuko-computational-science">Studienkommission Computational Science</a></li>
<li><a href="#stuko-et">Studienkommission ET</a></li>
<li><a href="#stuko-ulg">Studienkommission Universitätslehrgänge</a></li>
</ul>
{% if request.user.is_authenticated %}
{% if pinned_job_groups%}
{% for job in pinned_job_groups %}
{% if job.slug in request.path %}
<li class="internalLI">
<a href="{% url 'admin:members_jobgroup_change' job.id %}">
<i class="fa-regular fa-pen-to-square mr-1"></i>{{ job.name|softhyphen|safe }} bearbeiten
</a>
</li>
{% endif %}
{% endfor %}
{% elif unpinned_job_groups %}
{% for job in unpinned_job_groups %}
{% if job.slug in request.path %}
<li class="internalLI">
<a href="{% url 'admin:members_jobgroup_change' job.id %}">
<i class="fa-regular fa-pen-to-square mr-1"></i>{{ job.name|softhyphen|safe }} bearbeiten
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
<li class="internalLI"><a href="#"><i class="fa-regular fa-pen-to-square mr-1"></i>Bearbeiten</a></li>
</ul>
</div>
</div>
<button id="modal-trigger-1" class="trigger fixed bottom-4 right-4 bg-proprietary-darker text-blue-50 shadow-lg text-2xl rounded sm:hidden"
@click="showModal = true"
x-show="!showModal && !$screen('sm')"
x-transition:enter="transition duration-100 ease-in"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition duration-100 ease-out"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
>
<i class="fa-solid fa-bars px-2 py-1"></i>
</button>
</aside>
{% if fs_info %}
<li class="internalLI">
<a href="{% url 'admin:core_customflatpage_change' fs_info.id %}">
<i class="fa-regular fa-pen-to-square mr-1"></i>Fachschaft-Text bearbeiten
</a>
</li>
{% endif %}
{% endif %}
</ul>
</div>
</div>
<button id="modal-trigger-1" class="trigger fixed bottom-4 right-4 bg-proprietary-darker text-blue-50 shadow-lg text-2xl rounded sm:hidden"
@click="showModal = true"
x-show="!showModal && !$screen('sm')"
x-transition:enter="transition duration-100 ease-in"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition duration-100 ease-out"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
>
<i class="fa-solid fa-bars px-2 py-1"></i>
</button>
</aside>
<section class="flex-grow max-w-prose my-8 sm:my-0">
{% if description %}
@@ -106,12 +153,6 @@
<div class="db-page-content text-gray-800">
{{ fs_info.content|safe }}
</div>
{% if request.user.is_authenticated %}
<hr>
<a href="{% url 'admin:core_customflatpage_change' fs_info.id %}">Fachschaft-Text bearbeiten</a>
<hr>
{% endif %}
{% endif %}
<article class="members-article">
@@ -130,25 +171,4 @@
</section>
</div>
</main>
<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/toolkit-screen@1.0.0.js' %}" defer></script>
<script defer src="{% static 'js/alpinejs@3.2.2.js' %}"></script>
<script defer src="{% static 'js/scripts.js' %}"></script>
<script>
var spy = new Gumshoe('#scrollspy-subNav a', {
/***** Scrollspy *****/ // Active classes
navClass: 'font-semibold', // 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>
{% endblock %}

16
fet2020/templates/members/partials/_member_details.html
View File

@@ -55,19 +55,3 @@
{% endif %}
</div>
</section>
<script src="{% static 'gumshoe.js' %}"></script>
<script src="{% static 'smooth-scroll.js' %}"></script>
<script>
var spy = new Gumshoe('#scrollspy-subNav a', {
/***** Scrollspy *****/ // Active classes
navClass: 'font-semibold', // 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>