Skip to content

Commit 49f0ef7

Browse files
timelytreetimelytree
committed
Added social links
1 parent a7af444 commit 49f0ef7

File tree

9 files changed

+119
-134
lines changed

9 files changed

+119
-134
lines changed

‎readme.md

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,5 @@
1-
# displaced
2-
3-
> A Vue.js project
4-
5-
## Build Setup
6-
7-
``` bash
8-
# install dependencies
9-
npm install
10-
11-
# serve with hot reload at localhost:8080
12-
npm run dev
13-
14-
# build for production with minification
15-
npm run build
16-
17-
# build for production and view the bundle analyzer report
18-
npm run build --report
19-
20-
# run unit tests
21-
npm run unit
22-
23-
# run e2e tests
24-
npm run e2e
25-
26-
# run all tests
27-
npm test
28-
```
29-
30-
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
1+
TO DO
2+
- [] press links
313

324
# Utilities
335
Vue Meta: https://github.com/declandewet/vue-meta#meta-object

‎src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<Navigation />
88
<VideoTimer />
99
<HomePageImageSlider v-bind:gallery="gallery" />
10-
<div class="videoWRAPPER">
10+
<div class="videoWRAPPER home-video">
1111
<div id="videoOVERLAY"></div>
1212
<div id="videoPLAYER"></div>
1313
</div>

‎src/assets/images/preloader_black.svg

Lines changed: 36 additions & 0 deletions
Loading

‎src/assets/images/website_icon_black.svg

Lines changed: 33 additions & 0 deletions
Loading

‎src/components/PreLoader.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div id="pre-loader">
33
<img src="../assets/images/preloader_white.svg" />
4+
<img src="../assets/images/preloader_black.svg" />
45
</div>
56
</template>
67

