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.
This commit is contained in:
St John Karp 2018-08-19 10:02:02 -07:00
parent 636f682b0e
commit dbbe307a03
5 changed files with 19 additions and 35 deletions

33
public/css/styles.css vendored
View File

@ -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;
}

View File

@ -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>

View File

@ -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>

View File

@ -12,6 +12,9 @@
<body>
<h1>{{ $mastodon_domain }} | Public Timeline</h1>
@component('navigation')
@endcomponent
@foreach ($statuses as $status)
@component('status', ['status' => $status])
@endcomponent

View File

@ -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>