clones/friendica
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix alignment issues with toolbar 

Signed-off-by: Simon L'nu <simon.lnu@gmail.com>
This commit is contained in:
Simon L'nu 2012-04-18 05:59:50 -04:00
parent f087fd5581
commit af3e37ce20
4 changed files with 113 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
view/theme/dispy-dark/nav.tpl
View File

@ -2,48 +2,52 @@
<span id="banner">$banner</span> <span id="banner">$banner</span>
<!-- yes, they're going the other way. seems that's how the template renderer
works -->
<a name="top" id="top"></a> <a name="top" id="top"></a>
<div id="nav-floater"> <div id="nav-floater">
<div id="nav-buttons"> <ul id="nav-buttons">
{{ if $nav.help }} {{ if $nav.login }}
<a id="nav-help-link" class="nav-link $nav.help.2" href="$nav.help.0" title="$nav.help.1">$nav.help.1</a> <li><a id="nav-login-link" class="nav-login-link $nav.login.2"
href="$nav.login.0" title="$nav.login.3" >$nav.login.1</a></li>
{{ endif }} {{ endif }}
{{ if $nav.community }} {{ if $nav.home }}
<a id="nav-community-link" class="nav-link $nav.community.2" <li><a id="nav-home-link" class="nav-link $nav.home.2"
href="$nav.community.0" title="$nav.community.1">$nav.community.1</a> href="$nav.home.0" title="$nav.home.1">$nav.home.1</a></li>
{{ endif }} {{ endif }}
{{ if $nav.apps }} {{ if $nav.network }}
<a id="nav-apps-link" class="nav-link $nav.apps.2" href="$nav.apps.0" title="$nav.apps.1">$nav.apps.1</a> <li><a id="nav-network-link" class="nav-link $nav.network.2"
{{ endif }} href="$nav.network.0" title="$nav.network.1">$nav.network.1</a></li>
<a id="nav-directory-link" class="nav-link $nav.directory.2" href="$nav.directory.0" title="$nav.directory.1">$nav.directory.1</a>
<a id="nav-search-link" class="nav-link $nav.search.2" href="$nav.search.0" title="$nav.search.1">$nav.search.1</a>
{{ if $nav.messages }}
<a id="nav-messages-link" class="nav-link $nav.messages.2"
href="$nav.messages.0" title="$nav.messages.1">$nav.messages.1</a>
{{ endif }} {{ endif }}
{{ if $nav.notifications }} {{ if $nav.notifications }}
<a id="nav-notifications-linkmenu" class="nav-link $nav.notifications.2" href="$nav.notifications.0" rel="#nav-notifications-menu" title="$nav.notifications.1">$nav.notifications.1</a> <li><a id="nav-notifications-linkmenu" class="nav-link $nav.notifications.2"
href="$nav.notifications.0"
rel="#nav-notifications-menu" title="$nav.notifications.1">$nav.notifications.1</a></li>
<ul id="nav-notifications-menu" class="menu-popup"> <ul id="nav-notifications-menu" class="menu-popup">
<li id="nav-notifications-see-all"><a href="$nav.notifications.all.0">$nav.notifications.all.1</a></li> <li id="nav-notifications-see-all"><a href="$nav.notifications.all.0">$nav.notifications.all.1</a></li>
<li id="nav-notifications-mark-all"><a href="#" onclick="notifyMarkAll(); return false;">$nav.notifications.mark.1</a></li> <li id="nav-notifications-mark-all"><a href="#" onclick="notifyMarkAll(); return false;">$nav.notifications.mark.1</a></li>
<li class="empty">$emptynotifications</li> <li class="empty">$emptynotifications</li>
</ul> </ul>
{{ endif }} {{ endif }}
{{ if $nav.network }} {{ if $nav.messages }}
<a id="nav-network-link" class="nav-link $nav.network.2" <li><a id="nav-messages-link" class="nav-link $nav.messages.2"
href="$nav.network.0" title="$nav.network.1">$nav.network.1</a> href="$nav.messages.0" title="$nav.messages.1">$nav.messages.1</a></li>
{{ endif }} {{ endif }}
{{ if $nav.home }} {{ if $nav.community }}
<a id="nav-home-link" class="nav-link $nav.home.2" <li><a id="nav-community-link" class="nav-link $nav.community.2"
href="$nav.home.0" title="$nav.home.1">$nav.home.1</a> href="$nav.community.0" title="$nav.community.1">$nav.community.1</a></li>
{{ endif }} {{ endif }}
{{ if $nav.login }} <li><a id="nav-directory-link" class="nav-link $nav.directory.2"
<a id="nav-login-link" class="nav-login-link $nav.login.2" href="$nav.directory.0" title="$nav.directory.1">$nav.directory.1</a></li>
href="$nav.login.0" title="$nav.login.3" >$nav.login.1</a> <li><a id="nav-search-link" class="nav-link $nav.search.2"
href="$nav.search.0" title="$nav.search.1">$nav.search.1</a></li>
{{ if $nav.apps }}
<li><a id="nav-apps-link" class="nav-link $nav.apps.2"
href="$nav.apps.0" title="$nav.apps.1">$nav.apps.1</a></li>
{{ endif }} {{ endif }}
</div> {{ if $nav.help }}
<li><a id="nav-help-link" class="nav-link $nav.help.2"
href="$nav.help.0" title="$nav.help.1">$nav.help.1</a></li>
{{ endif }}
</ul>
<div id="user-menu"> <div id="user-menu">
<a id="user-menu-label" onclick="openClose('user-menu-popup'); return false" href="$nav.home.0">$sitelocation</a> <a id="user-menu-label" onclick="openClose('user-menu-popup'); return false" href="$nav.home.0">$sitelocation</a>

