first implementation of new layout
This commit is contained in:
@@ -1,103 +1,93 @@
|
||||
{% extends 'layout.html' %}
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% load post_helpers %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<!--Hero section-->
|
||||
<section class="hero-image relative z-0 w-full h-56 sm:h-80 lg:h-96 bg-cover-image bg-cover bg-center bg-no-repeat flex-none">
|
||||
<div class="absolute z-10 w-full h-full bg-blue-50 opacity-60"></div>
|
||||
<div class="relative container px-4 mx-auto z-20 w-full h-full flex flex-wrap items-center gap-x-2">
|
||||
<h1 class="w-3/5 flex-1 uppercase font-semibold text-xl sm:text-2xl lg:text-3xl text-center text-gray-900">
|
||||
<span class="hidden">Willkommen bei der </span><span>Fachschaft</span><br>
|
||||
<span class="text-proprietary-darker">Elektrotechnik</span>
|
||||
</h1>
|
||||
<div class="hidden sm:block flex-none w-2/5 lg:w-1/3 bg-white p-2 lg:p-4 rounded shadow-xl">
|
||||
<h2 class="section-title sm:text-left"><i class="fas fa-comments text-gray-300 mr-2"></i>Events</h2>
|
||||
<div class="-mb-2 text-gray-700 text-sm md:text-base">
|
||||
|
||||
{% if featured_event %}
|
||||
{% with post=featured_event %}
|
||||
{% include 'posts/partials/_meeting_row.html' %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
{% for post in featured_meeting %}
|
||||
{% include 'posts/partials/_meeting_row.html' %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="grid-x small-padding-left-1">
|
||||
<div class="medium-8 small cell" style="background: grey">
|
||||
{% with post=featured_post %}
|
||||
<a href="{{ post.url }}">
|
||||
<div class="news-hero-large"style="background-image: url('{{ post.imageurl }}');)">
|
||||
<div class="news-hero-text">
|
||||
<hr>
|
||||
<div class="article-date">
|
||||
<p>{{ post.date|date:"d. F Y" }}</p>
|
||||
</div>
|
||||
<div class="article-title">
|
||||
<h1>{{ post.title|safe }}</h1>
|
||||
<p>{{ post.subtitle|default_if_none:" "|safe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endwith %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="w-full self-end flex justify-center mb-4">
|
||||
<i class="fas fa-chevron-down animate-bounce text-proprietary text-2xl"></i>
|
||||
</div>-->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="cell medium-4 responsive-side-box">
|
||||
<!-- Main Content -->
|
||||
<main class="container mx-auto w-full px-4 my-8 flex-1">
|
||||
<section class="sm:hidden my-8">
|
||||
<h2 class="section-title section-title-margins">Events</h2>
|
||||
|
||||
<div class="article-row-section">
|
||||
<div class="article-row-section-inner">
|
||||
|
||||
<h1 class="article-row-section-header">Events</h1>
|
||||
|
||||
{% with post=featured_event %}
|
||||
<div class="flex flex-col gap-4">
|
||||
{% if featured_event %}
|
||||
{% with post=featured_event %}
|
||||
{% include 'posts/partials/_article_row.html' %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
{% for post in featured_meeting %}
|
||||
{% include 'posts/partials/_meeting_row.html' %}
|
||||
{% include 'posts/partials/_article_row.html' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="grid-container">
|
||||
<div class="grid-x grid-padding-x padding-top-1 padding-left-1 padding-right-1">
|
||||
{{ tags_list|tags_to_url }}
|
||||
</div>
|
||||
<div class="sm:flex sm:flex-row-reverse justify-center my-8">
|
||||
<aside class="calendar-preview sm:w-2/5 xl:w-1/4 sm:pl-4 my-8 sm:my-0">
|
||||
<div>
|
||||
<h2 class="section-title section-title-margins">Kalender</h2>
|
||||
<div class="calendar-entries">
|
||||
{% for post in events %}
|
||||
{% include 'posts/partials/_date_box.html' %}
|
||||
{% endfor %}
|
||||
|
||||
<a href="https://fet.at/posts/fet_calendar.ics" class="btn btn-secondary block w-full"><i class="fas fa-calendar-alt mr-2"></i>Kalender abonnieren</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="grid-x grid-x-padding">
|
||||
<div class="large-8 medium-7 small-12 small-order-2 medium-order-1">
|
||||
{% for post in posts %}
|
||||
{% include 'posts/partials/_posts_hero.html' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<section class="my-8 sm:my-0 sm:w-3/5 xl:w-2/5 flex flex-col gap-4">
|
||||
<h2 class="section-title section-title-margins">Zuletzt veröffentlicht</h2>
|
||||
|
||||
{% for post in posts %}
|
||||
{% include 'posts/partials/_posts_hero.html' %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="large-4 medium-5 small-12 small-order-1 medium-order-1 padding-top-1 large-padding-left-1 medium-padding-left-1">
|
||||
|
||||
<a href="mailto:service@fet.at">
|
||||
<div class="social-media-box">
|
||||
<span class="social-media-badge badge">
|
||||
<span class="social-media-badge-symbol">
|
||||
<i class="fa-solid fa-envelope"></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="social-media-text">Schreib uns ein Mail :)</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="{% url 'discord' %}">
|
||||
<div class="social-media-box">
|
||||
<span class="social-media-badge badge">
|
||||
<span class="social-media-badge-symbol">
|
||||
<i class="fa-brands fa-discord"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="social-media-text">Komm auf unseren Discord-Server!</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{% for post in events %}
|
||||
{% include 'posts/partials/_date_box.html' %}
|
||||
{% endfor %}
|
||||
|
||||
<a href="{% url 'posts:posts.calendar' %}">
|
||||
<div class="social-media-box">
|
||||
<span class="social-media-badge badge">
|
||||
<span class="social-media-badge-symbol">
|
||||
<i class="fa-regular fa-calendar"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="social-media-text">FET-Kalender abonnieren</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<a class="button" href="{% url 'posts:posts.index' %}" style="background: gray">Mehr anzeigen</a>
|
||||
|
||||
</div>
|
||||
<a href="{% url 'posts:posts.index' %}" class="btn btn-primary block w-full"><i class="fas fa-plus-square mr-2"></i>Mehr anzeigen</a>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="infoBox" class="sticky bottom-4 p-4 rounded-lg shadow-lg bg-gray-600 text-gray-200 flex gap-x-4 items-center leading-none">
|
||||
<div class="flex-none relative">
|
||||
<span class="absolute flex h-3 w-3 right-0 top-0">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-500 opacity-80"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
|
||||
</span>
|
||||
<i class="fab fa-discord text-4xl"></i>
|
||||
</div>
|
||||
<a href="{% url 'discord' %}" class="flex-1">
|
||||
FET Discord-Server<br>
|
||||
<span class="hidden lg:inline text-sm text-gray-300">Du hast Fragen zum Studium oder möchtest dich einfach mich anderen Studierenden austauschen? </span><span class="text-sm text-gray-300">Klicke hier zum Beitreten <span class="hidden sm:inline"><i class="fa-solid fa-angle-right"></i></span></span>
|
||||
</a>
|
||||
<button id="infoBox-closeButton" class="flex-none self-stretch px-2 -mr-2" onclick="hideInfoBox()"><i class="fas fa-times text-gray-400"></i></button>
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user