Skip to content

Commit

Permalink
Use flexbox for header and rearrange some elements
Browse files Browse the repository at this point in the history 
Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
  • Loading branch information
@ChristophWurst
ChristophWurst committed Jan 3, 2017
1 parent 389623e commit 911db1e
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 62 deletions.
13 changes: 7 additions & 6 deletions core/css/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
#body-user #header,
#body-settings #header,
#body-public #header {
display: inline-flex;
position: fixed;
top: 0;
left: 0;
Expand All @@ -40,16 +41,14 @@
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; /* header height */
Expand Down Expand Up @@ -89,8 +88,6 @@

#header .header-appname-container {
display: inline-block;
position: absolute;
left: 70px;
height: 27px;
padding-top: 18px;
padding-right: 10px;
Expand Down Expand Up @@ -299,8 +296,12 @@
cursor: pointer;
}

#header-right {
display: inline-flex;
}

#settings {
float: right;
display: inline-block;
color: #ddd;
cursor: pointer;
}
Expand Down
2 changes: 0 additions & 2 deletions core/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ body {
border: 0;
border-radius: 3px;
margin-top: 9px;
float: right;
width: 0;
cursor: pointer;
-webkit-transition: all 100ms;
Expand All @@ -125,7 +124,6 @@ body {
.searchbox input[type="search"]:valid {
color: #fff;
width: 155px;
max-width: 50%;
cursor: text;
background-color: #0082c9;
border: 1px solid rgba(255, 255, 255, .5);
Expand Down
114 changes: 60 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,73 @@
<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 class="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="contacts-menu">
<a class="icon-contacts-dark"></a>
</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>
<?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 911db1e

Please sign in to comment.