commit dbbe307a03fc795c8ec7834dcc3a81cfe1df424b
parent 636f682b0efa2f2134fcc48268a0ca6aaba57b8f
Author: St John Karp <stjohn@fuzzjunket.com>
Date: Sun, 19 Aug 2018 10:02:02 -0700
Add navigation to the top of the page, rework some CSS
Added navigation links to the top of the timeline pages.
Updated the HTML/CSS to be a bit more semantic (using article tags),
and replaced the broken tooltips with HTML title attributes.
Diffstat:
5 files changed, 19 insertions(+), 35 deletions(-)
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -41,16 +41,16 @@ a:visited {
color: #de3d83;
}
-div.status {
+article {
border: 1px solid black;
padding: 1em;
}
-div.status img {
+article img {
max-width: 100%;
}
-div.status img.avatar {
+article img.avatar {
max-width: 48px;
}
@@ -89,30 +89,3 @@ nav ul li {
display: inline;
margin-top: 0;
}
-
-/* Tooltip container */
-.tooltip {
- position: relative;
- display: inline-block;
- border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
-}
-
-/* Tooltip text */
-.tooltip .tooltiptext {
- visibility: hidden;
- width: 120px;
- background-color: black;
- color: #fff;
- text-align: center;
- padding: 5px 0;
- border-radius: 6px;
-
- /* Position the tooltip text - see examples below! */
- position: absolute;
- z-index: 1;
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.tooltip:hover .tooltiptext {
- visibility: visible;
-}
diff --git a/resources/views/home_timeline.blade.php b/resources/views/home_timeline.blade.php
@@ -12,6 +12,9 @@
<body>
<h1>{{ $mastodon_domain }} | Timeline</h1>
+ @component('navigation')
+ @endcomponent
+
<form method="post" action="/timeline/home">
<input type="text" name="spoiler_text" placeholder="Spoiler/Warning" />
<textarea rows="4" name="status" placeholder="Status" required autofocus></textarea>
diff --git a/resources/views/navigation.blade.php b/resources/views/navigation.blade.php
@@ -0,0 +1,6 @@
+<nav>
+ <ul>
+ <li><a href="/timeline/home">Timeline</a></li>
+ <li><a href="/timeline/public">Public Timeline</a></li>
+ </ul>
+</nav>
diff --git a/resources/views/public_timeline.blade.php b/resources/views/public_timeline.blade.php
@@ -12,6 +12,9 @@
<body>
<h1>{{ $mastodon_domain }} | Public Timeline</h1>
+ @component('navigation')
+ @endcomponent
+
@foreach ($statuses as $status)
@component('status', ['status' => $status])
@endcomponent
diff --git a/resources/views/status.blade.php b/resources/views/status.blade.php
@@ -1,5 +1,5 @@
-<div class="status">
- <div class="tooltip">
+<article>
+ <span title="{{ $status['account']['acct'] }}">
<a href="{{ $status['account']['url'] }}">
<img
src="{{ $status['account']['avatar'] }}"
@@ -8,8 +8,7 @@
/>
{{ $status['account']['display_name'] }}
</a>
- <span class="tooltiptext">{{ $status['account']['acct'] }}</span>
- </div>
+ </span>
<time datetime="{{ $status['created_at'] }}">
@php
$created_at = new Carbon\Carbon($status['created_at']);
@@ -61,4 +60,4 @@
{{ $status['favourites_count'] }}
</span>
</div>
-</div>
+</article>
