Главная Обзор Помощь
Вход
tati
/
Autismify
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

cambios en navbar y sidevar -> ahora estan en un ng-include para mantener el orden en index.html

Tati 11 лет назад
Родитель
a813711f95
Сommit
2979506b22
5 измененных файлов с 70 добавлено и 69 удалено
Единый вид Показать статистику Diff
  1. BIN
      frontend/css/colores.png
  2. 6 2
      frontend/css/styles.css
  3. 2 67
      frontend/index.html
  4. 35 0
      frontend/modules/navbar/navbar.html
  5. 27 0
      frontend/modules/sidebar/sidebar.html

BIN
frontend/css/colores.png
Просмотреть файл


+ 6 - 2
frontend/css/styles.css
Просмотреть файл 

@@ -58,8 +58,11 @@ body, html{
 
 }
 
 }
 
 
 
 .sidebar{
 
 .sidebar{
 
+  position: fixed;
 
+  width: 220px;
 
+  z-index: 100;
 
   height: 100%;
 
   height: 100%;
 
-  padding-right: 0px;
 
+  margin-top: 50px;
 
 }
 
 }
 
 .side-nav>li>ul {
 
 .side-nav>li>ul {
 
     padding: 0;
 
     padding: 0;
 
@@ -90,5 +93,6 @@ body, html{
 
   margin-left: -15px;
 
   margin-left: -15px;
 
   padding-left: 0px;
 
   padding-left: 0px;
 
   background-color: #BEC3CC;
 
   background-color: #BEC3CC;
 
-}
 
+  position: fixed;
 
+  margin-top: 50px;
 
 }
 
 }

+ 2 - 67
frontend/index.html
Просмотреть файл 

@@ -24,73 +24,8 @@
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
-		<!-- Navigation -->
 
-		<nav class="navbar navbar-inverse navbar-blue">
 
-		  <div class="container-fluid">
 
-			<!-- Brand and toggle get grouped for better mobile display -->
 
-			<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="#"><i class="fa fa-music"></i></a>
 
-			</div>
 
-
 
-			<!-- Collect the nav links, forms, and other content for toggling -->
 
-			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
-			  <ul class="nav navbar-nav">
 
-				<li><a href="/artists"><i class="fa fa-user fa-fw"></i> Artist</a></li>
 
-				<li><a href="/albums"><i class="fa fa-user fa-fw"></i> Album</a></li>
 
-				<li><a href="#"><i class="fa fa-list fa-fw"></i> Playlist</a></li>
 
-			  </ul>
 
-			  <form class="navbar-form navbar-left form-inline" role="search">
 
-					<div class="form-group">
 
-						<div class="input-group">
 
-							<input type="text" class="form-control" placeholder="Search">
 
-							<div class="input-group-addon "><i class="fa fa-search"></i></div>
 
-						</div>
 
-					</div>
 
-			  </form>
 
-			  <ul class="nav navbar-nav navbar-right">
 
-				<li><a href="#"><i class="fa fa-cog"></i> Preferences</a></li>
 
-			  </ul>
 
-			</div><!-- /.navbar-collapse -->
 
-		  </div><!-- /.container-fluid -->
 
-		</nav>
 
-		<div class="row main-content">
 
-			<div class="col-md-2 sidebar">
 
-				<ul class="nav navbar-nav side-nav">
 
-	                <li class="active">
 
-	                    <a href="#"><i class="fa fa-volume-up"></i> Now Playing</a>
 
-	                </li>
 
-	                <li>
 
-	                    <a href="#"><i class="fa fa-bars"></i> Queue</a>
 
-	                </li>
 
-	                <li>
 
-	                    <a href="#"><i class="fa fa-folder"></i> Folders</a>
 
-	                </li>
 
-	                <li>
 
-	                    <a href="#"><i class="fa fa-asterisk"></i> Recently Added</a>
 
-	                </li>
 
-	                <li>
 
-	                    <a href="#"><i class="fa fa-bar-chart-o"></i> Statistics</a>
 
-	                </li>
 
-            	</ul>
 
-			</div>
 
-			<div class="col-md-10">
 
-				<ng-include src="'modules/player/player.html'"></ng-include>		
-				<div style="margin-top:50px">
 
-				<div ng-view=""></div>
 
-				</div>
 
-			</div>
 
-		</div>
 
-		<nav class="navbar navbar-inverse navbar-blue navbar-fixed-bottom">
 
-			  <div class="container">
 
-			    ...
 
-			  </div>
 
-		</nav>
 
+		<ng-include src="'modules/navbar/navbar.html'"></ng-include>		
+		<ng-include src="'modules/sidebar/sidebar.html'"></ng-include>
 
 	<!-- 	<div class="collapse navbar-collapse navbar-ex1-collapse">
 
 	<!-- 	<div class="collapse navbar-collapse navbar-ex1-collapse">
 
             
             
     	</div>
 
     	</div>

+ 35 - 0
frontend/modules/navbar/navbar.html
Просмотреть файл 

@@ -0,0 +1,35 @@
 
+<!-- Navigation -->
 
+<nav class="navbar navbar-inverse navbar-blue navbar-fixed-top">
 
+  <div class="container-fluid">
 
+	<!-- Brand and toggle get grouped for better mobile display -->
 
+	<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="#"><i class="fa fa-music"></i></a>
 
+	</div>
 
+
 
+	<!-- Collect the nav links, forms, and other content for toggling -->
 
+	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
+	  <ul class="nav navbar-nav">
 
+		<li><a href="/artists"><i class="fa fa-user fa-fw"></i> Artist</a></li>
 
+		<li><a href="/albums"><i class="fa fa-user fa-fw"></i> Album</a></li>
 
+		<li><a href="#"><i class="fa fa-list fa-fw"></i> Playlist</a></li>
 
+	  </ul>
 
+	  <form class="navbar-form navbar-left form-inline" role="search">
 
+			<div class="form-group">
 
+				<div class="input-group">
 
+					<input type="text" class="form-control" placeholder="Search">
 
+					<div class="input-group-addon "><i class="fa fa-search"></i></div>
 
+				</div>
 
+			</div>
 
+	  </form>
 
+	  <ul class="nav navbar-nav navbar-right">
 
+		<li><a href="#"><i class="fa fa-cog"></i> Preferences</a></li>
 
+	  </ul>
 
+	</div><!-- /.navbar-collapse -->
 
+  </div><!-- /.container-fluid -->
 
+</nav>

+ 27 - 0
frontend/modules/sidebar/sidebar.html
Просмотреть файл 

@@ -0,0 +1,27 @@
 
+<div class="row main-content">
 
+	<div class="col-md-2 sidebar">
 
+		<ul class="nav navbar-nav side-nav">
 
+            <li class="active">
 
+                <a href="#"><i class="fa fa-volume-up"></i> Now Playing</a>
 
+            </li>
 
+            <li>
 
+                <a href="#"><i class="fa fa-bars"></i> Queue</a>
 
+            </li>
 
+            <li>
 
+                <a href="#"><i class="fa fa-folder"></i> Folders</a>
 
+            </li>
 
+            <li>
 
+                <a href="#"><i class="fa fa-asterisk"></i> Recently Added</a>
 
+            </li>
 
+            <li>
 
+                <a href="#"><i class="fa fa-bar-chart-o"></i> Statistics</a>
 
+            </li>
 
+    	</ul>
 
+	</div>
 
+	<div class="col-md-10">
 
+		<ng-include src="'modules/player/player.html'"></ng-include>		
+		<div style="margin-top:50px">
 
+		<div ng-view=""></div>
 
+		</div>
 
+	</div>
 
+</div>