Verified Commit 1d1bb772 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Migrate thabloid to new template

parent 955cec19
.thimbus-page .thabloids .post-inner img {
min-width: 220px;
min-height: 310px;
}
@media (min-width: 768px) and (max-width: 979px) {
.thimbus-page .thabloids .post-inner img {
min-width: 352px;
min-height: 496px;
.thabloid-card {
&:after {
padding-bottom: 141%;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.thimbus-page .thabloids .post-inner img {
min-width: 0;
.btn {
width: 42px;
height: 42px;
align-items: center;
}
}
$(function () {
mixitup('#thabloid-index', {
selectors: {
control: '.nav-link'
}
});
$('#thabloid-index .thabloid-card .btn.open').click(function (e) {
e.preventDefault();
$.ajax(this.href).done(function (data) {
$.fancybox(data,
{
padding: 0,
tpl: {
closeBtn: '<a title="Close" class="btn btn-secondary fancybox-close" href="javascript:;"><i class="fas fa-times"></i></a>',
next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span class="btn btn-secondary"><i class="fas fa-arrow-right"></i></span></a>',
prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span class="btn btn-secondary"><i class="fas fa-arrow-left"></i></span></a>'
},
loop: false,
openEffect: 'elastic',
closeEffect: 'elastic',
helpers: {
overlay: {
css: {'background-color': 'rgba(0, 0, 0, 0.9)'},
locked: true
}
}
});
});
});
});
{% extends 'old-base.html' %}
{% load i18n thumbnail staticfiles compress %}
{% extends 'base.html' %}
{% load i18n static compress thabloid_cards %}
{% block title %}{% trans "Thabloid" %} — {{ block.super }}{% endblock %}
{% block opengraph_title %}{% trans "Thabloid" %} — {{ block.super }}{% endblock %}
{% block css_head %}
{{ block.super }}
{% compress css %}
<link href="{% static 'thabloid/css/style.scss' %}" rel="stylesheet" type="text/x-scss">
{% endcompress %}
{% endblock %}
{% block opengraph_title %}{% trans "Thabloid" %} —
{{ block.super }}{% endblock %}
{% block body %}
<h1>{% trans "Thabloid" %}</h1>
<section class="page-section" id="thabloid-index">
<div class="container">
<h1 class="text-center section-title">{% trans "Thabloid" %}</h1>
<div class="portfolio portfolio-isotope">
<div class="portfolio-filter tabs-wrapper tabs-centered clearfix">
<ul class="tabs">
<li class="current"><a href="#">{% trans "All Thabloids" %}</a></li>
<li data-filter="{{ year|add:0 }}"><a href="#">{{ year|add:0 }}-{{ year|add:1 }}</a></li>
<li data-filter="{{ year|add:-1 }}"><a href="#">{{ year|add:-1 }}-{{ year|add:0 }}</a></li>
<li data-filter="{{ year|add:-2 }}"><a href="#">{{ year|add:-2 }}-{{ year|add:-1 }}</a></li>
<li data-filter="{{ year|add:-3 }}"><a href="#">{{ year|add:-3 }}-{{ year|add:-2 }}</a></li>
<li data-filter="older"><a href="#">{% trans "Older" %}</a></li>
</ul>
</div>
<ul class="nav nav-tabs justify-content-center mt-4">
<li class="nav-item">
<a class="nav-link"
href="#all"
data-filter="all">
{% trans "All Thabloids" %}
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#year-{{ year }}"
data-filter=".year-{{ year }}">
{{ year }}-{{ year|add:1 }}
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#year-{{ year|add:-1 }}"
data-filter=".year-{{ year|add:-1 }}">
{{ year|add:-1 }}-{{ year }}
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#year-{{ year|add:-2 }}"
data-filter=".year-{{ year|add:-2 }}">
{{ year|add:-2 }}-{{ year|add:-1 }}
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#year-{{ year|add:-3 }}"
data-filter=".year-{{ year|add:-3 }}">
{{ year|add:-3 }}-{{ year|add:-2 }}
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#year-older"
data-filter=".year-older">
{% trans "Older" %}
</a>
</li>
</ul>
<ul class="thabloids portfolio-posts row isotope" style="position: relative; overflow: hidden; height: 1195px;">
{% for thabloid in thabloids %}
<li data-filter="{% if thabloid.year < year|add:-3 %}older{% else %}{{ thabloid.year }}{% endif %}" class="post span3 has-overlay isotope-item" style="position: absolute; left: 0px; top: 0px;">
<div class="post-inner">
<div class="post-header">
<img alt="{{ thabloid.year }}-{{ thabloid.year|add:1 }}, #{{ thabloid.issue }}" src="{% thumbnail thabloid.cover '220x310' %}">
</div>
<div class="post-overlay">
<div class="post-overlay-meta">
<h2>{{ thabloid.year }}-{{ thabloid.year|add:1 }}, #{{ thabloid.issue }}</h2>
<div class="row">
{% for thabloid in thabloids %}
<div class="col-6 col-md-3 my-3">
{% thabloid_card year thabloid %}
</div>
<ul class="post-overlay-icons">
<li><span></span><a class="overlay-icon-open open-thabloid" href="{% url 'thabloid:pages' thabloid.year thabloid.issue %}"></a></li>
<li><span></span><a class="overlay-icon-link" href="{{ thabloid.file.url }}" target="_blank"></a></li>
</ul>
</div>
{% endfor %}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</section>
{% endblock %}
{% block js_footer %}
<script>
$('.open-thabloid').on('click', function(event) {
event.preventDefault();
$.ajax(this.href).success(function(data) {
$.fancybox(data,
{
padding: 0,
loop: false,
openEffect: 'elastic',
closeEffect: 'elastic',
helpers: {
overlay: {
css: {'background-color': 'rgba(0, 0, 0, 0.9)'},
locked: true
}
}
});
});
});
</script>
{% block js_body %}
{{ block.super }}
{% compress js %}
<script type="text/javascript"
src="{% static 'js/mixitup.min.js' %}"></script>
<script type="text/javascript"
src="{% static 'thabloid/js/main.js' %}"></script>
{% endcompress %}
{% endblock %}
from django import template
from django.urls import reverse
from thaliawebsite.templatetags.grid_item import grid_item
from utils.templatetags.thumbnail import thumbnail
register = template.Library()
@register.inclusion_tag('includes/grid_item.html')
def thabloid_card(year, thabloid):
class_name = 'older'
if thabloid.year - 3 < year:
class_name = 'year-{}'.format(thabloid.year)
view_url = reverse('thabloid:pages', args=[thabloid.year, thabloid.issue])
buttons = (
'<div class="text-center mt-2">'
'<a href="{}" class="btn btn-secondary d-inline-flex open mr-1">'
'<i class="fas fa-book-open"></i>'
'</a>'
'<a href="{}" class="btn btn-secondary d-inline-flex download ml-1">'
'<i class="fas fa-download"></i>'
'</a>'
'</div>'
).format(view_url, thabloid.file.url)
return grid_item(
title='{}-{}, #{}'.format(
thabloid.year, thabloid.year + 1, thabloid.issue
),
meta_text=buttons,
url=None,
image_url=thumbnail(thabloid.cover, '255x360'),
class_name='thabloid-card mix {}'.format(class_name),
)
......@@ -20,6 +20,7 @@
@import "../../photos/static/photos/css/style.scss";
@import "../../events/static/events/css/style.scss";
@import "../../members/static/members/css/style.scss";
@import "../../thabloid/static/thabloid/css/style.scss";
@import "./fontawesome/fontawesome.scss";
@import "./fontawesome/solid.scss";
......
{% load static i18n thumbnail bootstrap4 %}
<div class="grid-item {{ class_name }}">
<a class="d-flex" href="{{ url }}" {{ anchor_attrs|safe }}>
<div class="image">
<img alt="{{ title }}" src="{{ image_url }}"/>
</div>
<div class="name">
<span>{{ title }}</span>
</div>
{% if ribbon %}
{% if url %}
<a class="d-flex" href="{{ url }}" {{ anchor_attrs|safe }}>
{% endif %}
<div class="image">
<img alt="{{ title }}" src="{{ image_url }}"/>
</div>
<div class="name">
<span>{{ title }}</span>
</div>
{% if ribbon %}
<div class="ribbon-wrapper">
<div class="ribbon">
{{ ribbon }}
</div>
</div>
{% endif %}
<div class="overlay d-flex justify-content-center flex-column text-center">
<h5 class="px-2">{{ title }}</h5>
{{ meta_text|safe }}
</div>
</a>
{% endif %}
<div class="overlay d-flex justify-content-center flex-column text-center">
<h5 class="px-2">{{ title }}</h5>
{{ meta_text|safe }}
</div>
{% if url %}
</a>
{% endif %}
</div>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment