diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css
index 70df204a696d0d102809999247181efaccc8a1ea..9c8c4a666304d61bceaad6f71753a17878dde996 100644
--- a/apps/files_sharing/css/public.css
+++ b/apps/files_sharing/css/public.css
@@ -131,6 +131,9 @@ thead {
#remote_address {
width: 200px;
+
+ margin-right: 4px;
+ height: 31px;
}
#save-button-confirm {
@@ -138,8 +141,8 @@ thead {
background-color: transparent;
border: none;
margin: 2px 4px !important;
- right: 4px;
- box-shadow: none;
+ right: 7px;
+ top: -8px;
height: 30px;
}
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 2c321f2a398324e498685bbdf688a278702e45c5..dd2ea855b0b23ac7453e0ab97b989be75881afce 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -35,40 +35,35 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
<header><div id="header" class="<?php p((isset($_['folder']) ? 'share-folder' : 'share-file')) ?>">
- <a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
- title="" id="nextcloud">
- <div class="logo-icon svg">
- </div>
- </a>
-
- <div class="header-appname-container">
- <h1 class="header-appname">
- <?php p($theme->getName()); ?>
- </h1>
+ <div id="header-left">
+ <a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
+ title="" id="nextcloud">
+ <div class="logo-icon svg"></div>
+ <h1 class="header-appname">
+ <?php p($theme->getName()); ?>
+ </h1>
+ </a>
</div>
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
- <div class="header-right">
- <span id="details">
- <?php
- if (!isset($_['hideFileList']) || (isset($_['hideFileList']) && $_['hideFileList'] === false)) {
- if ($_['server2serversharing']) {
- ?>
- <span id="save" data-protected="<?php p($_['protected']) ?>"
- data-owner-display-name="<?php p($_['displayName']) ?>" data-owner="<?php p($_['owner']) ?>" data-name="<?php p($_['filename']) ?>">
- <button id="save-button"><?php p($l->t('Add to your Nextcloud')) ?></button>
- <form class="save-form hidden" action="#">
- <input type="email" id="remote_address" placeholder="user@yourNextcloud.org"/>
- <button id="save-button-confirm" class="icon-confirm svg" disabled></button>
- </form>
- </span>
- <?php } ?>
- <a href="<?php p($_['downloadURL']); ?>" id="download" class="button">
- <span class="icon icon-download"></span>
- <span id="download-text"><?php p($l->t('Download'))?></span>
- </a>
+ <div id="header-right">
+ <?php if (!isset($_['hideFileList']) || (isset($_['hideFileList']) && $_['hideFileList'] === false)) {
+ if ($_['server2serversharing']) {
+ ?>
+ <span id="save" data-protected="<?php p($_['protected']) ?>"
+ data-owner-display-name="<?php p($_['displayName']) ?>" data-owner="<?php p($_['owner']) ?>" data-name="<?php p($_['filename']) ?>">
+ <button id="save-button"><?php p($l->t('Add to your Nextcloud')) ?></button>
+ <form class="save-form hidden" action="#">
+ <input type="email" id="remote_address" placeholder="user@yourNextcloud.org"/>
+ <button id="save-button-confirm" class="icon-confirm svg" disabled></button>
+ </form>
+ </span>
<?php } ?>
- </span>
+ <a href="<?php p($_['downloadURL']); ?>" id="download" class="button">
+ <span class="icon icon-download"></span>
+ <span id="download-text"><?php p($l->t('Download'))?></span>
+ </a>
+ <?php } ?>
</div>
</div></header>
<div id="content-wrapper">
diff --git a/core/css/header.scss b/core/css/header.scss
index 886c2489a6306e713c80c38528c7a64055422180..0134ca951d4797ce204ef4b3fcc5dd56677abee3 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -38,22 +38,20 @@
#body-user #header,
#body-settings #header,
#body-public #header {
+ display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2000;
height: 45px;
- line-height: 2.5em;
background-color: #0082c9;
box-sizing: border-box;
+ justify-content: space-between;
}
/* LOGO and APP NAME -------------------------------------------------------- */
#nextcloud {
- position: absolute;
- top: 0;
- left: 0;
padding: 5px;
padding-bottom: 0;
height: 45px;
@@ -92,10 +90,7 @@
}
.header-appname-container {
display: inline-block;
- position: absolute;
- left: 70px;
- height: 27px;
- padding-top: 18px;
+ padding-top: 22px;
padding-right: 10px;
}
/* show caret indicator next to logo to make clear it is tappable */
@@ -108,6 +103,21 @@
padding: 0;
vertical-align: middle;
}
+
+ #header-left,
+ #header-right {
+ display: inline-flex;
+ align-items: center;
+ }
+
+ #header-left {
+ flex: 0 0;
+ flex-grow: 1;
+ }
+
+ #header-right {
+ justify-content: flex-end;
+ }
}
/* hover effect for app switcher label */
@@ -150,7 +160,7 @@
font-size: 16px;
font-weight: 300;
margin: 0;
- margin-top: -24px;
+ margin-top: -27px;
padding: 7px 0 7px 5px;
vertical-align: middle;
}
@@ -293,20 +303,8 @@
/* USER MENU -----------------------------------------------------------------*/
-/* info part on the right, used e.g. for info on who shared something */
-.header-right {
- position: absolute;
- right: 0;
- padding: 7px 5px;
- color: #fff;
- height: 100%;
- max-width: 80%;
- white-space: nowrap;
- box-sizing: border-box;
-}
-
#settings {
- float: right;
+ display: inline-block;
color: #ddd;
cursor: pointer;
.icon-loading-small-dark {
@@ -315,6 +313,7 @@
margin-right: 6px;
background-size: 16px 16px;
}
+ flex: 0 0 auto;
}
/* User menu on the right */
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 27ce681391aacf0c2a3e26b6b37bdaf04a564be5..9b0dd21e23481cc5241ae633d216de0c8919e18e 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -168,8 +168,7 @@ body {
color: #fff;
border: 0;
border-radius: 3px;
- margin-top: 9px;
- float: right;
+ margin-top: 3px;
width: 0;
cursor: pointer;
-webkit-transition: all 100ms;
@@ -179,7 +178,6 @@ body {
&:focus, &:active, &:valid {
color: #fff;
width: 155px;
- max-width: 50%;
cursor: text;
background-color: #0082c9;
border: 1px solid rgba(255, 255, 255, 0.5);
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index c53e016c1c28aea9560166caea9384217dfdce83..6cf4a0b8f2db448bf783d25d89828f3c09d1c0b7 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -42,67 +42,70 @@
<div id="notification"></div>
</div>
<header role="banner"><div id="header">
- <a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
- id="nextcloud" tabindex="1">
- <div class="logo-icon">
- <h1 class="hidden-visually">
- <?php p($theme->getName()); ?>
- </h1>
- </div>
- </a>
+ <div id="header-left">
+ <a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
+ id="nextcloud" tabindex="1">
+ <div class="logo-icon">
+ <h1 class="hidden-visually">
+ <?php p($theme->getName()); ?>
+ </h1>
+ </div>
+ </a>
- <a href="#" class="header-appname-container menutoggle" tabindex="2">
- <h1 class="header-appname">
- <?php p(!empty($_['application'])?$_['application']: $l->t('Apps')); ?>
- </h1>
- <div class="icon-caret"></div>
- </a>
+ <a href="#" class="header-appname-container menutoggle" tabindex="2">
+ <h1 class="header-appname">
+ <?php p(!empty($_['application'])?$_['application']: $l->t('Apps')); ?>
+ </h1>
+ <div class="icon-caret"></div>
+ </a>
+ </div>
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
- <div id="settings">
- <div id="expand" tabindex="6" role="link" class="menutoggle">
- <?php if ($_['enableAvatars']): ?>
- <div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown'); } else { print_unescaped('" style="display: none'); } ?>">
- <?php if ($_['userAvatarSet']): ?>
- <img alt="" width="32" height="32"
- src="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 32, 'v' => $_['userAvatarVersion']]));?>"
- srcset="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 64, 'v' => $_['userAvatarVersion']]));?> 2x, <?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 128, 'v' => $_['userAvatarVersion']]));?> 4x"
- >
+ <div id="header-right">
+ <form class="searchbox" action="#" method="post" role="search" novalidate>
+ <label for="searchbox" class="hidden-visually">
+ <?php p($l->t('Search'));?>
+ </label>
+ <input id="searchbox" type="search" name="query"
+ value="" required
+ autocomplete="off" tabindex="5">
+ </form>
+ <div id="settings">
+ <div id="expand" tabindex="6" role="link" class="menutoggle">
+ <?php if ($_['enableAvatars']): ?>
+ <div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown'); } else { print_unescaped('" style="display: none'); } ?>">
+ <?php if ($_['userAvatarSet']): ?>
+ <img alt="" width="32" height="32"
+ src="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 32, 'v' => $_['userAvatarVersion']]));?>"
+ srcset="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 64, 'v' => $_['userAvatarVersion']]));?> 2x, <?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 128, 'v' => $_['userAvatarVersion']]));?> 4x"
+ >
+ <?php endif; ?>
+ </div>
<?php endif; ?>
+ <span id="expandDisplayName"><?php p(trim($_['user_displayname']) != '' ? $_['user_displayname'] : $_['user_uid']) ?></span>
+ <div class="icon-caret"></div>
+ </div>
+ <div id="expanddiv">
+ <ul>
+ <?php foreach($_['settingsnavigation'] as $entry):?>
+ <li>
+ <a href="<?php print_unescaped($entry['href']); ?>"
+ <?php if( $entry["active"] ): ?> class="active"<?php endif; ?>>
+ <img alt="" src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>">
+ <?php p($entry['name']) ?>
+ </a>
+ </li>
+ <?php endforeach; ?>
+ <li>
+ <a id="logout" <?php print_unescaped(OC_User::getLogoutAttribute()); ?>>
+ <img alt="" src="<?php print_unescaped(image_path('', 'actions/logout.svg') . '?v=' . $_['versionHash']); ?>">
+ <?php p($l->t('Log out'));?>
+ </a>
+ </li>
+ </ul>
</div>
- <?php endif; ?>
- <span id="expandDisplayName"><?php p(trim($_['user_displayname']) != '' ? $_['user_displayname'] : $_['user_uid']) ?></span>
- <div class="icon-caret"></div>
- </div>
- <div id="expanddiv">
- <ul>
- <?php foreach($_['settingsnavigation'] as $entry):?>
- <li>
- <a href="<?php print_unescaped($entry['href']); ?>"
- <?php if( $entry["active"] ): ?> class="active"<?php endif; ?>>
- <img alt="" src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>">
- <?php p($entry['name']) ?>
- </a>
- </li>
- <?php endforeach; ?>
- <li>
- <a id="logout" <?php print_unescaped(OC_User::getLogoutAttribute()); ?>>
- <img alt="" src="<?php print_unescaped(image_path('', 'actions/logout.svg') . '?v=' . $_['versionHash']); ?>">
- <?php p($l->t('Log out'));?>
- </a>
- </li>
- </ul>
</div>
</div>
-
- <form class="searchbox" action="#" method="post" role="search" novalidate>
- <label for="searchbox" class="hidden-visually">
- <?php p($l->t('Search'));?>
- </label>
- <input id="searchbox" type="search" name="query"
- value="" required
- autocomplete="off" tabindex="5">
- </form>
</div></header>
<nav role="navigation"><div id="navigation">