Cleaning up the topics page.

3 files changed, 43 insertions, 4 deletions

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