Sticky address in post

This commit is contained in:
Visman 2020-12-26 19:08:06 +07:00
parent 1cb00d4138
commit 806fd4a926
4 changed files with 58 additions and 44 deletions

View file

@ -35,12 +35,14 @@
<span class="f-post-number"><a href="{{ $post->link }}" rel="bookmark">#{!! $post->postNumber !!}</a></span>
</header>
<address class="f-post-user">
<ul class="f-user-info-first">
<li class="f-username">{{ $post->poster }}</li>
</ul>
<ul class="f-user-info">
<li class="f-username">{{ $post->poster }}</li>
</ul>
<div class="f-post-usticky">
<ul class="f-user-info-first">
<li class="f-username">{{ $post->poster }}</li>
</ul>
<ul class="f-user-info">
<li class="f-username">{{ $post->poster }}</li>
</ul>
<div>
</address>
<div class="f-post-body">
<div class="f-post-main">

View file

@ -62,43 +62,45 @@
<span class="f-post-number"><a href="{{ $post->link }}" rel="bookmark">#{!! $post->postNumber !!}</a></span>
</header>
<address class="f-post-user">
<ul class="f-user-info-first">
<div class="f-post-usticky">
<ul class="f-user-info-first">
@if ($p->user->viewUsers && $post->user->link)
<li class="f-username"><a href="{{ $post->user->link }}">{{ $post->user->username }}</a></li>
<li class="f-username"><a href="{{ $post->user->link }}">{{ $post->user->username }}</a></li>
@else
<li class="f-username">{{ $post->user->username }}</li>
<li class="f-username">{{ $post->user->username }}</li>
@endif
</ul>
</ul>
@if ($p->user->showAvatar && $post->user->avatar)
<p class="f-avatar">
<img alt="{{ $post->user->username }}" src="{{ $post->user->avatar }}" loading="lazy">
</p>
<p class="f-avatar">
<img alt="{{ $post->user->username }}" src="{{ $post->user->avatar }}" loading="lazy">
</p>
@endif
<ul class="f-user-info">
<ul class="f-user-info">
@if ($p->user->viewUsers && $post->user->link)
<li class="f-username"><a href="{{ $post->user->link }}">{{ $post->user->username }}</a></li>
<li class="f-username"><a href="{{ $post->user->link }}">{{ $post->user->username }}</a></li>
@else
<li class="f-username">{{ $post->user->username }}</li>
<li class="f-username">{{ $post->user->username }}</li>
@endif
<li class="f-usertitle">{{ $post->user->title() }}</li>
<li class="f-usertitle">{{ $post->user->title() }}</li>
@if ($p->user->showUserInfo && $p->user->showPostCount && $post->user->num_posts)
<li class="f-postcount">{!! __('%s post', $post->user->num_posts, num($post->user->num_posts)) !!}</li>
<li class="f-postcount">{!! __('%s post', $post->user->num_posts, num($post->user->num_posts)) !!}</li>
@endif
@if ($linkPromote = $p->user->linkPromote($post))
<li class="f-promoteuser"><a href="{{ $linkPromote }}">{!! __('Promote user') !!}</a></li>
<li class="f-promoteuser"><a href="{{ $linkPromote }}">{!! __('Promote user') !!}</a></li>
@endif
</ul>
</ul>
@if (! $post->user->isGuest && $p->user->showUserInfo)
<ul class="f-user-info-add">
<ul class="f-user-info-add">
@if ($p->user->isAdmMod && '' != $post->user->admin_note)
<li class="f-admin-note" title="{!! __('Admin note') !!}">{{ $post->user->admin_note }}</li>
<li class="f-admin-note" title="{!! __('Admin note') !!}">{{ $post->user->admin_note }}</li>
@endif
<li>{!! __('Registered: %s', dt($post->user->registered, true)) !!}</li>
<li>{!! __('Registered: %s', dt($post->user->registered, true)) !!}</li>
@if ($post->user->location)
<li>{!! __('From') !!} {{ $post->user->censorLocation }}</li>
<li>{!! __('From') !!} {{ $post->user->censorLocation }}</li>
@endif
</ul>
</ul>
@endif
</div>
</address>
<div class="f-post-body">
<div class="f-post-main">

