Home Explore Help
Sign In
archive
/
MusareReact
mirror of https://github.com/Musare/MusareReact
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Renamed Vue Components and added in Header and Footer HTML Markup and SCSS

Jonathan 8 years ago
parent
2b6abec33c
commit
c41dbab5bc
7 changed files with 132 additions and 46 deletions
Split View Show Diff Stats
  1. 2 3
      bootstrap.sh
  2. 5 1
      frontend/build/index.html
  3. 4 4
      frontend/components/App.vue
  4. 0 25
      frontend/components/ComponentFooter.vue
  5. 1 1
      frontend/components/MusareBody.vue
  6. 118 0
      frontend/components/MusareFooter.vue
  7. 2 12
      frontend/components/MusareHeader.vue

+ 2 - 3
bootstrap.sh
View File 

@@ -92,13 +92,12 @@ cd /musare
 
 
 cd backend
 
 rm -rf node_modules/
 
-npm install --no-bin-links
 
+npm install --no-bin-links && npm prune
 
 cd ../
 
 
 cd frontend
 
 rm -rf node_modules/
 
-npm install --no-bin-links
 
-npm run development-watch
 
+npm install --no-bin-links && npm prune
 
 cd ../
 
 
 sudo npm install -g nodemon

+ 5 - 1
frontend/build/index.html
View File 

@@ -2,7 +2,11 @@
 
 <html lang="en">
 
 <head>
 
 	<meta charset="UTF-8">
 
-	<title></title>
 
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 
+	<title>Musare</title>
 
+	<link rel="shortcut icon" type="image/x-icon" href="https://musare.com/favicon.ico" />
 
+	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
+	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
 
 </head>
 
 <body>
 
 	<app></app>

+ 4 - 4
frontend/components/App.vue
View File 

@@ -8,9 +8,9 @@
 
 
 <script>
 
 	// TODO: Implement these files
 
-	import ComponentHeader from './ComponentHeader.vue'
 
-	import ComponentBody from './ComponentBody.vue'
 
-	import ComponentFooter from './ComponentFooter.vue'
 
+	import ComponentHeader from './MusareHeader.vue'
 
+	import ComponentBody from './MusareBody.vue'
 
