mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use flexbox for header and rearrange some elements 

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
This commit is contained in:
Christoph Wurst 2017-01-03 16:06:53 +01:00
parent 16afaa783b
commit 202509251c
No known key found for this signature in database
GPG Key ID: CC42AC2A7F0E56D8
3 changed files with 77 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
core/css/header.scss
View File

@ -38,6 +38,7 @@
#body-user #header, #body-user #header,
#body-settings #header, #body-settings #header,
#body-public #header { #body-public #header {
display: inline-flex;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -47,13 +48,11 @@
line-height: 2.5em; line-height: 2.5em;
background-color: #0082c9; background-color: #0082c9;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between;
} }
/* LOGO and APP NAME -------------------------------------------------------- */ /* LOGO and APP NAME -------------------------------------------------------- */
#nextcloud { #nextcloud {
position: absolute;
top: 0;
left: 0;
padding: 5px; padding: 5px;
padding-bottom: 0; padding-bottom: 0;
height: 45px; height: 45px;
@ -92,8 +91,6 @@
} }
.header-appname-container { .header-appname-container {
display: inline-block; display: inline-block;
position: absolute;
left: 70px;
height: 27px; height: 27px;
padding-top: 18px; padding-top: 18px;
padding-right: 10px; padding-right: 10px;
@ -108,6 +105,19 @@
padding: 0; padding: 0;
vertical-align: middle; vertical-align: middle;
} }
#header-left #header-right {
display: flex;
}
div.header-left {
flex: 0 0 50%;
}
#header-right {
display: flex;
justify-content: flex-end;
}
} }
/* hover effect for app switcher label */ /* hover effect for app switcher label */
@ -306,7 +316,7 @@
} }
#settings { #settings {
float: right; display: inline-block;
color: #ddd; color: #ddd;
cursor: pointer; cursor: pointer;
.icon-loading-small-dark { .icon-loading-small-dark {
@ -315,6 +325,7 @@
margin-right: 6px; margin-right: 6px;
background-size: 16px 16px; background-size: 16px 16px;
} }
flex: 0 0 auto;
} }
/* User menu on the right */ /* User menu on the right */

2
core/css/styles.scss
View File

@ -169,7 +169,6 @@ body {
border: 0; border: 0;
border-radius: 3px; border-radius: 3px;
margin-top: 9px; margin-top: 9px;
float: right;
width: 0; width: 0;
cursor: pointer; cursor: pointer;
-webkit-transition: all 100ms; -webkit-transition: all 100ms;
@ -179,7 +178,6 @@ body {
&:focus, &:active, &:valid { &:focus, &:active, &:valid {
color: #fff; color: #fff;
width: 155px; width: 155px;
max-width: 50%;
cursor: text; cursor: text;
background-color: #0082c9; background-color: #0082c9;
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);

117
core/templates/layout.user.php
View File

@ -42,67 +42,70 @@
<div id="notification"></div> <div id="notification"></div>
</div> </div>
<header role="banner"><div id="header"> <header role="banner"><div id="header">
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" <div class="header-left">
id="nextcloud" tabindex="1"> <a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
<div class="logo-icon"> id="nextcloud" tabindex="1">
<h1 class="hidden-visually"> <div class="logo-icon">
<?php p($theme->getName()); ?> <h1 class="hidden-visually">
</h1> <?php p($theme->getName()); ?>
</div> </h1>
</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> </div>
<?php endif; ?> </a>
<span id="expandDisplayName"><?php p(trim($_['user_displayname']) != '' ? $_['user_displayname'] : $_['user_uid']) ?></span>
<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 class="icon-caret"></div>
</div> </a>
<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>
<form class="searchbox" action="#" method="post" role="search" novalidate> <div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
<label for="searchbox" class="hidden-visually"> <div id="header-right">
<?php p($l->t('Search'));?> <form class="searchbox" action="#" method="post" role="search" novalidate>
</label> <label for="searchbox" class="hidden-visually">
<input id="searchbox" type="search" name="query" <?php p($l->t('Search'));?>
value="" required </label>
autocomplete="off" tabindex="5"> <input id="searchbox" type="search" name="query"
</form> 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> </div></header>
<nav role="navigation"><div id="navigation"> <nav role="navigation"><div id="navigation">