joeni

Add mobile-ready stylesheet updates to SCSS

With just a couple of edge cases, the stylesheets are now completely ready for all screen sizes. They all scale correctly, mobile pages get a hamburger menu (which is the same header element), and the hamburger menu SVG has a fallback to "☰" so it's always visible.
Also: The cards, when hovered, now only underline the contained text. Another color is not necessary in my opinion at this time.

Author
Maarten Vangeneugden
Date
April 16, 2018, 3:07 p.m.
Hash
c5c379e0e034f20795d2329442a356a63380e467
Parent
416c65ee58cdca6e047c14ba69509218ab04dc13
Modified files
joeni/templates/joeni/base.djhtml
joeni/templates/joeni/header.djhtml
static/css/classes.scss
static/css/footer.scss
static/css/header.scss

joeni/templates/joeni/base.djhtml

2 additions and 1 deletion.

View changes Hide changes
1
1
{% load i18n %}
2
2
{% get_current_language as LANGUAGE_CODE %}
3
3
{% get_language_info for LANGUAGE_CODE as lang %}
4
4
{% load static %}
5
5
{% get_media_prefix as media %}
6
6
7
7
<!DOCTYPE html>
8
8
<html lang="{{ lang.code }}">
9
9
    <head>
10
10
        <title>
11
11
            {% block title %}
