#12 complete

BioQwer · Apr 12, 2016 · 1329ad8 · 1329ad8
1 parent 660297a
commit 1329ad8
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 17 deletions.
diff --git a/app/index.html b/app/index.html
@@ -33,29 +33,32 @@
     </div>
   </div>
 </nav>
-<div class="container" ng-app="app">
-  <div ng-view></div>
-  <br>
+<div ng-app="app">
+  <div class="vertical-center">
 
-  <div ng-controller="GeneralController as vm">
-    <div class="col-md-1">
-      <button class="btn-primary btn" ng-click="vm.changeLanguage()">{{'CHANGE_LANGUAGE_BUTTON'|translate}}</button>
+    <div ng-view>
     </div>
-    <div class="col-md-10"></div>
-    <div class="col-md-1">
-      <button class="btn btn-primary" ng-click="vm.changeMute()" style="float: right;"><span class="glyphicon" ng-class="vm.changeTo"></span></button>
-    </div>
-  </div>
 
+  </div>
+  <footer>
+    <div ng-controller="GeneralController as vm" class="container">
+      <div class="col-md-1">
+        <button class="btn-primary btn" ng-click="vm.changeLanguage()">{{'CHANGE_LANGUAGE_BUTTON'|translate}}</button>
+      </div>
+      <div class="col-md-10"></div>
+      <div class="col-md-1">
+        <button class="btn btn-primary" ng-click="vm.changeMute()" style="float: right;"><span class="glyphicon"
+                                                                                               ng-class="vm.changeTo"></span>
+        </button>
+      </div>
+    </div>
+    <div class="container">
+      <p class="text-muted" align="center">©2016 VATECH. All Rights Reserved.</p>
+    </div>
+  </footer>
 </div>
 
 
-<footer class="footer">
-  <div class="container">
-    <p class="text-muted" align="center">©2016 VATECH. All Rights Reserved.</p>
-  </div>
-</footer>
-
 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->

diff --git a/app/styles/hover.css b/app/styles/hover.css
@@ -12,3 +12,58 @@
 .alert{
   margin-bottom: 1%;
 }
+
+.vertical-center {
+  min-height: 88%;  /* Fallback for vh unit */
+  min-height: 88vh; /* You might also want to use
+                        'height' property instead.
+
+                        Note that for percentage values of
+                        'height' or 'min-height' properties,
+                        the 'height' of the parent element
+                        should be specified explicitly.
+
+                        In this case the parent of '.vertical-center'
+                        is the <body> element */
+
+  /* Make it a flex container */
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+
+  /* Align the bootstrap's container vertically */
+  -webkit-box-align : center;
+  -webkit-align-items : center;
+  -moz-box-align : center;
+  -ms-flex-align : center;
+  align-items : center;
+
+  /* In legacy web browsers such as Firefox 9
+     we need to specify the width of the flex container */
+  width: 100%;
+
+  /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
+     hence the bootstrap's container won't be aligned to the center anymore.
+
+     Therefore, we should use the following declarations to get it centered again */
+  -webkit-box-pack : center;
+  -moz-box-pack : center;
+  -ms-flex-pack : center;
+  -webkit-justify-content : center;
+  justify-content : center;
+}
+
+.vertical-align {
+  display: flex;
+  flex-direction: row;
+}
+
+.vertical-align > [class^="col-"],
+.vertical-align > [class*=" col-"] {
+  display: flex;
+  align-items: center;
+  justify-content: center; /* Optional, to align inner items
+                              horizontally inside the column */
+}