‎src/pages/PageProject.vue

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@
1919
<p v-for="item in projectDescription" v-html="item" v-bind:class="[ item !== '' ? '' : 'hidden' ]"></p>
2020
</div>
2121
</div>
22+
<div class="social-icons">
23+
<a :href="instagramLink" target="_blank" v-if="instagramLink"><img src="../assets/images/instagram_icon_black.svg" /></a>
24+
<a :href="youtubeLink" target="_blank" v-if="youtubeLink"><img src="../assets/images/youtube_icon_black.svg" /></a>
25+
<a :href="websiteLink" target="_blank" v-if="websiteLink"><img src="../assets/images/website_icon_black.svg" /></a>
26+
<a :href="facebookLink" target="_blank" v-if="facebookLink"><img src="../assets/images/facebook_icon_black.svg" /></a>
27+
</div>
2228
</div>
2329
<div class="project-instagram" v-if="instagram">
2430
<h1>Instagram</h1>
@@ -73,6 +79,10 @@ export default {
7379
seoDescription: '',
7480
projectDescription: '',
7581
logoSrc: '',
82+
instagramLink: false,
83+
youtubeLink: false,
84+
websiteLink: false,
85+
facebookLink: false,
7686
images: {},
7787
videos: false,
7888
instagram: false
@@ -113,6 +123,10 @@ export default {
113123
this.seoDescription = response.seo_description
114124
this.projectDescription = response.description.split(/\r?\n/)
115125
this.logoSrc = response.logo.guid
126+
this.instagramLink = response.link_instagram
127+
this.youtubeLink = response.link_youtube
128+
this.websiteLink = response.link_website
129+
this.facebookLink = response.link_facebook
116130
if (response.video_gallery !== '') {
117131
this.videos = response.video_gallery.replace(/[\n\r]+/g, '').replace(/\s/g, '').split(',')
118132
}
@@ -121,7 +135,6 @@ export default {
121135
if (response.instagram_handle !== '') {
122136
var handle = response.instagram_handle
123137
this.fetchInstagramPosts(response => {
124-
console.log(response)
125138
var instaItems = {}
126139
for (var i = 0; i < response.items.length; i++) {
127140
var item = response.items[i]
@@ -130,7 +143,6 @@ export default {
130143
caption: item.caption.text.split(/\r?\n/)
131144
}
132145
}
133-
console.log(instaItems)
134146
this.instagram = instaItems
135147
}, handle)
136148
}

‎src/stylesheets/styles/_3_components.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,13 @@
1616
font-weight: 700;
1717
color: white;
1818
img {
19+
position: absolute;
20+
top: 0;
21+
left: 0;
1922
width: 100%;
2023
height: 100%;
24+
&:first-child { opacity: 1; }
25+
&:last-child { opacity: 0; }
2126
}
2227
}
2328

@@ -113,6 +118,10 @@
113118
letter-spacing: 2px;
114119
}
115120

121+
.project-nav-title {
122+
opacity: 0;
123+
}
124+
116125
.project-toolbar {
117126
@include display-flex;
118127
@include flex-row;
@@ -463,5 +472,4 @@
463472

464473

465474

466-
467475
//

‎src/stylesheets/styles/_4_custom.scss

Lines changed: 22 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,16 @@
2020
#projectPAGE {
2121
z-index: 100;
2222

23-
// project-video-slide // project-intro-slide // project-gallery-slide
24-
// project-text-slide // project-single-image-slide // project-subtitle-slide (h2 tags)
25-
26-
.project-video-slide, .project-intro-slide, .project-gallery-slide,
27-
.project-text-slide, .project-single-image-slide, .project-subtitle-slide,
28-
.project-press-slide, .project-banner-slide {
23+
.project-intro-slide {
2924
padding: 50px;
30-
// padding-top: 25px;
31-
// padding-bottom: 25px;
32-
// padding-left: 50px;
33-
// padding-right: 50px;
34-
// &:first-child {
35-
// padding-top: 50px;
36-
// }
3725
&:last-child {
3826
padding-bottom: 0;
3927
}
40-
}
41-
42-
// FULL WIDTH slides (VIDEO, GALLERY)
43-
.project-video-slide, .project-gallery-slide {
44-
padding-left: 0;
45-
padding-right: 0;
46-
}
47-
48-
// TEXT slides (TEXT, INTRO)
49-
.project-text-slide, .project-intro-slide {
28+
img {
29+
width: 500px;
30+
margin: 0 auto;
31+
margin-bottom: 50px;
32+
}
5033
.fsn-text {
5134
text-align: center;
5235
width: 400px;
@@ -59,85 +42,18 @@
5942
}
6043
}
6144
}
62-
}
63-
64-
// IMG slides (INTRO, IMAGE)
65-
.project-intro-slide, .project-single-image-slide {
66-
img {
67-
width: 500px;
68-
height: auto;
69-
margin: 0 auto;
70-
}
71-
}
72-
73-
// SUBTITLED slides (SUBTITLE, PRESS)
74-
.project-subtitle-slide, .project-press-slide {
75-
h2 {
76-
font-size: 24px;
77-
line-height: 28px;
78-
font-weight: 600;
79-
text-transform: uppercase;
80-
margin-bottom: 5px;
81-
}
82-
}
83-
84-
// INTRO slide
85-
.project-intro-slide {
86-
@include flex-c;
87-
img {
88-
margin-bottom: 50px;
89-
}
90-
}
91-
92-
// VIDEO slide
93-
.project-video-slide {
94-
padding-left: 0;
95-
padding-right: 0;
96-
.embed-container {
97-
position: relative;
98-
padding-bottom: 56.25%;
99-
padding-top: 25px;
100-
height: 0;
101-
width: calc(100% + 30px);
102-
left: -15px;
103-
104-
iframe {
105-
position: absolute;
106-
top: 0;
107-
left: 0;
108-
width: 100%;
109-
height: 100%;
45+
.social-icons {
46+
@include display-flex;
47+
@include flex-row;
48+
@include flex-center;
49+
margin-top: 50px;
50+
img {
51+
width: 30px;
52+
height: 30px;
53+
margin: 0 10px;
11054
}
11155
}
11256
}
113-
114-
// SUBTITLE (h2 tag) slide
115-
.project-subtitle-slide {
116-
p {
117-
text-align: justify;
118-
}
119-
}
120-
121-
// PRESS slide
122-
.project-press-slide {
123-
h2 {
124-
margin-bottom: 25px;
125-
}
126-
img {
127-
display: inline-block;
128-
width: 200px;
129-
height: auto;
130-
margin-right: 50px;
131-
}
132-
}
133-
134-
// BANNER slide
135-
.project-banner-slide {
136-
img {
137-
width: 100%;
138-
height: auto;
139-
}
140-
}
14157
}
14258

14359
////////////////////////////////////////////////////////////////// Contact Page
@@ -197,6 +113,13 @@
197113
background-color: white;
198114
transition: 150ms;
199115

116+
#pre-loader {
117+
img {
118+
&:first-child { opacity: 0; }
119+
&:last-child { opacity: 1; }
120+
}
121+
}
122+
200123
#logo-white {
201124
opacity: 0;
202125
}

‎src/stylesheets/styles/_5_mq.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
/////////////////////////////////////////////////////////////// < 1024px device
4444
//-----------------------------------------------------------------------------
4545
@media only screen and (max-device-width: 1024px) {
46-
.videoWRAPPER {
46+
.home-video {
4747
display: none;
4848
}
4949
}

0 commit comments

Comments
 (0)