Small style improvements

diff --git a/com.woltlab.wcf/templates/footer.tpl b/com.woltlab.wcf/templates/footer.tpl
index 496ff4876a80e8766e0805f2d08d49e7bec61c4e..2cc8504a717c9dc02373a9a79805b06076dcb2d0 100644 (file)
--- a/com.woltlab.wcf/templates/footer.tpl
+++ b/com.woltlab.wcf/templates/footer.tpl
@@ -2,11 +2,13 @@
                                
                                {hascontent}
                                        <div class="boxesContentBottom">
-                                               {content}
-                                                       {foreach from=$__wcf->getBoxHandler()->getBoxes('contentBottom') item=box}
-                                                               {@$box}
-                                                       {/foreach}
-                                               {/content}
+                                               <div class="boxContainer">
+                                                       {content}
+                                                               {foreach from=$__wcf->getBoxHandler()->getBoxes('contentBottom') item=box}
+                                                                       {@$box}
+                                                               {/foreach}
+                                                       {/content}
+                                               </div>  
                                        </div>
                                {/hascontent}
                                
@@ -17,26 +19,28 @@
                                
                        {hascontent}
                                <aside class="sidebar boxesSidebarRight">
-                                       {content}
-                                               {event name='boxesSidebarRightTop'}
-                                                                                               
-                                               {* WCF2.1 Fallback *}
-                                               {if !$sidebar|empty}
-                                                       {if !$sidebarOrientation|isset || $sidebarOrientation == 'right'}
-                                                               {@$sidebar}
+                                       <div class="boxContainer">
+                                               {content}
+                                                       {event name='boxesSidebarRightTop'}
+                                                                                                       
+                                                       {* WCF2.1 Fallback *}
+                                                       {if !$sidebar|empty}
+                                                               {if !$sidebarOrientation|isset || $sidebarOrientation == 'right'}
+                                                                       {@$sidebar}
+                                                               {/if}
                                                        {/if}
-                                               {/if}
-                                               
-                                               {if !$sidebarRight|empty}
-                                                       {@$sidebarRight}
-                                               {/if}
+                                                       
+                                                       {if !$sidebarRight|empty}
+                                                               {@$sidebarRight}
+                                                       {/if}
+                                                       
+                                                       {foreach from=$__wcf->getBoxHandler()->getBoxes('sidebarRight') item=box}
+                                                               {@$box}
+                                                       {/foreach}
                                                
-                                               {foreach from=$__wcf->getBoxHandler()->getBoxes('sidebarRight') item=box}
-                                                       {@$box}
-                                               {/foreach}
-                                       
-                                               {event name='boxesSidebarRightBottom'}
-                                       {/content}
+                                                       {event name='boxesSidebarRightBottom'}
+                                               {/content}
+                                       </div>  
                                </aside>
                        {/hascontent}
                </div>
@@ -45,11 +49,13 @@
        {hascontent}
                <div class="boxesBottom">
                        <div class="layoutBoundary">
-                               {content}
-                                       {foreach from=$__wcf->getBoxHandler()->getBoxes('bottom') item=box}
-                                               {@$box}
-                                       {/foreach}
-                               {/content}
+                               <div class="boxContainer">
+                                       {content}
+                                               {foreach from=$__wcf->getBoxHandler()->getBoxes('bottom') item=box}
+                                                       {@$box}
+                                               {/foreach}
+                                       {/content}
+                               </div>  
                        </div>  
                </div>
        {/hascontent}
@@ -57,13 +63,15 @@
        {hascontent}
                <div class="boxesFooterBoxes">                  
                        <div class="layoutBoundary">
-                               {content}
-                                       {if !$footerBoxes|empty}{@$footerBoxes}{/if}
-                               
-                                       {foreach from=$__wcf->getBoxHandler()->getBoxes('footerBoxes') item=box}
-                                               {@$box}
-                                       {/foreach}
-                               {/content}
+                               <div class="boxContainer">
+                                       {content}
+                                               {if !$footerBoxes|empty}{@$footerBoxes}{/if}
+                                       
+                                               {foreach from=$__wcf->getBoxHandler()->getBoxes('footerBoxes') item=box}
+                                                       {@$box}
+                                               {/foreach}
+                                       {/content}
+                               </div>  
                        </div>
                </div>
        {/hascontent}