View file

@ -45,29 +45,31 @@
<span class="f-post-number">#{!! $post->postNumber !!}</span>
</header>
<address class="f-post-user">
<ul class="f-user-info-first">
<div class="f-post-usticky">
<ul class="f-user-info-first">
@if ($p->user->viewUsers && $post->user->link)
<li class="f-username"><a href="{{ $post->user->link }}">{{ $post->user->username }}</a></li>
<li class="f-username"><a href="{{ $post->user->link }}">{{ $post->user->username }}</a></li>
@else
<li class="f-username">{{ $post->user->username }}</li>
<li class="f-username">{{ $post->user->username }}</li>
@endif
</ul>
<ul class="f-user-info">
</ul>
<ul class="f-user-info">
@if ($p->user->viewUsers && $post->user->link)
<li class="f-username"><a href="{{ $post->user->link }}">{{ $post->user->username }}</a></li>
<li class="f-username"><a href="{{ $post->user->link }}">{{ $post->user->username }}</a></li>
@else
<li class="f-username">{{ $post->user->username }}</li>
<li class="f-username">{{ $post->user->username }}</li>
@endif
<li class="f-usertitle">{{ $post->user->title() }}</li>
</ul>
<ul class="f-post-search-info">
<li class="f-psi-forum">{!! __('Forum') !!}: <a href="{{ $post->parent->parent->link }}">{{ $post->parent->parent->forum_name }}</a></li>
<li class="f-psi-topic">{!! __('Topic') !!}: <a href="{{ $post->parent->link }}">{{ $post->parent->censorSubject }}</a></li>
<li class="f-psi-reply">{!! __('%s Reply', $post->parent->num_replies, num($post->parent->num_replies)) !!}</li>
<li class="f-usertitle">{{ $post->user->title() }}</li>
</ul>
<ul class="f-post-search-info">
<li class="f-psi-forum">{!! __('Forum') !!}: <a href="{{ $post->parent->parent->link }}">{{ $post->parent->parent->forum_name }}</a></li>
<li class="f-psi-topic">{!! __('Topic') !!}: <a href="{{ $post->parent->link }}">{{ $post->parent->censorSubject }}</a></li>
<li class="f-psi-reply">{!! __('%s Reply', $post->parent->num_replies, num($post->parent->num_replies)) !!}</li>
@if ($post->parent->showViews)
<li class="f-psi-view">{!! __('%s View', $post->parent->num_views, num($post->parent->num_views)) !!}</li>
<li class="f-psi-view">{!! __('%s View', $post->parent->num_views, num($post->parent->num_views)) !!}</li>
@endif
</ul>
</ul>
</div>
</address>
<div class="f-post-body">
<div class="f-post-main">

View file

@ -1569,7 +1569,7 @@ body,
margin-bottom: 0.625rem;
position: relative;
background-color: #FFFFFF;
overflow: hidden;
/*overflow: hidden;*/
}
#fork .f-post-header {
@ -1596,14 +1596,17 @@ body,
}
#fork .f-post-user {
display: flex;
flex-wrap: wrap;
padding: 0.625rem;
background-color: #F8F4E3;
border-bottom: 0.0625rem solid #AA7939;
font-size: 0.875rem;
}
#fork .f-post-usticky {
display: flex;
flex-wrap: wrap;
}
#fork .f-user-info-first {
display: none;
}
@ -1794,12 +1797,17 @@ body,
}
#fork .f-post-user {
flex-direction: column;
width: 13rem;
border-right: 0.0625rem solid #AA7939;
border-bottom: 0;
}
#fork .f-post-usticky {
flex-direction: column;
position: sticky;
top: 0;
}
#fork .f-user-info-first {
display: block;
margin-bottom: 0.625rem;