Merge pull request #2924 from nextcloud/flexbox-header
Use flexbox for header and rearrange some elements
This commit is contained in:
Morris Jobke
GitHub
commit
d80bc6c72b
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<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 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"
|
||||
>
|
||||
<?php endif; ?>
|
||||
<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>
|
||||
<?php endif; ?>
|
||||
<span id="expandDisplayName"><?php p(trim($_['user_displayname']) != '' ? $_['user_displayname'] : $_['user_uid']) ?></span>
|
||||
</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>
|
||||
</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>
|
||||
</a>
|
||||
</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 id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div></header>
|
||||
|
||||
<nav role="navigation"><div id="navigation">
|
||||
|
|
|
|||
Loading…
Reference in New Issue