diff --git a/core/css/mobile.css b/core/css/mobile.css new file mode 100644 index 0000000000..a63aa902d3 --- /dev/null +++ b/core/css/mobile.css @@ -0,0 +1,22 @@ +@media only screen and (max-width: 600px) { + +/* compress search box on mobile, expand when focused */ +.searchbox input[type="search"] { + width: 15%; + -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; +} + +/* do not show display name on mobile when profile picture is present */ +#header .avatardiv.avatardiv-shown + #expandDisplayName { + display: none; +} + + +} diff --git a/core/css/styles.css b/core/css/styles.css index 22ba60dd2b..341a507ce3 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; } @@ -218,17 +219,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; @@ -719,12 +722,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/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/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 44413f5a2a..3d89750348 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -15,7 +15,7 @@ - + @@ -51,12 +51,12 @@
+ +
+
- -
-