Skip to content

Commit a2e9f8c

Browse files
munjoonteomunjoonteo
authored
Wm2 7 fix footer (#215)
* fixed footer * many fixes
1 parent 013fd45 commit a2e9f8c

File tree

6 files changed

+109
-114
lines changed

6 files changed

+109
-114
lines changed

‎frontend/src/components/Footer.vue

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<v-footer color="#000033" padless>
99
<v-container class="white--text" style="padding:60px 72px" fluid>
1010
<v-row no-gutters>
11-
<v-col cols="12" sm="5" order-sm="7" >
11+
<v-col cols="12" sm="5" order-sm="7">
1212
<div class="white-text socials">
1313
<h4 data-cy="footer-media-title">Social Media</h4>
1414
<v-row style="margin-top:20px" no-gutters>
@@ -36,15 +36,19 @@
3636
<v-col order-sm="5">
3737
<!-- Puts padding between logo and socials -->
3838
</v-col>
39-
<v-col cols="12" sm="5" order-sm="1"
40-
:class="{'mt-10': $vuetify.breakpoint.smAndDown,'mt-0': $vuetify.breakpoint.mdAndUp}">
39+
<v-col
40+
cols="12"
41+
sm="5"
42+
order-sm="1"
43+
:class="{ 'mt-10': $vuetify.breakpoint.smAndDown, 'mt-0': $vuetify.breakpoint.mdAndUp }"
44+
>
4145
<div class="white-text" style="margin-bottom:20%" data-cy="footer-address">
42-
<a href="/">
43-
<img class="img-size" src="@/assets/csesoc-logo-white.svg" data-cy="footer-logo"/>
44-
</a>
45-
<br/>B03 CSE Building K17, UNSW
46-
<br/>
47-
<a href="mailto:csesoc@csesoc.org.au" > csesoc@csesoc.org.au </a>
46+
<a href="/">
47+
<img class="img-size" src="@/assets/csesoc-logo-white.svg" data-cy="footer-logo" />
48+
</a>
49+
<br />B03 CSE Building K17, UNSW
50+
<br />
51+
<a href="mailto:csesoc@csesoc.org.au"> csesoc@csesoc.org.au </a>
4852
</div>
4953
© 2021 — CSESoc UNSW
5054
</v-col>
@@ -73,7 +77,11 @@ export default {
7377
{ name: 'UNSW Handbook', url: 'https://www.handbook.unsw.edu.au/' }
7478
],
7579
mediaLeft: [
76-
{ name: 'Discord Community', url: 'https://forms.office.com/Pages/ResponsePage.aspx?id=pM_2PxXn20i44Qhnufn7o6ecLZTBorREjnXuTY-JfmBUMEpOMFBDTU1UWkhBWllWRTNPOVJFMUNCRi4u' },
80+
{
81+
name: 'Discord Community',
82+
url:
83+
'https://forms.office.com/Pages/ResponsePage.aspx?id=pM_2PxXn20i44Qhnufn7o6ecLZTBorREjnXuTY-JfmBUMEpOMFBDTU1UWkhBWllWRTNPOVJFMUNCRi4u'
84+
},
7785
{ name: 'Facebook Page', url: 'https://www.facebook.com/csesoc/' },
7886
{ name: 'Facebook Group', url: 'https://www.facebook.com/csesoc/' },
7987
{ name: 'LinkedIn', url: 'https://www.linkedin.com/company/csesoc/' }
@@ -91,32 +99,26 @@ export default {
9199
.white-text {
92100
@extend p;
93101
}
94-
95102
.white-text a {
96103
text-decoration: none;
97104
color: $light-color;
98105
padding-right: $space-xxs;
99106
}
100-
101107
.white-text a:hover {
102108
font-weight: 900;
103109
transition-duration: 0.1s;
104110
}
105-
106111
.nav-divider {
107112
padding-bottom: $space-xxs;
108113
border-bottom: 2px solid white;
109114
}
110-
111115
.anchor-items {
112116
margin-left: -15px;
113117
}
114-
115118
.img-size {
116119
max-width: 300px;
117120
max-height: 200px;
118121
}
119-
120122
.socials {
121123
margin-top: 60px;
122124
}

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!--
2+
Mission
3+
--
4+
Mission statement of CSESOC
5+
-->
6+
7+
<template>
8+
<div id="aboutus" class="content">
9+
<v-container>
10+
<HeaderTitle :title="'ABOUT US'" />
11+
<v-row no-gutters justify="end">
12+
<v-col xs="12" sm="6">
13+
<img data-cy="mission-img" contain :src="mission.image" class="image" />
14+
</v-col>
15+
<v-col xs="12" sm="6" align-self="center">
16+
<p data-cy="mission-statement" class="text--md">{{ mission.statement }}</p>
17+
<v-btn to="/about" block outlined color="white" icon class="btn--sm">
18+
SEE MORE
19+
</v-btn>
20+
</v-col>
21+
</v-row>
22+
</v-container>
23+
</div>
24+
</template>
25+
26+
<script>
27+
import HeaderTitle from '@/components/HeaderTitle';
28+
29+
export default {
30+
name: 'AboutUs',
31+
components: {
32+
HeaderTitle
33+
},
34+
data: () => ({
35+
mission: {
36+
image: require('../../assets/landing_page/mission.png'),
37+
// I really hope we have something better than this.
38+
statement:
39+
'We are one of the biggest and most active societies at UNSW, catering to over 3500 CSE students spanning across degrees in Computer Science, Software Engineering, Bioinformatics and Computer Engineering.'
40+
}
41+
})
42+
};
43+
</script>
44+
<style lang="scss" scoped>
45+
.image {
46+
max-width: 100%;
47+
max-height: 100%;
48+
}
49+
</style>

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

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,15 @@
1313
<div id="event-display" class="content">
1414
<v-container data-cy="event-section" class="Container">
1515
<v-container>
16-
<HeaderTitle
17-
title="UPCOMING EVENTS"
18-
subtitle="We run a wide-variety of events for fun, learning new skills and careers."
19-
/>
20-
<!-- Catch a lack of events, or if events haven't been updated in 60 days. -->
21-
<div data-cy="event-alert" v-if="events.length == 0 | updated > 86400 * 1000 * 60">
22-
For full listings, check out the CSESoc Discord or our Facebook page!
23-
</div>
16+
<HeaderTitle title="EVENTS" />
17+
<p class="text--md">
18+
{{ subtitle }}
19+
</p>
2420
</v-container>
2521
<!-- Facebook embedded event page viewer -->
2622
<v-container class="Embed">
27-
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcsesoc&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
23+
<iframe
24+
src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcsesoc&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
2825
width="340"
2926
height="500"
3027
style="border:none;overflow:hidden"
@@ -60,26 +57,30 @@ export default {
6057
props: ['events', 'updated'],
6158
components: {
6259
// Event,
63-
HeaderTitle,
64-
}
60+
HeaderTitle
61+
},
62+
data: () => ({
63+
subtitle:
64+
'We run a wide-variety of events for fun, learning new skills and careers. For full listings, check out the CSESoc Discord or our Facebook page!'
65+
})
6566
};
6667
</script>
6768

6869
<style scoped>
70+
.Container {
71+
display: flex;
72+
flex-direction: row;
73+
}
74+
.Embed {
75+
display: flex;
76+
justify-content: center;
77+
}
78+
@media screen and (max-width: 700px) {
6979
.Container {
70-
display: flex;
71-
flex-direction: row;
80+
flex-direction: column;
7281
}
7382
.Embed {
74-
display: flex;
75-
justify-content: center;
76-
}
77-
@media screen and (max-width: 700px) {
78-
.Container {
79-
flex-direction: column;
80-
}
81-
.Embed {
82-
margin-top: 50px;
83-
}
83+
margin-top: 50px;
8484
}
85+
}
8586
</style>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,23 @@
1616
<!-- Showcase -->
1717
<Showcase />
1818
<!-- Mission -->
19-
<Mission />
20-
<!--Events-->
21-
<EventDisplay :events="eventItems" :updated="lastEventUpdate" />
19+
<AboutUs />
2220
<!-- Slideshow -->
2321
<Slideshow />
24-
<!-- Student Resources -->
25-
<StudentResources />
2622
<!-- Community Links -->
2723
<CommunityLinks />
24+
<!--Events-->
25+
<EventDisplay :events="eventItems" :updated="lastEventUpdate" />
26+
<!-- Student Resources -->
27+
<StudentResources />
2828
<!-- Sponsor -->
2929
<SponsorUs />
3030
</div>
3131
</template>
3232

3333
<script>
3434
import Showcase from '@/views/Home/Showcase';
35-
import Mission from '@/views/Home/Mission';
35+
import AboutUs from '@/views/Home/AboutUs';
3636
import CommunityLinks from '@/views/Home/CommunityLink';
3737
import EventDisplay from '@/views/Home/EventDisplay';
3838
import Slideshow from '@/views/Home/Slideshow';
@@ -50,7 +50,7 @@ export default {
5050
}),
5151
components: {
5252
Showcase,
53-
Mission,
53+
AboutUs,
5454
CommunityLinks,
5555
EventDisplay,
5656
Slideshow,

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

Lines changed: 0 additions & 48 deletions
This file was deleted.

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

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,12 @@
77
<template>
88
<div id="showcase" class="content">
99
<v-container>
10-
<v-row no-gutters>
11-
<v-col class="pa-0" cols="6">
12-
<h1>
13-
{{quote}}
14-
</h1>
15-
</v-col>
16-
</v-row>
17-
<v-row no-gutters>
18-
<v-col class="pa-0" cols="12">
19-
<button
20-
class="btn--join-us"
21-
data-cy=joinus-button
22-
@click="joinusClick">
23-
Join Us
24-
</button>
25-
</v-col>
26-
</v-row>
10+
<h1>
11+
{{ quote }}
12+
</h1>
13+
<h2>
14+
{{ tag }}
15+
</h2>
2716
</v-container>
2817
</div>
2918
</template>
@@ -32,6 +21,7 @@
3221
export default {
3322
data: () => ({
3423
quote: 'Hello World!',
24+
tag: 'We are the principal representative body for UNSW computing students'
3525
}),
3626
methods: {
3727
joinusClick() {
@@ -43,9 +33,10 @@ export default {
4333

4434
<style lang="scss" scoped>
4535
#showcase {
46-
background-image: linear-gradient(transparent, transparent, $dark-color-1), url(../../assets/landing_page/showcase.png);
36+
background-image: linear-gradient(transparent, transparent, $dark-color-1),
37+
url(../../assets/landing_page/showcase.png);
4738
background-size: cover;
48-
background-attachment:local;
39+
background-attachment: local;
4940
background-position: 75% 50%;
5041
height: 100vh;
5142
align-items: center;
@@ -59,6 +50,6 @@ export default {
5950
6051
.btn--join-us:hover {
6152
transition: 0.4s;
62-
background: rgba(102,255,255, 0.2);
53+
background: rgba(102, 255, 255, 0.2);
6354
}
6455
</style>

0 commit comments

Comments
 (0)