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

update css style

Browse Source
This commit is contained in:
Patrick Mayr
2021-03-03 21:52:34 +00:00
parent 74ff9a7199
commit 6686ff8c15
9 changed files with 177 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,45 +1,38 @@
{% extends 'layout.html' %}
{% block content %}
{% extends "layout.html" %}
{% load softhyphen_tags %}
<style>
.button {
background-color: gray;
}
.button:hover {
background-color: black;
}
.memb {
background-color: darkgray;
}
.active {
background-color: black;
}
</style>
{% block content %}
<div class="grid-container">
<div class="grid-x grid-padding-x padding-top-1">
{% for job in pinned_job_groups %}
<div class="cell large-2 medium-4 small-6">
<a class="button expanded {% if job.slug in request.path %} active {% endif %}" href="{% url 'jobs' job.slug %}">
{{job.name}}
</a>
</div>
{% endfor %}
{% for job in unpinned_job_groups %}
<div class="cell large-2 medium-4 small-6">
<a class="button expanded {% if job.slug in request.path %} active {% endif %}" href="{% url 'jobs' job.slug %}">
<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 %}
<div class="cell large-2 medium-4 small-6"><a class="button memb expanded {% if '/members/P' == request.path %} active {% endif %}" href="/members/P">Pension</a></div>
<div class="cell large-2 medium-4 small-6"><a class="button memb expanded {% if '/members/' == request.path %} active {% endif %}" href="/members">Alle Mitglieder</a></div>
{% 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 %}
<div class="cell large-2 medium-4 small-6">
<a class="button memb-btn {% if '/members/P' == request.path %} active {% endif %}" href="/members/P">
Pension
</a>
</div>
<div class="cell large-2 medium-4 small-6">
<a class="button memb-btn {% if '/members/' == request.path %} active {% endif %}" href="/members">
Alle Mitglieder
</a>
</div>
</div>
@@ -53,9 +46,8 @@
<!-- show details of a member -->
{% if member %}
<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>
{% block members_content %}
{% endblock %}
{% endif %}
<!-- show all, active or pension members -->

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

@@ -1,4 +1,3 @@
{% regroup job_members by job.name as all_jobmem_list %}
{% for jobmem in all_jobmem_list %}
@@ -6,7 +5,6 @@
<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>
<b>Aktuelle Mitglieder:</b>
<div class="grid-x align-bottom">

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

@@ -1,14 +1,14 @@
{% extends 'members/member_layout.html' %}
{% 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">
{% endblock %}
{% block members_content %}
<div class="padding-top-1 padding-left-1 padding-bottom-1 padding-right-1" style="background-color: white;">
<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>
{% endblock %}
</div>
{% endblock %}

87
fet2020/templates/members/member_layout.html
View File

@@ -1,87 +0,0 @@
{% extends 'layout.html' %}
{% block content %}
{% load softhyphen_tags %}
<style>
.button {
background-color: gray;
}
.button:hover {
background-color: black;
}
.memb {
background-color: darkgray;
}
.active {
background-color: black;
}
</style>
<div class="grid-container">
<div class="grid-x grid-padding-x padding-top-1">
{% for job in pinned_job_groups %}
<div class="cell large-2 medium-4 small-6">
<a class="button expanded {% if job.slug in request.path %} active {% endif %}" href="{% url 'jobs' job.slug %}">
{{job.name}}
</a>
</div>
{% endfor %}
{% for job in unpinned_job_groups %}
<div class="cell large-2 medium-4 small-6">
<a class="button expanded {% if job.slug in request.path %} active {% endif %}" href="{% url 'jobs' job.slug %}">
{{ job.name|softhyphen|safe }}
</a>
</div>
{% endfor %}
<div class="cell large-2 medium-4 small-6"><a class="button memb expanded {% if '/members/P' == request.path %} active {% endif %}" href="/members/P">Pension</a></div>
<div class="cell large-2 medium-4 small-6"><a class="button memb expanded {% if '/members/' == request.path %} active {% endif %}" href="/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 %}
{% block members_content %}
{% endblock %}
</div>
{% 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>