diff --git a/core/css/mobile.css b/core/css/mobile.css
new file mode 100644
index 0000000000000000000000000000000000000000..a63aa902d347ce73850feac1a86ac1ac4e6b9522
--- /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 22ba60dd2b7ef99a02a9579d0d94ab72a66bdd3c..341a507ce37956f5868822f1e57e85ff75dda642 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 c54c40687689259fb0ee4e04d4e48094ebac2856..67d6b9b7b954469158c11b6b7f83fe99a994ea86 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 6012eccfad6ddcc65bdc85bcea871cfcc8c29fac..02a40c088b4f46866f0a448cdecb2b2aac69bb6e 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('<img src="'+url+'">');
}
}
+ if(typeof callback === 'function') {
+ callback();
+ }
});
});
};
diff --git a/core/js/js.js b/core/js/js.js
index d4d2583f1e537c28272f528594d8bef2284ee893..59d48806418f7f45df3aa8f1c417f8db08703fff 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 44413f5a2a87d3288139d8f5556669fac91a0ce0..3d89750348073ee79458d2017436f53c258eb89c 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -15,7 +15,7 @@
</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.0">
<meta name="apple-itunes-app" content="app-id=543672169">
<link rel="shortcut icon" href="<?php print_unescaped(image_path('', 'favicon.png')); ?>" />
<link rel="apple-touch-icon-precomposed" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>" />
@@ -51,12 +51,12 @@
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
<div id="settings" class="svg">
<span id="expand" tabindex="0" role="link">
+ <?php if ($_['enableAvatars']): ?>
+ <div class="avatardiv"></div>
+ <?php endif; ?>
<span id="expandDisplayName"><?php p(trim($_['user_displayname']) != '' ? $_['user_displayname'] : $_['user_uid']) ?></span>
<img class="svg" alt="" src="<?php print_unescaped(image_path('', 'actions/caret.svg')); ?>" />
</span>
- <?php if ($_['enableAvatars']): ?>
- <div class="avatardiv"></div>
- <?php endif; ?>
<div id="expanddiv">
<ul>
<?php foreach($_['settingsnavigation'] as $entry):?>
diff --git a/lib/base.php b/lib/base.php
index a5f064bdb4be7d8ef6d6a5d66123e49959e67be1..84177c7ba6c2635afd2d3a6b03c6d19afc006a77 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");
diff --git a/settings/js/personal.js b/settings/js/personal.js
index ef261b50bbca1336f00d87da6839b6cb73465987..5944272067bab5a1575325ea9cbabffa9d994032 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);