From 3eaca151a396f36ffcf385a6890eb5484c697fdc Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Thu, 14 Jan 2016 15:43:52 +0000 Subject: [PATCH] Mobile theme WIP: - Fix nm header styling and add new white icon for toggle menu - Implement custom theme color for nm header and plus_button --- pixelegg/css/mobile.css | 30 ++++++++++------ pixelegg/css/mobile.less | 33 +++++++++++++----- .../topmenu_items/mobile/menu_white.png | Bin 0 -> 325 bytes pixelegg/inc/class.pixelegg_framework.inc.php | 10 ++++++ 4 files changed, 55 insertions(+), 18 deletions(-) create mode 100644 pixelegg/images/topmenu_items/mobile/menu_white.png diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 59e7c83d64..21730c3b2c 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -6742,13 +6742,11 @@ span.egw_tutorial_title { #egw_fw_basecontainer div#egw_fw_menu { background-image: url(../images/topmenu_items/mobile/menu_active.png); cursor: pointer; - -webkit-transform: rotate(360deg); - transform: rotate(360deg); position: fixed; left: 13px; top: 13px; - width: 32px; - height: 32px; + width: 65px; + height: 50px; background-size: 32px 32px; background-repeat: no-repeat; z-index: 999; @@ -6758,6 +6756,9 @@ span.egw_tutorial_title { -moz-box-shadow: none; box-shadow: none; } + #egw_fw_basecontainer div#egw_fw_menu:focus { + outline: none; + } #egw_fw_basecontainer div#egw_fw_menu:active { -webkit-box-shadow: none; -moz-box-shadow: none; @@ -7258,11 +7259,6 @@ span.egw_tutorial_title { filter: gray; /* IE 6-9 */ } - .sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu { - background-image: url(../images/topmenu_items/mobile/menu.png); - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu { width: 82px !important; } @@ -7486,6 +7482,16 @@ span.egw_tutorial_title { /*mobile etemplate2*/ /*mobile etemplate2*/ @media only screen and (min-width: 320px) and (max-width: 1279px) { + body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu { + background-image: url(../images/topmenu_items/mobile/menu_white.png); + width: 65px; + height: 50px; + background-color: transparent; + top: -3px; + background-position: 15px center; + background-size: 32px 32px; + left: 0; + } body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_menu { top: 8px; } @@ -7601,7 +7607,10 @@ span.egw_tutorial_title { body .et2_nextmatch .search { background: #0c5da5; margin-top: 0; - margin-left: 60px; + padding-left: 60px; + box-shadow: 0px 4px 5px 2px silver; + position: relative; + z-index: 1; } body .et2_nextmatch .search button { height: 50px; @@ -7769,6 +7778,7 @@ span.egw_tutorial_title { } body .et2_nextmatch .egwGridView_outer thead { max-height: 1px; + display: none; } body .et2_nextmatch .egwGridView_outer thead tr th { font-size: large; diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index 87141c2529..29391044c6 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -204,13 +204,11 @@ div#egw_fw_menu{ background-image: url(../images/topmenu_items/mobile/menu_active.png); cursor: pointer; - -webkit-transform:rotate(360deg); - transform:rotate(360deg); position: fixed; left: 13px; top: 13px; - width: 32px; - height: 32px; + width: 65px; + height: 50px; background-size: 32px 32px; background-repeat: no-repeat; z-index: 999; @@ -219,6 +217,9 @@ -moz-box-shadow: none; box-shadow: none; } + &:focus { + outline: none; + } } div#egw_fw_menu:active { -webkit-box-shadow: none; @@ -721,9 +722,7 @@ .sidebar-toggle{ #egw_fw_top_toolbar div#egw_fw_menu{ - background-image: url(../images/topmenu_items/mobile/menu.png); - -webkit-transform:rotate(0deg); - transform:rotate(0deg); + } #egw_fw_sidebar{ #egw_fw_sidemenu{ @@ -1018,6 +1017,20 @@ @media only screen and (min-width: 320px) and (max-width: 1279px) { body { + #egw_fw_basecontainer.sidebar-toggle { + #egw_fw_top_toolbar { + div#egw_fw_menu { + background-image: url(../images/topmenu_items/mobile/menu_white.png); + width: 65px; + height: 50px; + background-color: transparent; + top: -3px; + background-position: 15px center; + background-size: 32px 32px; + left: 0; + } + } + } #egw_fw_basecontainer { #egw_fw_top_toolbar { div#egw_fw_menu { @@ -1156,7 +1169,10 @@ .search { background: @mobile-nm-search-bg; margin-top: 0; - margin-left: 60px; + padding-left: 60px; + box-shadow: 0px 4px 5px 2px silver; + position: relative; + z-index: 1; button { height: @mobile-elem-height; width: @mobile-button-width; @@ -1334,6 +1350,7 @@ .egwGridView_outer { thead{ max-height: 1px; + display: none; } thead tr th { font-size: large; diff --git a/pixelegg/images/topmenu_items/mobile/menu_white.png b/pixelegg/images/topmenu_items/mobile/menu_white.png new file mode 100644 index 0000000000000000000000000000000000000000..225147c9469d78d8e4a1b9ef4f9c3b50c7bcdd9b GIT binary patch literal 325 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzwj^(N7l!{JxM1({$v_d#0*}aI z1_o|n5N2eUHAey{$X?><>&pIsk&jQ%r2dX5A5iF$r;B4q#NoHoHgdK)2)I0VslFiQ z!gEx~C+FCeJ4xR*uxnp9A!H)N(i|MYY`>pH{exH^_w$XLw->v)99Sd3@M_nxj_7Q` zhM1Cu59QjP_ba%YR6JKOq(zFI`TS?rgVI=wKIU^f*&U`D*SiMVFr-F)nxA;tMC9YT z*9pJ&9XIh6X)y6+6l`1-)YtLD_r>K8_RMY98ZG*EMlM(-ar~pH<8zs9xrg_?&$vBp zI&0)KTiFwz=VUYfjh1s2T(xS^kA$_R2P@~*3D?yK*WF_>=3%~8x|H$Gi{%UZP9<-i Q3iKU=r>mdKI;Vst0NhJ`U;qFB literal 0 HcmV?d00001 diff --git a/pixelegg/inc/class.pixelegg_framework.inc.php b/pixelegg/inc/class.pixelegg_framework.inc.php index a4c15a55e0..27e9aa76b1 100755 --- a/pixelegg/inc/class.pixelegg_framework.inc.php +++ b/pixelegg/inc/class.pixelegg_framework.inc.php @@ -152,6 +152,16 @@ div#egw_fw_header, div.egw_fw_ui_category:hover,#loginMainDiv,#loginMainDiv #div #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_category_active{ background-color: $color_hex_darker !important; } + +/*nextmatch header and plus_button in mobile theme*/ +body div.et2_nextmatch .search, +body div.et2_nextmatch .search button, +body button.plus_button, +body div.et2_nextmatch .search .nm_action_header, +body div.et2_nextmatch .search .nm_toggle_header, +body div.et2_nextmatch .search .nm_favorites_button { + background-color: $color; +} "; } return $ret;