mirror of https://git.stjo.hn/planiverse
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:
parent
636f682b0e
commit
dbbe307a03
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -12,6 +12,9 @@
|
|||
<body>
|
||||
<h1>{{ $mastodon_domain }} | Public Timeline</h1>
|
||||
|
||||
@component('navigation')
|
||||
@endcomponent
|
||||
|
||||
@foreach ($statuses as $status)
|
||||
@component('status', ['status' => $status])
|
||||
@endcomponent
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue