Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use flexbox for header and rearrange some elements #2924

Merged
merged 8 commits into from
Jan 23, 2017
Merged

Use flexbox for header and rearrange some elements #2924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2025092
Use flexbox for header and rearrange some elements
ChristophWurst Jan 3, 2017
b590658
use less space for the left part of the header
ChristophWurst Jan 9, 2017
7c824a6
fix scss
ChristophWurst Jan 16, 2017
bfa50a4
more cleanup
ChristophWurst Jan 16, 2017
a1f9425
fix log and app name
ChristophWurst Jan 16, 2017
47c63e6
fix public sharing buttons
ChristophWurst Jan 17, 2017
bfc4590
fix searchbox position
ChristophWurst Jan 17, 2017
ac6d501
fix appname position
ChristophWurst Jan 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions apps/files_sharing/css/public.css
View file
Open in desktop
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
Open in desktop
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="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">
Expand Down
43 changes: 21 additions & 22 deletions core/css/header.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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