Projects/nettsiden
Projects
/
nettsiden
8
2
Fork 0
Code Issues 15 Pull Requests 2 Activity

Improve login/logout buttons

This commit is contained in:
Yorin Anne De Jong 2018-02-13 16:46:01 +01:00
parent fe1e012db3
commit e7f11aee54
2 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
inc/navbar.php
View File

@ -29,20 +29,31 @@ function loginBar($sp = 'default-sp') {
require_once(__DIR__ . '/../vendor/simplesamlphp/simplesamlphp/lib/_autoload.php'); require_once(__DIR__ . '/../vendor/simplesamlphp/simplesamlphp/lib/_autoload.php');
$as = new SimpleSAML_Auth_Simple($sp); $as = new SimpleSAML_Auth_Simple($sp);
$svg = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"> $svgWhite = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64">
<circle cx="32" cy="27" r="14" stroke-width="0" fill="white" /> <circle cx="32" cy="27" r="14" stroke-width="0" fill="white" />
<ellipse cx="32" cy="66" rx="24" ry="28" stroke-width="0" fill="white" /> <ellipse cx="32" cy="66" rx="24" ry="28" stroke-width="0" fill="white" />
</svg> </svg>
';
$svgBlue = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64">
<circle cx="32" cy="27" r="14" stroke-width="0" fill="#024" />
<ellipse cx="32" cy="66" rx="24" ry="28" stroke-width="0" fill="#024" />
</svg>
'; ';
$attr = $as->getAttributes(); $attr = $as->getAttributes();
if($attr) { if($attr) {
$uname = $attr['uid'][0]; $uname = $attr['uid'][0];
$result .= "\t<p id=\"login\">logget inn som: " . htmlspecialchars($uname) . "</p>\n"; $result .= "\t<a id=\"login\" href=\"#usermenu\" aria-hidden=\"true\">${svgWhite}" . htmlspecialchars($uname) . "</a>\n";
} else { } else {
$result .= "\t<a id=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">${svg}Logg inn</a>\n"; $result .= "\t<a id=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">${svgWhite}Logg inn</a>\n";
} }
$result .= "\t<a href=\"#menu\" id=\"menu_toggle\"><big>&#9776;&nbsp;</big>MENU</a>\n";
$result .= "\n\t<ul id=\"usermenu\">\n";
$result .= "\n\t\t<li><a id=\"login\" href=\"#\">${svgBlue}" . htmlspecialchars($uname) . "</a></li>\n";
$result .= "\n\t\t<li><a href=\"" . htmlspecialchars($as->getLogoutURL()) . "\">Logg ut</a></li>\n";
$result .= "\n\t</ul>\n";
$result .= "\n\t<a href=\"#menu\" id=\"menu_toggle\" aria-hidden=\"true\"><big>&#9776;&nbsp;</big>MENU</a>\n";
return $result; return $result;
} }

26
www/css/style.css
View File

@ -43,7 +43,7 @@ nav #login {
margin: 0; margin: 0;
} }
nav ul { nav #menu {
margin: .1em auto 0 auto; margin: .1em auto 0 auto;
text-align: center; text-align: center;
margin: 0; margin: 0;
@ -71,6 +71,30 @@ nav a {
nav li.active, nav li:hover { nav li.active, nav li:hover {
border-bottom: 2px solid white; border-bottom: 2px solid white;
} }
nav #usermenu {
display: none;
position: absolute;
top: 0;
right: 0;
margin: 0;
background: #fff;
padding: 0;
}
nav #usermenu li:first-child, nav #usermenu li:first-child a {
line-height: 3em;
height: 3em;
margin: 0;
}
nav #usermenu li, nav #usermenu li a {
line-height: 2em;
height: 2em;
color: #024;
border: none;
display: block;
}
nav #usermenu:target {
display: block;
}
@media(max-width: 800px){ @media(max-width: 800px){
nav #menu, nav #menu li.active, nav #menu_toggle, nav #login { nav #menu, nav #menu li.active, nav #menu_toggle, nav #login {