Commit 6ddc3c3f authored by Thom Wiggers's avatar Thom Wiggers 📐
Browse files

Merge branch 'new-template-changes' into 'master'

Create constants for thumbnail sizes and make navbar sticky

See merge request !979
parents 3fcf53fd 2c55ef0c
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<a href="{{ board.get_absolute_url }}" class="current-board col-12 text-center"> <a href="{{ board.get_absolute_url }}" class="current-board col-12 text-center">
{% if board.photo %} {% if board.photo %}
<img alt="{{ board.name }}" <img alt="{{ board.name }}"
src="{% thumbnail board.photo '1024x683' fit=False %}"> src="{% thumbnail board.photo THUMBNAIL_SIZE_LARGE fit=False %}">
{% else %} {% else %}
<img alt="{{ board.name }}" <img alt="{{ board.name }}"
src="{% static 'activemembers/images/placeholder.png' %}"> src="{% static 'activemembers/images/placeholder.png' %}">
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="row"> <div class="row">
{% if membergroup.photo %} {% if membergroup.photo %}
<img alt="{{ membergroup.name }}" class="col-12" <img alt="{{ membergroup.name }}" class="col-12"
src="{% thumbnail membergroup.photo '1024x683' fit=False %}"> src="{% thumbnail membergroup.photo THUMBNAIL_SIZE_LARGE fit=False %}">
{% else %} {% else %}
<img alt="{{ membergroup.name }}" class="col-12" <img alt="{{ membergroup.name }}" class="col-12"
src="{% static 'activemembers/images/placeholder.png' %}"> src="{% static 'activemembers/images/placeholder.png' %}">
......
from django import template from django import template
from django.conf import settings
from django.templatetags.static import static from django.templatetags.static import static
from django.utils.translation import ugettext_lazy as _ from django.utils.translation import ugettext_lazy as _
...@@ -13,7 +14,7 @@ register = template.Library() ...@@ -13,7 +14,7 @@ register = template.Library()
def membergroup_card(group): def membergroup_card(group):
image_url = static('activemembers/images/placeholder_overview.png') image_url = static('activemembers/images/placeholder_overview.png')
if group.photo: if group.photo:
image_url = thumbnail(group.photo, '220x220') image_url = thumbnail(group.photo, settings.THUMBNAIL_SIZES['medium'])
return grid_item( return grid_item(
title=group.name, title=group.name,
...@@ -31,9 +32,9 @@ def membergroup_member_card(membership): ...@@ -31,9 +32,9 @@ def membergroup_member_card(membership):
since_text = _('Committee member since: ') + '?' since_text = _('Committee member since: ') + '?'
if membership['since'].year > 1970: if membership['since'].year > 1970:
since_text = _('Committee member since: ') + str(membership['since'].year) since_text = _('Committee member since: ') + str(membership['since'].year)
meta_text += '<p>{}</p>'.format(since_text) meta_text += '<p class="px-1">{}</p>'.format(since_text)
if 'role' in membership and membership['role']: if 'role' in membership and membership['role']:
meta_text += '<p>{}</p>'.format(membership['role']) meta_text += '<p class="px-1">{}</p>'.format(membership['role'])
ribbon = None ribbon = None
if membership['chair']: if membership['chair']:
ribbon = _('Chair') ribbon = _('Chair')
......
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n static bleach_tags thumbnail member_card google_map_url %} {% load i18n static bleach_tags thumbnail member_card google_map_url grid_item %}
{% block title %}{{ event.title }} — {% trans "Calendar"|capfirst %} — {{ block.super }}{% endblock %} {% block title %}{{ event.title }} — {% trans "Calendar"|capfirst %} — {{ block.super }}{% endblock %}
{% block opengraph_title %}{{ event.title }} — {% trans "Calendar"|capfirst %} — {{ block.super }}{% endblock %} {% block opengraph_title %}{{ event.title }} — {% trans "Calendar"|capfirst %} — {{ block.super }}{% endblock %}
...@@ -233,7 +233,8 @@ ...@@ -233,7 +233,8 @@
{% for registration in event.participants %} {% for registration in event.participants %}
<div class="col-4 col-md-3 my-3"> <div class="col-4 col-md-3 my-3">
{% if registration.is_external %} {% if registration.is_external %}
{% static 'members/images/default-avatar.jpg' as image %}
{% grid_item title=registration.name image_url=image %}
{% else %} {% else %}
{% member_card registration.member %} {% member_card registration.member %}
{% endif %} {% endif %}
......
from base64 import b64encode from base64 import b64encode
from django.conf import settings
from django.contrib.staticfiles.finders import find as find_static_file from django.contrib.staticfiles.finders import find as find_static_file
from django.templatetags.static import static from django.templatetags.static import static
from django.urls import reverse from django.urls import reverse
...@@ -136,7 +138,7 @@ class MemberListSerializer(serializers.ModelSerializer): ...@@ -136,7 +138,7 @@ class MemberListSerializer(serializers.ModelSerializer):
def _photo(self, instance): def _photo(self, instance):
if instance.profile.photo: if instance.profile.photo:
return self.context['request'].build_absolute_uri( return self.context['request'].build_absolute_uri(
thumbnail(instance.profile.photo, '220x220', 1)) thumbnail(instance.profile.photo, settings.THUMBNAIL_SIZES['medium'], 1))
else: else:
return self.context['request'].build_absolute_uri( return self.context['request'].build_absolute_uri(
static('members/images/default-avatar.jpg')) static('members/images/default-avatar.jpg'))
......
from django import template from django import template
from django.conf import settings
from django.templatetags.static import static from django.templatetags.static import static
from django.urls import reverse from django.urls import reverse
from django.utils.translation import ugettext_lazy as _ from django.utils.translation import ugettext_lazy as _
...@@ -12,15 +13,15 @@ register = template.Library() ...@@ -12,15 +13,15 @@ register = template.Library()
@register.inclusion_tag('includes/grid_item.html') @register.inclusion_tag('includes/grid_item.html')
def member_card(member, meta_text=None, ribbon=None): def member_card(member, meta_text=None, ribbon=None):
if meta_text is None and member.profile.starting_year: if meta_text is None and member.profile.starting_year:
meta_text = "{}: {}".format(_('Cohort'), member.profile.starting_year) meta_text = '<p class="px-1">{}: {}</p>'.format(_('Cohort'), member.profile.starting_year)
image_url = static('members/images/default-avatar.jpg') image_url = static('members/images/default-avatar.jpg')
if member.profile.photo: if member.profile.photo:
image_url = thumbnail(member.profile.photo, '220x220') image_url = thumbnail(member.profile.photo, settings.THUMBNAIL_SIZES['medium'])
return grid_item( return grid_item(
title=member.profile.display_name(), title=member.profile.display_name(),
meta_text='<p>{}<p/>'.format(meta_text), meta_text=meta_text,
url=reverse('members:profile', kwargs={'pk': member.pk}), url=reverse('members:profile', kwargs={'pk': member.pk}),
image_url=image_url, image_url=image_url,
ribbon=ribbon, ribbon=ribbon,
......
...@@ -3,8 +3,9 @@ from utils.templatetags.thumbnail import thumbnail ...@@ -3,8 +3,9 @@ from utils.templatetags.thumbnail import thumbnail
def create_image_thumbnail_dict(request, file, placeholder='', def create_image_thumbnail_dict(request, file, placeholder='',
size_small='110x110', size_medium='220x220', size_small=settings.THUMBNAIL_SIZES['small'],
size_large='1024x768'): size_medium=settings.THUMBNAIL_SIZES['medium'],
size_large=settings.THUMBNAIL_SIZES['large']):
if file: if file:
return { return {
'full': request.build_absolute_uri('{}{}'.format( 'full': request.build_absolute_uri('{}{}'.format(
......
...@@ -3,8 +3,18 @@ These context processors can be used to expand the context provided ...@@ -3,8 +3,18 @@ These context processors can be used to expand the context provided
tos views. tos views.
""" """
import os import os
from django.conf import settings
def source_commit(_): def source_commit(_):
"""Get the SOURCE_COMMIT environment variable""" """Get the SOURCE_COMMIT environment variable"""
return {'SOURCE_COMMIT': os.environ.get('SOURCE_COMMIT', 'unknown')} return {'SOURCE_COMMIT': os.environ.get('SOURCE_COMMIT', 'unknown')}
def thumbnail_sizes(_):
"""Get the defined sizes for thumbnails"""
return {
'THUMBNAIL_SIZE_SMALL': settings.THUMBNAIL_SIZES['small'],
'THUMBNAIL_SIZE_MEDIUM': settings.THUMBNAIL_SIZES['medium'],
'THUMBNAIL_SIZE_LARGE': settings.THUMBNAIL_SIZES['large'],
}
...@@ -123,6 +123,7 @@ TEMPLATES = [ ...@@ -123,6 +123,7 @@ TEMPLATES = [
'partners.context_processors.showcased_partners', 'partners.context_processors.showcased_partners',
'announcements.context_processors.announcements', 'announcements.context_processors.announcements',
'thaliawebsite.context_processors.source_commit', 'thaliawebsite.context_processors.source_commit',
'thaliawebsite.context_processors.thumbnail_sizes',
], ],
}, },
}, },
...@@ -258,6 +259,12 @@ MEMBERSHIP_PRICES = { ...@@ -258,6 +259,12 @@ MEMBERSHIP_PRICES = {
'study': 30, 'study': 30,
} }
THUMBNAIL_SIZES = {
'small': '150x150',
'medium': '300x300',
'large': '1024x768',
}
# Default FROM email # Default FROM email
DEFAULT_FROM_EMAIL = 'noreply@thalia.nu' DEFAULT_FROM_EMAIL = 'noreply@thalia.nu'
SERVER_EMAIL = DEFAULT_FROM_EMAIL SERVER_EMAIL = DEFAULT_FROM_EMAIL
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
.navbar { .navbar {
font-size: 16px; font-size: 16px;
background-color: $white; background-color: $white;
border-bottom: 1px solid $grey;
> .container { > .container {
justify-content: end; justify-content: end;
...@@ -113,6 +114,7 @@ ...@@ -113,6 +114,7 @@
#page-content { #page-content {
padding: 1rem 0 4rem 0; padding: 1rem 0 4rem 0;
border-top: 1px solid $grey;
.page-section { .page-section {
padding: 2rem 1rem 0 1rem; padding: 2rem 1rem 0 1rem;
...@@ -216,13 +218,20 @@ img { ...@@ -216,13 +218,20 @@ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
align-items: center;
text-align: center;
img { img {
width: auto; width: auto;
height: auto; height: auto;
min-width: 100%;
max-width: 100%; max-width: 100%;
min-height: 100%;
max-height: 100%; max-height: 100%;
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
} }
} }
...@@ -248,6 +257,8 @@ img { ...@@ -248,6 +257,8 @@ img {
-moz-transition: all 300ms ease-in-out 0s; -moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s; -webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s;
margin-bottom: 0;
padding-bottom: 0.5rem;
} }
p { p {
...@@ -289,6 +300,7 @@ img { ...@@ -289,6 +300,7 @@ img {
opacity: 1; opacity: 1;
h5, p { h5, p {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px); -webkit-transform: translateY(0px);
transform: translateY(0px); transform: translateY(0px);
} }
...@@ -296,9 +308,18 @@ img { ...@@ -296,9 +308,18 @@ img {
.name { .name {
opacity: 0; opacity: 0;
-moz-transform: translateY(50px);
-webkit-transform: translateY(50px); -webkit-transform: translateY(50px);
transform: translateY(50px); transform: translateY(50px);
} }
.image {
img {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
} }
&:after { &:after {
...@@ -318,6 +339,7 @@ img { ...@@ -318,6 +339,7 @@ img {
p { p {
font-size: 11px; font-size: 11px;
line-height: normal;
} }
} }
} }
...@@ -341,6 +363,7 @@ img { ...@@ -341,6 +363,7 @@ img {
p { p {
font-size: 9px; font-size: 9px;
line-height: normal;
} }
} }
} }
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<div id="accentbar"></div> <div id="accentbar"></div>
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg sticky-top">
<div class="container"> <div class="container">
<a class="navbar-brand" href="{% url 'index' %}"> <a class="navbar-brand" href="{% url 'index' %}">
<img <img
......
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