first implementation of new layout
This commit is contained in:
@@ -1,104 +1,154 @@
|
||||
{% extends "layout.html" %}
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% load softhyphen_tags %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grid-container">
|
||||
<!-- 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">
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
|
||||
<div class="grid-x grid-padding-x padding-top-1">
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
|
||||
{% for job in pinned_job_groups %}
|
||||
<div class="cell large-2 medium-4 small-6">
|
||||
<a class="button job-btn {% if job.slug in request.path %} active {% endif %}" href="{% url 'jobs' job.slug %}">
|
||||
{{ job.name|softhyphen|safe }}
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<hr class="">
|
||||
|
||||
{% for job in unpinned_job_groups %}
|
||||
<div class="cell large-2 medium-4 small-6">
|
||||
<a class="button job-btn {% if job.slug in request.path %} active {% endif %} job-btn" href="{% url 'jobs' job.slug %}">
|
||||
{{ job.name|softhyphen|safe }}
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<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 %}">
|
||||
<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>
|
||||
|
||||
<div class="cell large-2 medium-4 small-6">
|
||||
<a class="button memb-btn {% if 'pension' in request.path %} active {% endif %}" href="{% url 'members_view' 'pension' %}">
|
||||
Pension
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="cell large-2 medium-4 small-6">
|
||||
<a class="button memb-btn {% if '/members/' == request.path %} active {% endif %}" href="{% url 'members' %}">
|
||||
Alle Mitglieder
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% if description %}
|
||||
<div class="grid-x">
|
||||
<div class="cell padding-top-1 padding-left-1 padding-right-1" style="background-color: white; text-align: justify;">
|
||||
{{ description|safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- show details of a member -->
|
||||
{% if member %}
|
||||
{% block members_content %}
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
|
||||
<!-- show all, active or pension members -->
|
||||
{% if members %}
|
||||
<div class="grid-x">
|
||||
<div class="cell padding-top-1 padding-left-1 padding-right-1" style="background-color: white; text-align: justify;">
|
||||
{% if fs_info %}
|
||||
{{ fs_info.content|safe }}
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
<hr>
|
||||
<a href="{% url 'admin:core_customflatpage_change' fs_info.id %}">Fachschaft-Text bearbeiten</a>
|
||||
<hr>
|
||||
<section class="flex-grow max-w-prose my-8 sm:my-0">
|
||||
{% if description %}
|
||||
<div class="db-page-content text-gray-800">
|
||||
{{ description|safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="padding-top-1 padding-left-1 padding-right-1" style="background-color: white;">
|
||||
{% include 'members/members_list.html' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if member %}
|
||||
<!-- show details of a member -->
|
||||
{% block members_content %}
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
|
||||
<!-- show job lists in a job group -->
|
||||
{% include 'members/jobs_list.html' %}
|
||||
{% if members %}
|
||||
<!-- show all, active or pension members -->
|
||||
{% if fs_info %}
|
||||
<div class="db-page-content text-gray-800">
|
||||
{{ fs_info.content|safe }}
|
||||
</div>
|
||||
|
||||
</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">
|
||||
<div class="members-listing">
|
||||
{% for member in members %}
|
||||
{% include 'members/partials/_member.html' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<!-- show job lists in a job group -->
|
||||
{% include 'members/jobs_list.html' %}
|
||||
</div>
|
||||
</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 %}
|
||||
|
||||
<script>
|
||||
// Get the container element
|
||||
var btnContainer = document.getElementById("grid-container");
|
||||
|
||||
// Get all buttons with class="btn" inside the container
|
||||
var grid = btnContainer.getElementsByClassName("grid-x");
|
||||
var cell = grid.getElementsByClassName("cell");
|
||||
var btns = cell.getElementsByClassName("button");
|
||||
|
||||
// Loop through the buttons and add the active class to the current/clicked button
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
btns[i].addEventListener("click", function() {
|
||||
var current = document.getElementsByClassName("active");
|
||||
|
||||
// If there's no active class
|
||||
if (current.length > 0) {
|
||||
current[0].className = current[0].className.replace(" active", "");
|
||||
}
|
||||
|
||||
// Add the active class to the current/clicked button
|
||||
this.className += " active";
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user