Просмотр исходного кода

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

Tati 11 лет назад
Родитель
Сommit
2979506b22

BIN
frontend/css/colores.png


+ 6 - 2
frontend/css/styles.css

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

+ 2 - 67
frontend/index.html

@@ -24,73 +24,8 @@
 	</head>
 
 	<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>

+ 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>