12
12
                {#◀ Joeni /▶ | ▶▶ UHasselt#}
13
13
                ▶▶ UHasselt
14
14
            {% endblock title %}
15
15
        </title>
16
16
17
17
        {% block stylesheets %}
18
18
            {% comment %}<link href="{% static "css/header.css" %}" rel="stylesheet" media="screen, projection" />
19
19
            <link href="{% static "css/footer.css" %}" rel="stylesheet" media="screen, projection" />
20
20
            <link href="{% static "css/base.css" %}" rel="stylesheet" media="screen, projection" />
21
21
            {% endcomment %}
22
22
            <link href="{% static "css/stylesheet.css" %}" rel="stylesheet" media="screen, projection" />
23
23
            <style type="text/css">
24
24
                header, footer {
25
25
                    background-color: #{{ user.account.settings.color|default:"UHASSELT" }};
26
26
                }
27
27
            </style>
28
28
        {% endblock stylesheets %}
29
29
30
30
        {% block metaflags %}
31
31
            {# This is standard for all web pages and doesn't require changing. #}
32
32
            {# UTF-8, always #}
33
33
            <meta charset="utf-8" />
34
34
            {#<meta name="author" content="Maarten Vangeneugden">#}
35
35
            {# Indicates this page is suited for mobile devices #}
36
36
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
37
37
            <meta
38
38
                name="description"
39
39
                content="{% block description %}
40
40
                    {% trans "The digital platform of Hasselt University" %}
41
41
                {% endblock description %}" />
42
42
        {% endblock metaflags %}
43
43
        <style>
44
44
            h1 {
45
45
                color: #{{ main_color|default:"E73B2B" }};
46
46
                text-decoration-color: #{{ main_color|default:"E73B2B" }};
47
47
            }
48
48
            header, footer {
49
49
            background-color: #{{ main_color|default:"E73B2B" }};
50
50
            }
51
51
        </style>
52
52
    </head>
53
53
54
54
    <body>
55
55
        <header>
+
56
        <input type="checkbox" id="header-mobile" />
+
57
        <header>
56
58
                {% block header %}
57
59
                    {% include "joeni/header.djhtml" %}
58
60
                {% endblock header %}
59
61
        </header>
60
62
61
-
        <main>
62
63
            {% block main %}
63
64
            {% endblock main %}
64
65
        </main>
65
66
66
67
        <footer>
67
68
            {% block footer %}
68
69
                {% include "joeni/footer.djhtml" %}
69
70
            {% endblock footer %}
70
71
        </footer>
71
72
72
73
    </body>
73
74
    {% block JavaScript %}
74
75
    {% comment "JavaScript" %}
75
76
    My website does not require JavaScript for basic actions. However, it may be
76
77
    used to make certain things look better, or to spice up some actions for the
77
78
    user. Should it be necessary, add the appropriate JavaScript code in this
78
79
    block.
79
80
    The reason this block is at the bottom?
80
81
	Remember to always put JavaScript on the bottom to reduce load time.
81
82
    Otherwise it just errors like a fucktard, which is really the only thing
82
83
    you can always expect from JavaScript.
83
84
    {% endcomment %}
84
85
    {% endblock JavaScript %}
85
86
</html>
86
87

joeni/templates/joeni/header.djhtml

0 additions and 1 deletion.

View changes Hide changes
1
1
{% load static %}
2
2
{% get_media_prefix as media %}
3
3
<input type="checkbox" checked="false" id="header-mobile" />
4
-
<img src="{% static "logos/uhasselt/simple_white.svg" %}" alt="◀ Joeni /▶" />
5
4
<nav>
6
5
    <ul>
7
6
        <li><a href="{% url 'agora-index' %}">Agora</a>
8
7
            <ul>
9
8
            </ul>
10
9
        </li>
11
10
12
11
        <li><a href="{% url 'administration-index' %}">{% trans "Administration" %}</a>
13
12
            <ul>
14
13
                <li><a href="{% url 'administration-settings' %}">{% trans "Personal settings" %}</a></li>
15
14
                <li><a href="{% url 'administration-curriculum' %}">{% trans "Curricula" %}</a></li>
16
15
                <li><a href="{% url 'administration-forms' %}">{% trans "Forms" %}</a></li>
17
16
                <li><a href="{% url 'administration-rooms' %}">{% trans "Rooms" %}</a></li>
18
17
                <li><a href="{% url 'administration-jobs' %}">{% trans "Jobs" %}</a></li>
19
18
                <li><a href="{% url 'administration-roster' %}">{% trans "Personal Roster" %}</a></li>
20
19
                <li><a href="{% url 'administration-bulletin-board' %}">{% trans "Bulletin board" %}</a></li>
21
20
            </ul>
22
21
        </li>
23
22
24
23
        <li><a href="{% url 'courses-index' %}">{% trans "Courses" %}</a>
25
24
            <ul>
26
25
                {% for course in user.user_data.current_courses %}
27
26
                    <li><a href="{% url 'courses-course-index' course.slug_name %}">{{ course.name }}</a></li>
28
27
                {% endfor %}
29
28
            </ul>
30
29
        </li>
31
30
    </ul>
32
31
</nav>
33
32
{# PingPing: €{{ money }} #}
34
33

static/css/classes.scss

0 additions and 1 deletion.

View changes Hide changes
1
1
div.flex-container {
2
2
    display: flex;
3
3
    flex-direction: row;
4
4
    flex-wrap: wrap;
5
5
    justify-content: space-between; // Not too sure about this one, experiment if you want to
6
6
    align-items: stretch;
7
7
    //align-content: space-around;
8
8
}
9
9
10
10
.flex-items {
11
11
    color: white;
12
12
    font-family: ubuntu;
13
13
    text-decoration: none;
14
14
    flex-grow: 1;
15
15
    margin: .2em;
16
16
    text-decoration-style: none;
17
17
    padding: 1em;
18
18
19
19
    &:hover {
20
20
        text-decoration: underline solid white;
21
21
        color: red;
22
22
    }
23
-
}
24
23

static/css/footer.scss

3 additions and 1 deletion.

View changes Hide changes
1
1
    margin-left: ($header-padding * 2) + $header-width;
2
2
    padding: 0.5em;
3
3
    background-color: $uhasselt-color;
4
4
    color: white;
5
5
    width: 78%;
6
6
    position: fixed;
7
7
    bottom: 0;
8
8
    img {
9
9
        vertical-align: middle;
10
10
        height: 2em;
11
11
    }
12
12
13
13
    @media screen
14
14
    and (max-device-width: 440px)
15
15
    and (max-device-height: 800px) {
16
16
        //and (-webkit-min-device-pixel-ratio: 2) {
17
17
        position: relative;
18
18
        width: 100%;
+
19
        width: 100%;
19
20
        img {
20
21
            height: 1em;
21
-
        }
+
22
        }
22
23
}
+
24
}
23
25

static/css/header.scss

42 additions and 2 deletions.

View changes Hide changes
1
1
    float: left;
2
2
    margin-right: 50px;
3
3
    position: fixed;
4
4
    //display: flow;
5
5
    //height: 100%;
6
6
    padding: $header-padding;
+
7
    padding: $header-padding;
7
8
    top: 0;
8
9
    width: $header-width;
9
10
    height: 100%;
10
11
    //background-color: $uhasselt-color;
11
12
    color: white;
12
13
    img {
13
14
        width: 80%;
14
15
    }
15
16
    nav ul {
16
17
        //list-style: none;
+
18
        //list-style: none;
17
19
        list-style: none;
18
20
        }
19
21
    a {
20
22
        text-decoration: none;
21
23
        color: white;
22
24
        &:hover {
23
25
            text-decoration: underline solid white;
24
26
            text-transform: uppercase;
25
27
            font-weight: bold;
26
28
        }
27
29
    }
28
30
}
+
31
    div.menu-background {
+
32
        display: none;
+
33
        z-index: 1;
+
34
    }
+
35
+
36
    @media print {
+
37
        display: none; // Header is pretty useless on printed sheets
+
38
    }
+
39
}
29
40
/*header ul {
30
41
    display: inline;
31
42
    float: right;
32
43
}*/
33
44
34
45
@media screen
35
46
and (max-device-width: 440px)
36
47
and (max-device-height: 800px) {
37
48
//and (-webkit-min-device-pixel-ratio: 2) {
+
49
//and (-webkit-min-device-pixel-ratio: 2) {
38
50
    main {
39
51
        margin-left: 2%;
40
52
    }
+
53
    }
41
54
    input#header-mobile {
+
55
        z-index: 4;
+
56
        color: white;
+
57
        position: absolute;
+
58
        top: 1.5em;
+
59
        left: 1em;
+
60
    }
+
61
+
62
    input#header-mobile {
42
63
        display: none;
43
-
        &:checked ~ header {
+
64
        position: absolute;
+
65
        top: 2em;
+
66
        left: 1em;
+
67
        opacity: 0;
+
68
        /* XXX: Why not send the checkbox to -9999 top? Because some dumb mobile
+
69
        phones don't allow clicking the label to check the box. */
+
70
+
71
        &:checked ~ header {
44
72
            display: block;
45
73
        }
+
74
            /* FIXME: Currently I set the height of the header to a ridiculous
+
75
            300%, but it should be made that it overlaps the other elements. */
+
76
            height: 300%;
+
77
            top: 0;
+
78
            width: 100%;
+
79
            nav {
+
80
                display: block;
+
81
                position: relative;
+
82
            }
+
83
        }
46
84
    }
+
85
    }
47
86
48
87
    header {
49
88
        position: relative;
50
89
        margin-top: 0;
+
90
        margin-top: 0;
51
91
        margin-right: 0;
52
92
        width: 100%;
53
93
        height: 2em;
54
94
        img {
55
95
            height: 1em;
56
-
        }
+
96
        }
57
97
58
98
        nav {
59
99
            display: none;
60
100
        }
61
101
    }
62
102
}
63
103