From 8cfe1a10aadf03a74f92b03986cecc31f59409d3 Mon Sep 17 00:00:00 2001
From: Zelzahn <friedrich@friedrichvdb.be>
Date: Mon, 22 Jul 2024 15:50:00 +0200
Subject: [PATCH] Resolve remarks

---
 loama/README.md                               |  2 +-
 loama/src/components/SidePanel.vue            | 14 +++++++++++++-
 .../src/components/explorer/ExplorerEntry.vue |  1 -
 .../components/explorer/FallbackExplorer.vue  |  4 ++--
 loama/src/components/header/HeaderBase.vue    |  4 ++++
 .../components/header/HeaderContextMenu.vue   | 19 ++++++++++++-------
 6 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/loama/README.md b/loama/README.md
index 665bc72..a1ece0e 100644
--- a/loama/README.md
+++ b/loama/README.md
@@ -1,6 +1,6 @@
 # LOAMA
 
-This is the actual Access Management App, written in Vue.
+LOAMA is a Linked Open Access Management App, written in Vue.
 
 ## IDP Provider
 
diff --git a/loama/src/components/SidePanel.vue b/loama/src/components/SidePanel.vue
index 4c5693f..90ed06f 100644
--- a/loama/src/components/SidePanel.vue
+++ b/loama/src/components/SidePanel.vue
@@ -8,7 +8,9 @@
         {{ pod.name }}
       </LoButton>
     </div>
-    <LoButton :left-icon="PhX" variant="secondary" @click="emit('toggleProvider')">Close Panel</LoButton>
+    <LoButton :left-icon="PhX" variant="secondary" @click="emit('toggleProvider')">
+      Close Panel
+    </LoButton>
   </div>
 </template>
 
@@ -41,6 +43,16 @@ const openPodUrl = (pod: { name: string; url: string }) => {
   width: 100%;
   margin-top: 10px;
   border-right: 0.25rem solid var(--solid-purple);
+  background-color: #f0f0f0;
+  width: 30%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 999;
+  overflow-y: auto;
+  padding: 20px;
+  margin: 0;
 }
 
 h2 {
diff --git a/loama/src/components/explorer/ExplorerEntry.vue b/loama/src/components/explorer/ExplorerEntry.vue
index f486bcb..13c0a5b 100644
--- a/loama/src/components/explorer/ExplorerEntry.vue
+++ b/loama/src/components/explorer/ExplorerEntry.vue
@@ -14,7 +14,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
 import { RouterLink } from 'vue-router';
 import LoButton from "../LoButton.vue";
 import { PhFolder, PhFile, PhArrowRight } from '@phosphor-icons/vue';
diff --git a/loama/src/components/explorer/FallbackExplorer.vue b/loama/src/components/explorer/FallbackExplorer.vue
index 46da54a..f17d73f 100644
--- a/loama/src/components/explorer/FallbackExplorer.vue
+++ b/loama/src/components/explorer/FallbackExplorer.vue
@@ -29,10 +29,10 @@ span {
     --gradient: conic-gradient(from -90deg at 10px 10px, var(--solid-purple) 90deg, #0000 0);
     background: var(--gradient), var(--gradient), var(--gradient);
     background-size: 50% 50%;
-    animation: l16 1s infinite;
+    animation: shifting 1s infinite;
 }
 
-@keyframes l16 {
+@keyframes shifting {
     0% {
         background-position: 0 0, 10px 10px, 20px 20px
     }
diff --git a/loama/src/components/header/HeaderBase.vue b/loama/src/components/header/HeaderBase.vue
index 669c171..377aa29 100644
--- a/loama/src/components/header/HeaderBase.vue
+++ b/loama/src/components/header/HeaderBase.vue
@@ -95,6 +95,10 @@ img {
     width: calc(var(--base-unit)*8);
 }
 
+img:hover {
+    cursor: pointer;
+}
+
 .hidden {
     display: none;
 }
diff --git a/loama/src/components/header/HeaderContextMenu.vue b/loama/src/components/header/HeaderContextMenu.vue
index b38818c..fa954e3 100644
--- a/loama/src/components/header/HeaderContextMenu.vue
+++ b/loama/src/components/header/HeaderContextMenu.vue
@@ -3,12 +3,12 @@
         <span>{{ store.usedPod }}</span>
         <div>
             <label for="pod">Selected Pod</label>
-        <select>
-            <option v-for="pod in pods" :key="pod">{{ pod }}</option>
-        </select>
+            <select>
+                <option v-for="pod in pods" :key="pod">{{ pod }}</option>
+            </select>
         </div>
         <a @click.prevent="logout">
-            <PhSignOut/>
+            <PhSignOut />
             <span>Sign out</span>
         </a>
     </aside>
@@ -24,30 +24,35 @@ const pods = await listPods(store.session as Session);
 
 async function logout() {
     store.session.logout();
-    router.push('/'); 
+    router.push('/');
 }
 </script>
 
 <style lang="css" scoped>
 aside {
+    z-index: 10;
     border-radius: 0.5rem;
     display: flex;
     flex-flow: column nowrap;
     border: 0.25rem solid var(--solid-purple);
     background-color: var(--off-white);
 }
-aside > div {
+
+aside>div {
     padding: var(--base-unit);
 }
+
 label {
     color: var(--off-black);
     font-weight: 700;
     display: block;
 }
+
 select {
     margin-bottom: var(--base-unit);
 }
-aside > span {
+
+aside>span {
     background-color: var(--solid-purple);
     color: var(--off-white);
     font-family: Raleway;