Better styling of the user menu
This commit is contained in:
parent
24b6af1799
commit
060d37c040
|
@ -31,14 +31,9 @@ function loginBar($sp = null, $pdo = null) {
|
|||
require_once(__DIR__ . '/../vendor/simplesamlphp/simplesamlphp/lib/_autoload.php');
|
||||
$as = new SimpleSAML_Auth_Simple($sp);
|
||||
|
||||
$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" />
|
||||
<ellipse cx="32" cy="66" rx="24" ry="28" stroke-width="0" fill="white" />
|
||||
</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 = '<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" />
|
||||
<ellipse cx="32" cy="66" rx="24" ry="28" stroke-width="0" />
|
||||
</svg>
|
||||
';
|
||||
|
||||
|
@ -51,17 +46,17 @@ function loginBar($sp = null, $pdo = null) {
|
|||
} else {
|
||||
$isAdmin = false;
|
||||
}
|
||||
$result .= "\t<a id=\"login\" href=\"#usermenu\" aria-hidden=\"true\">${svgWhite}" . htmlspecialchars($uname) . "</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 id=\"login\" href=\"#\">${svg}" . htmlspecialchars($uname) . "</a></li>\n";
|
||||
if ($isAdmin) {
|
||||
$result .= "\n\t\t<li><a href=\"/admin/\">Admin</a></li>\n";
|
||||
}
|
||||
$result .= "\n\t\t<li><a href=\"" . htmlspecialchars($as->getLogoutURL()) . "\">Logg ut</a></li>\n";
|
||||
$result .= "\n\t</ul>\n";
|
||||
|
||||
$result .= "\t<a id=\"login\" href=\"#usermenu\" aria-hidden=\"true\">${svg}" . htmlspecialchars($uname) . "</a>\n";
|
||||
} else {
|
||||
$result .= "\t<a id=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">${svgWhite}Logg inn</a>\n";
|
||||
$result .= "\t<a id=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">${svg}Logg inn</a>\n";
|
||||
}
|
||||
|
||||
$result .= "\n\t<a href=\"#menu\" id=\"menu_toggle\" aria-hidden=\"true\"><big>☰ </big>MENU</a>\n";
|
||||
|
|
|
@ -68,6 +68,7 @@ nav a {
|
|||
display: inline-block;
|
||||
margin: auto;
|
||||
color: white;
|
||||
fill: white; /* SVG icon */
|
||||
text-decoration: none;
|
||||
margin: 0 .75em;
|
||||
}
|
||||
|
@ -98,6 +99,13 @@ nav #usermenu li, nav #usermenu li a {
|
|||
nav #usermenu:target {
|
||||
display: block;
|
||||
}
|
||||
/* Style #login when #usermenu is targeted */
|
||||
/* Requires #login to appear after #usermenu, directly under nav */
|
||||
nav #usermenu:target ~ #login {
|
||||
color: #024;
|
||||
fill: #024; /* SVG icon */
|
||||
background: white;
|
||||
}
|
||||
|
||||
@media(max-width: 800px){
|
||||
nav #menu, nav #menu li.active, nav #menu_toggle, nav #login {
|
||||
|
|
Loading…
Reference in New Issue