Skip to content

GitLab

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

Migrate photos package to new template

parent fb65c313
Expand all Hide whitespace changes
Inline Side-by-side
website/events/static/events/css/style.scss
View file @ eedb6b80
......@@ -41,21 +41,6 @@
}
#events-index {
.section-title {
.btn {
position: absolute;
top: 15px;
&.btn-first {
right: 0;
}
&.btn-second {
right: 50px
}
}
}
.fc-bootstrap4 .fc-today {
background: #fff9fc;
}
......
website/photos/static/photos/css/style.scss
View file @ eedb6b80
/* Solving this with dynamic a data attribute (i.e. attr(data-rotation)) does not work, as that's a string. */
img.rotate90 {
transform: rotate(90deg);
}
img.rotate180 {
transform: rotate(180deg);
}
img.rotate270 {
transform: rotate(270deg);
}
img.grayscale {
filter: grayscale(1);
}
#photos-index, #photos-album {
.rotate90 {
img {
transform: rotate(90deg);
}
}
.rotate180 {
img {
transform: rotate(180deg);
}
}
.rotate270 {
img {
transform: rotate(270deg);
}
}
.grayscale {
img {
filter: grayscale(1);
}
}
.thimbus-page .gallery .gallery-album .post-overlay.grayscale {
background-color: rgba(88, 88, 88, 0.6);
.grid-item.grayscale {
.overlay {
background-color: rgba(88, 88, 88, 0.6);
}
}
}
website/photos/static/photos/js/main.js 0 → 100644
View file @ eedb6b80
$(function() {
$(".photo-card a").fancybox({
helpers: {
title : {
type : 'float'
}
},
afterShow: function() {
var downloadUrl = $(this.element).attr('data-download');
if(downloadUrl != undefined) {
$('<a class="fancybox-download" href="' + downloadUrl + '"></a>').appendTo(this.outer);
}
},
padding: 0
});
});
website/photos/templates/photos/album.html
View file @ eedb6b80
{% extends 'old-base.html' %}
{% load staticfiles i18n thumbnail shared_thumbnail compress %}
{% extends 'base.html' %}
{% load staticfiles i18n compress photos_cards %}
{% block title %}{{ album.title }} — {% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block opengraph_title %}{{ album.title }} — {% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block css_head %}
{{ block.super }}
{% compress css %}
<link href="{% static "photos/css/style.scss" %}" rel="stylesheet" type="text/x-scss">
{% endcompress %}
{% endblock %}
{% block header_image %}{% static "img/headers/fixed/banner7.jpg" %}{% endblock %}
{% block body %}
<h1>{{ album.title }}
<span class="title-meta clearfix">
<span><a href="{% url 'photos:album-download' album.slug %}" class="download"></a></span>
<span><a href="{% url 'photos:index' %}" class="back"></a></span>
</span>
<span class="title-meta clearfix">
</h1>
<h2>{{ album.date|date:"d-m-Y" }}</h2>
{% if album.shareable %}
<p class="tcenter">
{% trans "Note: This album can be shared with people outside the association by sending them the following link:" %}<br>
<small><a href="{% url 'photos:shared_album' album.slug album.access_token %}">
{{ request.get_host }}{% url 'photos:shared_album' album.slug album.access_token %}
</a></small>
</p>
{% endif %}
<div class="gallery">
<ul class="gallery-photos row">
{% for photo in photos %}
<li class="post gallery-photo span3 has-overlay">
<a data-fancybox-rotation="{{ photo.rotation }}" class="gallery-box" rel="gallery"
{% if album.shareable %}
data-download="{% url 'photos:shared-download' album.slug album.access_token photo %}" href="{% shared_thumbnail album.slug album.access_token photo.file '1024x768' fit=False %}"
{% else %}
data-download="{% url 'photos:download' photo %}" href="{% thumbnail photo.file '1024x768' fit=False %}"
{% endif %}>
<span class="post-inner">
<span class="inner-img">
<section id="photos-album" class="page-section">
<div class="container">
<h1 class="text-center section-title">
{{ album.title }}
<a href="{% url 'photos:album-download' album.slug %}"
target="_blank"
class="btn btn-primary btn-first"
>
<i class="fas fa-download"></i>
</a>
</h1>
<h2 class="text-center mt-2">{{ album.date|date:"d-m-Y" }}</h2>
{% if album.shareable %}
<img class="rotate{{ photo.rotation }}" src="{% shared_thumbnail album.slug album.access_token photo.file '220x220' %}" alt="" />
{% else %}
<img class="rotate{{ photo.rotation }}" src="{% thumbnail photo.file '220x220' %}" alt="" />
<p class="text-center">
{% trans "Note: This album can be shared with people outside the association by sending them the following link:" %}<br>
<small><a href="{% url 'photos:shared_album' album.slug album.access_token %}">
{{ request.get_host }}{% url 'photos:shared_album' album.slug album.access_token %}
</a></small>
</p>
{% endif %}
</span>
<span class="post-overlay">
</span>
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="row">
{% for photo in photos %}
<div class="col-4 col-md-3 my-3">
{% photo_card photo %}
</div>
{% endfor %}
</div>
</div>
</section>
{% endblock %}
{% block js_body %}
{{ block.super }}
{% compress js %}
<script type="text/javascript" src="{% static "photos/js/main.js" %}"></script>
{% endcompress %}
{% endblock %}
website/photos/templates/photos/index.html
View file @ eedb6b80
{% extends 'old-base.html' %}
{% load i18n thumbnail staticfiles compress %}
{% extends 'base.html' %}
{% load i18n staticfiles compress photos_cards %}
{% block title %}{% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block opengraph_title %}{% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block css_head %}
{{ block.super }}
{% compress css %}
<link href="{% static 'photos/css/style.scss' %}" rel="stylesheet" type="text/x-scss">
{% endcompress %}
{% endblock %}
{% block header_image %}{% static "img/headers/fixed/banner7.jpg" %}{% endblock header_image%}
{% block header_image %}{% static "img/headers/fixed/banner7.jpg" %}{% endblock header_image %}
{% block body %}
<h1>{% trans "Photos" %}</h1>
<p class="tcenter">
{% trans 'Interested in a full resolution version of a photo? Send your request to <a href="mailto:media@thalia.nu">media@thalia.nu</a>.' %}
</p>
<div class="gallery">
<ul class="gallery-albums row">
{% for album in albums %}
<li class="post gallery-album span3 has-overlay">
{% if album.accessible %}
<a href="{% url 'photos:album' album.slug %}">
{% endif %}
<span class="post-inner">
<span class="inner-img">
{% if album.cover is not None %}
<img class="rotate{{ album.cover.rotation }} {{ album.accessible|yesno:",grayscale" }}" src="{% thumbnail album.cover.file '220x220' %}" alt=""/>
{% endif %}
</span>
<span class="post-overlay {{ album.accessible|yesno:",grayscale" }}">
<span class="post-overlay-meta">
<h2>{{ album.title }}</h2>
<p>{{ album.date|date:"d-m-Y" }}</p>
</span>
</span>
</span>
{% if album.accessible %}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<div class="clearfix"></div>
<div class="pagination-wrapper row">
<ul class="pagination">
{% if albums.has_previous %}
<li>
<a class="page-prev" href="{% url 'photos:index' %}?page={{ albums.previous_page_number }}">Previous</a>
</li>
{% endif %}
{% for page in page_range %}
{% if page == albums.number %}
<li class="current">
<span class="page-number">
{{ page }}
</span>
</li>
{% else %}
<li>
<a href="{% url 'photos:index' %}?page={{ page }}" class="page-number button">{{ page }}</a>
</li>
{% endif %}
{% endfor %}
{% if albums.has_next %}
<li>
<a class="page-next" href="{% url 'photos:index' %}?page={{ albums.next_page_number }}">{% trans "Next" %}</a>
</li>
{% endif %}
</ul>
</div>
<section id="photos-index" class="page-section">
<div class="container">
<h1 class="text-center section-title">{% trans "Photos" %}</h1>
<p class="text-center">
{% trans 'Interested in a full resolution version of a photo? Send your request to <a href="mailto:media@thalia.nu">media@thalia.nu</a>.' %}
</p>
<div class="row">
{% for album in albums %}
<div class="col-4 col-md-3 my-3">
{% album_card album %}
</div>
{% endfor %}
</div>
<nav>
<ul class="pagination justify-content-center mt-4">
{% if albums.has_previous %}
<li class="page-item">
<a class="page-link"
href="{% url 'photos:index' %}?page={{ albums.previous_page_number }}{% if filter %}&filter={{ filter }}{% endif %}{% if keywords %}&keywords={{ keys }}{% endif %}#albums-directory">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
{% endif %}
{% for page in page_range %}
<li class="page-item{% if page == albums.number %} active{% endif %}">
<a class="page-link" href="{% url 'photos:index' %}?page={{ page }}{% if filter %}&filter={{ filter }}{% endif %}{% if keywords %}&keywords={{ keys }}{% endif %}#albums-director">{{ page }}
</a>
</li>
{% endfor %}
{% if albums.has_next %}
<li class="page-item">
<a class="page-link"
href="{% url 'photos:index' %}?page={{ albums.next_page_number }}{% if filter %}&filter={{ filter }}{% endif %}{% if keywords %}&keywords={{ keys }}{% endif %}">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
</section>
{% endblock %}
website/photos/templatetags/photos_cards.py 0 → 100644
View file @ eedb6b80
from django import template
from django.conf import settings
from django.template.defaultfilters import date
from django.urls import reverse
from photos.templatetags.shared_thumbnail import shared_thumbnail
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 album_card(album):
class_name = 'album-card'
image_url = ''
if album.cover:
image_url = thumbnail(album.cover.file,
settings.THUMBNAIL_SIZES['medium'])
if album.cover.rotation > 0:
class_name += ' rotate{}'.format(album.cover.rotation)
if not album.accessible:
class_name += ' grayscale'
return grid_item(
title=album.title,
meta_text='<p>{}</p>'.format(date(album.date, 'Y-m-d')),
url=album.get_absolute_url,
image_url=image_url,
class_name=class_name,
)
@register.inclusion_tag('includes/grid_item.html')
def photo_card(photo):
class_name = 'photo-card rotate{}'.format(photo.rotation)
anchor_attrs = 'data-fancybox-rotation="{}" rel="gallery"'.format(
photo.rotation)
if photo.album.shareable:
anchor_attrs += ' data-download={}'.format(
reverse('photos:shared-download',
args=[photo.album.slug, photo.album.access_token, photo]))
else:
anchor_attrs += ' data-download={}'.format(
reverse('photos:download', args=[photo]))
image_url = thumbnail(photo.file, settings.THUMBNAIL_SIZES['medium'])
if photo.album.shareable:
image_url = shared_thumbnail(photo.album.slug,
photo.album.access_token, photo.file,
settings.THUMBNAIL_SIZES['medium'])
if photo.rotation > 0:
class_name += ' rotate{}'.format(photo.rotation)
return grid_item(
title='',
url=thumbnail(photo.file, settings.THUMBNAIL_SIZES['large'],
fit=False),
image_url=image_url,
class_name=class_name,
anchor_attrs=anchor_attrs
)
website/thaliawebsite/static/css/base.scss
View file @ eedb6b80
......@@ -103,6 +103,7 @@
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
}
......@@ -135,6 +136,19 @@
width: 80px;
top: -1px;
}
.btn {
position: absolute;
top: 15px;
&.btn-first {
right: 0;
}
&.btn-second {
right: 50px
}
}
}
}
}
......
website/thaliawebsite/static/css/jquery.fancybox.css 0 → 100644
View file @ eedb6b80
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
background-color: #000;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('../images/fancybox/fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
background:url('../images/misc/icon_close.png') 0 0 no-repeat;
background-size: 32px 64px;
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 8040;
}
.fancybox-download {
background:url('../images/misc/icon_download.png') 0 0 no-repeat;
background-size: 32px 64px;
position: absolute;
top: 20px;
right: 72px;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 8040;
}
.fancybox-close:hover, .fancybox-download:hover {
background-position: 0 -32px;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('../images/fancybox/blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
background: url('../images/misc/slider_large_next_prev.png') 0 0 no-repeat;
background-size: 64px 64px;
position: absolute;
top: 50%;
width: 32px;
height: 32px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 20px;
background-position: 0 0;
}
.fancybox-prev span:hover {
background-position: -32px 0;
}
.fancybox-next span {
right: 20px;
background-position: 0 -32px;
}
.fancybox-next span:hover {
background-position: -32px -32px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}