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 |