Fixed issues in mobile version

diff --git a/wcfsetup/install/files/acp/templates/styleList.tpl b/wcfsetup/install/files/acp/templates/styleList.tpl
index 9c374dd93ad4ff1c7221ec61073639fb3e1218e1..d37f89b1eab8677209d5ff2a6c4d6c664792b6b9 100644 (file)
--- a/wcfsetup/install/files/acp/templates/styleList.tpl
+++ b/wcfsetup/install/files/acp/templates/styleList.tpl
@@ -38,18 +38,20 @@
                                                        <h3><a href="{link controller='StyleEdit' id=$style->styleID}{/link}">{$style->styleName}</a></h3>
                                                        {if $style->styleDescription}<small>{lang}{@$style->styleDescription}{/lang}</small>{/if}
                                                </div>
-                                               <ul class="buttonList" data-style-id="{@$style->styleID}">
-                                                       <li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a></li>
-                                                       <li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" title="{lang}wcf.acp.style.exportStyle{/lang}" class="jsTooltip"><span class="icon icon16 icon-download-alt"></span></a></li>
-                                                       
-                                                       {if !$style->isDefault}
-                                                               <li><span class="icon icon16 icon-{if $style->isDisabled}off{else}circle-blank{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $style->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$style->styleID}"></span></li>
-                                                               <li><a title="{lang}wcf.acp.style.button.setAsDefault{/lang}" class="jsSetAsDefault jsTooltip"><span class="icon icon16 icon-check"></span></a></li>
-                                                               <li><a title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message="{lang}wcf.acp.style.delete.confirmMessage{/lang}"><span class="icon icon16 icon-remove"></span></a></li>
-                                                       {/if}
-                                                       
-                                                       {event name='itemButtons'}
-                                               </ul>
+                                               <nav class="jsMobileNavigation buttonGroupNavigation">
+                                                       <ul class="buttonList" data-style-id="{@$style->styleID}">
+                                                               <li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a></li>
+                                                               <li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" title="{lang}wcf.acp.style.exportStyle{/lang}" class="jsTooltip"><span class="icon icon16 icon-download-alt"></span></a></li>
+                                                               
+                                                               {if !$style->isDefault}
+                                                                       <li><span class="icon icon16 icon-{if $style->isDisabled}off{else}circle-blank{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $style->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$style->styleID}"></span></li>
+                                                                       <li><a title="{lang}wcf.acp.style.button.setAsDefault{/lang}" class="jsSetAsDefault jsTooltip"><span class="icon icon16 icon-check"></span></a></li>
+                                                                       <li><a title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message="{lang}wcf.acp.style.delete.confirmMessage{/lang}"><span class="icon icon16 icon-remove"></span></a></li>
+                                                               {/if}
+                                                               
+                                                               {event name='itemButtons'}
+                                                       </ul>
+                                               </nav>
                                                <dl class="plain inlineDataList">
                                                        <dt>{lang}wcf.acp.style.users{/lang}</dt>
                                                        <dd>{#$style->users}</dd>

diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index 9beb31b09375e27d34ceebef517341b439dd8aa0..807dd97bc26450f61f91dc14d89ed3c76d7423c5 100644 (file)
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -155,40 +155,57 @@ button.active:hover {
 }
 
 @media only screen and (max-width: 800px) {
-       .buttonGroup {
-               min-height: 21px;
-               min-width: 21px;
-               position: relative;
-               z-index: 148;
-               
-               &:before {
-                       content: "\f03a";
-                       font-family: FontAwesome;
-                       font-size: 21px;
-                       right: 0;
-                       position: absolute;
-                       top: 0;
-               }
-               
-               > li {
-                       display: none;
+       nav.buttonGroupNavigation {
+               > a:first-child {
+                       display: inline-block;
+                       outline: 0;
                        
-                       &:not(:first-child) {
-                               > a {
-                                       border-top: 0;
-                               }
+                       > span.icon {
+                               font-size: 21px;
+                               height: 24px;
+                               width: 24px;
                        }
                        
-                       > .button {
-                               border-radius: 0 !important;
+                       + a {
+                               height: 100%;
+                               left: 0;
+                               position: absolute;
+                               top: 0;
+                               width: 100%;
+                               z-index:100;
+                       }
+                       
+                       &:focus {
+                               + a {
+                                       display: block;
+                               }
+                               
+                               ~ ul {
+                                       display: block;
+                               }
                        }
                }
                
-               &:hover {
+               > ul {
+                       display: none;
+                       opacity: 1;
+                       position: absolute;
+                       right: 0;
+                       z-index: 350;
+                       
+                       &:hover {
+                               display: block;
+                       }
+                       
                        > li {
                                display: block;
+                               float: none;
+                               opacity: 1 !important;
                                
                                > a {
+                                       .button;
+                                       
+                                       border-radius: 0 !important;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        width: 124px;

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index e8494b6a81e534379a0ae3d986a9e5adfb82cbff..f9387cafa949f0242978c8b73b2614e75782a6ae 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -362,6 +362,7 @@
                > a:first-child {
                        .button;
                        margin-left: @wcfGapSmall;
+                       outline: 0;
                        
                        + a {
                                height: 100%;
@@ -388,6 +389,10 @@
                        font-size: 120%;
                        left: @wcfGapSmall;
                        
+                       &:hover {
+                               display: block;
+                       }
+                       
                        > li.active {
                                > ul.invisible {
                                        display: block;
@@ -897,7 +902,7 @@
                        background-color: @wcfContainerHoverBackgroundColor;
                        
                        > div > div {
-                               > .buttonList {
+                               > .buttonGroupNavigation > .buttonList {
                                        opacity: 1;
                                }
                                
@@ -910,13 +915,16 @@
                > div > div {
                        position: relative;
                        
-                       > .buttonList {
-                               opacity: 0;
+                       > .buttonGroupNavigation {
                                position: absolute;
                                right: 0;
                                top: 0;
                                
-                               .transition(opacity, .1s);
+                               > .buttonList {
+                                       opacity: 0;
+                                       
+                                       .transition(opacity, .1s);
+                               }
                        }
                        
                        > .containerHeadline > .containerContentType {
@@ -954,10 +962,6 @@
                        .containerContentType {
                                display: none;
                        }
-                       
-                       > div > div > .buttonList {
-                               display: none;
-                       }
                }
                
                &.infoBoxList {
@@ -1221,12 +1225,19 @@
                        }
                }
                
-               + .boxHeadline {
-                       margin-top: 0;
+               &:not(:first-child) {
+                       display: none;
                }
        }
 }
 
+@media only screen and (min-width: 641px) and (max-width: 800px) {
+       .content > .breadcrumbs {
+               margin-left: @wcfGapMedium;
+               margin-right: @wcfGapMedium;
+       }
+}
+
 .smallBreadcrumbs {
        > li {
                display: inline;