Fixed layout issue
authorMarcel Werk <burntime@woltlab.com>
Sun, 2 Jun 2013 18:01:55 +0000 (20:01 +0200)
committerMarcel Werk <burntime@woltlab.com>
Sun, 2 Jun 2013 18:01:55 +0000 (20:01 +0200)
com.woltlab.wcf/template/footer.tpl
com.woltlab.wcf/template/header.tpl
wcfsetup/install/files/acp/style/blueTemptation/individual.less
wcfsetup/install/files/acp/style/setup/WCFSetup.css
wcfsetup/install/files/acp/templates/footer.tpl
wcfsetup/install/files/acp/templates/header.tpl
wcfsetup/install/files/style/layout.less
wcfsetup/setup/template/footer.tpl
wcfsetup/setup/template/header.tpl

index 7a5730c2b022b223bf7571857cdc2c4fb8417e50..fc07a66ff16ccdc786feb34ddf3b172e27aed64f 100644 (file)
@@ -1,12 +1,13 @@
-                       {event name='contents'}
+                               {event name='contents'}
+                               
+                               {if $skipBreadcrumbs|empty}{include file='breadcrumbs' __microdata=false}{/if}
+                               
+                       </section>
                        
-                       {if $skipBreadcrumbs|empty}{include file='breadcrumbs' __microdata=false}{/if}
-                       
-               </section>
-               
-               {if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
-                       {@$__sidebar}
-               {/if} 
+                       {if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
+                               {@$__sidebar}
+                       {/if}
+               </div>
        </div>
 </div>
 
index 54a540138bb64c1f3917dec5111c47bcda188143..7559b88e7f3d83035abccdbeccfa786a0d6f8186 100644 (file)
 
 <div id="main" class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst}{if $sidebarOrientation == 'right' && $sidebarCollapsed} sidebarCollapsed{/if}{/if}">
        <div>
-               {capture assign='__sidebar'}
-                       {if $sidebar|isset}
-                               <aside class="sidebar"{if $sidebarOrientation|isset && $sidebarOrientation == 'right'} data-is-open="{if $sidebarCollapsed}false{else}true{/if}" data-sidebar-name="{$sidebarName}"{/if}>
-                                       <div>
-                                               {event name='sidebarBoxesTop'}
-                                               
-                                               {@$sidebar}
-                                               
-                                               {event name='sidebarBoxesBottom'}
-                                       </div>
-                               </aside>
-                               
-                               {if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
-                                       <script type="text/javascript">
-                                               //<![CDATA[
-                                               $(function() {
-                                                       new WCF.Collapsible.Sidebar();
-                                               });
-                                               //]]>
-                                       </script>
+               <div>
+                       {capture assign='__sidebar'}
+                               {if $sidebar|isset}
+                                       <aside class="sidebar"{if $sidebarOrientation|isset && $sidebarOrientation == 'right'} data-is-open="{if $sidebarCollapsed}false{else}true{/if}" data-sidebar-name="{$sidebarName}"{/if}>
+                                               <div>
+                                                       {event name='sidebarBoxesTop'}
+                                                       
+                                                       {@$sidebar}
+                                                       
+                                                       {event name='sidebarBoxesBottom'}
+                                               </div>
+                                       </aside>
+                                       
+                                       {if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
+                                               <script type="text/javascript">
+                                                       //<![CDATA[
+                                                       $(function() {
+                                                               new WCF.Collapsible.Sidebar();
+                                                       });
+                                                       //]]>
+                                               </script>
+                                       {/if}
                                {/if}
-                       {/if}
-               {/capture}
-               
-               {if !$sidebarOrientation|isset || $sidebarOrientation == 'left'}
-                       {@$__sidebar}
-               {/if} 
-                               
-               <section id="content" class="content">
+                       {/capture}
                        
-                       {event name='contents'}
-                       
-                       {if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
+                       {if !$sidebarOrientation|isset || $sidebarOrientation == 'left'}
+                               {@$__sidebar}
+                       {/if} 
+                                       
+                       <section id="content" class="content">
+                               
+                               {event name='contents'}
+                               
+                               {if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
                        
\ No newline at end of file
index 0b8130034f373522ccc1b9ab82cfd749f23552ff..848e174bbaf4003f92238fb513dc5cf2a50eec66 100644 (file)
@@ -126,16 +126,18 @@ body, .tabularBox, .dialogTitlebar {
 
        #main {
                > div {
-                       > .sidebar {
-                               .boxShadowInset(0, 0, rgba(0, 0, 0, .1), 2px);
-                               
-                               > span > .collapsibleButton {
-                                       border-width: 1px 0 1px 1px;
-                                       border-style: solid;
-                                       border-color: darken(@wcfSidebarBackgroundColor, 8%);
-                                       clip: rect(-5px 25px 31px -5px);
+                       > div {
+                               > .sidebar {
+                                       .boxShadowInset(0, 0, rgba(0, 0, 0, .1), 2px);
                                        
-                                       .boxShadow(0, 0, rgba(0, 0, 0, 0.1), 2px);
+                                       > span > .collapsibleButton {
+                                               border-width: 1px 0 1px 1px;
+                                               border-style: solid;
+                                               border-color: darken(@wcfSidebarBackgroundColor, 8%);
+                                               clip: rect(-5px 25px 31px -5px);
+                                               
+                                               .boxShadow(0, 0, rgba(0, 0, 0, 0.1), 2px);
+                                       }
                                }
                        }
                }
index e6852317e7f8c1854617dcaa3d2b9b7243f114d2..de8f8cd9d1a86ebbc906597742e144ef745f69b3 100644 (file)
@@ -1,4 +1,4 @@
-/* stylesheet for 'Blue Temptation', generated on Tue, 28 May 2013 13:51:45 +0000 -- DO NOT EDIT */
+/* stylesheet for 'Blue Temptation', generated on Sun, 02 Jun 2013 17:58:58 +0000 -- DO NOT EDIT */
 
 html,
 body,
@@ -415,6 +415,7 @@ q:after {
 }
 .codeBox {
   background-color: #ffffff;
+  clear: both;
 }
 .codeBox > div {
   padding: 14px 21px 14px 14px;
@@ -544,6 +545,7 @@ q:after {
 }
 .quoteBox {
   background-color: #ffffff;
+  clear: both;
   min-height: 28px;
   margin-bottom: 4px;
   position: relative;
@@ -590,6 +592,7 @@ q:after {
 }
 .spoilerBox {
   background-color: #ffffff;
+  clear: both;
   padding-bottom: 7px;
 }
 .spoilerBox > header {
@@ -2233,7 +2236,7 @@ a.badge:hover.pink {
 @font-face {
   font-family: 'FontAwesome';
   src: url('../font/fontawesome-webfont.eot?v=3.1.1');
-  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.1') format('embedded-opentype'), url('../font/fontawesome-webfont.ttf?v=3.1.1') format('truetype');
+  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.1.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.1.1') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
@@ -2282,7 +2285,6 @@ a > span.icon:not(.pointer) {
 }
 .icon-spinner {
   height: auto;
-  width: auto;
   -moz-animation: spin 2s infinite linear;
   -o-animation: spin 2s infinite linear;
   -webkit-animation: spin 2s infinite linear;
@@ -3422,7 +3424,7 @@ a > span.icon:not(.pointer) {
 }
 @media only screen and (min-width: 801px) {
   body {
-    min-width: 1024px;
+    min-width: 980px;
   }
 }
 #pageHeader {
@@ -3994,21 +3996,21 @@ a > span.icon:not(.pointer) {
 }
 #main {
   z-index: 110;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
+}
+#main > div {
   display: table;
-  width: 100%;
   table-layout: fixed;
+  width: 100%;
 }
-#main > div {
+#main > div > div {
   display: table-row;
 }
-#main > div > .sidebar,
-#main > div > .content {
+#main > div > div > .sidebar,
+#main > div > div > .content {
   display: table-cell;
   vertical-align: top;
 }
-#main > div > .sidebar {
+#main > div > div > .sidebar {
   background-color: #d8e7f5;
   width: 300px;
   z-index: 120;
@@ -4019,10 +4021,10 @@ a > span.icon:not(.pointer) {
   -webkit-transition-timing-function: ease;
   transition-timing-function: ease;
 }
-#main > div > .sidebar > span {
+#main > div > div > .sidebar > span {
   position: relative;
 }
-#main > div > .sidebar > span > .collapsibleButton {
+#main > div > div > .sidebar > span > .collapsibleButton {
   background-color: #d8e7f5;
   border-radius: 6px 0 0 6px;
   display: block;
@@ -4033,7 +4035,7 @@ a > span.icon:not(.pointer) {
   top: 0;
   width: 24px;
 }
-#main > div > .sidebar > span > .collapsibleButton:before {
+#main > div > div > .sidebar > span > .collapsibleButton:before {
   content: "\f054";
   font-family: FontAwesome;
   font-size: 14px;
@@ -4042,7 +4044,7 @@ a > span.icon:not(.pointer) {
   top: 4px;
   text-shadow: 0 1px 0 rgba(255,255,255,0.8);
 }
-#main > div > .sidebar > div {
+#main > div > div > .sidebar > div {
   overflow: hidden;
   width: 300px;
   -webkit-transition-property: width;
@@ -4052,7 +4054,7 @@ a > span.icon:not(.pointer) {
   -webkit-transition-timing-function: ease;
   transition-timing-function: ease;
 }
-#main > div > .content {
+#main > div > div > .content {
   background-color: #ffffff;
   min-height: 100px;
   padding: 7px 38px 21px;
@@ -4061,26 +4063,28 @@ a > span.icon:not(.pointer) {
 #main:not(.sidebarOrientationLeft):not(.sidebarOrientationRight) .sidebar {
   display: none;
 }
-#main.sidebarOrientationRight.sidebarCollapsed > div > .sidebar {
+#main.sidebarOrientationRight.sidebarCollapsed > div > div > .sidebar {
   width: 20px;
 }
-#main.sidebarOrientationRight.sidebarCollapsed > div > .sidebar > span > .collapsibleButton:before {
+#main.sidebarOrientationRight.sidebarCollapsed > div > div > .sidebar > span > .collapsibleButton:before {
   content: "\f053";
 }
-#main.sidebarOrientationRight.sidebarCollapsed > div > .sidebar > div {
+#main.sidebarOrientationRight.sidebarCollapsed > div > div > .sidebar > div {
   width: 0;
 }
 @media only screen and (max-width: 800px) {
   #main {
-    display: block;
     position: relative;
     margin-top: 7px;
   }
   #main > div {
     display: block;
   }
-  #main > div > .sidebar,
-  #main > div > .content {
+  #main > div > div {
+    display: block;
+  }
+  #main > div > div > .sidebar,
+  #main > div > div > .content {
     display: block;
   }
   #main.sidebarOrientationRight .sidebar {
@@ -5927,6 +5931,9 @@ li:nth-child(2n+1) .message .messageContent {
 .cke_combo__fontsize .cke_combo_text {
   width: auto !important;
 }
+.cke_dialog_background_cover {
+  background-color: #000 !important;
+}
 @media only screen and (max-width: 800px) {
   .message.messageSidebarOrientationLeft .messageContent,
   .message.messageSidebarOrientationRight .messageContent {
@@ -6817,10 +6824,10 @@ body,
     -webkit-transition-timing-function: linear;
     transition-timing-function: linear;
   }
-  #main > div > .sidebar {
+  #main > div > div > .sidebar {
     box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.1);
   }
-  #main > div > .sidebar > span > .collapsibleButton {
+  #main > div > div > .sidebar > span > .collapsibleButton {
     border-width: 1px 0 1px 1px;
     border-style: solid;
     border-color: #b8d3ed;
index 2e6a466c00dc242309317c9c29fd3902af5d00c9..c5af57076e8169e53ca4f4afbf1e1731040c145a 100644 (file)
@@ -1,4 +1,5 @@
-                       </section>
+                               </section>
+                       </div>
                </div>
        </div>
        
index 0c5173af3840f7d0fe98bb6579150375d785714b..a8fbbd03287ee27b25281f3a872e7e847c98079f 100644 (file)
        
        <div id="main" class="layoutFluid{if PACKAGE_ID && $__wcf->user->userID && $__wcf->getACPMenu()->getMenuItems('')|count} sidebarOrientationLeft{/if}">
                <div>
-                       {hascontent}
-                               <aside class="sidebar collapsibleMenu">
-                                       <div>
-                                               {content}
-                                                       {* work-around for unknown core-object during WCFSetup *}
-                                                       {if PACKAGE_ID && $__wcf->user->userID}
-                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
-                                                                       <div id="{$_parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$_parentMenuItem->menuItem}">
-                                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
-                                                                                       <fieldset>
-                                                                                               <legend class="menuHeader" data-menu-item="{$_menuItem->menuItem}">{@$_menuItem}</legend>
-                                                                                               
-                                                                                               <nav class="menuGroupItems">
-                                                                                                       <ul id="{$_menuItem->menuItem}">
-                                                                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
-                                                                                                                       {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
-                                                                                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
-                                                                                                                                       <li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{@$subMenuItem}</a></li>
-                                                                                                                               {/foreach}
-                                                                                                                       {else}
-                                                                                                                               <li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{@$menuItemCategory}</a></li>
-                                                                                                                       {/if}
-                                                                                                               {/foreach}
-                                                                                                       </ul>
-                                                                                               </nav>
-                                                                                       </fieldset>
-                                                                               {/foreach}
-                                                                       </div>
-                                                               {/foreach}
-                                                       {/if}
-                                               {/content}
-                                       </div>
-                               </aside>
-                       {/hascontent}
-                       
-                       <section id="content" class="content">
+                       <div>
+                               {hascontent}
+                                       <aside class="sidebar collapsibleMenu">
+                                               <div>
+                                                       {content}
+                                                               {* work-around for unknown core-object during WCFSetup *}
+                                                               {if PACKAGE_ID && $__wcf->user->userID}
+                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
+                                                                               <div id="{$_parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$_parentMenuItem->menuItem}">
+                                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
+                                                                                               <fieldset>
+                                                                                                       <legend class="menuHeader" data-menu-item="{$_menuItem->menuItem}">{@$_menuItem}</legend>
+                                                                                                       
+                                                                                                       <nav class="menuGroupItems">
+                                                                                                               <ul id="{$_menuItem->menuItem}">
+                                                                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
+                                                                                                                               {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+                                                                                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+                                                                                                                                               <li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{@$subMenuItem}</a></li>
+                                                                                                                                       {/foreach}
+                                                                                                                               {else}
+                                                                                                                                       <li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{@$menuItemCategory}</a></li>
+                                                                                                                               {/if}
+                                                                                                                       {/foreach}
+                                                                                                               </ul>
+                                                                                                       </nav>
+                                                                                               </fieldset>
+                                                                                       {/foreach}
+                                                                               </div>
+                                                                       {/foreach}
+                                                               {/if}
+                                                       {/content}
+                                               </div>
+                                       </aside>
+                               {/hascontent}
+                               
+                               <section id="content" class="content">
                                
\ No newline at end of file
index 48d19fedf0cebe3bc0c0f5203de7d08a5138ef4c..2c1a65a205fd8d942b2ddbd4cb5979807e7e19c2 100644 (file)
 #main {
        z-index: 110;
        
-       box-sizing:border-box;
-       -moz-box-sizing: border-box; /* Firefox */
-       display: table;
-       table-layout: fixed;
-       
-       &.layoutFluid {
-               width: 100%;
-       }
-       
        > div {
-               display: table-row;
+               display: table;
+               table-layout: fixed;
+               width: 100%;
                
-               > .sidebar,
-               > .content {
-                       display: table-cell;
-                       vertical-align: top;
-               }
-                               
-               > .sidebar {
-                       background-color: @wcfSidebarBackgroundColor;
-                       width: 300px;
-                       z-index: 120;
-                       
-                       .transition(width, .2s, ease);
+               > div {
+                       display: table-row;
                        
-                       > span {
-                               position: relative;
+                       > .sidebar,
+                       > .content {
+                               display: table-cell;
+                               vertical-align: top;
+                       }
+                                       
+                       > .sidebar {
+                               background-color: @wcfSidebarBackgroundColor;
+                               width: 300px;
+                               z-index: 120;
                                
-                               > .collapsibleButton {
-                                       background-color: @wcfSidebarBackgroundColor;
-                                       border-radius: 6px 0 0 6px;
-                                       display: block;
-                                       height: 24px;
-                                       left: -20px;
-                                       position: absolute;
-                                       text-decoration: none;
-                                       top: 0;
-                                       width: 24px;
+                               .transition(width, .2s, ease);
+                               
+                               > span {
+                                       position: relative;
                                        
-                                       &:before {
-                                               content: "\f054";
-                                               font-family: FontAwesome;
-                                               font-size: 14px;
+                                       > .collapsibleButton {
+                                               background-color: @wcfSidebarBackgroundColor;
+                                               border-radius: 6px 0 0 6px;
+                                               display: block;
+                                               height: 24px;
+                                               left: -20px;
                                                position: absolute;
-                                               left: 6px;
-                                               top: 4px;
+                                               text-decoration: none;
+                                               top: 0;
+                                               width: 24px;
                                                
-                                               .textShadow(@wcfSidebarBackgroundColor);
+                                               &:before {
+                                                       content: "\f054";
+                                                       font-family: FontAwesome;
+                                                       font-size: 14px;
+                                                       position: absolute;
+                                                       left: 6px;
+                                                       top: 4px;
+                                                       
+                                                       .textShadow(@wcfSidebarBackgroundColor);
+                                               }
                                        }
                                }
+                               
+                               > div {
+                                       overflow: hidden;
+                                       width: 300px;
+                                       
+                                       .transition(width, .2s, ease);
+                               }
                        }
                        
-                       > div {
-                               overflow: hidden;
-                               width: 300px;
-                               
-                               .transition(width, .2s, ease);
+                       > .content {
+                               background-color: @wcfContentBackgroundColor;
+                               min-height: 100px;
+                               padding: @wcfGapSmall @wcfGapLarge * 2 - @wcfGapTiny @wcfGapLarge;
+                               z-index: 130;
                        }
                }
-               
-               > .content {
-                       background-color: @wcfContentBackgroundColor;
-                       min-height: 100px;
-                       padding: @wcfGapSmall @wcfGapLarge * 2 - @wcfGapTiny @wcfGapLarge;
-                       z-index: 130;
-               }
        }
        
        &:not(.sidebarOrientationLeft):not(.sidebarOrientationRight) {
        }
        
        &.sidebarOrientationRight {
-               &.sidebarCollapsed > div {
+               &.sidebarCollapsed > div > div {
                        > .sidebar {
                                width: 20px;
                                
 @media only screen and (max-width: 800px) {
        /* hide sidebar */
        #main {
-               display: block;
                position: relative;
                margin-top: 7px;
                
                > div {
                        display: block;
                
-                       > .sidebar,
-                       > .content {
+                       > div {
                                display: block;
+                       
+                               > .sidebar,
+                               > .content {
+                                       display: block;
+                               }
                        }
                }
                
index 73d1c71afc08ab00ad149ce4192b414da47ba0fa..6724962f439bf8f74238b462a854c5b1da1bf363 100644 (file)
@@ -1,4 +1,5 @@
-                       </section>
+                               </section>
+                       </div>
                </div>
        </div>
        
index 9a5af39c756cb2262cfecd4e8c335fd94e898661..b5df6bc33d03bd636b081cf1ef3f230bb9a130b7 100644 (file)
        
        <div id="main" class="layoutFluid">
                <div>
-                       <section id="content" class="content">
-                               <header class="boxHeadline">
-                                       <h1>{lang}wcf.global.title{/lang}</h1>
-                                       <p>{lang}wcf.global.title.subtitle{/lang}</p>
-                                       <p><progress id="packageInstallationProgress" value="{@$progress}" max="100" style="width: 300px;" title="{@$progress}%">{@$progress}%</progress></p>
-                               </header>
-                               
+                       <div>
+                               <section id="content" class="content">
+                                       <header class="boxHeadline">
+                                               <h1>{lang}wcf.global.title{/lang}</h1>
+                                               <p>{lang}wcf.global.title.subtitle{/lang}</p>
+                                               <p><progress id="packageInstallationProgress" value="{@$progress}" max="100" style="width: 300px;" title="{@$progress}%">{@$progress}%</progress></p>
+                                       </header>