Skip to content

Commit 723f4ae

Browse files
Esther WongEsther Wong
Esther Wong
authored and
Esther Wong
committed
Unique views for pages w/ special layouts
1 parent 87c234b commit 723f4ae

File tree

4 files changed

+259
-3
lines changed

4 files changed

+259
-3
lines changed

‎src/views/About.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525

2626
<div class="content">
2727

28-
<NavGrid id='content-start' :gridItems="gridItems"></NavGrid>
2928

3029
<h1 class="mt-12"> #!/ABOUT </h1>
3130
<p>
@@ -40,6 +39,7 @@ We cater to new and returning students alike, with a mix of events designed to h
4039
We're as passionate about computing as you are; we provide technical events to teach you new skills, as well as a fortnightly magazine to keep you updated on what's new and interesting within the university, school and industry.
4140
Most of all, we're here to help you settle in and have a great time at UNSW!
4241
</p>
42+
<NavGrid id='content-start' :gridItems="gridItems"></NavGrid>
4343
</div>
4444
<Footer/>
4545
</div>

‎src/views/ContentPage.vue‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<template>
2+
3+
<div>
4+
5+
<Sidebar :drawer="drawer" />
6+
7+
8+
9+
10+
11+
<v-app-bar app dark>
12+
<v-app-bar-nav-icon class="ma-2" @click.stop="drawer = !drawer"> </v-app-bar-nav-icon>
13+
<div class="flex-grow-1"></div>
14+
15+
<router-link to="/"
16+
><v-container
17+
class="fill-height"
18+
fluid
19+
style="max-height: 64px; max-width:100px"
20+
>
21+
<v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" />
22+
</v-container>
23+
</router-link>
24+
<div class="flex-grow-1"></div>
25+
<LoginForm align="right"/>
26+
</v-app-bar>
27+
28+
<v-container class="pa-md-10 mx-lg-auto">
29+
<!-- maybe a loop to print out path to home-->
30+
<div class="links"> <span class="underline">home</span> /
31+
<span class="underline">{{nav}}</span> </div>
32+
<v-flex xs12>
33+
34+
35+
<h1> #!/{{header}} </h1>
36+
</v-flex>
37+
</v-container>
38+
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR69owPqAwr0yduD4SOVPPo45iZw6fyZdLt6Zk7vbCI-ws04MiZ&s" alt="sample"
39+
height = "350px"
40+
width=100%
41+
object-fit= contain>
42+
43+
44+
<v-container class="pa-md-10 mx-lg-auto">
45+
<p> {{text}} </p>
46+
</v-container>
47+
</div>
48+
</template>
49+
50+
<script>
51+
export default {
52+
name: 'TextPost',
53+
el: '#nav',
54+
data() {
55+
const title = 'Header';
56+
return {
57+
nav: title.toLowerCase(),
58+
header: title.toUpperCase(),
59+
// new lines need to be manually inserted so we need to parse them from the text
60+
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
61+
items: [
62+
{ label: 'edwe', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR69owPqAwr0yduD4SOVPPo45iZw6fyZdLt6Zk7vbCI-ws04MiZ&s', link: '' },
63+
{ label: 'wedfw', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR69owPqAwr0yduD4SOVPPo45iZw6fyZdLt6Zk7vbCI-ws04MiZ&s', link: '' },
64+
{ label: 'wefwef', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR69owPqAwr0yduD4SOVPPo45iZw6fyZdLt6Zk7vbCI-ws04MiZ&s', link: '' },
65+
],
66+
};
67+
},
68+
};
69+
</script>
70+
71+
<style scoped>
72+
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
73+
h1 {
74+
font-size:48px;
75+
font-weight: normal;
76+
}
77+
body {
78+
font-family: 'Quicksand', sans-serif;
79+
text-align: left;
80+
}
81+
p {
82+
font-size:14px;
83+
font-weight: 300;
84+
-webkit-font-smoothing: subpixel-antialiased;
85+
}
86+
p span {
87+
font-size:16px;
88+
font-style: italic;
89+
display:inline-block;
90+
}
91+
links {
92+
font-size: 20px;
93+
}
94+
.underline {
95+
border-bottom: 1px solid grey;
96+
}
97+
/* grid */
98+
.nav__grid{
99+
display: flex;
100+
flex-direction: row;
101+
flex-wrap: wrap;
102+
padding-bottom: 2%;
103+
margin-left: 5%;
104+
margin-right: 5%;
105+
position: relative;
106+
}
107+
.grid{
108+
width: calc(80%/3);
109+
height: 10em;
110+
text-decoration:none;
111+
margin: 20px;
112+
box-shadow: 0 1px 2px rgba(0,0,0,.1);
113+
transition: all 0.3s ease;
114+
flex: 0 0 auto;
115+
}
116+
.grid:hover{
117+
box-shadow: 0 5px 10px #777;
118+
transition: all 0.4s ease;
119+
}
120+
.description{
121+
padding: 10%;
122+
text-align: center;
123+
font-weight: bold;
124+
color: #f7f8f9;
125+
font-size: 160%;
126+
}
127+
</style>

‎src/views/Home.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
fluid
1919
style="max-height: 64px; max-width:100px"
2020
>
21-
<v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" />
21+
<v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" />
2222
</v-container>
2323
</router-link>
2424
<div class="flex-grow-1"></div>
@@ -44,9 +44,10 @@
4444
data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true">
4545
<blockquote cite="https://www.facebook.com/csesoc" class="fb-xfbml-parse-ignore">
4646
<a href="https://www.facebook.com/csesoc">CSESoc UNSW</a></blockquote></div>
47+
<!-- wait for component to load before rendering - add event listener -->
4748
</v-col>
4849
<v-col>
49-
<h1> #!/UPCOMING EVENTS </h1>
50+
<h1> #!/ANNOUNCEMENTS </h1>
5051
<ListComponent :listItems="listItems" />
5152
</v-col>
5253
</v-row>
@@ -56,6 +57,7 @@
5657

5758

5859
<!-- media slider - could be showcase of recent posts?? -->
60+
<!-- how to pass in OPTIONS -->
5961
<Slider :items="items" class="my-10"/>
6062

6163
<Events/>

‎src/views/ResourcesPage.vue‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<template>
2+
3+
<div>
4+
5+
<Sidebar :drawer="drawer" />
6+
7+
8+
9+
10+
11+
<v-app-bar app dark>
12+
<v-app-bar-nav-icon class="ma-2" @click.stop="drawer = !drawer"> </v-app-bar-nav-icon>
13+
<div class="flex-grow-1"></div>
14+
15+
<router-link to="/"
16+
><v-container
17+
class="fill-height"
18+
fluid
19+
style="max-height: 64px; max-width:100px"
20+
>
21+
<v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" />
22+
</v-container>
23+
</router-link>
24+
<div class="flex-grow-1"></div>
25+
<LoginForm align="right"/>
26+
</v-app-bar>
27+
28+
<v-container class="pa-md-10 mx-lg-auto">
29+
<!-- maybe a loop to print out path to home-->
30+
<div class="links"> <span class="underline">home</span> /
31+
<span class="underline">{{nav}}</span> </div>
32+
<v-flex xs12>
33+
34+
35+
<h1> #!/{{header}} </h1>
36+
</v-flex>
37+
</v-container>
38+
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR69owPqAwr0yduD4SOVPPo45iZw6fyZdLt6Zk7vbCI-ws04MiZ&s" alt="sample"
39+
height = "350px"
40+
width=100%
41+
object-fit= contain>
42+
43+
44+
<v-container class="pa-md-10 mx-lg-auto">
45+
<p> {{text}} </p>
46+
</v-container>
47+
</div>
48+
</template>
49+
50+
<script>
51+
export default {
52+
name: 'TextPost',
53+
el: '#nav',
54+
data() {
55+
const title = 'Header';
56+
return {
57+
nav: title.toLowerCase(),
58+
header: title.toUpperCase(),
59+
// new lines need to be manually inserted so we need to parse them from the text
60+
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
61+
items: [
62+
{ label: 'edwe', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR69owPqAwr0yduD4SOVPPo45iZw6fyZdLt6Zk7vbCI-ws04MiZ&s', link: '' },
63+
{ label: 'wedfw', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR69owPqAwr0yduD4SOVPPo45iZw6fyZdLt6Zk7vbCI-ws04MiZ&s', link: '' },
64+
{ label: 'wefwef', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR69owPqAwr0yduD4SOVPPo45iZw6fyZdLt6Zk7vbCI-ws04MiZ&s', link: '' },
65+
],
66+
};
67+
},
68+
};
69+
</script>
70+
71+
<style scoped>
72+
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
73+
h1 {
74+
font-size:48px;
75+
font-weight: normal;
76+
}
77+
body {
78+
font-family: 'Quicksand', sans-serif;
79+
text-align: left;
80+
}
81+
p {
82+
font-size:14px;
83+
font-weight: 300;
84+
-webkit-font-smoothing: subpixel-antialiased;
85+
}
86+
p span {
87+
font-size:16px;
88+
font-style: italic;
89+
display:inline-block;
90+
}
91+
links {
92+
font-size: 20px;
93+
}
94+
.underline {
95+
border-bottom: 1px solid grey;
96+
}
97+
/* grid */
98+
.nav__grid{
99+
display: flex;
100+
flex-direction: row;
101+
flex-wrap: wrap;
102+
padding-bottom: 2%;
103+
margin-left: 5%;
104+
margin-right: 5%;
105+
position: relative;
106+
}
107+
.grid{
108+
width: calc(80%/3);
109+
height: 10em;
110+
text-decoration:none;
111+
margin: 20px;
112+
box-shadow: 0 1px 2px rgba(0,0,0,.1);
113+
transition: all 0.3s ease;
114+
flex: 0 0 auto;
115+
}
116+
.grid:hover{
117+
box-shadow: 0 5px 10px #777;
118+
transition: all 0.4s ease;
119+
}
120+
.description{
121+
padding: 10%;
122+
text-align: center;
123+
font-weight: bold;
124+
color: #f7f8f9;
125+
font-size: 160%;
126+
}
127+
</style>

0 commit comments

Comments
 (0)