Skip to content

Commit c66241e

Browse files
jasperdifranmunjoonteo
jasperdifran
and
munjoonteo
authored
Wm2 5 component links to csesoc resources (#218)
* Make resources more compact, rm img on mobile * Correctly arrange resource cards * Adjust box sizing * Add pre enrolment guide image * Add scroll padding * Adjust images to be more suitable for small cards * Add student-resources navigation * Fixed padding and compclub box Co-authored-by: Mun Joon Teo <teomunjoon101@gmail.com>
1 parent 4409269 commit c66241e

File tree

8 files changed

+118
-35
lines changed

8 files changed

+118
-35
lines changed

‎frontend/src/assets/resource-first-year-guide.old.png‎

251 KB
Loading

‎frontend/src/assets/resource-first-year-guide.png‎

-22.9 KB
Loading

‎frontend/src/assets/resource-media.old.png‎

618 KB
Loading

‎frontend/src/assets/resource-media.png‎

35.3 KB
Loading

‎frontend/src/assets/resource-pre-enrolment-guide.jpg‎

364 KB
Loading

‎frontend/src/assets/resource-pre-enrolment-guide.old.jpg‎

194 KB
Loading

‎frontend/src/components/Navbar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
</a>
3232
</v-col>
3333
<v-col class="d-flex align-center justify-center">
34-
<a @click="goto('resources')" style="text-decoration: none;">
34+
<a @click="goto('student-resources')" style="text-decoration: none;">
3535
<v-btn text color="white">RESOURCES</v-btn>
3636
</a>
3737
</v-col>
@@ -73,7 +73,7 @@
7373
</a>
7474
</v-list-item>
7575
<v-list-item>
76-
<a @click="goto('resources')" style="text-decoration: none; color: black;">
76+
<a @click="goto('student-resources')" style="text-decoration: none; color: black;">
7777
Resources
7878
</a>
7979
</v-list-item>

‎frontend/src/views/Home/StudentResources.vue‎

Lines changed: 116 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,42 +6,103 @@
66

77
<template>
88
<!-- Student Resources -->
9-
<div id="resources" class="content">
9+
<div id="student-resources" class="content">
1010
<v-container class="resource--styles">
1111
<HeaderTitle title="STUDENT RESOURCES" />
1212

13-
<v-row no-gutters justify="space-between">
14-
<v-col xs="12" sm="7">
15-
<a target="_blank" :href="resources.big_box_1.link">
16-
<div data-cy="resources-box" class="box big">
17-
<h2>{{ resources.big_box_1.title }}</h2>
18-
<h3>{{ resources.big_box_1.description }}</h3>
19-
<v-img data-cy="resources-img" :src="resources.big_box_1.src" contain class="image" />
13+
<v-row justify="space-between">
14+
<v-col cols="12" sm="4">
15+
<!-- Jobs -->
16+
<a target="_blank" :href="resources.jobs_board.link">
17+
<div data-cy="resources-box" class="box primary rounded-lg">
18+
<h2>{{ resources.jobs_board.title }}</h2>
19+
<h3>{{ resources.jobs_board.description }}</h3>
20+
<v-img
21+
data-cy="resources-img"
22+
max-height="80px"
23+
position="top"
24+
:src="resources.jobs_board.src"
25+
class="image hidden-xs-only"
26+
/>
2027
</div>
2128
</a>
2229
</v-col>
23-
<v-col xs="12" sm="4">
24-
<a target="_blank" :href="resources.small_box_1.link">
25-
<div data-cy="resources-box" class="box small rounded-lg hidden-xs-only">
26-
<h2>{{ resources.small_box_1.title }}</h2>
27-
<v-img data-cy="resources-img" :src="resources.small_box_1.src" contain class="image" />
30+
<v-col cols="12" sm="4">
31+
<!-- CompClub -->
32+
<a target="_blank" :href="resources.comp_club.link">
33+
<div data-cy="resources-box" class="box secondary rounded-lg">
34+
<h2>{{ resources.comp_club.title }}</h2>
35+
<h3 class="hidden-sm-above">{{ resources.comp_club.description }}</h3>
36+
<div class="flex-grow-1"></div>
37+
<v-img
38+
data-cy="resources-img"
39+
max-height="80px"
40+
position="top"
41+
:src="resources.comp_club.src"
42+
class="image hidden-xs-only"
43+
/>
2844
</div>
2945
</a>
3046
</v-col>
31-
<v-col xs="12" sm="4">
32-
<a target="_blank" :href="resources.small_box_2.link">
33-
<div data-cy="resources-box" class="box small rounded-lg hidden-xs-only">
34-
<h2>{{ resources.small_box_2.title }}</h2>
35-
<v-img data-cy="resources-img" :src="resources.small_box_2.src" class="image" />
47+
<v-col cols="12" sm="4">
48+
<!-- Notangles -->
49+
<a target="_blank" :href="resources.notangles.link">
50+
<div data-cy="resources-box" class="box primary rounded-lg">
51+
<h2>{{ resources.notangles.title }}</h2>
52+
<h3>{{ resources.notangles.description }}</h3>
53+
<v-img
54+
data-cy="resources-img"
55+
max-height="80px"
56+
:src="resources.notangles.src"
57+
position="top"
58+
class="image hidden-xs-only"
59+
/>
3660
</div>
3761
</a>
3862
</v-col>
39-
<v-col xs="12" sm="7">
40-
<a target="_blank" :href="resources.small_box_2.link">
41-
<div data-cy="resources-box" class="box big rounded-lg">
42-
<h2>{{ resources.big_box_2.title }}</h2>
43-
<h3>{{ resources.big_box_2.description }}</h3>
44-
<v-img data-cy="resources-img" :src="resources.big_box_2.src" class="image" />
63+
<v-col cols="12" sm="12">
64+
<!-- Media -->
65+
<a target="_blank" :href="resources.media.link">
66+
<div data-cy="resources-box" class="box secondary rounded-lg">
67+
<h2>{{ resources.media.title }}</h2>
68+
<h3>{{ resources.media.description }}</h3>
69+
<v-img
70+
data-cy="resources-img"
71+
max-height="100px"
72+
:src="resources.media.src"
73+
position="top"
74+
class="image hidden-xs-only"
75+
/>
76+
</div>
77+
</a>
78+
</v-col>
79+
<v-col cols="12" sm="6">
80+
<!-- First year guide -->
81+
<a target="_blank" :href="resources.fy_guide.link">
82+
<div data-cy="resources-box" class="box primary rounded-lg">
83+
<h2>{{ resources.fy_guide.title }}</h2>
84+
<h3>{{ resources.fy_guide.description }}</h3>
85+
<v-img
86+
data-cy="resources-img"
87+
:src="resources.fy_guide.src"
88+
position="top"
89+
class="image hidden-xs-only flex-grow-1"
90+
/>
91+
</div>
92+
</a>
93+
</v-col>
94+
<v-col cols="12" sm="6">
95+
<!-- Preenrollment guide -->
96+
<a target="_blank" :href="resources.pe_guide.link">
97+
<div data-cy="resources-box" class="box secondary rounded-lg">
98+
<h2>{{ resources.pe_guide.title }}</h2>
99+
<h3>{{ resources.pe_guide.description }}</h3>
100+
<v-img
101+
data-cy="resources-img"
102+
position="top"
103+
:src="resources.pe_guide.src"
104+
class="image align hidden-xs-only"
105+
/>
45106
</div>
46107
</a>
47108
</v-col>
@@ -59,27 +120,40 @@ export default {
59120
},
60121
data: () => ({
61122
resources: {
62-
big_box_1: {
123+
jobs_board: {
63124
link: 'https://jobsboard.csesoc.unsw.edu.au/login',
64125
title: 'Job Board',
65126
description: 'A place where CSESoc students can look for relevant job opportunities.',
66127
src: require('../../assets/resource-job-board.png')
67128
},
68-
small_box_1: {
129+
fy_guide: {
69130
link: 'https://media.csesoc.org.au/first-year-guide/',
70131
title: 'First Year Guide',
132+
description: 'The ultimate guide to conquering first year at CSE.',
71133
src: require('../../assets/resource-first-year-guide.png')
72134
},
73-
small_box_2: {
135+
media: {
74136
link: 'https://media.csesoc.org.au/',
75137
title: 'CSESOC Media',
138+
description: 'All things content',
76139
src: require('../../assets/resource-media.png')
77140
},
78-
big_box_2: {
141+
comp_club: {
142+
link: 'https://compclub.csesoc.unsw.edu.au/',
143+
title: 'Comp Club',
144+
description: 'Promoting computing to high school students'
145+
},
146+
notangles: {
79147
link: 'https://notangles.csesoc.unsw.edu.au/',
80148
title: 'Notangles',
81-
description: 'Trimester timetabling tool - no more timetable tangles!',
149+
description: 'Trimster timetabling tool - no more timetable tangles!',
82150
src: require('../../assets/resource-notangles.png')
151+
},
152+
pe_guide: {
153+
link: ' https://media.csesoc.org.au/pre-enrolment-guide/',
154+
title: 'Pre-enrolment Guide',
155+
description: 'Learn how to get a headstart on uni',
156+
src: require('../../assets/resource-pre-enrolment-guide.jpg')
83157
}
84158
}
85159
})
@@ -88,6 +162,9 @@ export default {
88162

89163
<style lang="scss" scoped>
90164
// Student resources
165+
.content {
166+
padding-top: 50px;
167+
}
91168
.resource--styles {
92169
color: $light-color;
93170
@@ -108,30 +185,36 @@ export default {
108185
flex-direction: column;
109186
height: 100%;
110187
overflow: hidden;
188+
max-height: 250px;
189+
padding-top: 2vh;
111190
112-
&.big {
191+
&.primary {
113192
@include linearGradient($primary-color, $secondary-color-2);
114193
}
115-
&.small {
194+
&.secondary {
116195
@include linearGradient($primary-color, $secondary-color-1);
117196
}
118197
119198
h2 {
120-
padding-top: $space-xs;
121-
padding-bottom: $space-xxs;
199+
padding-top: calc($space-xs/2);
200+
font-size: 1.6rem;
122201
margin: 0;
123202
padding-left: 35px;
124203
padding-right: 35px;
204+
// margin-bottom: 0px;
125205
}
126206
127207
h3 {
128208
padding-left: 35px;
129209
padding-right: 35px;
210+
font-size: 1.2rem;
211+
// margin-bottom: 0px;
130212
}
131213
132214
.image {
133215
border-bottom-left-radius: 10px;
134216
border-bottom-right-radius: 10px;
217+
top: 0;
135218
transition: transform 0.2s;
136219
}
137220
}

0 commit comments

Comments
 (0)