Add vertical padding between buttons on narrow screens

This commit is contained in:
Visman 2021-03-30 13:08:29 +07:00
parent 3d939a37af
commit 52fa45fc74
5 changed files with 43 additions and 18 deletions

View file

@ -48,7 +48,7 @@
@yield ('pagination')
@if ($p->model->canCreateTopic)
<div class="f-actions-links">
<a class="f-btn f-btn-create-topic" title="{{ __('Post topic') }}" href="{{ $p->model->linkCreateTopic }}"><span>{!! __('Post topic') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-create-topic" title="{{ __('Post topic') }}" href="{{ $p->model->linkCreateTopic }}"><span>{!! __('Post topic') !!}</span></a></span>
</div>
@endif
</div>
@ -155,17 +155,17 @@
@if ($p->model->canCreateTopic || $p->model->canMarkRead || $p->model->canSubscription)
<div class="f-actions-links">
@if ($p->model->canMarkRead)
<a class="f-btn f-btn-markread f-opacity" title="{{ __('Mark forum read') }}" href="{{ $p->model->linkMarkRead }}"><span>{!! __('All is read') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-markread f-opacity" title="{{ __('Mark forum read') }}" href="{{ $p->model->linkMarkRead }}"><span>{!! __('All is read') !!}</span></a></span>
@endif
@if ($p->model->canSubscription)
@if ($p->model->is_subscribed)
<a class="f-btn f-btn-unsubscribe f-opacity" title="{{ __('Unsubscribe forum') }}" href="{{ $p->model->linkUnsubscribe }}"><span>{!! __('Unsubscribe') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-unsubscribe f-opacity" title="{{ __('Unsubscribe forum') }}" href="{{ $p->model->linkUnsubscribe }}"><span>{!! __('Unsubscribe') !!}</span></a></span>
@else
<a class="f-btn f-btn-subscribe f-opacity" title="{{ __('Subscribe forum') }}" href="{{ $p->model->linkSubscribe }}"><span>{!! __('Subscribe') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-subscribe f-opacity" title="{{ __('Subscribe forum') }}" href="{{ $p->model->linkSubscribe }}"><span>{!! __('Subscribe') !!}</span></a></span>
@endif
@endif
@if ($p->model->canCreateTopic)
<a class="f-btn f-btn-create-topic" title="{{ __('Post topic') }}" href="{{ $p->model->linkCreateTopic }}"><span>{!! __('Post topic') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-create-topic" title="{{ __('Post topic') }}" href="{{ $p->model->linkCreateTopic }}"><span>{!! __('Post topic') !!}</span></a></span>
@endif
</div>
@endif

View file

@ -21,7 +21,7 @@
<div class="f-nav-links">
<div class="f-nlinks">
<div class="f-actions-links">
<a class="f-btn f-btn-markread f-opacity" title="{{ __('Mark all as read') }}" href="{{ $p->linkMarkRead }}"><span>{!! __('All is read') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-markread f-opacity" title="{{ __('Mark all as read') }}" href="{{ $p->linkMarkRead }}"><span>{!! __('All is read') !!}</span></a></span>
</div>
</div>
</div>

View file

@ -8,7 +8,7 @@
<div class="f-nlinks-b">
<div class="f-actions-links">
@foreach ($p->actionBtns as $key => $cur)
<a class="f-btn f-btn-{{ $key }}" href="{{ $cur[0] }}" title="{{ $cur[1] }}"><span>{{ $cur[1] }}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-{{ $key }}" href="{{ $cur[0] }}" title="{{ $cur[1] }}"><span>{{ $cur[1] }}</span></a></span>
@endforeach
</div>
</div>

View file

@ -29,10 +29,10 @@
@if ($p->model->canReply || $p->model->closed)
<div class="f-actions-links">
@if ($p->model->closed)
<a class="f-btn f-btn-topic-closed" title="{{ __('Topic closed') }}"><span>{!! __('Topic closed') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-topic-closed" title="{{ __('Topic closed') }}"><span>{!! __('Topic closed') !!}</span></a></span>
@endif
@if ($p->model->canReply)
<a class="f-btn f-btn-post-reply" title="{{ __('Post reply') }}" href="{{ $p->model->linkReply }}"><span>{!! __('Post reply') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-post-reply" title="{{ __('Post reply') }}" href="{{ $p->model->linkReply }}"><span>{!! __('Post reply') !!}</span></a></span>
@endif
</div>
@endif
@ -152,13 +152,13 @@
<div class="f-actions-links">
@if ($p->model->canSubscription)
@if ($p->model->is_subscribed)
<a class="f-btn f-btn-unsubscribe f-opacity" title="{{ __('Unsubscribe topic') }}" href="{{ $p->model->linkUnsubscribe }}"><span>{!! __('Unsubscribe') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-unsubscribe f-opacity" title="{{ __('Unsubscribe topic') }}" href="{{ $p->model->linkUnsubscribe }}"><span>{!! __('Unsubscribe') !!}</span></a></span>
@else
<a class="f-btn f-btn-subscribe f-opacity" title="{{ __('Subscribe topic') }}" href="{{ $p->model->linkSubscribe }}"><span>{!! __('Subscribe') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-subscribe f-opacity" title="{{ __('Subscribe topic') }}" href="{{ $p->model->linkSubscribe }}"><span>{!! __('Subscribe') !!}</span></a></span>
@endif
@endif
@if ($p->model->canReply)
<a class="f-btn f-btn-post-reply" title="{{ __('Post reply') }}" href="{{ $p->model->linkReply }}"><span>{!! __('Post reply') !!}</span></a>
<span class="f-act-span"><a class="f-btn f-btn-post-reply" title="{{ __('Post reply') }}" href="{{ $p->model->linkReply }}"><span>{!! __('Post reply') !!}</span></a></span>
@endif
</div>
@endif

View file

@ -913,7 +913,7 @@ html[lang="ru"] #fork details[open] > summary::after {
border-top: 0.0625rem dotted #AA7939;
}
#fork .f-nlinks-b .f-actions-links,
#fork .f-nlinks-b .f-act-span,
#fork .f-nlinks-b .f-pages {
padding-top: 0.625rem;
}
@ -924,7 +924,7 @@ html[lang="ru"] #fork details[open] > summary::after {
flex-wrap: wrap-reverse;
}
#fork .f-nlinks-a .f-actions-links,
#fork .f-nlinks-a .f-act-span,
#fork .f-nlinks-a .f-pages {
padding-bottom: 0.625rem;
}
@ -935,6 +935,10 @@ html[lang="ru"] #fork details[open] > summary::after {
text-align: right;
}
#fork .f-act-span {
display: inline-block;
}
#fork .f-nav-links .f-page {
border: 0.0625rem solid #AA7939;
padding: 0.125rem 0.375rem;
@ -1388,12 +1392,15 @@ html[lang="ru"] #fork details[open] > summary::after {
#fork .f-post {
border-top: 0.0625rem solid #AA7939;
border-bottom: 0.0625rem solid #AA7939;
margin-bottom: 0.625rem;
position: relative;
background-color: #FFFFFF;
/*overflow: hidden;*/
}
#fork .f-post + .f-post {
margin-top: 0.625rem;
}
#fork .f-post-header {
display: flex;
flex-wrap: wrap;
@ -1504,7 +1511,7 @@ html[lang="ru"] #fork details[open] > summary::after {
#fork .f-post-btns {
text-align: right;
padding-top: 0;
padding-bottom: 0.625rem;
/*padding-bottom: 0.625rem;*/
}
#fork .f-post-btns:not(:hover) .f-btn:not(:focus) {
@ -1516,7 +1523,8 @@ html[lang="ru"] #fork details[open] > summary::after {
}
#fork .f-post-footer li {
display: inline;
display: inline-block;
padding-bottom: 0.625rem;
}
#fork .f-post-signature {
@ -2477,7 +2485,8 @@ html[lang="ru"] #fork details[open] > summary::after {
border-top-style: dotted;
}
#forkpm > .f-post-form:last-child {
#forkpm > :last-child,
#forkpm .f-nlbpm {
margin-bottom: 0;
}
@ -2485,6 +2494,22 @@ html[lang="ru"] #fork details[open] > summary::after {
#forkpm .f-nlbpm {
margin-top: 0;
}
#forkpm .f-nlinks-b.f-nlbpm > .f-pages {
padding-top: 1rem;
}
#forkpm .f-nlinks-b.f-nlbpm > .f-actions-links {
padding-top: 0.375rem;
}
#forkpm .f-nlinks-a.f-nlbpm > .f-pages {
padding-bottom: 1rem;
}
#forkpm .f-nlinks-a.f-nlbpm > .f-actions-links {
padding-bottom: 0.375rem;
}
}
/****************************************/