mirror of
https://github.com/ae-utbm/sith.git
synced 2025-11-04 11:03:04 +00:00
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.
This commit is contained in:
Skia
@@ -13,58 +13,6 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="right_column" class="news_column">
|
||||
<div id="agenda">
|
||||
<div id="agenda_title">{% trans %}Agenda{% endtrans %}</div>
|
||||
<div id="agenda_content">
|
||||
{% 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') %}
|
||||
<div class="agenda_item">
|
||||
<div class="agenda_date">
|
||||
<strong>{{ d.start_date|localtime|date('D d M Y') }}</strong>
|
||||
</div>
|
||||
<div class="agenda_time">
|
||||
<span>{{ d.start_date|localtime|time(DATETIME_FORMAT) }}</span> -
|
||||
<span>{{ d.end_date|localtime|time(DATETIME_FORMAT) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong><a href="{{ url('com:news_detail', news_id=d.news.id) }}">{{ d.news.title }}</a></strong>
|
||||
<a href="{{ d.news.club.get_absolute_url() }}">{{ d.news.club }}</a>
|
||||
</div>
|
||||
<div class="agenda_item_content">{{ d.news.summary|markdown }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="birthdays">
|
||||
<div id="birthdays_title">{% trans %}Birthdays{% endtrans %}</div>
|
||||
<div id="birthdays_content">
|
||||
{% if user.is_subscribed %}
|
||||
{# Cache request for 1 hour #}
|
||||
{% cache 3600 "birthdays" %}
|
||||
<ul class="birthdays_year">
|
||||
{% for d in birthdays.dates('date_of_birth', 'year', 'DESC') %}
|
||||
<li>
|
||||
{% trans age=timezone.now().year - d.year %}{{ age }} year old{% endtrans %}
|
||||
<ul>
|
||||
{% for u in birthdays.filter(date_of_birth__year=d.year) %}
|
||||
<li><a href="{{ u.get_absolute_url() }}">{{ u.get_short_name() }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcache %}
|
||||
{% else %}
|
||||
<p>{% trans %}You need an up to date subscription to access this content{% endtrans %}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="left_column" class="news_column">
|
||||
|
||||
{% for news in object_list.filter(type="NOTICE") %}
|
||||
@@ -74,8 +22,7 @@
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
{% for news in object_list.filter(dates__start_date__lte=timezone.now(),
|
||||
dates__end_date__gte=timezone.now(), type="CALL") %}
|
||||
{% for news in object_list.filter(dates__start_date__lte=timezone.now(), dates__end_date__gte=timezone.now(), type="CALL") %}
|
||||
<section class="news_call">
|
||||
<h4> <a href="{{ url('com:news_detail', news_id=news.id) }}">{{ news.title }}</a></h4>
|
||||
<div class="news_date">
|
||||
@@ -88,8 +35,7 @@
|
||||
</section>
|
||||
{% 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') %}
|
||||
{% 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') %}
|
||||
<h3>{% trans %}Events today and the next few days{% endtrans %}</h3>
|
||||
{% if events_dates %}
|
||||
{% for d in events_dates %}
|
||||
@@ -152,6 +98,58 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="right_column" class="news_column">
|
||||
<div id="agenda">
|
||||
<div id="agenda_title">{% trans %}Agenda{% endtrans %}</div>
|
||||
<div id="agenda_content">
|
||||
{% 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') %}
|
||||
<div class="agenda_item">
|
||||
<div class="agenda_date">
|
||||
<strong>{{ d.start_date|localtime|date('D d M Y') }}</strong>
|
||||
</div>
|
||||
<div class="agenda_time">
|
||||
<span>{{ d.start_date|localtime|time(DATETIME_FORMAT) }}</span> -
|
||||
<span>{{ d.end_date|localtime|time(DATETIME_FORMAT) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong><a href="{{ url('com:news_detail', news_id=d.news.id) }}">{{ d.news.title }}</a></strong>
|
||||
<a href="{{ d.news.club.get_absolute_url() }}">{{ d.news.club }}</a>
|
||||
</div>
|
||||
<div class="agenda_item_content">{{ d.news.summary|markdown }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="birthdays">
|
||||
<div id="birthdays_title">{% trans %}Birthdays{% endtrans %}</div>
|
||||
<div id="birthdays_content">
|
||||
{% if user.is_subscribed %}
|
||||
{# Cache request for 1 hour #}
|
||||
{% cache 3600 "birthdays" %}
|
||||
<ul class="birthdays_year">
|
||||
{% for d in birthdays.dates('date_of_birth', 'year', 'DESC') %}
|
||||
<li>
|
||||
{% trans age=timezone.now().year - d.year %}{{ age }} year old{% endtrans %}
|
||||
<ul>
|
||||
{% for u in birthdays.filter(date_of_birth__year=d.year) %}
|
||||
<li><a href="{{ u.get_absolute_url() }}">{{ u.get_short_name() }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcache %}
|
||||
{% else %}
|
||||
<p>{% trans %}You need an up to date subscription to access this content{% endtrans %}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -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;
|
||||
#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;
|
||||
#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 {
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
{% block head %}
|
||||
<title>{% block title %}{% trans %}Welcome!{% endtrans %}{% endblock %} - Association des Étudiants UTBM</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}">
|
||||
<link rel="stylesheet" href="{{ static('core/base.css') }}">
|
||||
<link rel="stylesheet" href="{{ static('core/jquery.datetimepicker.min.css') }}">
|
||||
@@ -27,6 +28,7 @@
|
||||
<!-- BEGIN HEADER -->
|
||||
{% block header %}
|
||||
{% if not popup %}
|
||||
<header>
|
||||
<div id="header_language_chooser">
|
||||
{% for language in LANGUAGES %}
|
||||
<form action="{{ url('set_language') }}" method="post">{% csrf_token %}
|
||||
@@ -37,10 +39,11 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<header>
|
||||
{% if not user.is_authenticated %}
|
||||
<div id="header_logo" style="background-image: url('{{ static('core/img/logo.png') }}'); width: 185px; height: 100px;">
|
||||
<a href="{{ url('core:index') }}"></a>
|
||||
<div id="header_logo">
|
||||
<a href="{{ url('core:index') }}">
|
||||
<img src="{{ static('core/img/logo.png') }}" alt="AE logo">
|
||||
</a>
|
||||
</div>
|
||||
<div id="header_connect_links">
|
||||
<form method="post" action="{{ url('core:login') }}">
|
||||
@@ -54,8 +57,10 @@
|
||||
<a href="{{ url('core:register') }}"><button type="button">{% trans %}Register{% endtrans %}</button></a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="header_logo" style="background-image: url('{{ static('core/img/logo.png') }}'); width: 92px; height: 52px;">
|
||||
<a href="{{ url('core:index') }}"></a>
|
||||
<div id="header_logo">
|
||||
<a href="{{ url('core:index') }}">
|
||||
<img src="{{ static('core/img/logo.png') }}" alt="AE logo">
|
||||
</a>
|
||||
</div>
|
||||
<div id="header_bar">
|
||||
<ul id="header_bars_infos">
|
||||
@@ -85,7 +90,7 @@
|
||||
<a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" onclick="display_notif()"><i class="fa fa-bell-o"></i> ({{ user.notifications.filter(viewed=False).count() }})</a>
|
||||
<a href="#" onclick="display_notif()" style="white-space: nowrap;"><i class="fa fa-bell-o"></i> ({{ user.notifications.filter(viewed=False).count() }})</a>
|
||||
<ul id="header_notif">
|
||||
{% for n in user.notifications.filter(viewed=False).order_by('-date') %}
|
||||
<li>
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
{% trans %}Delete confirmation{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block info_boxes %}
|
||||
{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2>{% trans %}Delete confirmation{% endtrans %}</h2>
|
||||
<form action="" method="post">{% csrf_token %}
|
||||
|
||||
@@ -14,7 +14,12 @@
|
||||
{% block content %}
|
||||
<h4 id="click_interface">{{ counter }}</h4>
|
||||
|
||||
<div id="user_info">
|
||||
<div id="bar_ui">
|
||||
<noscript>
|
||||
<p class="important">Javascript is required for the counter UI.</p>
|
||||
</noscript>
|
||||
|
||||
<div id="user_info">
|
||||
<h5>{% trans %}Customer{% endtrans %}</h5>
|
||||
{{ user_mini_profile(customer.user) }}
|
||||
{{ user_subscription(customer.user) }}
|
||||
@@ -39,11 +44,8 @@
|
||||
{% else %}
|
||||
{% trans %}No card registered{% endtrans %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="bar_ui">
|
||||
<noscript>
|
||||
<p class="important">Javascript is required for the counter UI.</p>
|
||||
</noscript>
|
||||
</div>
|
||||
|
||||
<div id="click_form">
|
||||
<h5>{% trans %}Selling{% endtrans %}</h5>
|
||||
<div>
|
||||
@@ -115,6 +117,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="products">
|
||||
<ul>
|
||||
{% for category in categories.keys() -%}
|
||||
|
||||
Reference in New Issue
Block a user