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>
|
||||
|
||||
@@ -1,20 +1,17 @@
|
||||
{% regroup job_members by job.name as all_jobmem_list %}
|
||||
|
||||
{% for jobmem in all_jobmem_list %}
|
||||
|
||||
<div class="padding-top-1 padding-left-1 padding-right-1" style="background-color: white;">
|
||||
|
||||
<h2>{{jobmem.grouper}}<a class="headerlink" id="{{jobmem.list.0.job.slug}}" href="#{{jobmem.list.0.job.slug}}" title="Permalink to {{jobmem.grouper}}"> #</a></h2>
|
||||
|
||||
<div class="grid-x align-bottom">
|
||||
|
||||
<article id="{{jobmem.list.0.job.slug}}" class="members-article">
|
||||
<a href="#{{jobmem.list.0.job.slug}}" class="title">
|
||||
<i class="far fa-link"></i>
|
||||
<h2>{{jobmem.grouper}}</h2>
|
||||
</a>
|
||||
<div class="members-listing">
|
||||
{% for jm in jobmem.list %}
|
||||
{% with member=jm.member %}
|
||||
{% include 'members/partials/_job_membership_grid.html' %}
|
||||
{% include 'members/partials/_member.html' %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
{% extends 'members/index.html' %}
|
||||
|
||||
{% block extraheader %}
|
||||
<meta content="{{member.image.url}}" property="og:image">
|
||||
<meta content="{{ member.firstname }}" property="og:profile:first_name">
|
||||
<meta content="{{ member.surname }}" property="og:profile:last_name">
|
||||
<meta content="profile" property="og:type">
|
||||
<meta content="{{member.image.url}}" property="og:image">
|
||||
<meta content="{{ member.firstname }}" property="og:profile:first_name">
|
||||
<meta content="{{ member.surname }}" property="og:profile:last_name">
|
||||
<meta content="profile" property="og:type">
|
||||
{% endblock %}
|
||||
|
||||
{% block members_content %}
|
||||
<div class="padding-top-1 padding-left-1 padding-bottom-1 padding-right-1" style="background-color: white;">
|
||||
{% include 'members/partials/_member_details.html' %}
|
||||
</div>
|
||||
{% include 'members/partials/_member_details.html' %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
<div class="grid-x align-bottom">
|
||||
{% for member in members %}
|
||||
<div class="cell large-2 medium-3 small-6 padding-right-1" style="text-align: center">
|
||||
@@ -7,4 +6,3 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
{# only thumb and name of member #}
|
||||
<a class="thumbnail member-thumb" href="{{ member.get_absolute_url }}" style="width:150px; height:150px">
|
||||
<img src="{{ member.image.thumb.url }}" alt="" />
|
||||
<div class="thumb-layer">
|
||||
<div>
|
||||
<h1>{{member.nickname}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<figure>
|
||||
<a href="{{ member.get_absolute_url }}">
|
||||
<img loading="lazy" src="{{ member.image.thumb.url }}" alt="Portraitfoto von {{ member.firstname }}" class="w-36 h-36 bg-white">
|
||||
<figcaption>
|
||||
<h3>{{ member.firstname }} {{ member.surname }}</h3>
|
||||
</figcaption>
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
@@ -1,26 +1,71 @@
|
||||
{# This template shows one member and all the details (that are ment for public) including a list of current jobs #}
|
||||
{% load softhyphen_tags %}
|
||||
{% load static %}
|
||||
|
||||
<div class="media-object stack-for-small">
|
||||
<div class="media-object-section padding-bottom-2">
|
||||
<img src= "{{member.image.portrait.url}}" style="width:150px;">
|
||||
</div>
|
||||
<div class="media-object-section main-section padding-bottom-1"">
|
||||
{% if request.user.is_authenticated %}
|
||||
<a href="{% url 'admin:members_member_change' member.id %}">Profil bearbeiten</a>
|
||||
<hr>
|
||||
{% endif %}
|
||||
<h1>{{ member.firstname }} {{ member.surname }}</h1>
|
||||
<p>Spitzname: {{ member.nickname }} </br>
|
||||
Mailaccount: {{ member.mailaccount }} </br>
|
||||
</p>
|
||||
{{ member.description|softhyphen|safe }}
|
||||
</p>
|
||||
<section class="flex-grow max-w-prose my-8 sm:my-0 text-justify text-gray-800">
|
||||
<!-- Alternativtext auf jede Person anpassen: Name im alt="" dynamisch erzeugen -->
|
||||
<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 }">
|
||||
<h2 class="mb-2 text-lg text-gray-900 text-left">{{ member.firstname }} {{ member.surname }}</h2>
|
||||
<div class="mb-2">
|
||||
Spitzname: {{ member.nickname }} <br>
|
||||
Mailaccount: {{ member.mailaccount }} <br>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
{{ member.description|softhyphen|safe }}
|
||||
</div>
|
||||
{% if jobs %}
|
||||
Ehrenamtliche Tätigkeiten: </br>
|
||||
{% for jobm in jobs %}
|
||||
{{ jobm.job.name }}: {{ jobm.job_start|date }} - {{ jobm.job_end|date }} </br>
|
||||
{% endfor %}
|
||||
<h3 class="group mt-4 mb-2 text-lg text-gray-900">Ehrenamtliche Tätigkeiten:
|
||||
<button class="inline float-right text-sm px-2 py-1 text-gray-600 md:text-gray-500 group-hover:text-gray-600 border rounded border-gray-500 md:border-gray-400 group-hover:border-gray-500"
|
||||
@click="expandList = ! expandList"
|
||||
>
|
||||
<span x-show="!expandList">Mehr</span><span x-show="expandList">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' : ''"
|
||||
></i>
|
||||
</button>
|
||||
</h3>
|
||||
|
||||
<ul class="flex flex-col gap-1">
|
||||
{% for jobm in jobs %}
|
||||
<li class="flex flex-row flex-wrap">
|
||||
<span>{{ jobm.job.name }}:</span>
|
||||
<span class="ml-2 text-gray-600">{{ jobm.job_start|date }} -</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<ul class="flex flex-col gap-1 mt-1"
|
||||
x-show="expandList"
|
||||
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"
|
||||
>
|
||||
{% for jobm in jobs %}
|
||||
<li class="flex flex-row flex-wrap">
|
||||
<span>{{ jobm.job.name }}:</span>
|
||||
<span class="ml-2 text-gray-600">{{ jobm.job_start|date }} -</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user