Commit 3a1ef9ab authored by Michael Herold's avatar Michael Herold
Browse files

Updates topbar design

parent fb822fec
<?php
/*
* Copyright (C) 2016 Michael Herold <quabla@hemio.de>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
namespace hemio\edentata\gui;
use hemio\html;
/**
* Navigation header on top of of the full page
*/
class TopBar extends html\Header {
public function __construct($nav = true) {
$this->addCssClass('topbar');
if ($nav) {
$this['nav'] = new html\Nav();
$this['nav']['ul'] = new html\Ul();
}
}
/**
*
* @return html\Ul
*/
public function getNavUl() {
return $this['nav']['ul'];
}
}
......@@ -107,7 +107,7 @@ try {
$body = $doc->getHtml()->getBody();
$header = new html\Header();
$header = new gui\TopBar();
$body['header'] = $header;
$body['main'] = new html\Div();
......@@ -177,9 +177,7 @@ try {
}
}
$header->addCssClass('header');
$headerNav = new html\Ul();
$header->addChild(new html\Nav())->addChild($headerNav);
$headerNav = $header->getNavUl();
$userStr = new html\Str(_('User') . ': ' . $loginData['user']);
......@@ -192,7 +190,7 @@ try {
$users = $userModule->db->selectDeputy()->fetchAll();
if (!empty($users)) {
$aSettings = new html\A;
$aSettings = new html\Button;
$aSettings->addCssClass('popover');
if (!$request->get('deputy'))
$aSettings[] = new html\Str(_('Act as deputy'));
......
......@@ -22,7 +22,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@import "_functions.scss";
@import "_basics.scss";
@import "_header.scss";
@import "_footer.scss";
@import "_content_transition.scss";
......@@ -32,6 +31,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@import "gui/_statuslist.scss";
@import "gui/_pack.scss";
@import "gui/_sidebar.scss";
@import "gui/_topbar.scss";
@import "gui/_pre.scss";
......
......@@ -27,7 +27,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
display: block;
}
.button {
@extend .input_style;
......@@ -99,3 +98,13 @@ form[method="post"] button:default, button[form]:default {
.delete_dialog .delete_perimition:not(:checked) ~ fieldset button.suggested {
opacity: 0.3;
}
.plain-button {
background: none;
color: inherit;
border-radius: 0;
font-weight: inherit;
box-shadow: none;
height: auto;
line-height: inherit;
}
\ No newline at end of file
/*
Copyright (C) 2015 Michael Herold <quabla@hemio.de>
Copyright (C) 2015-2016 Michael Herold <quabla@hemio.de>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
......@@ -14,87 +14,92 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
Created on : Feb 22, 2015, 9:10:37 PM
Author : Michael Herold <quabla@hemio.de>
*/
.header {
background-color: $outer-background-color;
.topbar {
display: inline-flex;
flex-wrap: wrap;
margin: 0 auto 1em 0;
line-height: 2em;
background-color: $outer-background-color;
color: $outer-text-color;
font-weight: bold;
display: inline-flex;
flex-wrap: wrap;
align-content: center;
margin: auto;
border-radius: 0 0 0.25em 0.25em;
box-shadow: $outer-background-color 0 0 3px;
margin-bottom: 1em;
}
.header .link {
display: inline-block;
.topbar ul {
display: inline-flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.topbar .link {
display: block;
padding: 0 0.7em;
border: 1px solid $outer-background-color;
flex-shrink: 0;
flex-grow: 1;
}
.header .link:hover {
background-color: adjust-color(lighten($outer-background-color, 12%), $red: -5);
.topbar .link:hover {
background: adjust-color(lighten($outer-background-color, 12%), $red: -5) !important;
}
.header .link:focus {
background-color: adjust-color(darken($outer-background-color, 12%), $red: -5);
.topbar .link:focus, .topbar .link:active {
background: adjust-color(darken($outer-background-color, 12%), $red: -5) !important;
border: 1px solid $outer-background-color;
}
.header a {
.topbar a {
@extend .link;
}
.header ul {
margin: 0;
padding: 0;
.topbar button {
@extend .plain-button;
@extend .link;
}
.header li {
.topbar li {
display: inline-block;
flex-grow: 1;
}
.header li li, .header li li a {
.topbar li li, .topbar li li a {
display: block;
text-align: left;
}
.header hr {
.topbar hr {
border: none;
border-top: 1px solid darken($outer-background-color, 6%);
margin: 1em 3em;
}
.header :first-child {
.topbar :first-child {
border-bottom-left-radius: inherit;
}
.header :last-child {
.topbar :last-child {
border-bottom-right-radius: inherit;
}
.header li ul:nth-child(n) {
.topbar li ul:nth-child(n) {
background-color: $outer-background-color;
padding: 1em 0;
margin-top: 1em;
border-radius: 0.25em;
}
.header li ul .link {
.topbar li ul .link {
padding: 0.1em 2em;
font-weight: normal;
}
.header ul ul :last-child {
.topbar ul ul :last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
......@@ -34,6 +34,11 @@ class GuiAllTest extends \Helpers {
$doc = new html\Document(new html\Str('Test'));
$doc->getHtml()->getHead()->addCssFile('design/style.css');
$topbar = new gui\TopBar();
$doc->getHtml()->getBody()->addChild($topbar);
for ($i = 1; $i <= 6; $i++)
$topbar->getNavUl()->addLine(new gui\Link(new edentata\Request(), _('Link Text '.$i)));
$form = new form\FormPost('test');
$doc->getHtml()->getBody()->addChild($form);
......
......@@ -5,6 +5,12 @@
<title>Test</title><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="design/style.css" /><link rel="stylesheet" type="text/css" href="design/style_dark.css" />
</head>
<body>
<header class="topbar ">
<nav><ul>
<li><a href="service/">Link Text 1</a></li><li><a href="service/">Link Text 2</a></li><li><a href="service/">Link Text 3</a></li><li><a href="service/">Link Text 4</a></li><li><a href="service/">Link Text 5</a></li><li><a href="service/">Link Text 6</a></li>
</ul>
</nav>
</header>
<form name="form_test" id="form_test" method="post">
<input type="hidden" name="form_test___form_identifier" id="form_test___form_identifier" /><article style="max-width: 40em;">
<header>
......
......@@ -5,6 +5,12 @@
<title>Test</title><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="design/style.css" />
</head>
<body>
<header class="topbar ">
<nav><ul>
<li><a href="service/">Link Text 1</a></li><li><a href="service/">Link Text 2</a></li><li><a href="service/">Link Text 3</a></li><li><a href="service/">Link Text 4</a></li><li><a href="service/">Link Text 5</a></li><li><a href="service/">Link Text 6</a></li>
</ul>
</nav>
</header>
<form name="form_test" id="form_test" method="post">
<input type="hidden" name="form_test___form_identifier" id="form_test___form_identifier" /><article style="max-width: 40em;">
<header>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment