From 3e2c56157bfb20fbc48bdf668bd56fb47bd7cc1f Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 20 Feb 2014 11:33:46 +0100 Subject: [PATCH 1/5] reduce width of searchbox on mobile, fix overlap, fix #7282 --- core/css/mobile.css | 20 ++++++++++++++++++++ core/css/styles.css | 10 ++++++---- lib/base.php | 1 + 3 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 core/css/mobile.css diff --git a/core/css/mobile.css b/core/css/mobile.css new file mode 100644 index 0000000000..a4cca6f37f --- /dev/null +++ b/core/css/mobile.css @@ -0,0 +1,20 @@ +@media only screen and (max-width: 600px) { + +/* compress search box on mobile, expand when focused */ +.searchbox input[type="search"] { + width: 17%; + -webkit-transition: width 100ms; + -moz-transition: width 100ms; + -o-transition: width 100ms; + transition: width 100ms; +} +.searchbox input[type="search"]:focus, +.searchbox input[type="search"]:active { + width: 155px; + -webkit-transition: width 100ms; + -moz-transition: width 100ms; + -o-transition: width 100ms; + transition: width 100ms; +} + +} diff --git a/core/css/styles.css b/core/css/styles.css index bee44785f1..c17d0a9bc0 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -205,17 +205,19 @@ textarea:disabled { color: #bbb; } - +/* Searchbox */ .searchbox input[type="search"] { + position: relative; font-size: 1.2em; - padding: .2em .5em .2em 1.5em; + padding-left: 1.5em; background: #fff url('../img/actions/search.svg') no-repeat .5em center; border: 0; - border-radius: 1em; + border-radius: 2em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity: .7; - margin-top: 10px; + margin-top: 6px; float: right; } + input[type="submit"].enabled { background: #66f866; border: 1px solid #5e5; diff --git a/lib/base.php b/lib/base.php index a5f064bdb4..84177c7ba6 100644 --- a/lib/base.php +++ b/lib/base.php @@ -332,6 +332,7 @@ class OC { } OC_Util::addStyle("styles"); + OC_Util::addStyle("mobile"); OC_Util::addStyle("icons"); OC_Util::addStyle("apps"); OC_Util::addStyle("fixes"); From 92d57cb5a7de41e576c9cbd3fae70e9802561187 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 20 Feb 2014 13:36:52 +0100 Subject: [PATCH 2/5] move avatar into clickable area of user menu --- core/css/styles.css | 8 ++++---- core/js/js.js | 4 +++- core/templates/layout.user.php | 6 +++--- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index c17d0a9bc0..1c80a3ea16 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -37,11 +37,12 @@ body { background:#fefefe; font:normal .8em/1.6em "Helvetica Neue",Helvetica,Ari .header-right { float:right; vertical-align:middle; padding:0.5em; } .header-right > * { vertical-align:middle; } +/* Profile picture in header */ #header .avatardiv { float: left; display: inline-block; + margin-right: 5px; } - #header .avatardiv img { opacity: 1; } @@ -708,12 +709,11 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; } /* USER MENU */ #settings { float: right; - margin-top: 7px; - margin-left: 10px; color: #bbb; } #expand { - padding: 15px 15px 15px 5px; + display: block; + padding: 7px 12px 6px 7px; cursor: pointer; font-weight: bold; } diff --git a/core/js/js.js b/core/js/js.js index d4d2583f1e..59d4880641 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -860,6 +860,7 @@ function initCore() { // checkShowCredentials(); // $('input#user, input#password').keyup(checkShowCredentials); + // user menu $('#settings #expand').keydown(function(event) { if (event.which === 13 || event.which === 32) { $('#expand').click() @@ -872,7 +873,8 @@ function initCore() { $('#settings #expanddiv').click(function(event){ event.stopPropagation(); }); - $(document).click(function(){//hide the settings menu when clicking outside it + //hide the user menu when clicking outside it + $(document).click(function(){ $('#settings #expanddiv').slideUp(200); }); diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index bc1c700402..8b9e1e0f4f 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -50,12 +50,12 @@
+ +
+ - -
-
    From 20b740f8e4674ab16f44127bc809a35b8db24910 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 20 Feb 2014 13:37:23 +0100 Subject: [PATCH 3/5] do not show display name on mobile when profile picture is present --- core/css/mobile.css | 6 ++++++ core/js/avatar.js | 9 ++++++++- core/js/jquery.avatar.js | 10 +++++++++- settings/js/personal.js | 2 ++ 4 files changed, 25 insertions(+), 2 deletions(-) diff --git a/core/css/mobile.css b/core/css/mobile.css index a4cca6f37f..65c756aa91 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -17,4 +17,10 @@ transition: width 100ms; } +/* do not show display name on mobile when profile picture is present */ +#header .avatardiv.avatardiv-shown + #expandDisplayName { + display: none; +} + + } diff --git a/core/js/avatar.js b/core/js/avatar.js index c54c406876..67d6b9b7b9 100644 --- a/core/js/avatar.js +++ b/core/js/avatar.js @@ -1,6 +1,13 @@ $(document).ready(function(){ if (OC.currentUser) { - $('#header .avatardiv').avatar(OC.currentUser, 32, undefined, true); + var callback = function() { + // do not show display name on mobile when profile picture is present + if($('#header .avatardiv').children().length > 0) { + $('#header .avatardiv').addClass('avatardiv-shown'); + } + }; + + $('#header .avatardiv').avatar(OC.currentUser, 32, undefined, true, callback); // Personal settings $('#avatar .avatardiv').avatar(OC.currentUser, 128); } diff --git a/core/js/jquery.avatar.js b/core/js/jquery.avatar.js index 6012eccfad..02a40c088b 100644 --- a/core/js/jquery.avatar.js +++ b/core/js/jquery.avatar.js @@ -39,10 +39,15 @@ * This will behave like the first example, but it will hide the avatardiv, if * it will display the default placeholder. undefined is the ie8fix from * example 4 and can be either true, or false/undefined, to be ignored. + * + * 6. $('.avatardiv').avatar('jdoe', 128, undefined, true, callback); + * This will behave like the above example, but it will call the function + * defined in callback after the avatar is placed into the DOM. + * */ (function ($) { - $.fn.avatar = function(user, size, ie8fix, hidedefault) { + $.fn.avatar = function(user, size, ie8fix, hidedefault, callback) { if (typeof(size) === 'undefined') { if (this.height() > 0) { size = this.height(); @@ -91,6 +96,9 @@ $div.html(''); } } + if(typeof callback === 'function') { + callback(); + } }); }); }; diff --git a/settings/js/personal.js b/settings/js/personal.js index ef261b50bb..5944272067 100644 --- a/settings/js/personal.js +++ b/settings/js/personal.js @@ -52,9 +52,11 @@ function updateAvatar (hidedefault) { if(hidedefault) { $headerdiv.hide(); + $('#header .avatardiv').removeClass('avatardiv-shown'); } else { $headerdiv.css({'background-color': ''}); $headerdiv.avatar(OC.currentUser, 32, true); + $('#header .avatardiv').addClass('avatardiv-shown'); } $displaydiv.css({'background-color': ''}); $displaydiv.avatar(OC.currentUser, 128, true); From d46645846985fe181fcb252bec158624a1ee2957 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 20 Feb 2014 17:37:48 +0100 Subject: [PATCH 4/5] restrict zooming in to not mangle layout accidentally --- core/templates/layout.user.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 8b9e1e0f4f..9e1555cfe6 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -15,7 +15,7 @@ - + From d5739e83d16dd4af1865999180c7867a7f77734f Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 20 Feb 2014 18:38:33 +0100 Subject: [PATCH 5/5] remove additional transition rule, reduce width of collapsed search bar --- core/css/mobile.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/core/css/mobile.css b/core/css/mobile.css index 65c756aa91..a63aa902d3 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -2,7 +2,7 @@ /* compress search box on mobile, expand when focused */ .searchbox input[type="search"] { - width: 17%; + width: 15%; -webkit-transition: width 100ms; -moz-transition: width 100ms; -o-transition: width 100ms; @@ -11,10 +11,6 @@ .searchbox input[type="search"]:focus, .searchbox input[type="search"]:active { width: 155px; - -webkit-transition: width 100ms; - -moz-transition: width 100ms; - -o-transition: width 100ms; - transition: width 100ms; } /* do not show display name on mobile when profile picture is present */