홈 탐색 도움말
로그인
owen
/
MusareNode
1
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

Added local copies of Bootstrap and jQuery, Recreated header with Bootstrap

theflametrooper 8 년 전
부모
2707e70572
커밋
bf26aa0440
15개의 변경된 파일과 75개의 추가작업 그리고 121개의 파일을 삭제
분할 보기 변경상태 보기
  1. 1 1
      .gitignore
  2. 0 2
      bootstrap.sh
  3. 8 4
      frontend/build/index.html
  4. 4 0
      frontend/build/vendor/bootstrap.min.css
  5. 5 0
      frontend/build/vendor/bootstrap.min.js
  6. 1 0
      frontend/build/vendor/jquery.min.js
  7. 3 3
      frontend/components/App.vue
  8. 0 0
      frontend/components/HomeBody.vue
  9. 0 8
      frontend/components/MainFooter.vue
  10. 45 16
      frontend/components/MainHeader.vue
  11. 6 6
      frontend/components/Station.Vue
  12. 1 2
      frontend/main.js
  13. 1 1
      frontend/package.json
  14. 0 12
      frontend/scss/Main.scss
  15. 0 66
      frontend/scss/Navbar.scss

+ 1 - 1
.gitignore
파일 보기 

@@ -10,4 +10,4 @@ backend/config/default.json
 
 
 # Front End
 
 frontend/node_modules/
 
-frontend/build/
 
+frontend/build/bundle.js

+ 0 - 2
bootstrap.sh
파일 보기 

@@ -91,12 +91,10 @@ fi
 
 cd /musare
 
 
 cd backend
 
-rm -rf node_modules/
 
 npm install --no-bin-links && npm prune
 
 cd ../
 
 
 cd frontend
 
-rm -rf node_modules/
 
 npm install --no-bin-links && npm prune
 
 cd ../

+ 8 - 4
frontend/build/index.html
파일 보기 

@@ -5,12 +5,16 @@
 
 	<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">
 
-	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
+	<!--<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">-->
 
+	<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
 
+	<!-- Bootstrap -->
 
+	<link rel="stylesheet" href="./vendor/bootstrap.min.css">
 
+	<script src="./vendor/jquery.min.js"></script>
 
+	<script src="./vendor/bootstrap.min.js"></script>
 
 </head>
 
 <body>
 
-	<Station></Station>
 
+	<App></App>
 
 	<script src="bundle.js"></script>
 
 </body>
 
 </html>

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 4 - 0
frontend/build/vendor/bootstrap.min.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 5 - 0
frontend/build/vendor/bootstrap.min.js


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 1 - 0
frontend/build/vendor/jquery.min.js


+ 3 - 3
frontend/components/App.vue
파일 보기 

@@ -8,9 +8,9 @@
 
 
 <script>
 
 	// TODO: Implement these files
 
-	import ComponentHeader from './MusareHeader.vue'
 
-	import ComponentBody from './MusareBody.vue'
 
-	import ComponentFooter from './MusareFooter.vue'
 
+	import ComponentHeader from './MainHeader.vue'
 
+	import ComponentBody from './HomeBody.vue'
 
