Skip to content
This repository was archived by the owner on Mar 2, 2022. It is now read-only.

Commit 842c81c

Browse files
sarthak-sehgalsarthak-sehgal
authored
Merge branch 'master' into master
2 parents f05804a + 3cb3932 commit 842c81c

File tree

9 files changed

+306
-17
lines changed

9 files changed

+306
-17
lines changed

‎src/components/About.vue

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@
33
<nav-bar active="about"></nav-bar>
44
<heading title="About Us" />
55
<p id="aboutContent" v-html="about"></p>
6-
<div>
6+
<div id=buttons>
77
<router-link to="/components"><button type="button" class="btn btn-success btn-sm" id="btn">Explore</button></router-link>
88
<router-link to="/contact"><button type="button" class="btn btn-success btn-sm" id="btn">Contact Us</button></router-link>
99
</div>
10+
<foo-ter />
1011
</div>
1112
</template>
1213
<script>
1314
import NavBar from './NavBar.vue';
1415
import Heading from './Heading.vue';
16+
import Footer from './Footer.vue';
1517
1618
export default {
1719
name: 'About',
@@ -24,7 +26,8 @@ export default {
2426
},
2527
components: {
2628
'heading': Heading,
27-
'nav-bar': NavBar
29+
'nav-bar': NavBar,
30+
'foo-ter': Footer
2831
}
2932
};
3033
</script>
@@ -41,9 +44,12 @@ export default {
4144
text-align: center;
4245
font-size: 20px;
4346
}
44-
#btn {
45-
padding: 5px;
46-
font-size: 20px;
47-
margin: 10px;
47+
#buttons {
48+
margin-bottom: 20px;
49+
#btn {
50+
padding: 5px;
51+
font-size: 20px;
52+
margin: 10px;
53+
}
4854
}
4955
</style>

‎src/components/Component.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
</div>
9999
</div>
100100
</div>
101+
<foo-ter />
101102
</div>
102103
</template>
103104

@@ -107,6 +108,7 @@ import Heading from './Heading.vue';
107108
import ComponentStat from './ComponentStat.vue';
108109
import Contributor from './Contributor.vue';
109110
import Visualization from './Visualization.vue';
111+
import Footer from './Footer.vue';
110112
import axios from 'axios';
111113
import { API_URL } from '../DB_CONFIG.js';
112114
import Loader from './Loader';
@@ -163,7 +165,8 @@ A watcher has been added to the component to render the details dynamically when
163165
'component-stat': ComponentStat,
164166
contributor: Contributor,
165167
visualization: Visualization,
166-
loader: Loader
168+
loader: Loader,
169+
'foo-ter': Footer
167170
},
168171
mounted () {
169172
this.fetchData();

‎src/components/Components.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,13 +65,15 @@
6565
<component-table title="Most Recent" components="most_recent" />
6666
</div>
6767
</div>
68+
<foo-ter />
6869
</div>
6970
</template>
7071
<script>
7172
import NavBar from './NavBar';
7273
import Heading from './Heading';
7374
import SearchComponent from './SearchComponent';
7475
import ComponentTable from './ComponentTable';
76+
import Footer from './Footer.vue';
7577
import axios from 'axios';
7678
import {API_URL} from '../DB_CONFIG.js';
7779
import Loader from './Loader';
@@ -113,7 +115,8 @@ A fuzzy search has been implemented. You can find the details of the search comp
113115
'heading': Heading,
114116
'search-component': SearchComponent,
115117
'component-table': ComponentTable,
116-
'loader': Loader
118+
'loader': Loader,
119+
'foo-ter': Footer
117120
},
118121
methods: {
119122
computeURL (url) {

‎src/components/ContactUs.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@
1313
</a>
1414
</div>
1515
</div>
16+
<foo-ter />
1617
</div>
1718
</template>
1819
<script>
1920
import NavBar from './NavBar.vue';
2021
import Heading from './Heading.vue';
22+
import Footer from './Footer.vue';
2123
2224
export default {
2325
data () {
@@ -27,7 +29,8 @@ export default {
2729
},
2830
components: {
2931
'nav-bar': NavBar,
30-
'heading': Heading
32+
'heading': Heading,
33+
'foo-ter': Footer
3134
}
3235
};
3336
</script>
@@ -45,6 +48,7 @@ export default {
4548
}
4649
#contact {
4750
font-weight: bold;
51+
margin-bottom: 30px;
4852
button {
4953
font-weight: bold;
5054
font-size: 18px;

‎src/components/Footer.vue

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
<template>
2+
<div id="footer">
3+
<div id="description">
4+
<h3>Bio<span>JS</span></h3>
5+
<p>BioJS is a library of over hundred JavaScript components enabling you to visualize and process data using current web technologies.</p>
6+
<p>&copy; BioJS, {{ computeYear() }}</p>
7+
</div>
8+
<div id="right">
9+
<div id="social">
10+
<h5>Contact Us</h5>
11+
<div id="socialLinks">
12+
<div><a href="https://github.com/biojs/biojs-frontend"><img src="../../static/github.png" alt="GitHub" class="footerLinkImgs"><span>Github</span></a></div>
13+
<div><a href="https://twitter.com/biojslibrary?lang=en"><img src="../../static/twitter.png" alt="Twitter" class="footerLinkImgs"><span>Twitter</span></a></div>
14+
<div><a href="mailto:[email protected]"><img src="../../static/mail.png" alt="Mail" class="footerLinkImgs"><span>Mail</span></a></div>
15+
</div>
16+
<a :href="gitterURL">
17+
<button type="button" class="btn btn-success btn-sm">Contact us on Gitter</button>
18+
</a>
19+
</div>
20+
<div id="search-component">
21+
<h5>Browse</h5>
22+
<div id="browse">
23+
<div><router-link class="navLink" to="/components"><span>Components</span></router-link></div>
24+
<div><router-link class="navLink" to="/guide"><span>Guide</span></router-link></div>
25+
<div><router-link class="navLink" to="/about"><span>About</span></router-link></div>
26+
<div><router-link class="navLink" to="/contact"><span>Contact Us</span></router-link></div>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
</template>
32+
<script>
33+
import SearchComponent from './SearchComponent.vue';
34+
export default {
35+
name: 'Footer',
36+
introduction: 'The footer component is meant for all the footers on each page.',
37+
description: 'Footer component appears at the end of each page and accepts no props.',
38+
token: '',
39+
components: {
40+
'search-component': SearchComponent
41+
},
42+
data () {
43+
return {
44+
gitterURL: 'https://gitter.im/biojs/biojs'
45+
};
46+
},
47+
created () {
48+
console.log('created');
49+
},
50+
mounted () {
51+
console.log('mounted');
52+
},
53+
methods: {
54+
computeYear () {
55+
return new Date().getFullYear();
56+
}
57+
}
58+
};
59+
</script>
60+
<style lang="scss" scoped>
61+
#footer {
62+
display: flex;
63+
flex-direction: row;
64+
width: 100%;
65+
min-height: 200px;
66+
font-size: 17px;
67+
background: rgb(40,40,40);
68+
color: white;
69+
padding: 10px;
70+
#description {
71+
width: 40%;
72+
height: 100%;
73+
display: flex;
74+
flex-direction: column;
75+
margin: 10px 10px 10px 50px;
76+
padding: 5px;
77+
h3 {
78+
color: #00AF66;
79+
font-weight: bold;
80+
span {
81+
color: white;
82+
}
83+
}
84+
p {
85+
font-size: 15px;
86+
color: #ccc;
87+
margin: 2px 0;
88+
}
89+
}
90+
#right {
91+
display: flex;
92+
flex-direction: row;
93+
width: 60%;
94+
height: 100%;
95+
margin-left: 50px;
96+
#social {
97+
width: 45%;
98+
height: 90%;
99+
display: flex;
100+
flex-direction: column;
101+
margin: 10px;
102+
padding: 5px;
103+
#socialLinks {
104+
display: flex;
105+
flex-direction: column;
106+
padding: 0;
107+
margin: 5px 0;
108+
a {
109+
display: inline;
110+
margin: 0;
111+
padding: 0;
112+
text-decoration: none;
113+
color: #ccc;
114+
transition: 0.2s ease-in-out;
115+
.footerLinkImgs {
116+
width: 21.5px;
117+
height: 18px;
118+
margin: 0 5px 0 0;
119+
}
120+
span {
121+
font-size: 14px;
122+
}
123+
}
124+
a:hover {
125+
color: #fff;
126+
}
127+
}
128+
a {
129+
margin: 5px 0;
130+
}
131+
}
132+
#search-component {
133+
width: 45%;
134+
height: 90%;
135+
display: flex;
136+
flex-direction: column;
137+
margin: 10px 10px 10px 40px;
138+
padding: 5px;
139+
#browse {
140+
display: flex;
141+
flex-direction: column;
142+
.navLink {
143+
display: inline;
144+
text-decoration: none;
145+
color: #ccc;
146+
transition: 0.2s ease-in-out;
147+
}
148+
.navLink:hover {
149+
color: white;
150+
}
151+
}
152+
}
153+
}
154+
}
155+
/*
156+
Responsive design
157+
*/
158+
@media (max-width: 840px) {
159+
#footer {
160+
#description {
161+
margin-left: 30px;
162+
}
163+
}
164+
}
165+
@media (max-width: 730px) {
166+
#footer {
167+
#description {
168+
width: 45%;
169+
p {
170+
font-size: 14px;
171+
}
172+
}
173+
#right {
174+
margin-left: 10px;
175+
#search-component {
176+
margin-left: 20px;
177+
#browse {
178+
.navLink {
179+
font-size: 14px;
180+
}
181+
}
182+
}
183+
}
184+
}
185+
}
186+
@media (max-width: 645px) {
187+
#footer {
188+
flex-direction: column;
189+
align-items: center;
190+
#description {
191+
height: 40%;
192+
width: 90%;
193+
align-items: center;
194+
margin: 0;
195+
p {
196+
text-align: center;
197+
}
198+
}
199+
#right {
200+
flex-direction: row;
201+
justify-content: center;
202+
width: 90%;
203+
height: 30%;
204+
margin: 0;
205+
#social {
206+
align-items: center;
207+
height: 40%;
208+
width: 90%;
209+
padding: 0 20px 0 0;
210+
margin: 0;
211+
border-right: 0.4px solid #888;
212+
}
213+
#search-component {
214+
align-items: center;
215+
height: 40%;
216+
width: 90%;
217+
padding: 0;
218+
margin: 0;
219+
#browse {
220+
margin: 0;
221+
align-items: center;
222+
}
223+
}
224+
}
225+
}
226+
}
227+
@media (max-width: 400px) {
228+
#footer {
229+
#description {
230+
p {
231+
font-size: 13px;
232+
}
233+
}
234+
#right {
235+
#social {
236+
padding: 0 5px 0 0;
237+
h5 {
238+
font-size: 17px;
239+
}
240+
a {
241+
button {
242+
padding: 3px;
243+
font-size: 13px;
244+
}
245+
}
246+
#socialLinks {
247+
a {
248+
span {
249+
font-size: 13px;
250+
}
251+
}
252+
}
253+
}
254+
#search-component {
255+
h5 {
256+
font-size: 17px;
257+
}
258+
#browse {
259+
.navLink {
260+
font-size: 13px;
261+
}
262+
}
263+
}
264+
}
265+
}
266+
}
267+
</style>

0 commit comments

Comments
 (0)