From 060d37c040a6650bd580ab30f37660a8c54c35fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20A=CC=8Ane?= <yorinad@pvv.ntnu.no>
Date: Tue, 13 Feb 2018 18:44:36 +0100
Subject: [PATCH] Better styling of the user menu

---
 inc/navbar.php    | 19 +++++++------------
 www/css/style.css |  8 ++++++++
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/inc/navbar.php b/inc/navbar.php
index d902756..b1a1f1e 100644
--- a/inc/navbar.php
+++ b/inc/navbar.php
@@ -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>&#9776;&nbsp;</big>MENU</a>\n";
diff --git a/www/css/style.css b/www/css/style.css
index 89813ce..04c6c6d 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -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 {