Verified Commit 03d4f777 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Migrate documents page to new template

parent 86b6f45b
......@@ -9,6 +9,14 @@ documents.templatetags package
Submodules
----------
documents.templatetags.document\_cards module
---------------------------------------------
.. automodule:: documents.templatetags.document_cards
:members:
:undoc-members:
:show-inheritance:
documents.templatetags.filename module
--------------------------------------
......
from django.core.validators import MinValueValidator
from django.db import models
from django.urls import reverse
from django.utils import timezone
from django.utils.translation import ugettext_lazy as _
......@@ -55,6 +56,9 @@ class Document(models.Model, metaclass=ModelTranslateMeta):
default=False
)
def get_absolute_url(self):
return reverse('documents:document', kwargs={'pk': self.pk})
def __str__(self):
return '%s (%s)' % (self.name, str(self.created.date()))
......
.thimbus-page {
.policy-wrapper {
overflow-x: hidden;
padding-top: 20px;
}
.policy-wrapper, .misc-wrapper {
.portfolio-posts {
margin-bottom: 0;
.slider-control-prev,
.slider-control-next {
cursor: pointer;
}
.slider-control-prev {
display: none;
}
.post {
width: 220px;
float: left;
min-height: 1px;
margin-left: 20px;
.document-thumb {
position: relative;
> span {
width: 100%;
position: absolute;
bottom: 40px;
text-align: center;
font-family: 'Oswald', 'Open Sans', Helvetica, sans-serif;
font-size: 20px;
}
}
.unknowncontainer {
background: none !important;
border: 2px dashed #9C9C9C;
color: #9C9C9C;
height: 310px;
.post-header {
text-align: center;
height: 176px; /* 176 - padding */
width: 220px;
font-size: 64px;
line-height: 176px;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
}
}
}
/* https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ */
.wordbreak {
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
#meetingcontainer > div:not(:first-child) {
display: none;
}
#alvselect {
outline-width: 0px !important;
width: 140px;
padding: 0px 15px;
.association-document-card, .annual-document-card {
&:after {
padding-bottom: 141%;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.thimbus-page {
.policy-wrapper, .misc-wrapper {
width: 700px;
margin: 0 auto;
.portfolio-posts {
.post {
min-width: 220px;
width: 220px;
}
}
.annual-document-card.empty {
&:hover {
a {
cursor: default;
}
.overlay {
opacity: 0;
}
.image img {
transform: none;
-webkit-transform: none;
-moz-transform: none;
}
.name {
opacity: 1;
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.thimbus-page {
.policy-wrapper, .misc-wrapper {
.portfolio-posts {
.post {
min-width: 190px;
width: 190px;
.unknowncontainer {
height: 268px;
.post-header {
width: 190px;
}
}
}
}
}
}
}
\ No newline at end of file
#documents-annual {
.dropdown-years {
max-height: 200px;
overflow-y: scroll;
}
}
$(function() {
function select_meeting(year) {
$("#meetingcontainer > div").hide();
$("#meeting-"+year).show();
fix_heights($("#meeting-"+year));
}
$(".meeting-btn").on('click', function(e) {
select_meeting($(this).data('year'));
})
$("#alvselect").on('change', function(e) {
select_meeting($("#alvselect").val());
})
function fix_heights(obj) {
var heights = new Array();
// // Loop to get all element heights
obj.find('.gw-go-col').each(function() {
// Need to let sizes be whatever they want so no overflow on resize
$(this).css('min-height', '0');
$(this).css('max-height', 'none');
$(this).css('height', 'auto');
// Then add size (no units) to array
heights.push($(this).height());
});
// // Find max height of all elements
var max = Math.max.apply( Math, heights );
// // Set all heights to max height
obj.find('.gw-go-col').each(function() {
$(this).css('height', max + 'px');
});
};
fix_heights($("#meetingcontainer > div"));
});
$(function() {
function scrollSlider(slider, direction) {
var wrapper = slider.children('.policy-wrapper');
var delta = direction * (slider.width() + 20); // +20 for margin
if (wrapper.scrollLeft() + delta <= 0) {
slider.children('.slider-control-prev').fadeOut(200);
}
else {
slider.children('.slider-control-prev').fadeIn(200);
}
if (wrapper.scrollLeft() + 2*delta >= wrapper.children('ul').width()) {
slider.children('.slider-control-next').fadeOut(200);
}
else {
slider.children('.slider-control-next').fadeIn(200);
}
wrapper.animate({scrollLeft: wrapper.scrollLeft() + delta});
}
$('.slider-control-next').click(function() {
scrollSlider($(this).parent(), 1);
});
$('.slider-control-prev').click(function() {
scrollSlider($(this).parent(), -1);
});
});
{% load staticfiles %}
{% if documents %}
<li class="post has-overlay">
<div class="post-inner">
<div class="post-header">
<div class="document-thumb">
<img src="{% static "documents/images/thumb.png" %}" />
<span>{{ name | upper }} {{ year | stringformat:"d" | slice:"2:4" | upper }}-'{{ year | add:1 | stringformat:"d" | slice:"2:4" | upper }}</span>
</div>
</div>
<div class="post-overlay">
<div class="post-overlay-meta">
<h2>{{ name }}</h2>
{{ year }} - {{ year | add:1 }}
</div>
<ul class="post-overlay-icons">
{% block icons %}{% endblock %}
</ul>
</div>
</div>
</li>
{% else %}
<li class="post">
<div class="post-inner unknowncontainer">
<div class="post-header">
?
</div>
<div class="post-body">
<h2>{{ name | upper }} '{{ year | stringformat:"d" | slice:"2:4" | upper }}-'{{ year | add:1 | stringformat:"d" | slice:"2:4" | upper }}</h2>
</div>
</div>
</li>
{% endif %}
\ No newline at end of file
{% extends 'documents/generic.html' %}
{% block "downloadlink" %}{% url 'documents:document' document.pk %}{% endblock %}
{% load staticfiles %}
<li class="post has-overlay">
<div class="post-inner">
<div class="post-header">
<div class="document-thumb">
<img src="{% static "documents/images/thumb.png" %}" />
<span>{{ document.name | upper }}</span>
</div>
</div>
<div class="post-overlay">
<div class="post-overlay-meta">
<h2>{{ document.name }}</h2>
</div>
<ul class="post-overlay-icons">
<li>
<span></span><a href="{% block "downloadlink" %}{% endblock %}" class="overlay-icon-link" target="_blank"></a>
</li>
</ul>
</div>
</div>
</li>
{% extends 'old-base.html' %}
{% load staticfiles %}
{% load i18n %}
{% load compress %}
{% extends 'base.html' %}
{% load static i18n compress document_cards %}
{% block title %}{% trans 'Documents' %} — {{ block.super }}{% endblock %}
{% block opengraph_title %}{% trans 'Documents' %} — {{ block.super }}{% endblock %}
{% block opengraph_title %}{% trans 'Documents' %} —
{{ block.super }}{% endblock %}
{% block css_head %}
{{ block.super }}
{% compress css %}
<link href="{% static "documents/css/style.scss" %}" rel="stylesheet" type="text/x-scss">
<link href="{% static "documents/css/style.scss" %}" rel="stylesheet"
type="text/x-scss">
{% endcompress %}
{% endblock %}
{% block body %}
<h1>{% trans "Miscellaneous Association Documents" %}</h1>
<section class="page-section" id="documents-misc">
<div class="container">
<h1 class="text-center section-title">{% trans "Miscellaneous Association Documents" %}</h1>
<p class="text-center">
{% blocktrans trimmed %}
Thalia was officially founded on November 7th, 1990. The relevant statutes and internal rules can be accessed here. The statues have last been amended in September 2007; the internal rules have been changed on several occasions. Other miscellaneous documents can be found here as well, such as the expanse form. The documents regarding the canteens can be found on <a href="https://olympus.science.ru.nl">the website of umbrella association Olympus</a>.
{% endblocktrans %}
</p>
<div class="portfolio">
<div class="misc-wrapper">
<ul class="portfolio-posts row" style="padding-top:20px;">
{% for association_document in association_documents %}
{% include 'documents/association.html' with document=association_document %}
{% endfor %}
</ul>
</div>
</div>
<h1>{% trans "Policy Documents &amp; Annual Reports" %}</h1>
<p class="text-center">
{% trans "Every candidate board of Thalia drafts a policy document before being installed, to detail their plans for the next year. This also includes a general planning of all activities, as well as the budget for that year. Furthermore, the association is obliged to deliver an annual report and provide a financial overview. These documents show the financial developments over the year, what contacts Thalia maintained and what activities were organized. All historical policy documents and reports are made available, below." %}
</p>
<div class="portfolio slider">
<div class="policy-wrapper">
<ul class="portfolio-posts row" style='width:{{ annual_docs_width }}px'>
{% for year, docs in annual_reports %}
{% include 'documents/policydocument.html' with documents=docs.policy name=_("Policy") %}
{% endfor %}
</ul>
<ul class="portfolio-posts row" style='width:{{ annual_docs_width }}px'>
{% for year, docs in annual_reports %}
{% include 'documents/report.html' with documents=docs.report name=_("Annual report") %}
{% endfor %}
</ul>
</div>
<a class="slider-control-prev"></a>
<a class="slider-control-next"></a>
</div>
<p class="text-center">
{% blocktrans trimmed %}
Thalia was officially founded on November 7th, 1990. The
relevant statutes and internal rules can be
accessed here. The statues have last been amended in
September 2007; the internal rules have been
changed on several occasions. Other miscellaneous documents
can be found here as well, such as the
expanse form. The documents regarding the canteens can be
found on
<a href="https://olympus.science.ru.nl">the website of
umbrella association Olympus</a>.
{% endblocktrans %}
</p>
<div class="row">
{% for doc in association_documents %}
<div class="col-6 col-md-2 my-3">
{% association_document_card doc %}
</div>
{% endfor %}
</div>
</div>
</section>
<h1>{% trans "General Meetings" %}</h1>
<section class="page-section" id="documents-annual">
<div class="container">
<h1 class="text-center section-title">{% trans "Annual documents" %}</h1>
<p class="text-center">
{% trans "The General Meetings (ALVs) can be attended by all members, honorary members and donors. Thalia organizes at least two general meetings each year. Minutes of these meetings are made available below. This allows (honorary) members and donors that did not attend to get an insight in what was discussed as well." %}
</p>
<p class="text-center">
{% trans "Every candidate board of Thalia drafts a policy document before being installed, to detail their plans for the next year. This also includes a general planning of all activities, as well as the budget for that year. Furthermore, the association is obliged to deliver an annual report and provide a financial overview. These documents show the financial developments over the year, what contacts Thalia maintained and what activities were organized. All historical policy documents and reports are made available, below." %}
</p>
<div class="tcenter" style="margin-bottom:20px;"">
{% for year, meetings in meeting_years|slice:"5" %}
<button class="meeting-btn btn-large btn-style2" data-year="{{ year }}">{{ year }}-{{ year|add:1 }}</button>
{% endfor %}
<select id="alvselect" name="alvselect" class="btn-large btn-style2">
<option selected disabled hidden>{% trans "Earlier.." %}</option>
{% for year, meetings in meeting_years|slice:"5:" %}
<option value="{{ year }}">{{ year }}-{{ year|add:1 }}</option>
{% endfor %}
</select>
</div>
<p class="text-center">
{% trans "The General Meetings (ALVs) can be attended by all members, honorary members and donors. Thalia organizes at least two general meetings each year. Minutes of these meetings are made available below. This allows (honorary) members and donors that did not attend to get an insight in what was discussed as well." %}
</p>
<div id='meetingcontainer'>
{% for year, meetings in meeting_years %}
<div id='meeting-{{ year }}'>
{% include 'documents/meetingyear.html' %}
</div>
{% endfor %}
</div>
{% endblock %}
<ul class="nav nav-tabs justify-content-center mt-4">
{% for year, data in years|slice:":6" %}
<li class="nav-item">
<a class="nav-link{% if forloop.counter0 == 0 %} active{% endif %}"
href="#tab-{{ year }}" data-toggle="tab">
{{ year }}-{{ year|add:1 }}
</a>
</li>
{% endfor %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button">{% trans "Older" %}</a>
<div class="dropdown-menu dropdown-years">
{% for year, data in years|slice:"6:" %}
<a class="dropdown-item" href="#tab-{{ year }}" data-toggle="tab">{{ year }}-{{ year|add:1 }}</a>
{% endfor %}
</div>
</li>
</ul>
{% block js_body %}
{{ block.super }}
{% compress js %}
<script type="text/javascript" src="{% static "documents/js/policydocuments.js" %}"></script>
<script type="text/javascript" src="{% static "documents/js/generalmeetings.js" %}"></script>
{% endcompress %}
<div class="tab-content">
{% for year, data in years %}
<div
class="tab-pane fade{% if forloop.counter0 == 0 %} show active{% endif %}"
id="tab-{{ year }}" role="tabpanel">
<div class="row">
{% if data.general_meetings %}
<div class="col-12 col-md-6 my-3">
<div class="accordion bordered">
{% for gm in data.general_meetings %}
<div class="card mb-0">
<div
class="card-header collapsed"
data-toggle="collapse"
data-target="#event-content-0">
<div class="title">
{% trans "GM" %} {{ forloop.counter }}: {{ gm.datetime }}
</div>
</div>
<div class="collapse"
id="event-content-0">
<div class="card-body">
<p>
Locatie: {{ gm.location }}<br/>
{% trans "documents"|capfirst %}:<br/>
<ol>
{% for doc in gm.documents.all %}
<li>
<a href="{{ doc.get_absolute_url }}">
{{ doc.name }}
</a>
</li>
{% endfor %}
</ol>
</p>
{% if gm.minutes %}
<p>
<a href="{{ gm.minutes.get_absolute_url }}"
class="btn btn-primary">
{% trans "Minutes" %}
</a>
</p>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<div
class="col-12 col-md-6 my-3 d-flex justify-content-center align-items-center">
<div class="text-center">
{% trans "There have not been any general meetings yet." %}
</div>
</div>
{% endif %}
{% for type, doc in data.documents.items %}
<div class="col-4 col-md-2 my-3">
{% annual_document_card type doc %}
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endblock %}
{% load i18n %}
{% load filename %}
<h2 style="margin-bottom: 0px;">{% blocktrans with year|add:1 as nextyear %}General Meetings of {{ year }}-{{ nextyear }}:{% endblocktrans %}</span></h2>
{% if meetings %}
<div class="gw-go gw-go-clearfix gw-go-{% if meetings|length < 3 %}3{% else %}{{ meetings | length }}{% endif %}cols">
{% for meeting in meetings %}
<div class="gw-go-col-wrap">
<div class="gw-go-col gw-go-style1">
<div class="gw-go-header">
<div class="gw-go-header-top">
<h3>{% trans "Meeting" %} {{ forloop.counter }}</h3><span class="circle-icon-mail"></span>
<div class="gw-go-coin-wrap">
<div class="gw-go-coinf gw-go-coinb">
<div>
{% if meeting.datetime %}
{{ meeting.datetime|date:'j' }}
<small>{{ meeting.datetime|date:'M'|upper }}</small>
{% else %}
?<small>?</small>
{% endif %}
</div>
</div>
</div>
</div>
<div class="gw-go-header-bottom"></div>
<p>{{ meeting.location }}</p>
</div>
{% if user.is_authenticated %}
<ul class="gw-go-body">
{% for document in meeting.documents.all %}
<li class="wordbreak"><a href="{% url 'documents:document' document.pk %}" target="_blank">{{ document.name }}</a></li>
{% endfor %}
</ul>
<div class="gw-go-footer">
{% if meeting.minutes %}
<a href="{% url 'documents:document' meeting.minutes.pk %}" class="gw-go-btn gw-go-btn-medium" target="_blank">{% trans "Minutes" %}</a>
{% else %}
<div style='padding-top:10px;'>{% trans "No minutes<br>available" %}</div>
{% endif %}
</div>
{% else %}
<div class="gw-go-body">
{% trans "Only signed-in users can view<br>General Meeting documents." %}
</div>
<div class="gw-go-footer">
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<div style="text-align:center;margin-top:10px;">{% blocktrans with year|add:1 as nextyear %}There are no General Meetings available for {{ year }}-{{ nextyear }}{% endblocktrans %}</div>
{% endif %}