planiverse

A minimalist, no-JS front-end for Mastodon.
git clone https://git.stjo.hn/planiverse
Log | Files | Refs | README | LICENSE

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:
Mpublic/css/styles.css | 33+++------------------------------
Mresources/views/home_timeline.blade.php | 3+++
Aresources/views/navigation.blade.php | 6++++++
Mresources/views/public_timeline.blade.php | 3+++
Mresources/views/status.blade.php | 9++++-----
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>