* Style refactoring 3
This commit is contained in:
Visman
parent
b4405452bf
commit
e55d617ced
4 changed files with 144 additions and 131 deletions
|
|
@ -18,8 +18,8 @@
|
|||
@if ($p->previewHtml)
|
||||
<section class="f-main f-preview">
|
||||
<h2>{!! __('Post preview') !!}</h2>
|
||||
<div class="f-post-body clearfix">
|
||||
<div class="f-post-right f-post-main">
|
||||
<div class="f-post-body">
|
||||
<div class="f-post-main">
|
||||
{!! cens($p->previewHtml) !!}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,18 +38,18 @@
|
|||
<h2>{!! $p->postsTitle !!}</h2>
|
||||
@foreach ($p->posts as $post)
|
||||
@if ($post->id)
|
||||
<article id="p{!! $post->id !!}" class="clearfix f-post">
|
||||
<header class="f-post-header clearfix">
|
||||
<article id="p{!! $post->id !!}" class="f-post">
|
||||
<header class="f-post-header">
|
||||
<span class="f-post-posted"><time datetime="{{ utc($post->posted) }}">{{ dt($post->posted) }}</time></span>
|
||||
<span class="f-post-number"><a href="{!! $post->link !!}" rel="bookmark">#{!! $post->postNumber !!}</a></span>
|
||||
</header>
|
||||
<div class="f-post-body clearfix">
|
||||
<address class="f-post-left clearfix">
|
||||
<ul class="f-user-info">
|
||||
<li class="f-username">{{ $post->poster }}</li>
|
||||
</ul>
|
||||
</address>
|
||||
<div class="f-post-right f-post-main">
|
||||
<address class="f-post-user">
|
||||
<ul class="f-user-info">
|
||||
<li class="f-username">{{ $post->poster }}</li>
|
||||
</ul>
|
||||
</address>
|
||||
<div class="f-post-body">
|
||||
<div class="f-post-main">
|
||||
{!! $post->html() !!}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
@include ('layouts/iswev')
|
||||
@else
|
||||
<article id="p{!! $post->id !!}" class="f-post @if (1 == $post->user->gender) f-user-male @elseif (2 == $post->user->gender) f-user-female @endif @if ($post->user->online) f-user-online @endif @if (1 === $post->postNumber) f-post-first @endif">
|
||||
<header class="f-post-header clearfix">
|
||||
<header class="f-post-header">
|
||||
<h3>@if ($post->postNumber > 1) {!! __('Re') !!} @endif {{ cens($p->model->subject) }}</h3>
|
||||
<span class="f-post-posted"><a href="{!! $post->link !!}" rel="bookmark"><time datetime="{{ utc($post->posted) }}">{{ dt($post->posted) }}</time></a></span>
|
||||
@if ($post->edited)
|
||||
|
|
@ -68,51 +68,58 @@
|
|||
@endif
|
||||
<span class="f-post-number">#{!! $post->postNumber !!}</span>
|
||||
</header>
|
||||
<div class="f-post-body clearfix">
|
||||
<address class="f-post-left">
|
||||
<ul class="f-user-info">
|
||||
<address class="f-post-user">
|
||||
<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>
|
||||
@if ($p->user->showAvatar && $post->user->avatar)
|
||||
<li class="f-avatar">
|
||||
<img alt="{{ $post->user->username }}" src="{!! $post->user->avatar !!}">
|
||||
</li>
|
||||
<p class="f-avatar">
|
||||
<img alt="{{ $post->user->username }}" src="{!! $post->user->avatar !!}">
|
||||
</p>
|
||||
@endif
|
||||
<li class="f-usertitle">{{ $post->user->title() }}</li>
|
||||
<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>
|
||||
@else
|
||||
<li class="f-username">{{ $post->user->username }}</li>
|
||||
@endif
|
||||
<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
|
||||
</ul>
|
||||
</ul>
|
||||
@if (! $post->user->isGuest && $p->user->showUserInfo)
|
||||
<ul class="f-user-info-add">
|
||||
<li>{!! __('Registered:') !!} {{ dt($post->user->registered, true) }}</li>
|
||||
<ul class="f-user-info-add">
|
||||
<li>{!! __('Registered:') !!} {{ dt($post->user->registered, true) }}</li>
|
||||
@if ($post->user->location)
|
||||
<li>{!! __('From') !!} {{ cens($post->user->location) }}</li>
|
||||
<li>{!! __('From') !!} {{ cens($post->user->location) }}</li>
|
||||
@endif
|
||||
</ul>
|
||||
</ul>
|
||||
@endif
|
||||
</address>
|
||||
<div class="f-post-right f-post-main">
|
||||
</address>
|
||||
<div class="f-post-body">
|
||||
<div class="f-post-main">
|
||||
{!! $post->html() !!}
|
||||
</div>
|
||||
@if ($p->user->showSignature && '' != $post->user->signature)
|
||||
<div class="f-post-right f-post-signature">
|
||||
<div class="f-post-signature">
|
||||
<hr>
|
||||
{!! $post->user->htmlSign !!}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<footer class="f-post-footer clearfix">
|
||||
<div class="f-post-left">
|
||||
<footer class="f-post-footer">
|
||||
<div class="f-post-footer-add">
|
||||
@if (! $post->user->isGuest)
|
||||
<span class="f-userstatus">{!! __($post->user->online ? 'Online' : 'Offline') !!}</span>
|
||||
@endif
|
||||
</div>
|
||||
@if ($post->canReport || $post->canDelete || $post->canEdit || $post->canQuote)
|
||||
<div class="f-post-right">
|
||||
<div class="f-post-btns">
|
||||
<ul>
|
||||
@if ($post->canReport)
|
||||
<li class="f-postreport"><a class="f-btn f-minor" href="{!! $post->linkReport !!}">{!! __('Report') !!}</a></li>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
@include ('layouts/iswev')
|
||||
@else
|
||||
<article id="p{!! $post->id !!}" class="f-post f-post-search @if (1 == $post->user->gender) f-user-male @elseif (2 == $post->user->gender) f-user-female @endif @if ($post->user->online) f-user-online @endif">
|
||||
<header class="f-post-header clearfix">
|
||||
<header class="f-post-header">
|
||||
<h3>
|
||||
<span class="f-psh-forum"><a href="{!! $post->parent->parent->link !!}" title="{!! __('Go to forum') !!}">{{ $post->parent->parent->forum_name }}</a></span>
|
||||
<span class="f-psh-topic"><a href="{!! $post->parent->link !!}" title="{!! __('Go to topic') !!}">@if ($post->id !== $post->parent->first_post_id) {!! __('Re') !!} @endif {{ cens($post->parent->subject) }}</a></span>
|
||||
|
|
@ -56,34 +56,34 @@
|
|||
</h3>
|
||||
<span class="f-post-number">#{!! $post->postNumber !!}</span>
|
||||
</header>
|
||||
<div class="f-post-body clearfix">
|
||||
<address class="f-post-left">
|
||||
<ul class="f-user-info">
|
||||
<address class="f-post-user">
|
||||
<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 !!}">{{ cens($post->parent->subject) }}</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 !!}">{{ cens($post->parent->subject) }}</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>
|
||||
</address>
|
||||
<div class="f-post-right f-post-main">
|
||||
</ul>
|
||||
</address>
|
||||
<div class="f-post-body">
|
||||
<div class="f-post-main">
|
||||
{!! $post->html() !!}
|
||||
</div>
|
||||
</div>
|
||||
<footer class="f-post-footer clearfix">
|
||||
<div class="f-post-left">
|
||||
<footer class="f-post-footer">
|
||||
<div class="f-post-footer-add">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="f-post-right">
|
||||
<div class="f-post-btns">
|
||||
<ul>
|
||||
<li class="f-posttotopic"><a class="f-btn" href="{!! $post->parent->link !!}">{!! __('Go to topic') !!}</a></li>
|
||||
<li class="f-posttopost"><a class="f-btn" href="{!! $post->link !!}">{!! __('Go to post') !!}</a></li>
|
||||
|
|
|
|||
|
|
@ -238,7 +238,7 @@ body,
|
|||
#fork .f-btn.f-minor:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
#fork .clearfix:before,
|
||||
#fork .clearfix:after {
|
||||
content: " ";
|
||||
|
|
@ -248,7 +248,7 @@ body,
|
|||
#fork .clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
*/
|
||||
#fork .left {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -1418,6 +1418,8 @@ body,
|
|||
}
|
||||
|
||||
#fork .f-post-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.625rem;
|
||||
border-bottom: 0.0625rem solid #AA7939;
|
||||
background-color: #D3B58D;
|
||||
|
|
@ -1428,64 +1430,44 @@ body,
|
|||
display: none;
|
||||
}
|
||||
|
||||
#fork .f-post-posted {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#fork .f-post-edited {
|
||||
float: left;
|
||||
font-style: italic;
|
||||
margin-left: 0.625rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#fork .f-post-number {
|
||||
float: right;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#fork .f-post-left {
|
||||
#fork .f-post-user {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0.625rem;
|
||||
background-color: #F8F4E3;
|
||||
}
|
||||
|
||||
#fork .f-post-right {
|
||||
padding: 0.625rem 0.625rem 0 0.625rem;
|
||||
}
|
||||
|
||||
#fork .f-post-footer .f-post-right {
|
||||
text-align: right;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
#fork .f-post-footer .f-post-right .f-btn {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#fork .f-post-footer .f-post-right:hover .f-btn,
|
||||
#fork .f-post-footer .f-post-right .f-btn:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#fork .f-post-footer .f-post-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fork .f-post-footer li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#fork .f-user-info {
|
||||
font-size: 0.875rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#fork .f-user-info-first,
|
||||
#fork .f-user-info-add {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fork .f-avatar {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#fork .f-avatar img {
|
||||
max-width: 4.6875rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#fork .f-username {
|
||||
font-size: 1.25rem;
|
||||
float: left;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
|
|
@ -1495,23 +1477,38 @@ body,
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#fork .f-username a {
|
||||
/* border: 0; */
|
||||
#fork .f-post-main,
|
||||
#fork .f-post-btns,
|
||||
#fork .f-post-signature {
|
||||
padding: 0.625rem 0.625rem 0 0.625rem;
|
||||
}
|
||||
|
||||
#fork .f-avatar {
|
||||
float: right;
|
||||
#fork .f-post-btns {
|
||||
text-align: right;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
#fork .f-avatar img {
|
||||
max-width: 4.6875rem;
|
||||
height: auto;
|
||||
#fork .f-post-btns .f-btn {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#fork .f-usertitle {
|
||||
clear: left;
|
||||
#fork .f-post-btns:hover .f-btn,
|
||||
#fork .f-post-btns .f-btn:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#fork .f-post-footer-add {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fork .f-post-footer li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
#fork .f-post-signature {
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.5;
|
||||
|
|
@ -1531,6 +1528,7 @@ body,
|
|||
#fork .f-bb-after {
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
#fork .f-bb-quote {
|
||||
|
|
@ -1540,7 +1538,7 @@ body,
|
|||
|
||||
#fork .f-bb-q-header {
|
||||
padding: 0.625rem;
|
||||
background-color: #D3B58D;
|
||||
background-color: #F8F4E3 /*#D3B58D*/;
|
||||
}
|
||||
|
||||
#fork .f-bb-q-body {
|
||||
|
|
@ -1550,7 +1548,7 @@ body,
|
|||
#fork .f-bb-code {
|
||||
border: 0.0625rem solid #AA7939;
|
||||
padding: 0.625rem;
|
||||
background-color: #D3B58D;
|
||||
background-color: #F8F4E3 /*#D3B58D*/;
|
||||
overflow: auto;
|
||||
max-height: 45rem;
|
||||
}
|
||||
|
|
@ -1585,39 +1583,31 @@ body,
|
|||
|
||||
@media screen and (min-width: 50rem) {
|
||||
#fork .f-post {
|
||||
background-color: #F8F4E3;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#fork .f-post-body,
|
||||
#fork .f-post-footer {
|
||||
#fork .f-post-header {
|
||||
width: 100%;
|
||||
float: right;
|
||||
margin-right: -13rem;
|
||||
position: relative;
|
||||
border-left: 0.0625rem solid #AA7939;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#fork .f-post-left {
|
||||
#fork .f-post-user {
|
||||
flex-direction: column;
|
||||
width: 13rem;
|
||||
margin-left: -13rem;
|
||||
float: left;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#fork .f-post-right {
|
||||
padding-right: 13.625rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#fork .f-post-footer .f-post-left {
|
||||
#fork .f-user-info-first {
|
||||
display: block;
|
||||
padding-top: 0;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
#fork .f-userstatus {
|
||||
font-size: 0.875rem;
|
||||
#fork .f-user-info .f-username {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fork .f-avatar {
|
||||
order: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#fork .f-user-info-add {
|
||||
|
|
@ -1626,8 +1616,28 @@ body,
|
|||
/* word-break: break-all; */
|
||||
}
|
||||
|
||||
#fork .f-username, .f-avatar {
|
||||
float: none;
|
||||
#fork .f-post-body,
|
||||
#fork .f-post-btns {
|
||||
width: calc(100% - 13rem);
|
||||
position: relative;
|
||||
border-left: 0.0625rem solid #AA7939;
|
||||
}
|
||||
|
||||
#fork .f-post-footer {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#fork .f-post-footer-add {
|
||||
display: block;
|
||||
width: 13rem;
|
||||
padding: 0 0.625rem 0.625rem 0.625rem;
|
||||
background-color: #F8F4E3;
|
||||
}
|
||||
|
||||
#fork .f-userstatus {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
#fork .f-avatar img {
|
||||
|
|
@ -1644,6 +1654,7 @@ body,
|
|||
}
|
||||
|
||||
#fork .f-preview > h2 {
|
||||
display: block;
|
||||
/** font-family: Arial, Helvetica, sans-serif; */
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
|
|
@ -1651,13 +1662,8 @@ body,
|
|||
}
|
||||
|
||||
#fork .f-preview .f-post-body {
|
||||
float: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#fork .f-preview .f-post-right {
|
||||
padding-right: 0.625rem;
|
||||
border-top: 0.0625rem solid #AA7939;
|
||||
border-top: 0.125rem solid #AA7939;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*****************************/
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue