joeni

Add older stylesheet and update curriculum page

I used to have a base.css file in which the style for the entire page would reside, but I removed that. I've now readded it, but it should get another name.

Author
Maarten Vangeneugden
Date
April 17, 2018, 4:51 p.m.
Hash
00aeee740b4932ec9de33d726fa524003437e323
Parent
ec3aa4faf1308643a2e3aa2c33dbe460ad9767c4
Modified files
administration/templates/administration/curriculum.djhtml
static/css/base.scss
static/css/classes.scss
static/css/header.scss
static/css/stylesheet.scss

administration/templates/administration/curriculum.djhtml

4 additions and 1 deletion.

View changes Hide changes
1
1
{% load i18n %}
2
2
3
3
{% block title %}
4
4
    {% trans "Personal curriculum" %} | ◀ Joeni /▶
5
5
{% endblock %}
6
6
7
7
{% block main %}
8
8
    <h1>{% trans "Your curricula" %}</h1>
9
9
    {% for curriculum in curricula %}
10
10
        <h2 id="{{ curriculum.year }}-{{ curriculum.year|add:1 }}">
11
11
            {{ curriculum.year }} - {{ curriculum.year|add:1 }}
12
12
        </h2>
13
13
        <p>{% trans "Status" %}:
14
14
            {% if curriculum.approved is none %}
15
15
                {% trans "Processing curriculum; pending decision" %}
16
16
            {% elif curriculum.approved is True %}
17
17
                {% trans "Processed and approved by exam committee" %}
18
18
            {% else %}
19
19
                {% trans "Processed and <strong>DENIED</strong> by exam committee" %}
20
20
            {% endif %}
21
21
        </p>
22
22
23
23
        {# Table in which the courses from the curriculum are displayed, along with the results. #}
24
24
        <table>
25
25
            <tr>
26
26
                <td>{% trans "Course" %}</td>
27
27
                <td>{% trans "ECTS" %}</td>
28
28
                <td>{% trans "Period" %}</td>
29
29
                <td>{% trans "First result" %}</td>
30
30
                <td>{% trans "Second result" %}</td>
31
31
                <td>{% trans "Decision" %}</td>
32
32
            </tr>
33
33
        {% for course_program, course_result in curriculum.course_programmes_results.items %}
34
34
            <tr>
35
35
                <td><a href="{% url 'courses-course-index' course_program.course.slug_name %}">
36
-
                    {{ course_program }}</a></td>
+
36
                    <td><a class="course-link" style="text-decoration-color: #{{ color }}; color: #{{ color }};" href="{% url 'courses-course-index' course_program.course.slug_name %}">
+
37
                    {{ course_program }}</a></td>
37
38
                <td>{{ course_program.ECTS }}</td>
+
39
                <td>{{ course_program.ECTS }}</td>
38
40
                <td>{{ course_program.get_semester_display }}</td>
39
41
                <td>{{ course_result.first_score|default:"-" }}</td>
40
42
                <td>{{ course_result.second_score|default:"-" }}</td>
41
43
                <td>{% with result=course_result.result %}
42
44
                    {% if result == "CRED" or result == "VRST" or result == "TLRD" or result == "ITLR"%}
43
45
                        <span style="color:green;">
44
46
                    {% elif result == "FAIL" %}
45
47
                        <span style="color:red;">
46
48
                    {% elif result == "BDRG" %}
47
49
                        <span style="background-color:red; color:white;">
48
50
                    {% elif result == "STOP" %}
49
51
                        <span style="color:black;">
50
52
                    {% endif %}
51
53
                    {{ course_result.get_result_display }}</span>
52
54
                {% endwith %}</td>
53
55
            </tr>
54
56
        {% endfor %}
55
57
        </table>
56
58
    {% endfor %}
57
59
58
60
    <a class="btn" href="curriculum-change.pdf" download>{% trans "Request curriculum change" %}</a>
+
61
    <a class="btn" href="curriculum-change.pdf" download>{% trans "Request curriculum change" %}</a>
59
62
{% endblock main %}
60
63

static/css/base.scss

54 additions and 0 deletions.

View changes Hide changes
+
1
    font-family: ubuntu;
+
2
    border-style: solid;
+
3
    text-transform: uppercase;
+
4
    border-width: 0.3em;
+
5
    margin: 1em;
+
6
    border-color: $uhasselt-color;
+
7
    padding: 0.2em;
+
8
    text-decoration: none;
+
9
    color: $uhasselt-color;
+
10
    font-weight: bold;
+
11
}
+
12
a.btn:hover {
+
13
    background-color: $uhasselt-color;
+
14
    color: white;
+
15
}
+
16
+
17
dl dt {
+
18
    margin: 5px;
+
19
}
+
20
+
21
.event {
+
22
    padding: 5px;
+
23
}
+
24
+
25
.event-update {
+
26
    padding: 5px;
+
27
    background-color: yellow;
+
28
    color: red;
+
29
    border: medium dotted red;
+
30
}
+
31
.event-new {
+
32
    padding: 5px;
+
33
    background-color: white;
+
34
    color: black;
+
35
    border: medium dashed black;
+
36
}
+
37
.event-note {
+
38
    padding: 5px;
+
39
    color: purple;
+
40
    border: medium double purple;
+
41
}
+
42
.event-conflict {
+
43
    padding: 5px;
+
44
    background-color: red;
+
45
    color: white;
+
46
    border: medium dashed;
+
47
    border-color: inherit;
+
48
}
+
49
.event a {
+
50
    text-decoration: none;
+
51
    color: inherit;
+
52
}
+
53
+
54

static/css/classes.scss

13 additions and 0 deletions.

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
    }
22
22
}
23
23
24
24
a.course-link {
+
25
    text-decoration: underline dotted $uhasselt-color;
+
26
    color: $uhasselt-color;
+
27
    &:hover {
+
28
        font-weight: bold;
+
29
        text-transform: uppercase;
+
30
    }
+
31
    @media print {
+
32
        text-decoration: none;
+
33
        color: black;
+
34
    }
+
35
}
+
36
+
37

static/css/header.scss

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

static/css/stylesheet.scss

1 addition and 0 deletions.

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 'main.scss';
8
8
@import 'header.scss';
9
9
@import 'footer.scss';
10
10
+
11