more tweaks and added animation

sumanbh · Jul 27, 2016 · 19d7ff7 · 19d7ff7
1 parent 8ea5619
commit 19d7ff7
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -14,14 +14,15 @@
     <!--Import materialize.css-->
     <link type="text/css" rel="stylesheet" href="styles/materialize.min.css" media="screen,projection" />
 
+
     <!-- Our styles -->
     <link rel="stylesheet" href="styles/main.css" />
 
     <title>Faron Big • Trinklets for tomorrow</title>
 </head>
 
 <body>
-    <header>
+    <header autoscroll="true">
         <!-- Top navigation -->
         <nav class="nav-wrapper" style="background:#ffffff">
 
@@ -51,11 +52,11 @@
             <!-- Mobile side navbar below. Activates through custom.js -->
             <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
             <ul class="side-nav" id="mobile-demo">
-                <li><a ui-sref='home'>HOME</a></li>
+                <li><a href="#" ui-sref='home'>HOME</a></li>
                 <li><a ui-sref='shop({id:"squire"})'>SHOP</a></li>
                 <li><a ui-sref='projects'>PROJECTS</a></li>
                 <!-- <li><a ui-sref='story'>OUR STORY</a></li> -->
-                <li><a ui-sref='login'>LOG IN</a></li>
+                <!-- <li><a ui-sref='login'>LOG IN</a></li> -->
             </ul>
         </nav>
 
@@ -65,11 +66,12 @@
 
     <main class="site-main" role="main">
 
-        <ui-view class="well">
+        <div class="well" ui-view>
+          <!-- Indeterminate progress bar below; color white -->
             <div class="progress" style="background:none">
                 <div class="indeterminate" style="background:#ffffff"></div>
             </div>
-        </ui-view>
+        </div>
 
     </main>
 
@@ -151,6 +153,9 @@
     <script src="scripts/materialize.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
+    <!-- Angular animate -->
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
+
 
     <!--Our Script Files-->
     <script src="./scripts/app.js"></script>

diff --git a/scripts/app.js b/scripts/app.js
@@ -1 +1,8 @@
-angular.module('faronBig', ['ui.router']);
+var app = angular.module('faronBig', ['ui.router', 'ngAnimate']);
+
+// Make sure the browser scrolls to the top
+app.run(function($rootScope) {
+    $rootScope.$on('$stateChangeSuccess', function() {
+        document.body.scrollTop = document.documentElement.scrollTop = 0;
+    });
+})
diff --git a/scripts/homeCtrl.js b/scripts/homeCtrl.js
@@ -1,7 +1,7 @@
 var app = angular.module('faronBig');
 
 app.controller('homeCtrl', function(){
-
+  
 })
 
 app.directive('imgSlide', function() {

diff --git a/scripts/routs.js b/scripts/routs.js
@@ -36,3 +36,4 @@ angular.module('faronBig')
 
 
     });
+
diff --git a/styles/main.css b/styles/main.css
@@ -8,6 +8,33 @@ body {
 main {
     flex: 1 0 auto;
 }
+input[type]:focus:not([readonly]) {
+    border-bottom: 1px solid #5D3348;
+    box-shadow: 0 1px 0 0 #5D3348;
+}
+
+/*ngAnimate begins*/
+
+[ui-view].ng-enter, [ui-view].ng-leave {
+    position: absolute;
+    left: 0;
+    right: 0;
+    transition: all 1s ease;
+}
+[ui-view].ng-enter {
+    opacity: 0;
+    transform: scale3d(.96, .96, .96);
+}
+[ui-view].ng-enter-active {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+}
+[ui-view].ng-leave-active {
+    opacity: 0;
+}
+
+/*ngAnimate ends here*/
+
 .nav-wrapper {
     height: 68px;
 }
@@ -311,21 +338,19 @@ footer.page-footer .footer-copyright {
     margin-left: 10%;
     width: auto;
 }
-
 .projects-bottom #mc_embed_signup input.email {
-  width: 75%;
+    width: 75%;
 }
 .projects-bottom #mc_embed_signup_scroll {
-  display: flex;
+    display: flex;
 }
-
 @media (max-width:601px) {
-  .projects-bottom {
-    margin-top: 20px;
-  }
-  .projects-bottom h5{
-    margin-left: 0 !important;
-  }
+    .projects-bottom {
+        margin-top: 20px;
+    }
+    .projects-bottom h5 {
+        margin-left: 0 !important;
+    }
     .projects-bottom #mc_embed_signup {
         margin: 0;
     }

diff --git a/views/home.html b/views/home.html
@@ -1,3 +1,4 @@
+
 <section class="home-container">
     <!-- Slider and main images -->
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,4 @@

		<section class="home-container">
		<!-- Slider and main images -->

Expand Down