diff --git a/com.woltlab.wcf/templates/header.tpl b/com.woltlab.wcf/templates/header.tpl
index c43f53daecdb11cbf1988351b43f0888aa53bf56..0d35123630d2964997e52701aa27a9f62e492ca0 100644 (file)
--- a/com.woltlab.wcf/templates/header.tpl
+++ b/com.woltlab.wcf/templates/header.tpl
@@ -10,11 +10,13 @@
        {hascontent}
                <div class="boxesHeaderBoxes">
                        <div class="layoutBoundary">
-                               {content}
-                                       {foreach from=$__wcf->getBoxHandler()->getBoxes('headerBoxes') item=box}
-                                               {@$box}
-                                       {/foreach}
-                               {/content}
+                               <div class="boxContainer">
+                                       {content}
+                                               {foreach from=$__wcf->getBoxHandler()->getBoxes('headerBoxes') item=box}
+                                                       {@$box}
+                                               {/foreach}
+                                       {/content}
+                               </div>  
                        </div>
                </div>
        {/hascontent}
@@ -24,11 +26,13 @@
        {hascontent}
                <div class="boxesTop">
                        <div class="layoutBoundary">
-                               {content}
-                                       {foreach from=$__wcf->getBoxHandler()->getBoxes('top') item=box}
-                                               {@$box}
-                                       {/foreach}
-                               {/content}
+                               <div class="boxContainer">
+                                       {content}
+                                               {foreach from=$__wcf->getBoxHandler()->getBoxes('top') item=box}
+                                                       {@$box}
+                                               {/foreach}
+                                       {/content}
+                               </div>  
                        </div>
                </div>
        {/hascontent}
@@ -37,30 +41,32 @@
                <div class="layoutBoundary">
                        {hascontent}
                                <aside class="sidebar boxesSidebarLeft">
