Halaman utama Jelajahi Bantuan
Masuk
david
/
especificos-videos
1
0
Fork 0
Berkas Masalah 0 Tarik Permintaan 0 Wiki
Jelajahi Sumber

Add styles for tabs and cut section

tati 10 tahun lalu
induk
36885d46ec
melakukan
4a2b57f260
7 mengubah file dengan 124 tambahan dan 74 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 9 2
      front/app.js
  2. 51 12
      front/css/style.css
  3. 8 11
      front/index.html
  4. 34 20
      front/views/cut.html
  5. 0 2
      front/views/jobs.html
  6. 0 2
      front/views/processed.html
  7. 22 25
      front/views/raw.html

+ 9 - 2
front/app.js
Tampilan Berkas 

@@ -1,4 +1,4 @@
 
-var app = angular.module('app', ['ngRoute', 'ui.bootstrap', 'cgNotify']); 
+var app = angular.module('app', ['ngRoute', 'ui.bootstrap', 'cgNotify']);
 
 
 app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
 
 	$locationProvider.html5Mode(true);
 
@@ -22,7 +22,7 @@ app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $lo
 
 			video: function($http,$route) {
 
 				return $http.get('/back/raw/' + $route.current.params.id).then(
 
 					function(data) {
 
-						return data.data; 
+						return data.data;
 
 					});
 
 			}
 
 			}
 
@@ -31,3 +31,10 @@ app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $lo
 
 		redirectTo: '/'
 
 	});
 
 }]);
 
+
 
+app.controller('videotabs', ['$scope', function ($scope) {
 
+	$scope.activeTab = 'raw';
 
+	$scope.changeTab = function(tab){
 
+		$scope.activeTab = tab;
 
+	}
 
+}]);

+ 51 - 12
front/css/style.css
Tampilan Berkas 

@@ -67,9 +67,9 @@ a:focus{ color:white !important; }
 
 	margin-left: 0px;
 
 	float:left;
 
 }
 
-.labelblock label { 
-	display:inline-block; 
-	min-width: 90px; 
+.labelblock label {
 
+	display:inline-block;
 
+	min-width: 90px;
 
 	margin-bottom: 5px;
 
 	font-size:15px;
 
 }
 
@@ -91,14 +91,14 @@ a:focus{ color:white !important; }
 
 #cantidad { width:60px; }
 
 
 .form-control{
 
-    height: 25px; 
-    width: 100%; 
-    background-color: transparent;  
-    border-style: solid;  
-    border-width: 0px 0px 1px 0px;  
-    border-color: #324875; 
-    outline:0; 
-} 
+    height: 25px;
 
+    width: 100%;
 
+    background-color: transparent;
 
+    border-style: solid;
 
+    border-width: 0px 0px 1px 0px;
 
+    border-color: #324875;
 
+    outline:0;
 
+}
 
 
 h1{
 
 	color: #324875;
 
@@ -215,7 +215,46 @@ text-align: center;
 
 	@page {
 
 		size: A4 portrait;
 
 		margin: 6mm 6mm 6mm 6mm;
 
-		
+
 
 	}
 
 
 }
 
+
 
+ul.video-tabs{
 
+	list-style-type: none;
 
+    margin: 0;
 
+    padding: 0;
 
+    overflow: hidden;
 
+	background-color: #324875;
 
+	margin-bottom: 10px;
 
+}
 
+
 
+ul.video-tabs li {
 
+    float: left;
 
+}
 
+
 
+ul.video-tabs li a {
 
+	color: white;
 
+    display: block;
 
+    text-align: center;
 
+    padding: 14px 16px;
 
+    text-decoration: none;
 
+}
 
+
 
+ul.video-tabs li a:hover {
 
+    background-color: #337ab7;
 
+}
 
+
 
+ul.video-tabs li a.active-tab {
 
+	background-color: #337ab7;
 
+}
 
+
 
+button.btn-send {
 
+	background-color: #324875;
 
+	color: white
 
+}
 
+
 
+button.btn-send:hover{
 
+	background-color: #337ab7;
 
+	color: white
 
+}

+ 8 - 11
front/index.html
Tampilan Berkas 

@@ -4,11 +4,11 @@
 
 	<title>Videos</title>
 
 	<meta charset="utf-8">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 
-	
+
 
 	<link rel="styleSheet" href="/css/style.css"/>
 
 	<link rel="styleSheet" href="/css/bootstrap.min.css"/>
 
 	<link rel="styleSheet" href="/js/angular-notify/dist/angular-notify.css"/>
 
-	
+
 
 	<script type="text/javascript" src="/js/angular.min.js"></script>
 
 	<script type="text/javascript" src="/js/ui-bootstrap-tpls-0.13.4.min.js"></script>
 
 	<script type="text/javascript" src="/js/angular-route.min.js"></script>
 
@@ -21,19 +21,16 @@
 
 <body>
 
 	<div class="navbar">
 
 		<div class="nav-wrap">
 
-				<img src="images/logo-h.png">
 
-				<li>
 
-					<ul>
 
-						<a href="/">
 
-							TAB RAW 
-						</a>
 
-					</ul>
 
-					<ul><a href="/jobs">TAB JOBS</a></ul>
 
-					<ul><a href="/processed">TAB PROCESADO</a></ul>
 
+			<img src="images/logo-h.png">
 
 		</div>
 
 	</div>
 
 	<div class="clear"></div>
 
 	<div class="container">
 