+	import ComponentFooter from './MainFooter.vue'
 
 
 	export default {
 
 		data() {

+ 0 - 0
frontend/components/HomepageBody.vue → frontend/components/HomeBody.vue
파일 보기


+ 0 - 8
frontend/components/MainFooter.vue
파일 보기 

@@ -23,14 +23,6 @@
 
 	</footer>
 
 </template>
 
 
-<script>
 
-	export default {
 
-		data() {
 
-			return {}
 
-		}
 
-	}
 
-</script>
 
-
 
 <style lang="sass" scoped>
 
 	footer {
 
 		width: 100%;

+ 45 - 16
frontend/components/MainHeader.vue
파일 보기 

@@ -1,24 +1,53 @@
 
 <template>
 
-	<header>
 
-		<div class="header-inner header-gray">
 
-			<div class="title link">Musare</div>
 
-			<div class="link">Account&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></div>
 
-			<div class="link">Donate</div>
 
-			<div class="link">The Project</div>
 
+	<nav class="navbar navbar-default">
 
+		<div class="container-fluid">
 
+			<div class="navbar-header">
 
+				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 
+					<span class="sr-only">Toggle navigation</span>
 
+					<span class="icon-bar"></span>
 
+					<span class="icon-bar"></span>
 
+					<span class="icon-bar"></span>
 
+				</button>
 
+				<a class="navbar-brand" href="#">Musare</a>
 
+			</div>
 
+			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
+				<ul class="nav navbar-nav navbar-right">
 
+					<li><a href="#">The Project</a></li>
 
+					<li><a href="#">Donate</a></li>
 
+					<li><a href="#">Login</a></li>
 
+				</ul>
 
+			</div>
 
 		</div>
 
-	</header>
 
+	</nav>
 
 </template>
 
 
-<script>
 
-	export default {
 
-		data() {
 
-			return {
 
-				title: "Musare ;)"
 
-			}
 
+<style lang="sass" scoped>
 
+	.navbar-default {
 
+		background-color: #424242;
 
+		border: 0;
 
+		border-radius: 0;
 
+		margin: 0;
 
+
 
+		.navbar-brand, li a, li a:hover, li a:focus {
 
+			color: #fff;
 
 		}
 
-	}
 
-</script>
 
 
-<style lang="sass" scoped>
 
+		li:hover {
 
+			background-color: #393939;
 
+			color: #fff;
 
+		}
 
 
+		.navbar-toggle, .navbar-toggle:hover, .navbar-toggle:focus {
 
+			border: 0;
 
+			background: 0;
 
+
 
+			.icon-bar {
 
+				background-color: #fff;
 
+			}
 
+		}
 
+
 
+		.navbar-collapse {
 
+			border: 0;
 
+		}
 
+	}
 
 </style>

+ 6 - 6
frontend/components/Station.Vue
파일 보기 

@@ -20,9 +20,9 @@
 
 </template>
 
 
 <script>
 
-	import ComponentHeader from './MusareHeader.vue'
 
-	import ComponentBody from './MusareBody.vue'
 
-	import ComponentFooter from './MusareFooter.vue'
 
+	import ComponentHeader from './MainHeader.vue'
 
+	import ComponentBody from './HomepageBody.vue'
 
+	import ComponentFooter from './MainFooter.vue'
 
 
 	export default {
 
 		data() {
 
@@ -34,9 +34,9 @@
 
 
 <style lang="sass">
 
 	.body {
 
-		/*width: 100%;
 
-		line-height: 256px;
 
-		text-align: center;*/
 
+		// width: 100%;
 
+		// line-height: 256px;
 
+		text-align: center;
 
 		background-color: green;
 
 		flex: 1 0 auto;
 
 		padding-top: 4.5vw;

+ 1 - 2
frontend/main.js
파일 보기 

@@ -1,5 +1,4 @@
 
 import Vue from 'vue';
 
 import App from './components/App.vue';
 
-import Station from './components/Station.vue';
 
 
-new Vue({ el: 'body', components: { Station } });
 
+new Vue({ el: 'body', components: { App } });

+ 1 - 1
frontend/package.json
파일 보기 

@@ -18,6 +18,7 @@
 
     "babel-runtime": "^6.11.6",
 
     "css-loader": "^0.25.0",
 
     "eslint": "^3.4.0",
 
+    "eslint-plugin-html": "^1.5.2",
 
     "eslint-loader": "^1.5.0",
 
     "node-sass": "^3.9.3",
 
     "sass-loader": "^4.0.2",
 
@@ -29,7 +30,6 @@
 
     "webpack-dev-server": "^1.15.1"
 
   },
 
   "dependencies": {
 
-    "eslint-plugin-html": "^1.5.2",
 
     "vue": "^1.0.26"
 
   }
 
 }

+ 0 - 12
frontend/scss/Main.scss
파일 보기 

@@ -1,12 +0,0 @@
 
-* { box-sizing: border-box; font-family: Roboto, sans-serif; }
 
-
 
-html {
 
-	width: 100%;
 
-	height: 100%;
 
-	body {
 
-		width: 100%;
 
-		height: 100%;
 
-		margin: 0;
 
-		padding: 0;
 
-	}
 
-}

+ 0 - 66
frontend/scss/Navbar.scss
파일 보기 

@@ -1,66 +0,0 @@
 
-header {
 
-	width: 100%;
 
-	height: 64px;
 
-	line-height: 64px;
 
-	text-align: center;
 
-	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 
-}
 
-
 
-.header-gray {
 
-	background-color: #424242;
 
-	.link:hover {
 
-		background-color: #393939;
 
-	}
 
-}
 
-
 
-.header-blue {
 
-	background-color: #0091ea;
 
-	.link:hover {
 
-		background-color: rgba(0, 0, 0, 0.1);
 
-	}
 
-}
 
-
 
-.header-inner {
 
-	width: 100%;
 
-	height: 100%;
 
-	.title {
 
-		font-weight: 300;
 
-		font-size: 32px;
 
-	}
 
-
 
-	* {
 
-		color: white;
 
-	}
 
-
 
-	.link {
 
-		z-index: 101;
 
-		position: relative;
 
-		padding: 0 16px 0 16px;
 
-		cursor: pointer;
 
-
 
-		height: 64px;
 
-		min-width: 64px;
 
-		line-height: 64px;
 
-		font-size: 2rem;
 
-		transition: background-color .3s;
 
-	}
 
-
 
-	.right {
 
-		float: right;
 
-	}
 
-
 
-	.left {
 
-		float: left;
 
-	}
 
-
 
-	i.material-icons {
 
-		display: block;
 
-		font-size: 2rem;
 
-		line-height: 64px;
 
-		height: 64px;
 
-	}
 
-
 
-	.title {
 
-		font-size: 1rem !important;
 
-	}
 
-}

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.