* Style refactoring 3

app/templates/post.forkbb.php

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

app/templates/topic.forkbb.php

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

app/templates/topic_in_search.forkbb.php

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

public/style/ForkBB/style.css

@@ -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-user-info {
+  font-size: 0.875rem;
+  margin-right: auto;
 }
 
-#fork .f-post-footer .f-post-left {
+#fork .f-user-info-first,
+#fork .f-user-info-add {
   display: none;
 }
 
-#fork .f-post-footer li {
-  display: inline;
-}
-
-#fork .f-user-info {
-  font-size: 0.875rem;
+#fork .f-avatar {
+  order: 1;
 }
 
-#fork .f-user-info-add {
-  display: none;
+#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-post-btns:hover .f-btn,
+#fork .f-post-btns .f-btn:focus {
+  opacity: 1;
+}
+
+
+
+#fork .f-post-footer-add {
+  display: none;
 }
 
-#fork .f-usertitle {
-  clear: left;
+#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-user-info-first {
+    display: block;
+    margin-bottom: 0.625rem;
   }
 
-  #fork .f-post-footer .f-post-left {
-    display: block;
-    padding-top: 0;
+  #fork .f-user-info .f-username {
+    display: none;
   }
 
-  #fork .f-userstatus {
-    font-size: 0.875rem;
+  #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%;
 }
 
 /*****************************/