+		<ul class="video-tabs" ng-controller="videotabs">
 
+			<li><a href="/" ng-class="{'active-tab':activeTab==='raw'}" ng-click="changeTab('raw')">RAW</a></li>
 
+			<li><a href="/jobs" ng-class="{'active-tab':activeTab==='jobs'}" ng-click="changeTab('jobs')">JOBS</a></li>
 
+			<li><a href="/processed" ng-class="{'active-tab':activeTab==='finish'}" ng-click="changeTab('finish')">PROCESADO</a></li>
 
+		</ul>
 
 		<div ng-view=""></div>
 
 	</div>
 
 </body>

+ 34 - 20
front/views/cut.html
Tampilan Berkas 

@@ -3,29 +3,43 @@
 
 	<div class="row">
 
 		<div class="col-md-6">
 
 			<video id="video" width="100%" controls preload>
 
-				<source src="{{video.file}}" type="video/mp4"> 
+				<source src="{{video.file}}" type="video/mp4">
 
 				Error. Video no soportado
 
 			</video>
 
 		</div>
 
 		<div class="col-md-6">
 
-			<label>
 
-				Inicio:
 
-				<input ng-model="inicio" type="text">
 
-			</label>
 
-			<label>
 
-				Fin:
 
-				<input ng-model="fin" type="text">
 
-			</label>
 
-			<label>
 
-				Curso:
 
-				<input ng-model="curso" type="text">
 
-			</label>
 
-			<label>
 
-				Desc:
 
-				<input ng-model="desc" type="text">
 
-			</label>
 
-			<button ng-click="setStart()">Inicio</button>
 
-			<button ng-click="setEnd()">Fin</button>
 
-			<button ng-click="post()">Enviar</button>
 
+			<div class="row">
 
+				<div class="col-md-6">
 
+					<div class="form-group">
 
+					    <label>Inicio</label>
 
+					    <input type="text" class="form-control" placeholder="inicio">
 
+					</div>
 
+				</div>
 
+				<div class="col-md-6">
 
+					<div class="form-group">
 
+					    <label>Fin</label>
 
+					    <input type="text" class="form-control" placeholder="inicio">
 
+					</div>
 
+				</div>
 
+			</div>
 
+
 
+			<div class="row">
 
+				<div class="col-md-6">
 
+					<div class="form-group">
 
+					    <label>Curso</label>
 
+					    <input type="text" class="form-control" placeholder="inicio">
 
+					</div>
 
+				</div>
 
+				<div class="col-md-6">
 
+					<div class="form-group">
 
+					    <label>Descripcion</label>
 
+					    <input type="text" class="form-control" placeholder="inicio">
 
+					</div>
 
+				</div>
 
+			</div>
 
+
 
+			<button ng-click="setStart()" class="btn btn-default">Inicio</button>
 
+			<button ng-click="setEnd()" class="btn btn-default">Fin</button>
 
+			<button ng-click="post()" class="btn btn-default btn-send">Enviar</button>
 
 		</div>
 
 </div>

+ 0 - 2
front/views/jobs.html
Tampilan Berkas 

@@ -1,5 +1,4 @@
 
 <div>
 
-JOBS
 
 <table class="table table-striped">
 
 	<tr>
 
 		<th>Inicio</th>
 
@@ -23,4 +22,3 @@ JOBS
 
 	</tr>
 
 </table>
 
 </div>
 
-

+ 0 - 2
front/views/processed.html
Tampilan Berkas 

@@ -1,5 +1,4 @@
 
 <div>
 
-Procesados
 
 <table class="table table-striped">
 
 	<tr>
 
 		<th>Fecha</th>
 
@@ -27,4 +26,3 @@ Procesados
 
 	</tr>
 
 </table>
 
 </div>
 
-

+ 22 - 25
front/views/raw.html
Tampilan Berkas 

@@ -1,27 +1,24 @@
 
 <div>
 
-RAW
 
-<button class="btn">SUBIR</button>
 
-<table class="table table-striped">
 
-	<tr>
 
-		<th>Fecha</th>
 
-		<th>Archivo</th>
 
-		<th>Duracion</th>
 
-		<th>Editar</th>
 
-	</tr>
 
-	<tr ng-repeat="r in rawlist">
 
-		<td>
 
-			{{r.date}}
 
-		</td>
 
-		<td>
 
-			{{r.file}}
 
-		</td>
 
-		<td>
 
-			{{r.length}}
 
-		</td>
 
-		<td>
 
-			<a ng-href="/#/cut/{{r._id}}">editar</a>
 
-		</td>
 
-	</tr>
 
-</table>
 
+	<table class="table table-striped">
 
+		<tr>
 
+			<th>Fecha</th>
 
+			<th>Archivo</th>
 
+			<th>Duracion</th>
 
+			<th>Editar</th>
 
+		</tr>
 
+		<tr ng-repeat="r in rawlist">
 
+			<td>
 
+				{{r.date | date:'dd/MM/yy HH:mm'}}
 
+			</td>
 
+			<td>
 
+				{{r.file}}
 
+			</td>
 
+			<td>
 
+				{{r.length}}
 
+			</td>
 
+			<td>
 
+				<a ng-href="/#/cut/{{r._id}}">editar</a>
 
+			</td>
 
+		</tr>
 
+	</table>
 
 </div>
 
-