From ea7f3c9c9ca72ee6efa9c345506ea9c92cdf1691 Mon Sep 17 00:00:00 2001
From: horus
Date: Sun, 19 Apr 2020 18:28:17 +0200
Subject: Add footer with about page.

---
 app/Http/Controllers/IndexController.php       |  5 +++
 public/css/app.css                             | 24 ++++++++++++
 resources/sass/_navbar.scss                    |  4 ++
 resources/sass/_utility.scss                   | 16 +++++++-
 resources/views/about.blade.php                | 54 ++++++++++++++++++++++++++
 resources/views/index.blade.php                |  3 ++
 resources/views/layouts/app.blade.php          |  5 ++-
 resources/views/layouts/footer-style.blade.php | 14 +++++++
 resources/views/layouts/footer.blade.php       | 16 ++++++++
 resources/views/list.blade.php                 | 46 +++++++++++++---------
 resources/views/topicindex.blade.php           |  5 +++
 resources/views/topicpopular.blade.php         |  5 +++
 routes/web.php                                 |  2 +-
 13 files changed, 176 insertions(+), 23 deletions(-)
 create mode 100644 resources/views/about.blade.php
 create mode 100644 resources/views/layouts/footer-style.blade.php
 create mode 100644 resources/views/layouts/footer.blade.php

diff --git a/app/Http/Controllers/IndexController.php b/app/Http/Controllers/IndexController.php
index bb1d301..9f21bbb 100644
--- a/app/Http/Controllers/IndexController.php
+++ b/app/Http/Controllers/IndexController.php
@@ -17,6 +17,11 @@ class IndexController extends Controller
             return view('index');
     }
 
+    public function about()
+    {
+            return view('about');
+    }
+
     public function topic( $topic )
     {
 	    $articles = new Category;
diff --git a/public/css/app.css b/public/css/app.css
index b32dc56..aa0b69e 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10931,6 +10931,10 @@ body {
   }
 }
 
+.nav-link:hover {
+  text-decoration: underline !important;
+}
+
 .text-lg {
   font-size: 1.125rem;
 }
@@ -10943,3 +10947,23 @@ hr {
   margin-top: inherit;
 }
 
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mt-30 {
+  margin-top: 30px;
+}
+
+.mt-35 {
+  margin-top: 35px;
+}
+
+.mt-40 {
+  margin-top: 40px;
+}
+
+.mt-50 {
+  margin-top: 50px;
+}
+
diff --git a/resources/sass/_navbar.scss b/resources/sass/_navbar.scss
index 1542944..4645fa5 100644
--- a/resources/sass/_navbar.scss
+++ b/resources/sass/_navbar.scss
@@ -14,3 +14,7 @@
 		margin-left: 0.5rem;
 	}
 }
+
+.nav-link:hover {
+	text-decoration: underline !important;
+}
diff --git a/resources/sass/_utility.scss b/resources/sass/_utility.scss
index e84fcd0..bcc163d 100644
--- a/resources/sass/_utility.scss
+++ b/resources/sass/_utility.scss
@@ -8,4 +8,18 @@ hr {
 	height: 1px;
 	margin-top: inherit;
 }
-
+.mt-20 {
+	margin-top: 20px;
+}
+.mt-30 {
+	margin-top: 30px;
+}
+.mt-35 {
+	margin-top: 35px;
+}
+.mt-40 {
+	margin-top: 40px;
+}
+.mt-50 {
+	margin-top: 50px;
+}
diff --git a/resources/views/about.blade.php b/resources/views/about.blade.php
new file mode 100644
index 0000000..143fe55
--- /dev/null
+++ b/resources/views/about.blade.php
@@ -0,0 +1,54 @@
+@extends('layouts.app')
+
+@section('styles')
+html {
+	height: 100%;
+}
+.hn {
+  display: inline-block;
+  font-size: inherit;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -.125em;
+  fill: #ff6600;
+}
+
+@endsection
+
+@section('content')
+	<div style="margin-top: 20px" class="container">
+
+		<div class="card">
+			<h1 class="card-header">
+				More about <strong>{{ env('APP_NAME') }}</strong>
+			</h1>
+			<div class="card-body">
+				<p class="card-text">
+					{{ env('APP_NAME') }} is a resource of curious, obscure, inspiring, interesting and sometimes even scary insights. Dive deep in the worlds knowlegde. We focus on "anything that gratifies one's intellectual curiosity." Or to speak more clearly: Reading Wikipedia was my hobby, so I automated it.
+					<br>
+					<br>
+					Enter {{ env('APP_NAME') }}. This is a collection of curated Wikipedia articles, sourced primarily (for now) from <a href="https://news.ycombinator.com">{!! file_get_contents(public_path() . "/img/y-combinator.svg") !!} Hacker News</a>. For structured consuming most of them are further categorized in topics. For starting, I recommend <a href="{{ route('popular') }}">reading the most popular articles</a> or <a href="{{ route('popular_topics') }}">browse by topics</a>.
+				</p>
+			</div>
+		</div>
+<!--
+	<div style="margin-bottom: 20px"></div>
+
+	<div class="card">
+			<h1 class="card-header">
+			</h1>
+		<div class="card-body">
+			<p class="card-text">
+			</p>
+		</div>
+	</div>
+
+	<div style="margin-bottom: 20px"></div>
+
+-->
+	</div>
+@endsection
+
+@section ('footer')
+	@include ('layouts.footer')
+@endsection
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 659cc06..da33466 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -17,6 +17,9 @@
     <p class="lead">
       <a href="{{ route('popular') }}" class="btn btn-lg btn-outline-primary">Most Popular</a>
     </p>