+	import ComponentFooter from './MusareFooter.vue'
 
 
 	export default {
 
 		data() {
 
@@ -23,7 +23,7 @@
 
 <style lang="sass">
 
 	@import 'node_modules/vuestrap/bootstrap/bootstrap';
 
 
-	* { box-sizing: border-box; }
 
+	* { box-sizing: border-box; font-family: Roboto, sans-serif; }
 
 	html {
 
 		width: 100%;
 
 		height: 100%;

+ 0 - 25
frontend/components/ComponentFooter.vue
View File 

@@ -1,25 +0,0 @@
 
-<template>
 
-	<div class="footer">
 
-		{{ title }}	
-	</div>
 
-</template>
 
-
 
-<script>
 
-	export default {
 
-		data() {
 
-			return {
 
-				title: "MusareNode is using the newest of technologies (;"
 
-			}
 
-		}
 
-	}
 
-</script>
 
-
 
-<style lang="sass" scoped>
 
-	.footer	{
 
-		width: 100%;
 
-		height: 64px;
 
-		line-height: 64px;
 
-		text-align: center;
 
-		background-color: blue;
 
-	}
 
-</style>

+ 1 - 1
frontend/components/ComponentBody.vue → frontend/components/MusareBody.vue
View File 

@@ -1,6 +1,6 @@
 
 <template>
 
 	<div class="body">
 
-		{{ title }}	
+		{{ title }}
 
 	</div>
 
 </template>

+ 118 - 0
frontend/components/MusareFooter.vue
View File 

@@ -0,0 +1,118 @@
 
+<template>
 
+	<footer>
 
+		<div class="footer-left">
 
+			<div class="left-title">Stay Connected</div>
 
+			<div class="left-message">Follow us on social media or send us an email!</div>
 
+			<div class="left-icons">
 
+				<div class="icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>
 
+				<div class="icon"><i class="fa fa-facebook" aria-hidden="true"></i></div>
 
+				<div class="icon"><i class="fa fa-twitch" aria-hidden="true"></i></div>
 
+			</div>
 
+		</div>
 
+		<div class="footer-right">
 
+			<div class="right-links">
 
+				<div class="links-title">Links</div>
 
+				<a class="link">GitHub</a>
 
+				<a class="link">Feedback</a>
 
+				<a class="link">FAQ</a>
 
+				<a class="link">Terms</a>
 
+				<a class="link">Privacy</a>
 
+			</div>
 
+		</div>
 
+		<div class="footer-message">© Copyright Musare: 2015 - {{ new Date().getFullYear() }}</div>
 
+	</footer>
 
+</template>
 
+
 
+<script>
 
+	export default {
 
+		data() {
 
+			return {}
 
+		}
 
+	}
 
+</script>
 
+
 
+<style lang="sass" scoped>
 
+	footer {
 
+		width: 100%;
 
+		height: 200px;
 
+		background-color: #e0e0e0;
 
+		padding-top: 26px;
 
+
 
+		.footer-left {
 
+			float: left;
 
+			width: 50%;
 
+			height: 150px;
 
+			padding-left: 64px;
 
+
 
+			.left-title {
 
+				font-size: 25px;
 
+				color: #616161;
 
+				margin-bottom: 16px;
 
+			}
 
+
 
+			.left-message {
 
+				font-size: 15px;
 
+				color: #757575;
 
+				margin-bottom: 16px;
 
+			}
 
+
 
+			.left-icons {
 
+				.icon {
 
+					float: left;
 
+					font-size: 32px;
 
+					padding-right: 16px;
 
+					color: #757575;
 
+
 
+					&:hover {
 
+						cursor: pointer;
 
+						color: #222222;
 
+					}
 
+				}
 
+			}
 
+		}
 
+
 
+		.footer-right {
 
+			float: right;
 
+			width: 50%;
 
+			height: 150px;
 
+			padding-left: 64px;
 
+
 
+			.right-links {
 
+				float: right;
 
+				width: 200px;
 
+			}
 
+
 
+			.links-title {
 
+				float: right;
 
+				width: 200px;
 
+				font-size: 25px;
 
+				color: #616161;
 
+				margin-bottom: 8px;
 
+			}
 
+
 
+			.link {
 
+				float: right;
 
+				width: 200px;
 
+				clear: both;
 
+				font-size: 15px;
 
+				color: #757575;
 
+				margin-bottom: 2px;
 
+
 
+				&:hover {
 
+					cursor: pointer;
 
+					color: #222222;
 
+				}
 
+			}
 
+		}
 
+
 
+		.footer-message {
 
+			float: left;
 
+			width: 100%;
 
+			height: 50px;
 
+			line-height: 50px;
 
+			padding-left: 128px;
 
+			background-color: #d3d3d3;
 
+			color: #757575;
 
+		}
 
+	}
 
+</style>

+ 2 - 12
frontend/components/ComponentHeader.vue → frontend/components/MusareHeader.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
-	<div class="header">
 
+	<header>
 
 		<vs-navbar fixed="top" type="light" variant="default" full>
 
 			<a class="navbar-brand" href="#">Musare</a>
 
 			<vs-nav type="navbar" class="pull-xs-right">
 
@@ -15,7 +15,7 @@
 
 				</vs-nav-item>
 
 			</vs-nav>
 
 		</vs-navbar>
 
-	</div>
 
+	</header>
 
 </template>
 
 
 <script>
 
@@ -34,13 +34,3 @@
 
 		}
 
 	}
 
 </script>
 
-
 
-<style lang="sass" scoped>
 
-	.header {
 
-		width: 100%;
 
-		height: 64px;
 
-		line-height: 64px;
 
-		text-align: center;
 
-		background-color: red;
 
-	}
 
-</style>