show appname next to logo for better hint at navigation

This commit is contained in:
Jan-Christoph Borchardt 2014-05-16 17:11:51 +02:00
parent 19d7d87964
commit e27a409287
4 changed files with 38 additions and 8 deletions

View File

@ -1,16 +1,34 @@
/* display logo so appname can be shown next to it */
#header .logo-wide {
display: inline-block;
}
/* show appname next to logo */
.header-appname {
display: inline-block;
position: relative;
color: #fff;
font-size: 26px;
opacity: .4;
margin-left: 5px;
}
/* show caret indicator next to logo to make clear it is tappable */
#owncloud.menutoggle {
background-image: url('../img/actions/caret.svg');
background-repeat: no-repeat;
background-position: right 26px;
padding-right: 16px !important;
#header .icon-caret {
display: inline-block;
width: 12px;
height: 14px;
}
.header-appname,
#header .icon-caret {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
filter: alpha(opacity=45);
opacity: .45;
}
/* do not show menu toggle on public share links as there is no menu */
#body-public #owncloud.menutoggle {
background-image: none;
padding-right: 0 !important;
#body-public #header .icon-caret {
display: none;
}
/* toggle navigation */
#content-wrapper {
padding-left: 0;

View File

@ -4,6 +4,11 @@
padding-top: 10px;
}
/* dont show appname next to logo on narrow screens */
.header-appname {
display: none;
}
#body-login .wrapper {
display: -webkit-box;
-webkit-box-orient: horizontal;

View File

@ -59,6 +59,9 @@ body {
left: 0;
padding: 6px;
padding-bottom: 0;
height: 45px; /* header height */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* info part on the right, used e.g. for info on who shared something */

View File

@ -47,6 +47,10 @@
<header><div id="header">
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud">
<div class="logo-wide svg"></div>
<div class="header-appname">
<?php p(!empty($_['application'])?$_['application']:''); ?>
</div>
<div class="icon-caret"></div>
</a>
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
<div id="settings" class="svg">