46 Fixing landing page

spry-group · Mar 24, 2017 · 625623f · 625623f
1 parent c5efe93
commit 625623f
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 42 deletions.
diff --git a/tr-site/src/app/home/home.component.html b/tr-site/src/app/home/home.component.html
@@ -1,18 +1,27 @@
+
 <body>
 <app-menu></app-menu>
 <div class="container home text-center">
-    <div class="home-text">
+  <div class="text-center">
+  <img class="logo-img trlogo" [src]="trashRadarLogo">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="">
         <h5>Directing your local public servants to trash that needs pickup!</h5>
         <p>
-            Have you found an area with a large buildup of uncollected trash?  Use this app to mark the location, upload photographs of the trash, and tweet a reminder to your local authorities to come pick it up.
+          Have you found an area with a large buildup of uncollected trash? Use this app to mark the location, upload
+          photographs of the trash, and tweet a reminder to your local authorities to come pick it up.
         </p>
+      </div>
     </div>
-    <div class="login-subscribe">
-        <button class="btn btn-outline-success my-2 my-sm-0">Login</button>
-        <button class="btn btn-outline-success my-2 my-sm-0">Subscribe</button>
-    </div>
-    <a class="alert-link" href="#">Terms and Conditions</a>
-    <h4>Sponsored By</h4>
-    <a [href]="spryGroupUrl"><img class="logo-img" [src]="spryGroupLogo"></a>
+  </div>
+  <div class="login-subscribe">
+    <button class="btn btn-outline-success my-2 my-sm-0">Login</button>
+    <button class="btn btn-outline-success my-2 my-sm-0">Subscribe</button>
+  </div>
+  <a class="alert-link" href="#">Terms and Conditions</a>
+  <h4>Sponsored By</h4>
+  <a [href]="spryGroupUrl"><img class="logo-img" [src]="spryGroupLogo"></a>
+</div>
 </div>
 </body>
diff --git a/tr-site/src/app/home/home.component.scss b/tr-site/src/app/home/home.component.scss
@@ -1,8 +1,8 @@
 @import "~bootstrap/scss/bootstrap";
 @import '../../styles/landing';
 
