From 5a73dfb42ed1fae51e873d9cdc2ec5b9ad78c80f Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Fri, 20 Feb 2015 13:04:20 +0000 Subject: [PATCH] Change the login layout if only it is called from devices with small screen --- pixelegg/css/mobile.css | 124 ++++++++++++++++---------------- pixelegg/css/mobile.less | 150 ++++++++++++++++++++------------------- 2 files changed, 139 insertions(+), 135 deletions(-) diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 1421dda292..4344359391 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -6265,67 +6265,6 @@ a.textSidebox { body { background-color: transparent; } - body div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { - width: 40%; - margin-top: 5px; - } - body div#loginMainDiv div#centerBox { - position: absolute; - margin: 0; - width: 100%; - background-color: transparent; - padding: 0; - -webkit-border-top-right-radius: 0; - -webkit-border-bottom-right-radius: 0; - -webkit-border-bottom-left-radius: 0; - -webkit-border-top-left-radius: 0; - -moz-border-radius-topright: 0; - -moz-border-radius-bottomright: 0; - -moz-border-radius-bottomleft: 0; - -moz-border-radius-topleft: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - background-color: none; - background-image: none; - background-repeat: none; - border: none; - border-radius: none; - } - body div#loginMainDiv div#centerBox form { - margin-top: -2em; - margin-right: 3em; - } - body div#loginMainDiv div#centerBox form table.divLoginbox { - width: 100%; - float: left; - } - body div#loginMainDiv div#centerBox form table.divLoginbox tr.hiddenCredential { - display: none; - } - body div#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] { - font-size: xx-large; - } - body div#loginMainDiv div#centerBox form table.divLoginbox input, - body div#loginMainDiv div#centerBox form table.divLoginbox select { - width: 100%; - height: 60px; - } - body div#loginMainDiv div#centerBox form table.divLoginbox td { - font-size: 300%; - padding: 0.8%; - } - body div#loginMainDiv div#centerBox form table.divLoginbox td.registration { - font-size: 180%; - } - body div#loginMainDiv div#centerBox form table.divLoginbox td select { - background-size: 48px auto; - } - body div#loginMainDiv div#centerBox #loginCdMessage { - font-size: large; - padding: 0; - } body div.egw_fw_mobile_iOS_popup_appHeader { padding-top: 15px; } @@ -7040,6 +6979,69 @@ a.textSidebox { background-position: center; } } +@media only screen and (max-device-width : 1024px) { + div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { + width: 40%; + margin-top: 5px; + } + div#loginMainDiv div#centerBox { + position: absolute; + margin: 0; + width: 100%; + background-color: transparent; + padding: 0; + -webkit-border-top-right-radius: 0; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0; + -moz-border-radius-topright: 0; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + background-color: none; + background-image: none; + background-repeat: none; + border: none; + border-radius: none; + } + div#loginMainDiv div#centerBox form { + margin-top: -2em; + margin-right: 3em; + } + div#loginMainDiv div#centerBox form table.divLoginbox { + width: 100%; + float: left; + } + div#loginMainDiv div#centerBox form table.divLoginbox tr.hiddenCredential { + display: none; + } + div#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] { + font-size: xx-large; + } + div#loginMainDiv div#centerBox form table.divLoginbox input, + div#loginMainDiv div#centerBox form table.divLoginbox select { + width: 100%; + height: 60px; + } + div#loginMainDiv div#centerBox form table.divLoginbox td { + font-size: 300%; + padding: 0.8%; + } + div#loginMainDiv div#centerBox form table.divLoginbox td.registration { + font-size: 180%; + } + div#loginMainDiv div#centerBox form table.divLoginbox td select { + background-size: 48px auto; + } + div#loginMainDiv div#centerBox #loginCdMessage { + font-size: large; + padding: 0; + } +} @media only screen and (max-device-width : 1024px) and (orientation : portrait) { body div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { width: 70%; diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index 63aac28461..161ebe80e0 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -23,6 +23,7 @@ @smartphone-max: 768px; /*Smartphones Min-Width*/ @smartphone-min: 321px; +@handheld: ~"only screen and (max-device-width : @{tablet-max})"; /*All devices portrait mode*/ @handheld-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (orientation : portrait)"; /*All devices landscape mode*/ @@ -35,80 +36,6 @@ @media all { body{ - - div#loginMainDiv{ - #divAppIconBar { - #divLogo img[src$="svg"] { - width:40%; - margin-top: 5px; - } - } - div#centerBox{ - position:absolute; - margin: 0; - width: 100%; - background-color: transparent; - padding: 0; - -webkit-border-top-right-radius: 0; - -webkit-border-bottom-right-radius:0; - -webkit-border-bottom-left-radius: 0; - -webkit-border-top-left-radius: 0; - -moz-border-radius-topright: 0; - -moz-border-radius-bottomright: 0; - -moz-border-radius-bottomleft: 0; - -moz-border-radius-topleft: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - background-color: none; - background-image: none; - background-image: none; - background-image: none; - background-image: none; - background-image: none; - background-image: none; - background-image: none; - background-repeat: none; - border:none; - border-radius: none; - form { - margin-top: -2em; - margin-right: 3em; - - table.divLoginbox { - width:100%; - float:left; - tr.hiddenCredential { - display:none; - } - input[type="submit"] { - font-size: xx-large; - - } - input, select { - width:100%; - height:60px; - } - td { - font-size: 300%; - padding:0.8%; - &.registration{ - font-size: 180%; - } - select { - background-size: 48px auto; - } - } - } - } - #loginCdMessage { - font-size:large; - padding:0; - } - } - } - background-color: transparent; // iOS appHeader class div.egw_fw_mobile_iOS_popup_appHeader{ @@ -829,6 +756,81 @@ background-position: center; } } +@media @handheld +{ + div#loginMainDiv{ + #divAppIconBar { + #divLogo img[src$="svg"] { + width:40%; + margin-top: 5px; + } + } + div#centerBox{ + position:absolute; + margin: 0; + width: 100%; + background-color: transparent; + padding: 0; + -webkit-border-top-right-radius: 0; + -webkit-border-bottom-right-radius:0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0; + -moz-border-radius-topright: 0; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + background-color: none; + background-image: none; + background-image: none; + background-image: none; + background-image: none; + background-image: none; + background-image: none; + background-image: none; + background-repeat: none; + border:none; + border-radius: none; + form { + margin-top: -2em; + margin-right: 3em; + + table.divLoginbox { + width:100%; + float:left; + tr.hiddenCredential { + display:none; + } + input[type="submit"] { + font-size: xx-large; + + } + input, select { + width:100%; + height:60px; + } + td { + font-size: 300%; + padding:0.8%; + &.registration{ + font-size: 180%; + } + select { + background-size: 48px auto; + } + } + } + } + #loginCdMessage { + font-size:large; + padding:0; + } + } + } +} @media @handheld-portrait { body{