+    <p class="lead mt-50">
+      Not ready to explore?<br> <a href="{{ route('about') }}">Then learn more</a>.
+    </p>
   </div>
 
 </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 0a3cc90..05b7d38 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -44,7 +44,7 @@
 @endif
 
 </head>
-<body>
+<body class="d-flex flex-column h-100">
     <div id="app">
         <nav class="navbar navbar-expand-md navbar-dark shadow-sm">
             <div class="container">
@@ -112,9 +112,10 @@
             </div>
         </nav>
 
-        <main class="py-4">
+        <main class="">
             @yield('content')
         </main>
+	@yield('footer')
     </div>
 </body>
 </html>
diff --git a/resources/views/layouts/footer-style.blade.php b/resources/views/layouts/footer-style.blade.php
new file mode 100644
index 0000000..e1f715e
--- /dev/null
+++ b/resources/views/layouts/footer-style.blade.php
@@ -0,0 +1,14 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  margin-bottom: 120px; 
+}
+.footer {
+  position: absolute;
+  bottom: 50;
+  width: 100%;
+  height: 70px; 
+}
+
diff --git a/resources/views/layouts/footer.blade.php b/resources/views/layouts/footer.blade.php
new file mode 100644
index 0000000..c672d45
--- /dev/null
+++ b/resources/views/layouts/footer.blade.php
@@ -0,0 +1,16 @@
+<div class="container mt-35">
+	<hr>
+</div>
+
+<div class="mt-20"></div>
+
+<footer class="footer">
+	<div class="container">
+		<h3 class="text-white">
+			Helpful Links
+		</h3>
+		<strong>
+			<a href="{{ route('about') }}">Learn more about {{ env('APP_NAME') }}</a>
+		</strong>
+	</div>
+</footer>
diff --git a/resources/views/list.blade.php b/resources/views/list.blade.php
index 1f6fc72..f067e2f 100644
--- a/resources/views/list.blade.php
+++ b/resources/views/list.blade.php
@@ -1,28 +1,32 @@
 @extends('layouts.app')
 
 @section('styles')
+
+@include ('layouts.footer-style')
+
 @if ( 0 != $count )
-html {
-	height: inherit;
-}
-.hn {
-  display: inline-block;
-  font-size: inherit;
-  height: 1em;
-  overflow: visible;
-  vertical-align: -.125em;
-  fill: #ff6600;
-}
+	html {
+		height: inherit;
+	}
+	.hn {
+	  display: inline-block;
+	  font-size: inherit;
+	  height: 1em;
+	  overflow: visible;
+	  vertical-align: -.125em;
+	  fill: #ff6600;
+	}
 
-.rss-link > svg {
-  display: inline-block;
-  font-size: inherit;
-  height: 1em;
-  overflow: visible;
-  vertical-align: -.125em;
-  fill: #f59436;
-}
+	.rss-link > svg {
+	  display: inline-block;
+	  font-size: inherit;
+	  height: 1em;
+	  overflow: visible;
+	  vertical-align: -.125em;
+	  fill: #f59436;
+	}
 @endif
+
 @endsection
 
 @section('content')
@@ -150,3 +154,7 @@ html {
 
 	</div>
 @endsection
+
+@section ('footer')
+	@include ('layouts.footer')
+@endsection
diff --git a/resources/views/topicindex.blade.php b/resources/views/topicindex.blade.php
index 7de3042..67b0de4 100644
--- a/resources/views/topicindex.blade.php
+++ b/resources/views/topicindex.blade.php
@@ -1,6 +1,7 @@
 @extends('layouts.app')
 
 @section('styles')
+@include ('layouts.footer-style')
 html {
 	height: inherit;
 }
@@ -43,3 +44,7 @@ html {
 
 </div>
 @endsection
+
+@section ('footer')
+	@include ('layouts.footer')
+@endsection
diff --git a/resources/views/topicpopular.blade.php b/resources/views/topicpopular.blade.php
index f6a2c8a..e4d2b18 100644
--- a/resources/views/topicpopular.blade.php
+++ b/resources/views/topicpopular.blade.php
@@ -1,6 +1,7 @@
 @extends ('layouts.app')
 
 @section ('styles')
+@include ('layouts.footer-style')
 html {
 	height: inherit;
 }
@@ -35,3 +36,7 @@ html {
 
 </div>
 @endsection
+
+@section ('footer')
+	@include ('layouts.footer')
+@endsection
diff --git a/routes/web.php b/routes/web.php
index a45dc59..1930938 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -28,4 +28,4 @@ Route::get('/feed/search', 'FeedController@search')->name('feed_search');
 
 #Auth::routes();
 
-Route::get('/home', 'HomeController@index')->name('home');
+Route::get('/about', 'IndexController@about')->name('about');
-- 
cgit v1.2.3