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 @@ ...@@ -41,21 +41,6 @@
} }
#events-index { #events-index {
.section-title {
.btn {
position: absolute;
top: 15px;
&.btn-first {
right: 0;
}
&.btn-second {
right: 50px
}
}
}
.fc-bootstrap4 .fc-today { .fc-bootstrap4 .fc-today {
background: #fff9fc; 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. */ /* Solving this with dynamic a data attribute (i.e. attr(data-rotation)) does not work, as that's a string. */
img.rotate90 { #photos-index, #photos-album {
transform: rotate(90deg); .rotate90 {
} img {
transform: rotate(90deg);
img.rotate180 { }
transform: rotate(180deg); }
} .rotate180 {
img {
img.rotate270 { transform: rotate(180deg);
transform: rotate(270deg); }
} }
.rotate270 {
img.grayscale { img {
filter: grayscale(1); transform: rotate(270deg);
} }
}
.grayscale {
img {
filter: grayscale(1);
}
}
.thimbus-page .gallery .gallery-album .post-overlay.grayscale { .grid-item.grayscale {
background-color: rgba(88, 88, 88, 0.6); .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' %} {% extends 'base.html' %}
{% load staticfiles i18n thumbnail shared_thumbnail compress %} {% load staticfiles i18n compress photos_cards %}
{% block title %}{{ album.title }} — {% trans "Photos" %} — {{ block.super }}{% endblock %} {% block title %}{{ album.title }} — {% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block opengraph_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 header_image %}{% static "img/headers/fixed/banner7.jpg" %}{% endblock %}
{% block body %} {% block body %}
<h1>{{ album.title }} <section id="photos-album" class="page-section">
<span class="title-meta clearfix"> <div class="container">
<span><a href="{% url 'photos:album-download' album.slug %}" class="download"></a></span> <h1 class="text-center section-title">
<span><a href="{% url 'photos:index' %}" class="back"></a></span> {{ album.title }}
</span> <a href="{% url 'photos:album-download' album.slug %}"
<span class="title-meta clearfix"> target="_blank"
</h1> class="btn btn-primary btn-first"
<h2>{{ album.date|date:"d-m-Y" }}</h2> >
{% if album.shareable %} <i class="fas fa-download"></i>
<p class="tcenter"> </a>
{% trans "Note: This album can be shared with people outside the association by sending them the following link:" %}<br> </h1>
<small><a href="{% url 'photos:shared_album' album.slug album.access_token %}"> <h2 class="text-center mt-2">{{ album.date|date:"d-m-Y" }}</h2>
{{ 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">
{% if album.shareable %} {% if album.shareable %}
<img class="rotate{{ photo.rotation }}" src="{% shared_thumbnail album.slug album.access_token photo.file '220x220' %}" alt="" /> <p class="text-center">
{% else %} {% trans "Note: This album can be shared with people outside the association by sending them the following link:" %}<br>
<img class="rotate{{ photo.rotation }}" src="{% thumbnail photo.file '220x220' %}" alt="" /> <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 %} {% endif %}
</span>
<span class="post-overlay"> <div class="row">
</span> {% for photo in photos %}
</span> <div class="col-4 col-md-3 my-3">
</a> {% photo_card photo %}
</li> </div>
{% endfor %} {% endfor %}
</ul> </div>
</div> </div>
</section>
{% endblock %}
{% block js_body %}
{{ block.super }}
{% compress js %}
<script type="text/javascript" src="{% static "photos/js/main.js" %}"></script>
{% endcompress %}
{% endblock %} {% endblock %}
website/photos/templates/photos/index.html
View file @ eedb6b80
{% extends 'old-base.html' %} {% extends 'base.html' %}
{% load i18n thumbnail staticfiles compress %} {% load i18n staticfiles compress photos_cards %}
{% block title %}{% trans "Photos" %} — {{ block.super }}{% endblock %} {% block title %}{% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block opengraph_title %}{% trans "Photos" %} — {{ block.super }}{% endblock %} {% block opengraph_title %}{% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block css_head %} {% block header_image %}{% static "img/headers/fixed/banner7.jpg" %}{% endblock header_image %}
{{ 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 body %} {% block body %}
<h1>{% trans "Photos" %}</h1> <section id="photos-index" class="page-section">
<div class="container">
<p class="tcenter"> <h1 class="text-center section-title">{% trans "Photos" %}</h1>
{% 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> <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>.' %}
<div class="gallery"> </p>
<ul class="gallery-albums row">
{% for album in albums %} <div class="row">
<li class="post gallery-album span3 has-overlay"> {% for album in albums %}
{% if album.accessible %} <div class="col-4 col-md-3 my-3">
<a href="{% url 'photos:album' album.slug %}"> {% album_card album %}
{% endif %} </div>
<span class="post-inner"> {% endfor %}
<span class="inner-img"> </div>
{% if album.cover is not None %}
<img class="rotate{{ album.cover.rotation }} {{ album.accessible|yesno:",grayscale" }}" src="{% thumbnail album.cover.file '220x220' %}" alt=""/> <nav>
{% endif %} <ul class="pagination justify-content-center mt-4">
</span> {% if albums.has_previous %}
<span class="post-overlay {{ album.accessible|yesno:",grayscale" }}"> <li class="page-item">
<span class="post-overlay-meta"> <a class="page-link"
<h2>{{ album.title }}</h2> href="{% url 'photos:index' %}?page={{ albums.previous_page_number }}{% if filter %}&filter={{ filter }}{% endif %}{% if keywords %}&keywords={{ keys }}{% endif %}#albums-directory">
<p>{{ album.date|date:"d-m-Y" }}</p> <span aria-hidden="true">&laquo;</span>
</span> <span class="sr-only">Previous</span>
</span> </a>
</span> </li>
{% if album.accessible %} {% endif %}
</a> {% for page in page_range %}
{% endif %} <li class="page-item{% if page == albums.number %} active{% endif %}">
</li> <a class="page-link" href="{% url 'photos:index' %}?page={{ page }}{% if filter %}&filter={{ filter }}{% endif %}{% if keywords %}&keywords={{ keys }}{% endif %}#albums-director">{{ page }}
{% endfor %} </a>
</ul> </li>
</div> {% endfor %}
{% if albums.has_next %}
<div class="clearfix"></div> <li class="page-item">
<a class="page-link"
<div class="pagination-wrapper row"> href="{% url 'photos:index' %}?page={{ albums.next_page_number }}{% if filter %}&filter={{ filter }}{% endif %}{% if keywords %}&keywords={{ keys }}{% endif %}">
<ul class="pagination"> <span aria-hidden="true">&raquo;</span>
{% if albums.has_previous %} <span class="sr-only">Next</span>
<li> </a>
<a class="page-prev" href="{% url 'photos:index' %}?page={{ albums.previous_page_number }}">Previous</a> </li>
</li> {% endif %}
{% endif %} </ul>
</nav>
{% for page in page_range %} </div>
{% if page == albums.number %} </section>
<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>
{% endblock %} {% 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 @@ ...@@ -103,6 +103,7 @@
height: 100%; height: 100%;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center;
} }
} }
...@@ -135,6 +136,19 @@ ...@@ -135,6 +136,19 @@
width: 80px; width: 80px;
top: -1px; 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;
}