planiverse

commit e628d8b8b9335374225bd795a9b0b53f3419aa25
parent eb513faf9b3b7c2c9d3849cb38fb795358874173
Author: St John Karp <stjohn@fuzzjunket.com>
Date:   Sun, 19 Aug 2018 09:39:31 -0700

Break pagination elements into their own component

Split off the pagination into its own component and added some
styling.

Diffstat:
M
public/css/styles.css
 | 
29
+++++++++++++++++++++++++----
M
resources/views/home_timeline.blade.php
 | 
9
++-------
A
resources/views/pagination.blade.php
 | 
11
+++++++++++
M
resources/views/public_timeline.blade.php
 | 
9
++-------

4 files changed, 40 insertions(+), 18 deletions(-)
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -33,6 +33,14 @@ body {
     max-width: 40em;
 }
 
+a:link {
+    color: #1456cc;
+}
+
+a:visited {
+    color: #de3d83;
+}
+
 div.status {
     border: 1px solid black;
     padding: 1em;
@@ -46,18 +54,19 @@ div.status img.avatar {
     max-width: 48px;
 }
 
-.favourited {
-    color: goldenrod;
-}
-
 div.actions > span {
     margin-right: 1em;
 }
 
 div.actions a {
+    color: black;
     text-decoration: none;
 }
 
+div.actions span.favourited a {
+    color: goldenrod;
+}
+
 time {
     font-size: smaller;
     margin-left: 1em;
@@ -69,6 +78,18 @@ input, textarea {
     width: 100%;
 }
 
+nav ul {
+    display: flex;
+    justify-content: space-between;
+    list-style: none;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline;
+    margin-top: 0;
+}
+
 /* Tooltip container */
 .tooltip {
     position: relative;
diff --git a/resources/views/home_timeline.blade.php b/resources/views/home_timeline.blade.php
@@ -24,12 +24,7 @@
             @endcomponent
         @endforeach
 
-        @if ($links['prev'] !== null)
-            <span><a href="{{ $links['prev'] }}">Previous</a></span>
-        @endif
-
-        @if ($links['next'] !== null)
-            <span><a href="{{ $links['next'] }}">Next</a></span>
-        @endif
+        @component('pagination', ['links' => $links])
+        @endcomponent
     </body>
 </html>
diff --git a/resources/views/pagination.blade.php b/resources/views/pagination.blade.php
@@ -0,0 +1,11 @@
+<nav>
+    <ul>
+        @if ($links['prev'] !== null)
+            <li><a href="{{ $links['prev'] }}">Previous</a></li>
+        @endif
+
+        @if ($links['next'] !== null)
+            <li><a href="{{ $links['next'] }}">Next</a></li>
+        @endif
+    </ul>
+</nav>
diff --git a/resources/views/public_timeline.blade.php b/resources/views/public_timeline.blade.php
@@ -17,12 +17,7 @@
             @endcomponent
         @endforeach
 
-        @if ($links['prev'] !== null)
-            <span><a href="{{ $links['prev'] }}">Previous</a></span>
-        @endif
-
-        @if ($links['next'] !== null)
-            <span><a href="{{ $links['next'] }}">Next</a></span>
-        @endif
+        @component('pagination', ['links' => $links])
+        @endcomponent
     </body>
 </html>