Skip to content

Commit

Permalink
Merge pull request #2924 from nextcloud/flexbox-header
Browse files Browse the repository at this point in the history 
Use flexbox for header and rearrange some elements
  • Loading branch information
@MorrisJobke
MorrisJobke authored Jan 23, 2017
2 parents 5d48647 + ac6d501 commit d80bc6c
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 111 deletions.
7 changes: 5 additions & 2 deletions apps/files_sharing/css/public.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,15 +131,18 @@ thead {

#remote_address {
width: 200px;

margin-right: 4px;
height: 31px;
}

#save-button-confirm {
position: absolute;
background-color: transparent;
border: none;
margin: 2px 4px !important;
right: 4px;
box-shadow: none;
right: 7px;
top: -8px;
height: 30px;
}

Expand Down
55 changes: 25 additions & 30 deletions apps/files_sharing/templates/public.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,40 +35,35 @@


<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="[email protected]"/>
<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="[email protected]"/>
<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">
Expand Down
43 changes: 21 additions & 22 deletions core/css/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 */
Expand All @@ -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 */
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand All @@ -315,6 +313,7 @@
margin-right: 6px;
background-size: 16px 16px;
}
flex: 0 0 auto;
}

/* User menu on the right */
Expand Down
4 changes: 1 addition & 3 deletions core/css/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down
111 changes: 57 additions & 54 deletions core/templates/layout.user.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

0 comments on commit d80bc6c

Please sign in to comment.