3 files changed, 41 insertions, 15 deletions

diff --git a/profile/public/style.css b/profile/public/style.css
index bb7af3c..1fc5a9d 100644
--- a/profile/public/style.css
+++ b/profile/public/style.css
@@ -145,3 +145,13 @@ img {
     transform: translateX(-50%) translateY(-50%);
     border: 1px solid black;
 }
+
+#char button {
+    width: fit-content;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+}
+
+#student-list b {
+    cursor: pointer;
+}
diff --git a/profile/public/users.html b/profile/public/users.html
index f7bd346..5f5f2ba 100644
--- a/profile/public/users.html
+++ b/profile/public/users.html
@@ -19,21 +19,27 @@
         </div>
 
         <main>
+            <h2>Steckbriefe</h2>
             <p>
-                Hier kannst du andere Schüler kommentieren und Erkennungsmerkmale schreiben. Diese werden dann auf dem
-                Steckbrief der jeweiligen Person in der Abizeitung dargestellt.
+                Hier kannst du andere SchülerInnen kommentieren und Erkennungsmerkmale schreiben. Diese werden dann auf
+                dem Steckbrief der jeweiligen Person in der Abizeitung dargestellt. Drücke auf die untenstehenden
+                Klassen, um SchülerInnen auswählen zu können.
             </p>
-            <div id="student-list">
-                TGM13.1
-                <ul id="class_1"></ul>
-                TGM13.2
-                <ul id="class_2"></ul>
-                TGTM13.1
-                <ul id="class_3"></ul>
-                TGI13.1
-                <ul id="class_4"></ul>
-                TGI13.2
-                <ul id="class_5"></ul>
+            <div class="pure-menu" id="student-list">
+                <b>TGM13.1</b>
+                <ul class="pure-menu-list" id="class_1"></ul>
+                <br />
+                <b>TGM13.2</b>
+                <ul class="pure-menu-list" id="class_2"></ul>
+                <br />
+                <b>TGTM13.1</b>
+                <ul class="pure-menu-list" id="class_3"></ul>
+                <br />
+                <b>TGI13.1</b>
+                <ul class="pure-menu-list" id="class_4"></ul>
+                <br />
+                <b>TGI13.2</b>
+                <ul class="pure-menu-list" id="class_5"></ul>
             </div>
         </main>
 
diff --git a/profile/public/users.js b/profile/public/users.js
index 73f0e4a..5ea58f7 100644
--- a/profile/public/users.js
+++ b/profile/public/users.js
@@ -1,10 +1,20 @@
 function addUser(user) {
-    const li = document.createElement("li");
+    const li = document.createElement("a");
+    li.classList.add("pure-menu-link");
     li.textContent = `${user.name} ${user.middlename || ""} ${user.surname}`;
-    li.addEventListener("click", () => window.location.assign(`./user.html?uid=${user.id}`));
+    li.href = "./user.html?uid=" + user.id;
     if (user.class_id < 6) document.getElementById("class_" + user.class_id).appendChild(li);
 }
 
 fetch("/auth/api/list?class=all")
     .then((response) => response.json())
     .then((response) => response.forEach(addUser));
+
+document.querySelectorAll("b").forEach((elem) => {
+    const next = elem.nextElementSibling;
+    next.style.display = "none";
+    elem.addEventListener("click", () => {
+        console.log(elem);
+        next.style.display = next.style.display == "none" ? "block" : "none";
+    });
+});