joeni

Prepare templates and stylesheets for mobile visits

Author
Maarten Vangeneugden
Date
April 16, 2018, 2:21 p.m.
Hash
416c65ee58cdca6e047c14ba69509218ab04dc13
Parent
8da420b8ac7883d9104519a502768d80c0c186fe
Modified files
joeni/templates/joeni/header.djhtml
static/css/_variables.scss
static/css/footer.scss
static/css/header.scss
static/css/stylesheet.scss

joeni/templates/joeni/header.djhtml

1 addition and 0 deletions.

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

static/css/_variables.scss

0 additions and 15 deletions.

View changes Hide changes
1
1
$uhasselt-color: #E73B2B;
2
2
$fos-color: #0076BE;
3
3
$fots-color: #C0D633;
4
4
$foaaa-color: #F4802D;
5
5
$fobe-color: #00ACEE;
6
6
$fomals-color: #9C3591;
7
7
$foet-color: #5BC4BA;
8
8
$fol-color: #E41F3A;
9
9
10
10
$colors: (
11
11
    "uhasselt": $uhasselt-color,
12
12
    "fos": $fos-color,
13
13
    "fots": $fots-color,
14
14
    "foaaa": $foaaa-color,
15
15
    "fobe": $fobe-color,
16
16
    "fomals": $fomals-color,
17
17
    "foet": $foet-color,
18
18
    "fol": $fol-color,
19
19
);
20
20
21
21
@each $color_name, $color_value in $colors {
22
22
    .#{$color_name} {
23
23
        background-color: $color_value;
24
24
    }
25
25
    .#{$color_name}-text {
26
26
        color: $color_value;
27
27
    }
28
28
}
29
29
30
30
31
31
// SIZING
32
-
$small-screen-up: 601px !default;
33
-
$medium-screen-up: 993px !default;
34
-
$large-screen-up: 1201px !default;
35
-
$small-screen: 600px !default;
36
-
$medium-screen: 992px !default;
37
-
$large-screen: 1200px !default;
38
-
39
-
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
40
-
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
41
-
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
42
-
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
43
-
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
44
-
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
45
-
46
-
$header-padding: 1%;
47
32
$header-width: 20%;
48
33

static/css/footer.scss

10 additions and 0 deletions.

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
    @media screen
+
14
    and (max-device-width: 440px)
+
15
    and (max-device-height: 800px) {
+
16
        //and (-webkit-min-device-pixel-ratio: 2) {
+
17
        position: relative;
+
18
        width: 100%;
+
19
        img {
+
20
            height: 1em;
+
21
        }
+
22
}
13
23

static/css/header.scss

30 additions and 0 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
7
    top: 0;
8
8
    width: $header-width;
9
9
    height: 100%;
10
10
    //background-color: $uhasselt-color;
11
11
    color: white;
12
12
    img {
13
13
        width: 80%;
14
14
    }
15
15
    nav ul {
16
16
        //list-style: none;
17
17
        list-style: none;
18
18
        }
19
19
    a {
20
20
        text-decoration: none;
21
21
        color: white;
22
22
        &:hover {
23
23
            text-decoration: underline solid white;
24
24
            text-transform: uppercase;
25
25
            font-weight: bold;
26
26
        }
27
27
    }
28
28
}
29
29
/*header ul {
30
30
    display: inline;
31
31
    float: right;
32
32
}*/
33
33
+
34
@media screen
+
35
and (max-device-width: 440px)
+
36
and (max-device-height: 800px) {
+
37
//and (-webkit-min-device-pixel-ratio: 2) {
+
38
    main {
+
39
        margin-left: 2%;
+
40
    }
+
41
    input#header-mobile {
+
42
        display: none;
+
43
        &:checked ~ header {
+
44
            display: block;
+
45
        }
+
46
    }
+
47
+
48
    header {
+
49
        position: relative;
+
50
        margin-top: 0;
+
51
        margin-right: 0;
+
52
        width: 100%;
+
53
        height: 2em;
+
54
        img {
+
55
            height: 1em;
+
56
        }
+
57
+
58
        nav {
+
59
            display: none;
+
60
        }
+
61
    }
+
62
}
+
63

static/css/stylesheet.scss

1 addition and 1 deletion.

View changes Hide changes
1
1
by using sassc, put in one single file, stylesheet.css. However, that may not be
2
2
what you want when using HTTP/2. In that case, edit the scripts and templates
3
3
accordingly. */
4
4
@import 'variables';
5
5
@import 'classes.scss';
6
6
@import 'global.scss';
7
7
@import 'header.scss';
8
-
@import 'main.scss';
9
8
@import 'footer.scss';
+
9
@import 'footer.scss';
10
10