-                                       {content}
-                                               {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}{/if}
-                                               
-                                               {event name='boxesSidebarLeftTop'}
-                                               
-                                               {* WCF2.1 Fallback *}
-                                               {if !$sidebar|empty}
-                                                       {if !$sidebarOrientation|isset || $sidebarOrientation == 'left'}
-                                                               {@$sidebar}
-                                                       {/if}   
-                                               {/if}
-                                               
-                                               {if !$sidebarLeft|empty}
-                                                       {@$sidebarLeft}
-                                               {/if}
-                                               
-                                               {foreach from=$__wcf->getBoxHandler()->getBoxes('sidebarLeft') item=box}
-                                                       {@$box}
-                                               {/foreach}
-                       
-                                               {event name='boxesSidebarLeftBottom'}
-                       
-                                               {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
-                                       {/content}
+                                       <div class="boxContainer">
+                                               {content}
+                                                       {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}{/if}
+                                                       
+                                                       {event name='boxesSidebarLeftTop'}
+                                                       
+                                                       {* WCF2.1 Fallback *}
+                                                       {if !$sidebar|empty}
+                                                               {if !$sidebarOrientation|isset || $sidebarOrientation == 'left'}
+                                                                       {@$sidebar}
+                                                               {/if}   
+                                                       {/if}
+                                                       
+                                                       {if !$sidebarLeft|empty}
+                                                               {@$sidebarLeft}
+                                                       {/if}
+                                                       
+                                                       {foreach from=$__wcf->getBoxHandler()->getBoxes('sidebarLeft') item=box}
+                                                               {@$box}
+                                                       {/foreach}
+                               
+                                                       {event name='boxesSidebarLeftBottom'}
+                               
+                                                       {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
+                                               {/content}
+                                       </div>  
                                </aside>
                        {/hascontent}
                        
@@ -69,11 +75,13 @@
                                
                                {hascontent}
                                        <div class="boxesContentTop">
-                                               {content}
-                                                       {foreach from=$__wcf->getBoxHandler()->getBoxes('contentTop') item=box}
-                                                               {@$box}
-                                                       {/foreach}
-                                               {/content}
+                                               <div class="boxContainer">
+                                                       {content}
+                                                               {foreach from=$__wcf->getBoxHandler()->getBoxes('contentTop') item=box}
+                                                                       {@$box}
+                                                               {/foreach}
+                                                       {/content}
+                                               </div>  
                                        </div>
                                {/hascontent}
                                

diff --git a/com.woltlab.wcf/templates/pageFooter.tpl b/com.woltlab.wcf/templates/pageFooter.tpl
index 35ec30e87a31bf34af7c0c87ece2decc5151ebc5..2f6c23fcee731da8f148caab9e4430cd916d7e39 100644 (file)
--- a/com.woltlab.wcf/templates/pageFooter.tpl
+++ b/com.woltlab.wcf/templates/pageFooter.tpl
@@ -2,11 +2,13 @@
        <div class="layoutBoundary">
                {hascontent}
                        <div class="boxesFooter">
-                               {content}
-                                       {foreach from=$__wcf->getBoxHandler()->getBoxes('footer') item=box}
-                                               {@$box}
-                                       {/foreach}
-                               {/content}
+                               <div class="boxContainer">
+                                       {content}
+                                               {foreach from=$__wcf->getBoxHandler()->getBoxes('footer') item=box}
+                                                       {@$box}
+                                               {/foreach}
+                                       {/content}
+                               </div>  
                        </div>
                {/hascontent}
                

diff --git a/com.woltlab.wcf/templates/pageHeader.tpl b/com.woltlab.wcf/templates/pageHeader.tpl
index 4b1451e7f3e334ba91ac7e2c99edcf5847b544ac..200dce29a270d35e096a8a0b10164fe89c143770 100644 (file)
--- a/com.woltlab.wcf/templates/pageHeader.tpl
+++ b/com.woltlab.wcf/templates/pageHeader.tpl
@@ -30,11 +30,13 @@
        {hascontent}
                <div class="boxesHero">
                        <div class="layoutBoundary">
-                               {content}
-                                       {foreach from=$__wcf->getBoxHandler()->getBoxes('hero') item=box}
-                                               {@$box}
-                                       {/foreach}
-                               {/content}
+                               <div class="boxContainer">
+                                       {content}
+                                               {foreach from=$__wcf->getBoxHandler()->getBoxes('hero') item=box}
+                                                       {@$box}
+                                               {/foreach}
+                                       {/content}
+                               </div>  
                        </div>
                </div>
        {/hascontent}

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index a2bfd1c7128b980f143e035563b32a67accc4ee3..829d596d51808e8e69c614b950b8a2bdf5ca9165 100644 (file)
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -60,17 +60,19 @@
 .boxesHeaderBoxes {
        background-color: rgb(247, 248, 250); // @todo
        
-       .layoutBoundary {
+       .boxContainer {
                display: flex;
                flex-wrap: wrap;
+               margin-left: -10px;
+               margin-right: -10px;
                padding: 40px 0;
        }
        
        .box {
                flex: 0 0 25%;
-               padding-right: 10px;
                padding-left: 10px;
-               
+               padding-right: 10px;
+                               
                &:nth-child(4n+1):not(:first-child) {
                        margin-top: 20px;
                }
@@ -266,26 +268,22 @@
                color: $wcfFooterBoxText;
        }
        
-       .layoutBoundary {
+       .boxContainer {
                display: flex;
                flex-wrap: wrap;
+               margin-left: -10px;
+               margin-right: -10px;
                padding: 40px 0;
        }
        
        .box {
                flex: 0 0 50%;
+               padding-left: 10px;
+               padding-right: 10px;
                
                &:nth-child(n+3) {
                        margin-top: 40px;
                }
-               
-               &:nth-child(even) {
-                       padding-left: 10px;
-               }
-               
-               &:nth-child(odd) {
-                       padding-right: 10px;
-               }
        }
        
        .boxImage {