-body { 
-    padding-top: 65px; 
+body {
+    padding-top: 65px;
 }
 
 .home {

diff --git a/tr-site/src/app/landing/detail/detail.component.html b/tr-site/src/app/landing/detail/detail.component.html
@@ -1,18 +1,33 @@
-<div class="home text-center">
-    <svg version="1.1" class="trlogo" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 333.4" style="enable-background:new 0 0 750 333.4;" xml:space="preserve">
-        <g logo></g>
-    </svg>
-    <div class="home-text">
+<section id="about">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-12 text-center">
+        <svg version="1.1" class="trlogo" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 333.4" style="enable-background:new 0 0 750 333.4;" xml:space="preserve">
+          <g logo></g>
+        </svg>
         <h5>Directing your local public servants to trash that needs pickup!</h5>
-        <p>
-            Have you found an area with a large buildup of uncollected trash?  Use this app to mark the location, upload photographs of the trash, and tweet a reminder to your local authorities to come pick it up.
-        </p>
+      </div>
     </div>
-    <div class="login-subscribe">
-        <button routerLink="/login" class="btn btn-outline-success my-2 my-sm-0">Login</button>
-        <button class="btn btn-outline-success my-2 my-sm-0">Subscribe</button>
+    <div class="row">
+      <div class="col-lg-8 col-lg-offset-2">
+        <p>Have you found an area with a large buildup of uncollected trash? Use this app to mark the location, upload
+          photographs of the trash, and tweet a reminder to your local authorities to come pick it up.</p>
+      </div>
     </div>
-    <a class="alert-link" href="#">Terms and Conditions</a>
-    <h4>Sponsored By</h4>
-    <a [href]="spryGroupUrl"><img class="logo-img" src="./assets/img/spry-group-logo.png"></a>
-</div>
+    <div class="row text-center">
+      <div class="col-lg-4 col-lg-offset-4">
+        <div class="login-subscribe">
+          <button routerLink="/login" class="btn btn-outline-success my-2 my-sm-0">Login</button>
+          <button class="btn btn-outline-success my-2 my-sm-0">Subscribe</button>
+        </div>
+      </div>
+    </div>
+    <div class="row text-center">
+      <div class="col-lg-4 col-lg-offset-4">
+        <a class="alert-link" href="#">Terms and Conditions</a>
+        <h4>Sponsored By</h4>
+        <a [href]="spryGroupUrl"><img class="logo-img" src="./assets/img/spry-group-logo.png"></a>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/tr-site/src/app/landing/detail/detail.component.scss b/tr-site/src/app/landing/detail/detail.component.scss
@@ -1,9 +1,14 @@
-@import "~bootstrap/scss/bootstrap";
 @import '../../../styles/landing';
 
 .trlogo {
     width: 45%;
 }
+section#about {
+  padding: 4em;
+}
+.login-subscribe {
+  padding: 2em 0;
+}
 
 g[logo] {
   fill: #18BC9C;

diff --git a/tr-site/src/app/landing/header/header.component.scss b/tr-site/src/app/landing/header/header.component.scss
@@ -1,2 +1 @@
-@import "~bootstrap/scss/bootstrap";
 @import '../../../styles/landing';
diff --git a/tr-site/src/app/landing/nav-bar/nav-bar.component.html b/tr-site/src/app/landing/nav-bar/nav-bar.component.html
@@ -1,13 +1,31 @@
-<div id="skipnav"><a href="#maincontent">Skip to main content</a></div>
+<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
+  <div class="container">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header page-scroll">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
+      </button>
+      <a class="navbar-brand" href="#page-top">Trash Radar</a>
+    </div>
 
-    <!-- Navigation -->
-    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
-        <div class="container">
-            <!-- Brand and toggle get grouped for better mobile display -->
-            <div class="navbar-header page-scroll">
-                <a class="navbar-brand" href="#page-top">Trash Radar</a>
-            </div>
-            <!-- /.navbar-collapse -->
-        </div>
-        <!-- /.container-fluid -->
-    </nav>
+    <!-- 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 navbar-right">
+        <li class="hidden">
+          <a href="#page-top"></a>
+        </li>
+        <li class="page-scroll">
+          <a href="#portfolio">Portfolio</a>
+        </li>
+        <li class="page-scroll">
+          <a href="#detail">Detail</a>
+        </li>
+        <li class="page-scroll">
+          <a href="#about">About</a>
+        </li>
+      </ul>
+    </div>
+    <!-- /.navbar-collapse -->
+  </div>
+  <!-- /.container-fluid -->
+</nav>
diff --git a/tr-site/src/assets/css/bootstrap.min.css b/tr-site/src/assets/css/bootstrap.min.css
diff --git a/tr-site/src/assets/js/bootstrap.min.js b/tr-site/src/assets/js/bootstrap.min.js
diff --git a/tr-site/src/assets/js/jquery.min.js b/tr-site/src/assets/js/jquery.min.js
diff --git a/tr-site/src/index.html b/tr-site/src/index.html
@@ -6,9 +6,12 @@
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="/assets/css/bootstrap.min.css" media="screen">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
   <app-root>Loading...</app-root>
 </body>
+<script src="/assets/js/jquery.min.js"></script>
+<script src="/assets/js/bootstrap.min.js"></script>
 </html>
diff --git a/tr-site/src/styles.css b/tr-site/src/styles.css
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+  margin: 0;
+}
diff --git a/tr-site/src/styles/landing.scss b/tr-site/src/styles/landing.scss
@@ -1,4 +1,3 @@
-@import "~bootstrap/scss/bootstrap";
 @import "_fonts";
 
 body {
@@ -100,6 +99,12 @@ header .intro-text .skills {
     font-size: 1.75em;
   }
 }
+nav#mainNav {
+  margin-bottom: 0;
+  ul {
+    display: inline;
+  }
+}
 .navbar-custom {
   background: #2C3E50;
   font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -511,4 +516,4 @@ fieldset[disabled] .btn-success.active {
 }
 div#maincontent {
   outline: none;
-}
+}