played around with layout

client/static/index.html

@@ -16,10 +16,6 @@ md-card h2:first-of-type {
   margin-top: 0;
 }
 
-md-toolbar .md-button.md-default-theme {
-  border-radius: 99%;
-}
-
 h2 {
   font-weight: 400;
 }
@@ -30,7 +26,52 @@ h2 {
 .md-toolbar-tools-bottom :last-child {
   opacity: 0.8;
 }
- </style>
+
+#status {
+color: #c60008;
+}
+
+/* The starting CSS styles for the enter animation */
+.fade.ng-enter {
+  transition:0.5s linear all;
+  opacity:0;
+}
+
+/* The finishing CSS styles for the enter animation */
+.fade.ng-enter.ng-enter-active {
+  opacity:1;
+}
+
+/* now the element will fade out before it is removed from the DOM */
+.fade.ng-leave {
+  transition:0.5s linear all;
+  opacity:1;
+}
+.fade.ng-leave.ng-leave-active {
+  opacity:0;
+}
+
+section {
+  background: #ffffff;
+  border-radius: 3px;
+  text-align: center;
+  margin: 0.5em;
+  position: relative !important;
+  padding-bottom: 5px; }
+
+section .md-button {
+  margin-top: 10px;
+margin-bottom: 1px; }
+
+.label {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  font-size: 14px;
+  opacity: 0.84; }
+
+
+</style>
     
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -55,32 +96,49 @@ h2 {
         </md-button>
       </div>
     </md-toolbar>
+    
     <md-content flex md-scroll-y>
       <ui-view layout="column" layout-fill layout-padding>
-        <div class="inset" hide-sm></div>
-        <div role="tabpanel" id="tab1-content" aria-labelledby="tab1" layout="row" layout-align="center center">
-          <md-card flex-gt-sm="90" flex-gt-md="80">
-            <md-card-content>
-              <h2 ng-show=true>Current status: {{status}}</h2>
-              <md-button class="md-fab" aria-label="To start of file">
-            <<
-              </md-button>
-            <md-button class="md-fab" aria-label="Back 1 min">
+
+	  <md-button class="md-raised md-primary" ng-click="pause()">Pause</md-button>
+
+	<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+	  <div class="label">Skip</div>
+           <md-button class="md-fab" aria-label="Back 1 min" ng-click="back()">
             <
             </md-button>
 
-              <md-button class="md-fab" aria-label="Pause">
-                ||
-              </md-button>
             <md-button class="md-fab" aria-label="Forward 1 min" ng-click="forward()">
             >
             </md-button>
-              <md-button class="md-fab" aria-label="To end of file">
-            >>
+	</section>
+	
+	      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+		<div class="label">Chapter</div>
+            <md-button class="md-fab" aria-label="">
+            <
+            </md-button>
+              <md-button class="md-fab" aria-label="">
+            >
+              </md-button>
+	      </section>
+
+	
+	      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+		<div class="label">Volume</div>
+            <md-button class="md-fab" aria-label="">
+            -
+            </md-button>
+              <md-button class="md-fab" aria-label="">
+            +
               </md-button>
-            </md-card-content>
-          </md-card>
-        </div>
+	      </section>
+	
+	 <div class="ng-scope fade" ng-if="status" id="status">
+	   <b layout="row" layout-align="center center" class="md-padding ng-binding layout-align-center-center layout-row">
+	     {{status}}
+    </b>
+  </div>
 
       </ui-view>
     </md-content>
@@ -95,17 +153,27 @@ h2 {
       <script type="text/javascript">
 var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']);
 
-app.controller('MpvRemote', ['$scope', '$mdBottomSheet', '$http', function($scope, $mdBottomSheet, $http){
-  $scope.status = 'Playing';
-$scope.alert = 'FFFFF';
+app.controller('MpvRemote', ['$scope', '$mdBottomSheet', '$http', '$timeout', function($scope, $mdBottomSheet, $http, $timeout){
+
+// functions
+var showStatus = function(text) {
+  $scope.status = text;
+  $timeout(function() {$scope.status = ''; }, 2000);
+};
+
+$scope.status = '';
+
+$scope.alert = '';
+$scope.back = function() {}
+$scope.pause = function() {}
 $scope.forward = function() {
 $http({
   method: 'GET',
   url: '/seek/10'
 }).then(function successCallback(response) {
-alert("success");
+  showStatus("Forward: Success");
 }, function errorCallback(response) {
-alert("fail");
+  showStatus("Forward: Error");
   });
     }
   $scope.showListBottomSheet = function($event) {
@@ -143,7 +211,7 @@ app.config(function($mdThemingProvider) {
       'default': '500',
       'hue-1': '50'
     })
-    .accentPalette('pink');
+    .accentPalette('red');
   $mdThemingProvider.theme('input', 'default')
         .primaryPalette('grey');
 });