From 1b688a8aa579af47551703b9ac893b03ec62271d Mon Sep 17 00:00:00 2001 From: Skia Date: Fri, 1 Oct 2021 18:37:13 +0200 Subject: [PATCH] Add a first version of a mobile friendly UI Although not perfect and with many flaws, this should still allow far easier navigation on mobile devices. --- com/templates/com/news_list.jinja | 264 +++++++++--------- core/static/core/style.scss | 166 ++++++----- core/templates/core/base.jinja | 17 +- core/templates/core/delete_confirm.jinja | 6 + counter/templates/counter/counter_click.jinja | 55 ++-- 5 files changed, 276 insertions(+), 232 deletions(-) diff --git a/com/templates/com/news_list.jinja b/com/templates/com/news_list.jinja index 0364a09b..8aee6459 100644 --- a/com/templates/com/news_list.jinja +++ b/com/templates/com/news_list.jinja @@ -13,145 +13,143 @@ {% endif %} -
-
-
{% trans %}Agenda{% endtrans %}
-
- {% for d in NewsDate.objects.filter(end_date__gte=timezone.now(), - news__is_moderated=True, news__type__in=["WEEKLY", - "EVENT"]).order_by('start_date', 'end_date') %} -
-
- {{ d.start_date|localtime|date('D d M Y') }} -
-
- {{ d.start_date|localtime|time(DATETIME_FORMAT) }} - - {{ d.end_date|localtime|time(DATETIME_FORMAT) }} -
- -
{{ d.news.summary|markdown }}
-
- {% endfor %} -
-
- -
-
{% trans %}Birthdays{% endtrans %}
-
- {% if user.is_subscribed %} - {# Cache request for 1 hour #} - {% cache 3600 "birthdays" %} -
    - {% for d in birthdays.dates('date_of_birth', 'year', 'DESC') %} -
  • - {% trans age=timezone.now().year - d.year %}{{ age }} year old{% endtrans %} - -
    • - {% endfor %} -
- {% endcache %} - {% else %} -

{% trans %}You need an up to date subscription to access this content{% endtrans %}

- {% endif %} -
-
-
- -
- {% for news in object_list.filter(type="NOTICE") %} -
-

{{ news.title }}

-
{{ news.summary|markdown }}
-
- {% endfor %} + {% for news in object_list.filter(type="NOTICE") %} +
+

{{ news.title }}

+
{{ news.summary|markdown }}
+
+ {% endfor %} - {% for news in object_list.filter(dates__start_date__lte=timezone.now(), - dates__end_date__gte=timezone.now(), type="CALL") %} -
-

{{ news.title }}

-
- {{ news.dates.first().start_date|localtime|date(DATETIME_FORMAT) }} - {{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }} - - {{ news.dates.first().end_date|localtime|date(DATETIME_FORMAT) }} - {{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }} -
-
{{ news.summary|markdown }}
-
- {% endfor %} + {% for news in object_list.filter(dates__start_date__lte=timezone.now(), dates__end_date__gte=timezone.now(), type="CALL") %} +
+

{{ news.title }}

+
+ {{ news.dates.first().start_date|localtime|date(DATETIME_FORMAT) }} + {{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }} - + {{ news.dates.first().end_date|localtime|date(DATETIME_FORMAT) }} + {{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }} +
+
{{ news.summary|markdown }}
+
+ {% endfor %} - {% set events_dates = NewsDate.objects.filter(end_date__gte=timezone.now(), start_date__lte=timezone.now()+timedelta(days=5), - news__type="EVENT", news__is_moderated=True).datetimes('start_date', 'day') %} -

{% trans %}Events today and the next few days{% endtrans %}

- {% if events_dates %} - {% for d in events_dates %} -
-
-
-
{{ d|localtime|date('D') }}
-
{{ d|localtime|date('d') }}
-
{{ d|localtime|date('b') }}
-
-
-
- {% for news in object_list.filter(dates__start_date__gte=d, - dates__start_date__lte=d+timedelta(days=1), - type="EVENT").exclude(dates__end_date__lt=timezone.now()) - .order_by('dates__start_date') %} -
- -

{{ news.title }}

- -
- {{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }} - - {{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }} -
-
{{ news.summary|markdown }} -
- {{ fb_quick(news) }} - {{ tweet_quick(news) }} -
-
-
- {% endfor %} -
-
- {% endfor %} - {% else %} -
- {% trans %}Nothing to come...{% endtrans %} -
- {% endif %} + {% set events_dates = NewsDate.objects.filter(end_date__gte=timezone.now(), start_date__lte=timezone.now()+timedelta(days=5), news__type="EVENT", news__is_moderated=True).datetimes('start_date', 'day') %} +

{% trans %}Events today and the next few days{% endtrans %}

+ {% if events_dates %} + {% for d in events_dates %} +
+
+
+
{{ d|localtime|date('D') }}
+
{{ d|localtime|date('d') }}
+
{{ d|localtime|date('b') }}
+
+
+
+ {% for news in object_list.filter(dates__start_date__gte=d, + dates__start_date__lte=d+timedelta(days=1), + type="EVENT").exclude(dates__end_date__lt=timezone.now()) + .order_by('dates__start_date') %} +
+ +

{{ news.title }}

+ +
+ {{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }} - + {{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }} +
+
{{ news.summary|markdown }} +
+ {{ fb_quick(news) }} + {{ tweet_quick(news) }} +
+
+
+ {% endfor %} +
+
+ {% endfor %} + {% else %} +
+ {% trans %}Nothing to come...{% endtrans %} +
+ {% endif %} - {% set coming_soon = object_list.filter(dates__start_date__gte=timezone.now()+timedelta(days=5), - type="EVENT").order_by('dates__start_date') %} - {% if coming_soon %} -

{% trans %}Coming soon... don't miss!{% endtrans %}

- {% for news in coming_soon %} -
- {{ news.title }} - {{ news.dates.first().start_date|localtime|date(DATETIME_FORMAT) }} - {{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }} - - {{ news.dates.first().end_date|localtime|date(DATETIME_FORMAT) }} - {{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }} -
- {% endfor %} - {% endif %} + {% set coming_soon = object_list.filter(dates__start_date__gte=timezone.now()+timedelta(days=5), + type="EVENT").order_by('dates__start_date') %} + {% if coming_soon %} +

{% trans %}Coming soon... don't miss!{% endtrans %}

+ {% for news in coming_soon %} +
+ {{ news.title }} + {{ news.dates.first().start_date|localtime|date(DATETIME_FORMAT) }} + {{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }} - + {{ news.dates.first().end_date|localtime|date(DATETIME_FORMAT) }} + {{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }} +
+ {% endfor %} + {% endif %}
+ +
+
+
{% trans %}Agenda{% endtrans %}
+
+ {% for d in NewsDate.objects.filter(end_date__gte=timezone.now(), + news__is_moderated=True, news__type__in=["WEEKLY", + "EVENT"]).order_by('start_date', 'end_date') %} +
+
+ {{ d.start_date|localtime|date('D d M Y') }} +
+
+ {{ d.start_date|localtime|time(DATETIME_FORMAT) }} - + {{ d.end_date|localtime|time(DATETIME_FORMAT) }} +
+ +
{{ d.news.summary|markdown }}
+
+ {% endfor %} +
+
+ +
+
{% trans %}Birthdays{% endtrans %}
+
+ {% if user.is_subscribed %} + {# Cache request for 1 hour #} + {% cache 3600 "birthdays" %} +
    + {% for d in birthdays.dates('date_of_birth', 'year', 'DESC') %} +
  • + {% trans age=timezone.now().year - d.year %}{{ age }} year old{% endtrans %} + +
    • + {% endfor %} +
+ {% endcache %} + {% else %} +

{% trans %}You need an up to date subscription to access this content{% endtrans %}

+ {% endif %} +
+
+
+ {% endblock %} diff --git a/core/static/core/style.scss b/core/static/core/style.scss index 02d60e52..934535a0 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -28,7 +28,7 @@ $twitblue: hsl(206, 82%, 63%); $shadow-color: rgb(223, 223, 223); -$background-bouton-color: hsl(0, 0%, 90%); +$background-button-color: hsl(0, 0%, 95%); /*--------------------------MEDIA QUERY HELPERS------------------------*/ $small-devices: 576px; @@ -47,10 +47,11 @@ body { input[type=button], input[type=submit], input[type=reset],input[type=file] { border: none; text-decoration: none; - background-color: $background-bouton-color; - padding: 10px; + background-color: $background-button-color; + padding: 0.4em; + margin: 0.1em; font-weight: bold; - font-size: 16px; + font-size: 1.2em; border-radius: 5px; cursor: pointer; box-shadow: $shadow-color 0px 0px 1px; @@ -62,9 +63,10 @@ input[type=button], input[type=submit], input[type=reset],input[type=file] { button{ border: none; text-decoration: none; - background-color: $background-bouton-color; - padding: 10px; - font-size: 14px; + background-color: $background-button-color; + padding: 0.4em; + margin: 0.1em; + font-size: 1.18em; border-radius: 5px; box-shadow: $shadow-color 0px 0px 1px; cursor: pointer; @@ -75,24 +77,26 @@ button{ input,textarea[type=text],[type=number]{ border: none; text-decoration: none; - background-color: $background-bouton-color; - padding: 7px; - font-size: 16px; + background-color: $background-button-color; + padding: 0.4em; + margin: 0.1em; + font-size: 1.2em; border-radius: 5px; + max-width: 95%; } textarea{ border: none; text-decoration: none; - background-color: $background-bouton-color; + background-color: $background-button-color; padding: 7px; - font-size: 16px; + font-size: 1.2em; border-radius: 5px; } select{ border: none; text-decoration: none; - font-size: 15px; - background-color: $background-bouton-color; + font-size: 1.2em; + background-color: $background-button-color; padding: 10px; border-radius: 5px; cursor: pointer; @@ -130,9 +134,10 @@ a { #header_language_chooser { position: absolute; - top: 0.2em; - right: 0.5em; + top: 2em; + left: 0.5em; width: 3%; + min-width: 2.2em; text-align: center; input { display: block; @@ -157,9 +162,6 @@ header { border-radius: 0px 0px 10px 10px; #header_logo { - display: inline-block; - flex: none; - background-size: 100% 100%; background-color: $white-color; padding: 0.2em; border-radius: 0px 0px 0px 9px; @@ -169,11 +171,19 @@ header { margin: 0px; width: 100%; height: 100%; + + img { + max-width: 70%; + max-height: 100%; + margin: auto; + display: block; + } } } #header_connect_links { margin: 0.6em 0.6em 0em auto; + padding: 0.2em; color: $white-color; form { display: inline; @@ -190,6 +200,7 @@ header { #header_bar { display: flex; flex: auto; + flex-wrap: wrap; width: 80%; a { @@ -213,12 +224,16 @@ header { display: inline-block; flex: auto; margin: 0.8em 0em; + input { + width: 12ch; + } } #header_user_links { display: flex; - width: 120ch; + // width: 120ch; flex: initial; + flex-wrap: wrap; text-align: right; margin: 0em; div { @@ -287,42 +302,34 @@ header { #info_boxes { display: flex; + flex-wrap: wrap; width: 90%; margin: 1em auto; - p { - margin: 0px; - padding: 7px; - } #alert_box, #info_box { - font-size: 14px; - display: inline-block; - flex: auto; - padding: 2px; - margin: 0.2em 1.5%; - min-width: 10%; - max-width: 46%; - min-height: 20px; + flex: 49%; + font-size: 0.9em; + margin: 0.2em; + border-radius: 0.6em; + .markdown { + margin: 0.5em; + } &:before { - float: left; + font-family: FontAwesome; + font-size: 4em; + float: right; margin: 0.2em; } } #info_box { - border-radius: 10px; background: $primary-neutral-light-color; &:before { - font-family: FontAwesome; - font-size: 4em; content: "\f05a"; color: hsl(210, 100%, 56%); } } #alert_box { - border-radius: 10px; background: $second-color; &:before { - font-family: FontAwesome; - font-size: 4em; content: "\f06a"; color: $white-color; } @@ -345,7 +352,7 @@ header { a { flex: auto; text-align: center; - padding: 20px; + padding: 1.5em; color: $white-color; font-style: normal; font-weight: bolder; @@ -458,6 +465,8 @@ header { /*---------------------------------NEWS--------------------------------*/ #news { + display: flex; + flex-wrap: wrap; .news_column { display: inline-block; margin: 0px; @@ -467,11 +476,13 @@ header { margin-bottom: 1em; } #right_column { - width: 20%; + flex: 20%; float: right; + margin: 0.2em; } #left_column { - width: 79%; + flex: 79%; + margin: 0.2em; h3 { background: $second-color; box-shadow: $shadow-color 1px 1px 1px; @@ -484,6 +495,11 @@ header { } } } + @media screen and (max-width: $small-devices){ + #left_column, #right_column { + flex: 100%; + } + } /* AGENDA/BIRTHDAYS */ #agenda,#birthdays { @@ -691,6 +707,12 @@ header { } } +@media screen and (max-width: $small-devices){ + #page { + width: 98%; + } +} + #news_details { display: inline-block; margin-top: 20px; @@ -723,7 +745,7 @@ header { text-align: center; text-decoration: none; display: inline-block; - font-size: 16px; + font-size: 1.2em; border-radius: 2px; float: right; display: block; @@ -1111,33 +1133,36 @@ u, .underline { text-decoration: underline; } -#basket { - width: 40%; - background: $primary-neutral-light-color; - float: right; - padding: 10px; - border-radius: 10px; -} +#bar_ui { + padding: 0.4em; + display: flex; + flex-wrap: wrap; + flex-direction: row-reverse; -#products { - width: 90%; - margin: 0px auto; - overflow: auto; -} + #products { + flex-basis: 100%; + margin: 0.2em; + overflow: auto; + } -#click_form { - float: left; - min-width: 57%; -} + #click_form { + flex: auto; + margin: 0.2em; + } -#user_info_container {} - -#user_info { - float: right; - padding: 5px; - width: 40%; - margin: 0px auto; - background: $secondary-neutral-light-color; + #user_info { + flex: auto; + padding: 0.5em; + margin: 0.2em; + height: 100%; + background: $secondary-neutral-light-color; + img { + max-width: 70%; + } + input { + background: white; + } + } } /*-----------------------------USER PROFILE----------------------------*/ @@ -1212,6 +1237,11 @@ u, .underline { } } } + @media screen and (max-width: $small-devices){ + #user_profile_infos, #user_profile_pictures { + flex-basis: 50%; + } + } } } @@ -1412,6 +1442,7 @@ textarea { .search_bar { margin: 10px 0px; display: flex; + flex-wrap: wrap; height: 20p; align-items: center; } @@ -1551,6 +1582,7 @@ footer { color: $white-color; border-radius: 5px; display: flex; + flex-wrap: wrap; background-color: $primary-neutral-dark-color; box-shadow: $shadow-color 0px 0px 15px; a { diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja index e03230ef..ea251677 100644 --- a/core/templates/core/base.jinja +++ b/core/templates/core/base.jinja @@ -3,6 +3,7 @@ {% block head %} {% block title %}{% trans %}Welcome!{% endtrans %}{% endblock %} - Association des Étudiants UTBM + @@ -27,6 +28,7 @@ {% block header %} {% if not popup %} +
{% for language in LANGUAGES %}
{% csrf_token %} @@ -37,10 +39,11 @@ {% endfor %}
-
{% if not user.is_authenticated %} -