Cleaning up the topics page.

5 files changed, 57 insertions, 5 deletions

diff --git a/app/Http/Controllers/IndexController.php b/app/Http/Controllers/IndexController.php
index dbbbfb1..955a8d8 100644
--- a/app/Http/Controllers/IndexController.php
+++ b/app/Http/Controllers/IndexController.php
@@ -89,8 +89,9 @@ class IndexController extends Controller
 
     function topicindex() {
 	    $categories = Category::orderBy('name');
+	    $letters = DB::select("SELECT DISTINCT LEFT(name, 1) as name FROM category ORDER BY left(name, 1);");
 
-	    return view('topicindex', ['topics' => $categories]);
+	    return view('topicindex', ['topics' => $categories, 'letters' => $letters]);
     }
 
     public function random() {
diff --git a/public/css/app.css b/public/css/app.css
index cdbb0c5..b32dc56 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10931,3 +10931,15 @@ body {
   }
 }
 
+.text-lg {
+  font-size: 1.125rem;
+}
+
+hr {
+  width: 100%;
+  color: white;
+  background-color: white;
+  height: 1px;
+  margin-top: inherit;
+}
+
diff --git a/resources/sass/_utility.scss b/resources/sass/_utility.scss
new file mode 100644
index 0000000..e84fcd0
--- /dev/null
+++ b/resources/sass/_utility.scss
@@ -0,0 +1,11 @@
+.text-lg {
+	font-size:1.125rem;
+}
+hr {
+	width: 100%;
+	color: white;
+	background-color: white;
+	height: 1px;
+	margin-top: inherit;
+}
+
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index f01e9ac..f78c4bb 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -9,3 +9,4 @@
 
 @import 'background';
 @import 'navbar';
+@import 'utility';
diff --git a/resources/views/topicindex.blade.php b/resources/views/topicindex.blade.php
index 8ef2114..7de3042 100644
--- a/resources/views/topicindex.blade.php
+++ b/resources/views/topicindex.blade.php
@@ -6,13 +6,40 @@ html {
 }
 @endsection
 
-@section('content')
+@section ('content')
 
 <div class="text-center container">
+
+<div class="container row text-white text-lg">
+	<ul class="list-inline">
+	@foreach ($letters as $letter)
+		<li class="list-inline-item">
+		<a href="#{{$letter->name}}" class="text-white">{{$letter->name}}</a>
+		</li>
+	@endforeach
+	</ul>
+</div>
+
+@php ($curLetter = "")
 @foreach ($topics->get() as $topic)
-      @if ( "" != $topic->name )
-      <a href="{{ route('topic', $topic->name) }}" class="btn btn-lg btn-outline-primary">{{ ucwords($topic->name) }}</a>
-      @endif
+	@if ( "" != $topic->name )
+		@php ( $firstLetter = strtoupper(substr($topic->name, 0, 1)) )
+		@if ( $curLetter != $firstLetter )
+			<div class="container row">
+				<h2 id="{{$firstLetter}}">
+					<a class="text-white" href="#{{$firstLetter}}">
+					{{ $firstLetter }}
+					</a>
+				</h2>
+			</div>
+			<hr>
+
+			@php ($curLetter = $firstLetter)
+
+		@endif
+		<a href="{{ route('topic', $topic->name) }}" class="btn btn-lg btn-outline-primary">{{ ucwords($topic->name) }}</a>
+	@endif
 @endforeach
+
 </div>
 @endsection