From e4819fbf6f1893e946146261003bd788dd0b6e1e Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Sat, 23 Mar 2013 14:48:07 +0100 Subject: [PATCH] Add optimizations for mobile devices (WIP) --- com.woltlab.wcf/template/mainMenu.tpl | 9 +- wcfsetup/install/files/style/layout.less | 281 ++++++++++------------- wcfsetup/install/lang/de.xml | 1 + wcfsetup/install/lang/en.xml | 1 + 4 files changed, 133 insertions(+), 159 deletions(-) diff --git a/com.woltlab.wcf/template/mainMenu.tpl b/com.woltlab.wcf/template/mainMenu.tpl index a4f83e41c0..3251019f15 100644 --- a/com.woltlab.wcf/template/mainMenu.tpl +++ b/com.woltlab.wcf/template/mainMenu.tpl @@ -1,5 +1,12 @@ {if $__wcf->getPageMenu()->getMenuItems('header')|count > 0} {/if} diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less index 7e1eb35267..ca429f72ab 100644 --- a/wcfsetup/install/files/style/layout.less +++ b/wcfsetup/install/files/style/layout.less @@ -26,6 +26,12 @@ z-index: 100; } +@media only screen and (max-width: 640px) { + #pageHeader { + margin-top: 48px; + } +} + #top { display: block; height: 1px; @@ -141,7 +147,7 @@ height: auto; .icon { - font-size: 28px; + font-size: 21px; height: auto; width: auto; } @@ -151,12 +157,12 @@ > li { > a, > div:not(.dropdownMenu) { - height: 28px; - padding: 12px 11px 8px 11px; + height: 21px; + padding: 11px 11px 9px 11px; } > .framed > img { - margin-top: 0; + margin-top: -4px; } /* hide user panel labels */ @@ -168,19 +174,19 @@ } > .searchBar { - height: 48px; + height: 41px; min-width: 40px; right: 0 !important; &:before { - font-size: 28px; + font-size: 21px; } > form { display: none; input[type="search"] { - height: 48px; + height: 41px; padding-left: 40px; width: 100%; } @@ -277,48 +283,50 @@ } /* main menu */ -.mainMenu { - > ul { - background-color: @wcfMainMenuBackgroundColor; - display: inline-block; - - > li { +@media only screen and (min-width: 641px) { + .mainMenu { + > ul { + background-color: @wcfMainMenuBackgroundColor; display: inline-block; - font-size: @wcfTitleFontSize; - margin-top: -7px; - vertical-align: bottom; - > a { - color: @wcfMainMenuColor; + > li { display: inline-block; - padding: 9px 21px; - - &:hover { - color: @wcfMainMenuActiveColor; - text-decoration: none; - } - } - - &.active { - font-size: @wcfSubHeadlineFontSize; - margin-top: -8px; + font-size: @wcfTitleFontSize; + margin-top: -7px; + vertical-align: bottom; > a { - background-color: @wcfNavigationHeaderBackgroundColor; - color: @wcfMainMenuActiveColor; - font-weight: bold; - min-width: 80px; - padding: 14px 21px 8px; - text-align: center; + color: @wcfMainMenuColor; + display: inline-block; + padding: 9px 21px; + + &:hover { + color: @wcfMainMenuActiveColor; + text-decoration: none; + } + } + + &.active { + font-size: @wcfSubHeadlineFontSize; + margin-top: -8px; + + > a { + background-color: @wcfNavigationHeaderBackgroundColor; + color: @wcfMainMenuActiveColor; + font-weight: bold; + min-width: 80px; + padding: 14px 21px 8px; + text-align: center; + } + } + + &:not(.active) { + padding-top: 5px; + } + + &:not(:last-child) > a { + border-right: 1px solid @wcfContainerBorderColor; } - } - - &:not(.active) { - padding-top: 5px; - } - - &:not(:last-child) > a { - border-right: 1px solid @wcfContainerBorderColor; } } } @@ -326,67 +334,53 @@ @media only screen and (max-width: 640px) { .mainMenu { - float: left; - min-height: 38px; position: relative; - z-index: 150; + + &:hover > ul { + display: block; + } + + > .invisible { + .button; + margin-left: @wcfGapSmall; + padding-left: 28px; + + &:before { + content: "\f03a"; + font-family: FontAwesome; + font-size: 14px; + left: 9px; + position: absolute; + top: 6px; + } + } > ul { - border: solid 1px @wcfContainerBorderColor; + .dropdown .dropdownMenu; + font-size: 120%; left: @wcfGapSmall; - position: absolute; - - .borderRadius(5px); - > li { - display: none; - font-size: 120% !important; - margin: 0 !important; - padding: 0 !important; - overflow: hidden; - text-overflow: ellipsis; - width: 120px; - white-space: nowrap; - - &.active { + > li.active { + > ul.invisible { display: block; - - > a { - &:before { - content: "\f03a"; - font-family: FontAwesome; - font-size: 14px; - left: 7px; - position: absolute; - top: 7px; - } - } + font-size: 85%; + padding-left: 14px; } > a { - background-color: transparent !important; - border: 0 !important; - color: @wcfMainMenuColor !important; - font-weight: normal !important; - padding: 4px 4px 4px 28px !important; position: relative; - text-align: left !important; - } - } - - &:hover { - > li { - display: block; - &.active { - > a { - &:before { - content: "\f00c"; - } - } + &:after { + content: "\f00c"; + font-family: FontAwesome; + font-size: 14px; + position: absolute; + right: 7px; } } } + + } } } @@ -462,7 +456,8 @@ @media only screen and (max-width: 640px) { .navigation { > ul.navigationIcons, - > ul.navigationItems { + > ul.navigationItems, + > ul.navigationMenuItems { display: none; } } @@ -483,70 +478,6 @@ .navigationHeader { background-color: transparent; border: 0; - float: left; - margin-left: 127px; - min-height: 38px; - position: relative; - z-index: 149; - - > ul.navigationMenuItems { - background-color: @wcfMainMenuBackgroundColor; - border: solid 1px @wcfContainerBorderColor; - left: @wcfGapSmall; - position: absolute; - - .borderRadius(5px); - - > li { - display: none; - font-size: 120% !important; - margin: 0 !important; - overflow: hidden; - text-overflow: ellipsis; - width: 176px; - white-space: nowrap; - - &:first-child { - display: block; - - > a { - &:before { - content: "\f03a"; - font-family: FontAwesome; - font-size: 14px; - left: 7px; - position: absolute; - top: 7px; - } - } - } - - > a { - background-color: transparent !important; - border: 0 !important; - color: @wcfMainMenuColor !important; - display: inline-block; - font-weight: normal !important; - padding: 4px 4px 4px 28px !important; - position: relative; - text-align: left !important; - } - } - - &:hover { - > li { - display: block; - - &:first-child { - > a { - &:before { - content: ""; - } - } - } - } - } - } } } @@ -677,7 +608,7 @@ @media only screen and (max-width: 640px) { /* hide sidebar */ #main { - margin-top: 96px; + margin-top: 7px; .sidebar { display: none; @@ -688,8 +619,8 @@ border-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; - padding-left: @wcfGapSmall !important; - padding-right: @wcfGapSmall !important; + padding-left: 0 !important; + padding-right: 0 !important; > *:first-child { margin-top: 0; @@ -742,6 +673,8 @@ @media only screen and (max-width: 640px) { .boxHeadline { margin-top: @wcfGapSmall; + margin-left: @wcfGapSmall; + margin-right: @wcfGapSmall; } } @@ -771,6 +704,20 @@ } } +@media only screen and (max-width: 640px) { + .contentNavigation { + box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; + padding-left: @wcfGapSmall; + padding-right: @wcfGapSmall; + + > * { + margin-top: @wcfGapSmall; + } + } +} + .container { background-color: @wcfContainerBackgroundColor; border: 1px solid @wcfContainerBorderColor; @@ -781,6 +728,10 @@ } @media only screen and (max-width: 640px) { + .container { + border-width: 1px 0; + } + .containerPadding { padding: @wcfGapSmall; } @@ -1290,6 +1241,16 @@ } } +@media only screen and (max-width: 640px) { + .tabularBox { + border-width: 1px 0; + } + + .tabularBoxTitle { + border-top-width: 0; + } +} + .table { border-spacing: 0; width: 100%; @@ -1663,6 +1624,10 @@ ul.inlineDataList { } } } + + .contentNavigation .pageNavigation { + margin-top: @wcfGapSmall + 5; + } } .statusDisplay .pageNavigation { diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index c4a5ab77f0..831fd189d1 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -938,6 +938,7 @@ + diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index 2af558f91e..bcd933ba0f 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -930,6 +930,7 @@ + -- 2.20.1