36
view/theme/dispy-dark/style.css
View File

@ -8,11 +8,22 @@
/* from html5boilerplate */ /* from html5boilerplate */
/* these are to tell browsers they should be displayed a certain way */ /* these are to tell browsers they should be displayed a certain way */
article, aside, details, figcaption, figure, footer, article,
header, hgroup, nav, section { aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block; display: block;
} }
audio, canvas, video, time { audio,
canvas,
video,
time {
display: inline-block; display: inline-block;
*display: inline; *display: inline;
*zoom: 1; *zoom: 1;
@ -45,7 +56,11 @@ body {
font-size: 16px; font-size: 16px;
line-height: 1.1em; line-height: 1.1em;
} }
body, button, input, select, textarea { body,
button,
input,
select,
textarea {
font-family: sans-serif; font-family: sans-serif;
color: #eec; color: #eec;
background-color: #2e2f2e; background-color: #2e2f2e;
@ -73,6 +88,10 @@ ul, ol {
:focus { :focus {
outline: 0; outline: 0;
} }
[disabled="disabled"] {
background: #4e4f4f;
color: #ddb;
}
/* remember to highlight inserts somehow! */ /* remember to highlight inserts somehow! */
ins { ins {
@ -321,8 +340,7 @@ ul#user-menu-popup li a.nav-sep {
border-top: 1px solid #eeeeec; border-top: 1px solid #eeeeec;
} }
nav .nav-link { nav .nav-link {
float: right; display: inline-block;
display: block;
width: 22px; width: 22px;
height: 22px; height: 22px;
overflow: hidden; overflow: hidden;
@ -481,7 +499,7 @@ nav #nav-notifications-linkmenu.selected .icon.s22.notify {
width: 170px; width: 170px;
position: absolute; position: absolute;
top: -19px; top: -19px;
left: 7px; left: 4px;
} }
#nav-floater { #nav-floater {
position: fixed; position: fixed;
@ -499,11 +517,13 @@ nav #nav-notifications-linkmenu.selected .icon.s22.notify {
clear: both; clear: both;
list-style: none; list-style: none;
padding: 0px; padding: 0px;
margin: 0 7px 0 0; margin: 0px;
height: 25px; height: 25px;
} }
#nav-buttons li { #nav-buttons li {
padding: 0; padding: 0;
display: inline-block;
margin: 0px -4px 0px 0px;
} }
.floaterflip { .floaterflip {
display: block; display: block;

58
view/theme/dispy/nav.tpl
View File

@ -2,48 +2,52 @@
<span id="banner">$banner</span> <span id="banner">$banner</span>
<!-- yes, they're going the other way. seems that's how the template renderer
works -->
<a name="top" id="top"></a> <a name="top" id="top"></a>
<div id="nav-floater"> <div id="nav-floater">
<div id="nav-buttons"> <ul id="nav-buttons">
{{ if $nav.help }} {{ if $nav.login }}
<a id="nav-help-link" class="nav-link $nav.help.2" href="$nav.help.0" title="$nav.help.1">$nav.help.1</a> <li><a id="nav-login-link" class="nav-login-link $nav.login.2"
href="$nav.login.0" title="$nav.login.3" >$nav.login.1</a></li>
{{ endif }} {{ endif }}
{{ if $nav.community }} {{ if $nav.home }}
<a id="nav-community-link" class="nav-link $nav.community.2" <li><a id="nav-home-link" class="nav-link $nav.home.2"
href="$nav.community.0" title="$nav.community.1">$nav.community.1</a> href="$nav.home.0" title="$nav.home.1">$nav.home.1</a></li>
{{ endif }} {{ endif }}
{{ if $nav.apps }} {{ if $nav.network }}
<a id="nav-apps-link" class="nav-link $nav.apps.2" href="$nav.apps.0" title="$nav.apps.1">$nav.apps.1</a> <li><a id="nav-network-link" class="nav-link $nav.network.2"
{{ endif }} href="$nav.network.0" title="$nav.network.1">$nav.network.1</a></li>
<a id="nav-directory-link" class="nav-link $nav.directory.2" href="$nav.directory.0" title="$nav.directory.1">$nav.directory.1</a>
<a id="nav-search-link" class="nav-link $nav.search.2" href="$nav.search.0" title="$nav.search.1">$nav.search.1</a>
{{ if $nav.messages }}
<a id="nav-messages-link" class="nav-link $nav.messages.2"
href="$nav.messages.0" title="$nav.messages.1">$nav.messages.1</a>
{{ endif }} {{ endif }}
{{ if $nav.notifications }} {{ if $nav.notifications }}
<a id="nav-notifications-linkmenu" class="nav-link $nav.notifications.2" href="$nav.notifications.0" rel="#nav-notifications-menu" title="$nav.notifications.1">$nav.notifications.1</a> <li><a id="nav-notifications-linkmenu" class="nav-link $nav.notifications.2"
href="$nav.notifications.0"
rel="#nav-notifications-menu" title="$nav.notifications.1">$nav.notifications.1</a></li>
<ul id="nav-notifications-menu" class="menu-popup"> <ul id="nav-notifications-menu" class="menu-popup">
<li id="nav-notifications-see-all"><a href="$nav.notifications.all.0">$nav.notifications.all.1</a></li> <li id="nav-notifications-see-all"><a href="$nav.notifications.all.0">$nav.notifications.all.1</a></li>
<li id="nav-notifications-mark-all"><a href="#" onclick="notifyMarkAll(); return false;">$nav.notifications.mark.1</a></li> <li id="nav-notifications-mark-all"><a href="#" onclick="notifyMarkAll(); return false;">$nav.notifications.mark.1</a></li>
<li class="empty">$emptynotifications</li> <li class="empty">$emptynotifications</li>
</ul> </ul>
{{ endif }} {{ endif }}
{{ if $nav.network }} {{ if $nav.messages }}
<a id="nav-network-link" class="nav-link $nav.network.2" <li><a id="nav-messages-link" class="nav-link $nav.messages.2"
href="$nav.network.0" title="$nav.network.1">$nav.network.1</a> href="$nav.messages.0" title="$nav.messages.1">$nav.messages.1</a></li>
{{ endif }} {{ endif }}
{{ if $nav.home }} {{ if $nav.community }}
<a id="nav-home-link" class="nav-link $nav.home.2" <li><a id="nav-community-link" class="nav-link $nav.community.2"
href="$nav.home.0" title="$nav.home.1">$nav.home.1</a> href="$nav.community.0" title="$nav.community.1">$nav.community.1</a></li>
{{ endif }} {{ endif }}
{{ if $nav.login }} <li><a id="nav-directory-link" class="nav-link $nav.directory.2"
<a id="nav-login-link" class="nav-login-link $nav.login.2" href="$nav.directory.0" title="$nav.directory.1">$nav.directory.1</a></li>
href="$nav.login.0" title="$nav.login.3" >$nav.login.1</a> <li><a id="nav-search-link" class="nav-link $nav.search.2"
href="$nav.search.0" title="$nav.search.1">$nav.search.1</a></li>
{{ if $nav.apps }}
<li><a id="nav-apps-link" class="nav-link $nav.apps.2"
href="$nav.apps.0" title="$nav.apps.1">$nav.apps.1</a></li>
{{ endif }} {{ endif }}
</div> {{ if $nav.help }}
<li><a id="nav-help-link" class="nav-link $nav.help.2"
href="$nav.help.0" title="$nav.help.1">$nav.help.1</a></li>
{{ endif }}
</ul>
<div id="user-menu"> <div id="user-menu">
<a id="user-menu-label" onclick="openClose('user-menu-popup'); return false" href="$nav.home.0">$sitelocation</a> <a id="user-menu-label" onclick="openClose('user-menu-popup'); return false" href="$nav.home.0">$sitelocation</a>

9
view/theme/dispy/style.css
View File

@ -340,8 +340,7 @@ ul#user-menu-popup li a.nav-sep {
border-top: 1px solid #eeeeec; border-top: 1px solid #eeeeec;
} }
nav .nav-link { nav .nav-link {
float: right; display: inline-block;
display: block;
width: 22px; width: 22px;
height: 22px; height: 22px;
overflow: hidden; overflow: hidden;
@ -500,7 +499,7 @@ nav #nav-notifications-linkmenu.selected .icon.s22.notify {
width: 170px; width: 170px;
position: absolute; position: absolute;
top: -19px; top: -19px;
left: 7px; left: 4px;
} }
#nav-floater { #nav-floater {
position: fixed; position: fixed;
@ -518,11 +517,13 @@ nav #nav-notifications-linkmenu.selected .icon.s22.notify {
clear: both; clear: both;
list-style: none; list-style: none;
padding: 0px; padding: 0px;
margin: 0 7px 0 0; margin: 0px;
height: 25px; height: 25px;
} }
#nav-buttons li { #nav-buttons li {
padding: 0; padding: 0;
display: inline-block;
margin: 0px -4px 0px 0px;
} }
.floaterflip { .floaterflip {
display: block; display: block;