Improved layout in article footer

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 519bc035ff0b4d1171988a7180056fbfbad29e36..204ffbdbc61bddb15bdcba7ef5dca94e2d474b54 100644 (file)
--- a/com.woltlab.wcf/templates/article.tpl
+++ b/com.woltlab.wcf/templates/article.tpl
@@ -110,9 +110,14 @@
                </ul>
        {/if}
        
-       <div class="articleLikesSummery"></div>
-       
-       <ul class="articleLikeButtons buttonGroup"></ul>
+       <div class="section row articleLikeSection">
+               <div class="col-xs-12 col-md-8">
+                       <div class="articleLikesSummery"></div>
+               </div>
+               <div class="col-xs-12 col-md-4">
+                       <ul class="articleLikeButtons buttonGroup"></ul>
+               </div>
+       </div>
 </section>
 
 {if ENABLE_SHARE_BUTTONS}

diff --git a/wcfsetup/install/files/style/ui/article.scss b/wcfsetup/install/files/style/ui/article.scss
index 1aa234818e66cedda49ad0eab7b0c04f0e895bc7..597e510ca7b6aec0fa64307ab5429e976079f9f8 100644 (file)
--- a/wcfsetup/install/files/style/ui/article.scss
+++ b/wcfsetup/install/files/style/ui/article.scss
@@ -24,12 +24,21 @@
                @include wcfFontBold;
        }
        
-       .articleLikesSummery:not(:empty) {
+       .articleTagList,
+       .articleLikeSection {
                margin-top: 20px;
        }
        
-       .articleLikeButtons:not(:empty) {
-               margin-top: 20px;
+       .articleLikeSection {
+               align-items: center;
+       }
+       
+       .articleLikeButtons {
+               justify-content: flex-end;
+               
+               .invisible {
+                       display: inline;
+               }
        }
 }
 

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 3520623cca81fe5234dbfe702278c90912436418..350989c052aaedddd6af211404636eb8f057dea5 100644 (file)
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -414,16 +414,9 @@
        }
        
        > .likesSummary {
-               color: $wcfContentDimmedText;
-               cursor: pointer;
                flex: 0 0 auto;
                
                @include wcfFontSmall;
-               
-               > .icon {
-                       color: $wcfContentDimmedText;
-                       margin-right: 5px;
-               }
        }
        
        > .messageFooterButtons {
@@ -437,6 +430,17 @@
        }
 }
 
+.likesSummary {
+       color: $wcfContentDimmedText;
+       cursor: pointer;
+       flex: 0 0 auto;
+       
+       > .icon {
+               color: $wcfContentDimmedText;
+               margin-right: 5px;
+       }
+}
+
 .messageSignature {
        border-top: 1px solid $wcfContentBorderInner;
        opacity: .6;