Skip to content

Commit 273d915

Browse files
Esther WongEsther Wong
Esther Wong
authored and
Esther Wong
committed
assembling landing page
1 parent 16a705f commit 273d915

File tree

8 files changed

+182
-33
lines changed

8 files changed

+182
-33
lines changed

‎src/components/Events.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<!-- Insert post here-->
3+
<div class="gridView">
4+
<v-container class="pa-md-10 mx-lg-auto">
5+
<v-row>
6+
<v-col>
7+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1570828388/600xDigitalOcean_Agencies_bfkeb2.png" />
8+
</v-col>
9+
<v-col>
10+
<div class="pa-md-6">
11+
<h2 class="eventName">
12+
{{ event.name }}
13+
</h2>
14+
<h3 class="eventTime">{{ event.date }}</h3>
15+
<h3>{{ event.time }}</h3>
16+
<p>
17+
{{ event.info }}
18+
</p>
19+
<div class="text-center">
20+
<router-link to="/post"
21+
><v-btn rounded color="primary" dark style="float: right;"
22+
>More -></v-btn
23+
></router-link
24+
>
25+
</div>
26+
</div>
27+
</v-col>
28+
</v-row>
29+
</v-container>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name: 'EventsGrid',
36+
data() {
37+
return {
38+
event: {
39+
name: 'Annual Hackathon'.toUpperCase(),
40+
date: '1st January 2020',
41+
time: '0:00 - 23:59',
42+
info: 'Do you love solving problems? Want to make a product that can potentially change the world? Here’s your opportunity to do so with your team of up to six people at CSESoc’s annual hackathon! You and your team will be given 24 hours to come up with a solution for the problem presented. ',
43+
image: 'https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true',
44+
},
45+
};
46+
},
47+
};
48+
</script>
49+
50+
<style scoped>
51+
@import url("https://fonts.googleapis.com/css?family=Quicksand&display=swap");
52+
53+
h1 {
54+
font-size: 48px;
55+
font-weight: normal;
56+
}
57+
58+
body {
59+
font-family: "Quicksand", sans-serif;
60+
text-align: left;
61+
}
62+
63+
p {
64+
font-size: 14px;
65+
font-weight: 300;
66+
-webkit-font-smoothing: subpixel-antialiased;
67+
}
68+
69+
p span {
70+
font-size: 16px;
71+
font-style: italic;
72+
display: inline-block;
73+
}
74+
75+
.underline {
76+
border-bottom: 1px solid grey;
77+
}
78+
79+
img {
80+
max-width: 100%;
81+
max-height: 100%;
82+
}
83+
</style>

‎src/components/Footer.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313
<v-card-text class="white--text">
1414

1515
<section class="tiers__grid">
16-
<a v-for="sponsor in tierOne" class="tiers__box" :href="sponsor.link" :key="sponsor">
16+
<a v-for="sponsor in tierOne" class="tiers__box" :href="sponsor.link">
1717
<img :src="sponsor.logo" style=" max-width:300px;max-height:105px;">
1818
</a>
1919
</section>
2020
<section class="tiers__grid">
21-
<a v-for="sponsor in tierTwo" class="tiers__box" :href="sponsor.link" :key="sponsor">
21+
<a v-for="sponsor in tierTwo" class="tiers__box" :href="sponsor.link">
2222
<img :src="sponsor.logo" style="max-width:200px;max-height:75px">
2323
</a>
2424
</section>
2525
<section class="tiers__grid">
26-
<a v-for="sponsor in tierThree" class="tiers__box" :href="sponsor.link" :key="sponsor">
26+
<a v-for="sponsor in tierThree" class="tiers__box" :href="sponsor.link">
2727
<img :src="sponsor.logo" style="max-width:100px;max-height:50px">
2828
</a>
2929
</section>

‎src/components/ListComponent.vue‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<!-- Insert post here-->
33
<v-container class="pa-md-1 mx-lg-auto">
44
<v-row v-for="item in listItems">
5-
<v-col class="pa-2" v-if="item.piclist">
5+
<v-col class="pa-2" v-if="item.imageItem">
66
<!-- use v-img -->
77
<img v-if="item.image.length != 0" :src="item.image" />
88
</v-col>
@@ -11,7 +11,7 @@
1111
<h2 class="listItemTitle">
1212
{{ item.title }}
1313
</h2>
14-
<h3 class="listItemSubtitle">{{ subtitle }}</h3>
14+
<h3 class="listItemSubtitle">{{ item.subtitle }}</h3>
1515
<p>
1616
{{ item.content }}
1717
</p>
@@ -66,19 +66,6 @@ img {
6666

6767

6868
<script>
69-
// export default {
70-
// name: 'ListComponent',
71-
// data() {
72-
// return {
73-
// piclist: true,
74-
// image: 'https://avatars0.githubusercontent.com/u/164179?s=280&v=4',
75-
// title: 'Header',
76-
// subtitle: 'Subtitle',
77-
// content: 'This is some text.askjdbasbakc id isd ks sj ks skdj dsl sdkl jsdlk sdlk sdk skd sdlj vld ldckhj sdk hsjjsdn sjd skd sjhds ksdk jsdk lskd sljadksa kjx slklkj sk sdk kld dk s ds jsdklsdkdslk dslkj dkds vs dkjsd lksd lsj sdjhbcjsdc sdjhcb ',
78-
// link: '',
79-
// };
80-
// },
81-
// };
8269
8370
export default {
8471
name: 'ListComponent',

‎src/components/LoginForm.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
v-model="dialog"
77
dark
88
no-click-animation
9-
9+
1010
max-width="600px"
1111
>
1212
<v-card>
@@ -65,6 +65,14 @@
6565
</form>
6666
</template>
6767

68+
<style scoped>
69+
@import url("https://fonts.googleapis.com/css?family=Quicksand");
70+
71+
#login-form {
72+
font-family: "Quicksand", sans-serif;
73+
}
74+
</style>
75+
6876
<script>
6977
7078
export default {

‎src/components/NavGridSquare.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<v-container class="nav__grid" fluid>
3+
<v-col>
4+
<v-row align="center" justify="center">
5+
<v-card v-for="item in gridItems" :href="item.link" width="15%" height="15%" class="ma-3">
6+
<v-img
7+
:src="item.src"
8+
class="white--text"
9+
height="180px"
10+
gradient="to bottom, rgba(0,0,0,.3), rgba(0,0,0,.8)"
11+
>
12+
<v-card-title class="justify-center fill-height align-center" v-text="item.title"></v-card-title>
13+
</v-img>
14+
</v-card>
15+
</v-row>
16+
</v-col>
17+
</v-container>
18+
</template>
19+
20+
21+
<style scoped>
22+
@import url("https://fonts.googleapis.com/css?family=Quicksand");
23+
24+
.nav__grid {
25+
font-family: "Quicksand", sans-serif;
26+
}
27+
</style>
28+
29+
<script type="text/javascript">
30+
export default {
31+
name: 'NavGrid',
32+
// Must be passed from parent object
33+
// items have title, image url (src), and link
34+
props: ['gridItems'],
35+
36+
};
37+
</script>

‎src/components/Sidebar.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<v-navigation-drawer v-model="drawer" app>
2+
<v-navigation-drawer v-model="drawer" app class="sidebar">
33

44
<v-container fluid>
55

@@ -142,6 +142,15 @@
142142
</v-list>
143143
</v-navigation-drawer>
144144
</template>
145+
146+
<style scoped>
147+
@import url("https://fonts.googleapis.com/css?family=Quicksand");
148+
149+
.sidebar {
150+
font-family: "Quicksand", sans-serif;
151+
}
152+
</style>
153+
145154
<script>
146155
export default {
147156
data() {

‎src/components/Slider.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div id="slider">
33
<h1 id="slider__title">#!/{{ title }}</h1>
44
<section class="slider__items">
5-
<v-card v-for="item in items" :key="item.title" :href="item.link" width="30vw" class="ma-6 slider__item">
5+
<v-card v-for="item in items" :href="item.link" width="30vw" class="ma-6 slider__item">
66
<v-img
77
:src="item.src"
88
class="white--text"

‎src/views/Home.vue‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
<div id="fb-root"></div>
2-
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v5.0"></script>
31

42
<template>
5-
<div>
3+
<div id="home">
64

75
<Sidebar :drawer="drawer" />
86

@@ -36,34 +34,51 @@
3634
</v-btn>
3735
</header>
3836

39-
<div class="fb-page mt-10 ml-10" data-href="https://www.facebook.com/csesoc"
40-
data-tabs="timeline, events, messages" data-width="450" data-height="" data-small-header="true"
41-
data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true">
42-
<blockquote cite="https://www.facebook.com/csesoc" class="fb-xfbml-parse-ignore">
43-
<a href="https://www.facebook.com/csesoc">CSESoc UNSW</a></blockquote></div>
37+
<v-container class="ma-12 mt-20">
38+
<v-row no-gutters>
39+
<v-col>
40+
<div class="fb-page ml-12" data-href="https://www.facebook.com/csesoc"
41+
data-tabs="timeline, events, messages" data-width="450" data-height="750" data-small-header="true"
42+
data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true">
43+
<blockquote cite="https://www.facebook.com/csesoc" class="fb-xfbml-parse-ignore">
44+
<a href="https://www.facebook.com/csesoc">CSESoc UNSW</a></blockquote></div>
45+
</v-col>
46+
<v-col>
47+
<h1> #!/UPCOMING EVENTS </h1>
48+
<ListComponent :listItems="listItems" />
49+
</v-col>
50+
</v-row>
51+
</v-container>
52+
53+
54+
4455

45-
<ListComponent class="pa-8 ma-8"/>
56+
<!-- media slider - could be showcase of recent posts?? -->
4657
<Slider :items="items" class="my-10"/>
58+
59+
<Events/>
60+
<h1> #!/RESOURCES </h1>
4761
<NavGrid id='content-start' :gridItems="gridItems"></NavGrid>
4862
<Footer/>
4963
</div>
5064
</template>
5165

5266
<script>
53-
import NavGrid from '@/components/NavGrid';
67+
import NavGrid from '@/components/NavGridSquare';
5468
import ListComponent from '@/components/ListComponent';
5569
import Footer from '@/components/Footer';
5670
import Sidebar from '@/components/Sidebar';
5771
import Slider from '@/components/Slider';
5872
import LoginForm from '@/components/LoginForm';
73+
import Events from '@/components/Events'
5974
6075
6176
export default {
6277
data: () => ({
6378
drawer: false,
6479
gridApiUri: 'https://gistcdn.githack.com/esyw/f83b10232854534b64e475473406dfe6/raw/263a737400bc4e4e642a28cb9da9851ef76e3546/help.json',
6580
gridItems: [],
66-
listApiUri: 'https://gistcdn.githack.com/gawdn/464b5ed74404481f7296fb24f9f28243/raw/c9f63e5117a1406db9af5266c8cfd448161bbfec/test_grid.json',
81+
listApiUri: 'https://gistcdn.githack.com/esyw/d3801d0bc2b3cefb7fe704a328bb22e8/raw/0010238c3dc744514faf2c859110db5eb6cf9cbe/list-test.json',
6782
listItems: [],
6883
items: [],
6984
}),
@@ -75,6 +90,7 @@ export default {
7590
Sidebar,
7691
Slider,
7792
LoginForm,
93+
Events,
7894
},
7995
8096
mounted() {
@@ -84,6 +100,12 @@ export default {
84100
this.gridItems = responseJson;
85101
this.items=responseJson;
86102
});
103+
104+
fetch(this.listApiUri)
105+
.then(r => r.json())
106+
.then((responseJson) => {
107+
this.listItems = responseJson;
108+
});
87109
},
88110
89111
};
@@ -95,6 +117,10 @@ export default {
95117
margin: 0;
96118
padding: 0;
97119
}
120+
#home {
121+
font-family: "Quicksand", sans-serif;
122+
123+
}
98124
#showcase {
99125
background-image: url("https://backgroundcheckall.com/wp-content/uploads/2017/12/black-tech-background-12.jpg");
100126
background-size: cover;
@@ -119,7 +145,6 @@ export default {
119145
font-size: 20px;
120146
}
121147
#showcase .button {
122-
font-family: "Quicksand", sans-serif;
123148
font-size: 18px;
124149
text-decoration: none;
125150
color: #fff;

0 commit comments

Comments
 (0)