Create constants for thumbnail sizes and make navbar sticky

website/activemembers/templates/activemembers/board_index.html

@@ -23,7 +23,7 @@
                 <a href="{{ board.get_absolute_url }}" class="current-board col-12 text-center">
                     {% if board.photo %}
                         <img alt="{{ board.name }}"
-                             src="{% thumbnail board.photo '1024x683' fit=False %}">
+                             src="{% thumbnail board.photo THUMBNAIL_SIZE_LARGE fit=False %}">
                     {% else %}
                         <img alt="{{ board.name }}"
                              src="{% static 'activemembers/images/placeholder.png' %}">

website/activemembers/templates/activemembers/membergroup_detail.html

@@ -13,7 +13,7 @@
             <div class="row">
                 {% if membergroup.photo %}
                     <img alt="{{ membergroup.name }}" class="col-12"
-                         src="{% thumbnail membergroup.photo '1024x683' fit=False %}">
+                         src="{% thumbnail membergroup.photo THUMBNAIL_SIZE_LARGE fit=False %}">
                 {% else %}
                     <img alt="{{ membergroup.name }}" class="col-12"
                          src="{% static 'activemembers/images/placeholder.png' %}">

website/activemembers/templatetags/activemembers_cards.py

 from django import template
+from django.conf import settings
 from django.templatetags.static import static
 from django.utils.translation import ugettext_lazy as _
 
@@ -13,7 +14,7 @@ register = template.Library()
 def membergroup_card(group):
     image_url = static('activemembers/images/placeholder_overview.png')
     if group.photo:
-        image_url = thumbnail(group.photo, '220x220')
+        image_url = thumbnail(group.photo, settings.THUMBNAIL_SIZES['medium'])
 
     return grid_item(
         title=group.name,
@@ -31,9 +32,9 @@ def membergroup_member_card(membership):
         since_text = _('Committee member since: ') + '?'
         if membership['since'].year > 1970:
             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']:
-        meta_text += '<p>{}</p>'.format(membership['role'])
+        meta_text += '<p class="px-1">{}</p>'.format(membership['role'])
     ribbon = None
     if membership['chair']:
         ribbon = _('Chair')

website/members/api/serializers.py

 from base64 import b64encode
+
+from django.conf import settings
 from django.contrib.staticfiles.finders import find as find_static_file
 from django.templatetags.static import static
 from django.urls import reverse
@@ -136,7 +138,7 @@ class MemberListSerializer(serializers.ModelSerializer):
     def _photo(self, instance):
         if instance.profile.photo:
             return self.context['request'].build_absolute_uri(
-                thumbnail(instance.profile.photo, '220x220', 1))
+                thumbnail(instance.profile.photo, settings.THUMBNAIL_SIZES['medium'], 1))
         else:
             return self.context['request'].build_absolute_uri(
                 static('members/images/default-avatar.jpg'))

website/members/templatetags/member_card.py

 from django import template
+from django.conf import settings
 from django.templatetags.static import static
 from django.urls import reverse
 from django.utils.translation import ugettext_lazy as _
@@ -12,15 +13,15 @@ register = template.Library()
 @register.inclusion_tag('includes/grid_item.html')
 def member_card(member, meta_text=None, ribbon=None):
     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')
     if member.profile.photo:
-        image_url = thumbnail(member.profile.photo, '220x220')
+        image_url = thumbnail(member.profile.photo, settings.THUMBNAIL_SIZES['medium'])
 
     return grid_item(
         title=member.profile.display_name(),
-        meta_text='<p>{}<p/>'.format(meta_text),
+        meta_text=meta_text,
         url=reverse('members:profile', kwargs={'pk': member.pk}),
         image_url=image_url,
         ribbon=ribbon,

website/thaliawebsite/api/services.py

@@ -3,8 +3,9 @@ from utils.templatetags.thumbnail import thumbnail
 
 
 def create_image_thumbnail_dict(request, file, placeholder='',
-                                size_small='110x110', size_medium='220x220',
-                                size_large='1024x768'):
+                                size_small=settings.THUMBNAIL_SIZES['small'],
+                                size_medium=settings.THUMBNAIL_SIZES['medium'],
+                                size_large=settings.THUMBNAIL_SIZES['large']):
     if file:
         return {
             'full': request.build_absolute_uri('{}{}'.format(

website/thaliawebsite/context_processors.py

@@ -3,8 +3,18 @@ These context processors can be used to expand the context provided
 tos views.
 """
 import os
+from django.conf import settings
 
 
 def source_commit(_):
     """Get the SOURCE_COMMIT environment variable"""
     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'],
+    }

website/thaliawebsite/settings/settings.py

@@ -123,6 +123,7 @@ TEMPLATES = [
                 'partners.context_processors.showcased_partners',
                 'announcements.context_processors.announcements',
                 'thaliawebsite.context_processors.source_commit',
+                'thaliawebsite.context_processors.thumbnail_sizes',
             ],
         },
     },
@@ -258,6 +259,12 @@ MEMBERSHIP_PRICES = {
     'study': 30,
 }
 
+THUMBNAIL_SIZES = {
+    'small': '150x150',
+    'medium': '300x300',
+    'large': '1024x768',
+}
+
 # Default FROM email
 DEFAULT_FROM_EMAIL = 'noreply@thalia.nu'
 SERVER_EMAIL = DEFAULT_FROM_EMAIL

website/thaliawebsite/static/css/base.scss

@@ -7,6 +7,7 @@
 .navbar {
     font-size: 16px;
     background-color: $white;
+    border-bottom: 1px solid $grey;
 
     > .container {
         justify-content: end;
@@ -113,6 +114,7 @@
 
 #page-content {
     padding: 1rem 0 4rem 0;
+    border-top: 1px solid $grey;
 
     .page-section {
         padding: 2rem 1rem 0 1rem;
@@ -216,13 +218,20 @@ img {
         width: 100%;
         height: 100%;
 
+        display: flex;
+        align-items: center;
+        text-align: center;
+
         img {
             width: auto;
             height: auto;
-            min-width: 100%;
             max-width: 100%;
-            min-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 {
             -moz-transition: all 300ms ease-in-out 0s;
             -webkit-transition: all 300ms ease-in-out 0s;
             -o-transition: all 300ms ease-in-out 0s;
+            margin-bottom: 0;
+            padding-bottom: 0.5rem;
         }
 
         p {
@@ -289,6 +300,7 @@ img {
             opacity: 1;
 
             h5, p {
+                -moz-transform: translateY(0px);
                 -webkit-transform: translateY(0px);
                 transform: translateY(0px);
             }
@@ -296,9 +308,18 @@ img {
 
         .name {
             opacity: 0;
+            -moz-transform: translateY(50px);
             -webkit-transform: translateY(50px);
             transform: translateY(50px);
         }
+
+        .image {
+            img {
+                -moz-transform: scale(1.05);
+                -webkit-transform: scale(1.05);
+                transform: scale(1.05);
+            }
+        }
     }
 
     &:after {
@@ -318,6 +339,7 @@ img {
 
             p {
                 font-size: 11px;
+                line-height: normal;
             }
         }
     }
@@ -341,6 +363,7 @@ img {
 
             p {
                 font-size: 9px;
+                line-height: normal;
             }
         }
     }

website/thaliawebsite/templates/base.html

@@ -51,7 +51,7 @@
 
 <div id="accentbar"></div>
 
-<nav class="navbar navbar-expand-lg">
+<nav class="navbar navbar-expand-lg sticky-top">
     <div class="container">
         <a class="navbar-brand" href="{% url 'index' %}">
             <img