Merge pull request #79 from markfijneman/navbar-redesign

Navigation bar redesign
JJ-8 · Mar 16, 2024 · 9f11920 · 9f11920
2 parents b4b5882 + d1e792e
commit 9f11920
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 78 deletions.
diff --git a/front/src/components/CTF/LogoLink.vue b/front/src/components/CTF/LogoLink.vue
@@ -1,14 +1,19 @@
 <template>
   <q-btn
-    :href="ctf.ctfUrl"
+    :href="ctf.ctfUrl || null"
     target="_blank"
     class="logo text-white"
+    :class="{ 'no-hover': !ctf.ctfUrl }"
     type="a"
     :style="style"
     :icon="icon"
+    :ripple="false"
     round
   >
-    <q-tooltip>Browse CTF website</q-tooltip>
+    <q-tooltip :delay="400">
+      <span v-if="ctf.ctfUrl"> Browse CTF website </span>
+      <span v-else> No CTF website set </span>
+    </q-tooltip>
   </q-btn>
 </template>
 
@@ -23,7 +28,10 @@ export default defineComponent({
   computed: {
     style() {
       return this.ctf.logoUrl
-        ? { '--logo-url': `url(${this.ctf.logoUrl})` }
+        ? {
+            '--logo-url': `url(${this.ctf.logoUrl})`,
+            'background-color': '#000',
+          }
         : { 'background-color': 'var(--q-primary)' };
     },
     icon() {
@@ -38,5 +46,14 @@ export default defineComponent({
   background: var(--logo-url);
   background-size: cover;
   background-origin: 50% 50%;
+  background-position: center;
+}
+
+.no-hover {
+  cursor: default;
+}
+
+.no-hover >>> .q-focus-helper {
+  display: none;
 }
 </style>
diff --git a/front/src/components/Menu/BaseMenuBar.vue b/front/src/components/Menu/BaseMenuBar.vue
@@ -3,60 +3,74 @@
     <q-toolbar>
       <q-toolbar-title class="row items-center q-gutter-md">
         <ctf-note-link name="index" class="text-white" underline>
-          <q-img src="/favicon-transparent.svg" width="30px" class="q-mr-md" />
-          <q-btn v-if="$q.screen.gt.xs" flat no-caps>CTFNote</q-btn>
+          <q-btn
+            flat
+            no-caps
+            :class="{
+              'ctfnote-logo-xs': $q.screen.xs,
+              'ctfnote-logo-lg': $q.screen.gt.xs,
+            }"
+          >
+            <q-img
+              src="/favicon-transparent.svg"
+              width="30px"
+              :class="{ 'q-mr-sm': $q.screen.gt.xs }"
+            />
+            <span v-if="$q.screen.gt.xs">CTFNote</span>
+          </q-btn>
         </ctf-note-link>
         <slot name="after-title" />
-        <q-btn
-          v-if="showSearch"
-          flat
-          round
-          dense
-          icon="search"
-          class="q-mr-xs"
-          @click="openSearchDialog()"
-        />
       </q-toolbar-title>
+      <q-btn
+        v-if="showSearch"
+        flat
+        round
+        dense
+        icon="search"
+        class="q-mr-xs"
+        @click="openSearchDialog()"
+      >
+        <q-tooltip :delay="400">Global search</q-tooltip>
+      </q-btn>
       <q-btn-dropdown
         flat
+        no-caps
         :label="dropDownLabel"
-        split
-        align="right"
-        content-class="drop-menu"
-        :to="{ name: dropDownLink }"
+        :dropdown-icon="
+          $q.screen.xs && showLogout ? 'more_vert' : 'arrow_drop_down'
+        "
+        :no-icon-animation="$q.screen.xs && showLogout"
+        class="q-pr-sm"
+        :class="{ 'q-pl-sm': dropDownLabel == undefined }"
       >
-        <q-list class="text-center">
+        <q-list class="text-center" dense>
           <slot name="dropdown" />
-          <q-item>
-            <q-item-section>
-              <div>
-                <q-toggle
-                  v-model="darkMode"
-                  title="Switch theme"
-                  size="lg"
-                  checked-icon="brightness_3"
-                  unchecked-icon="brightness_7"
-                />
-              </div>
-            </q-item-section>
+
+          <q-separator v-if="showLogout" inset spaced />
+
+          <q-item style="padding-left: 4px">
+            <q-toggle
+              v-model="darkMode"
+              label="Switch theme"
+              checked-icon="brightness_3"
+              unchecked-icon="brightness_7"
+            />
           </q-item>
-          <q-item>
-            <q-item-section>
-              <div>
-                <q-toggle
-                  v-model="liveMode"
-                  title="Show secrets"
-                  size="lg"
-                  checked-icon="visibility"
-                  unchecked-icon="visibility_off"
-                />
-              </div>
-            </q-item-section>
+          <q-item v-if="showLogout" style="padding-left: 4px">
+            <q-toggle
+              v-model="liveMode"
+              label="Show secrets"
+              checked-icon="visibility"
+              unchecked-icon="visibility_off"
+            />
           </q-item>
 
           <q-separator v-if="showLogout" inset spaced />
 
           <q-item v-if="showLogout" clickable @click="logout">
+            <q-item-section side>
+              <q-avatar icon="logout" />
+            </q-item-section>
             <q-item-section>
               <q-item-label>Logout</q-item-label>
             </q-item-section>
@@ -78,7 +92,7 @@ import SearchDialogVue from '../Dialogs/SearchDialog.vue';
 export default defineComponent({
   components: { CtfNoteLink },
   props: {
-    dropDownLabel: { type: String, required: true },
+    dropDownLabel: { type: String, default: undefined },
     dropDownLink: { type: String, required: true },
     showLogout: { type: Boolean, default: false },
     showSearch: { type: Boolean, default: false },
@@ -117,8 +131,14 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.drop-menu {
-  min-width: 150px !important;
+<style scoped>
+.ctfnote-logo-xs {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.ctfnote-logo-lg {
+  padding-left: 8px;
+  padding-right: 11px;
 }
 </style>
diff --git a/front/src/components/Menu/CtfMenu.vue b/front/src/components/Menu/CtfMenu.vue
@@ -1,23 +1,51 @@
 <template>
-  <template v-if="ctf && $q.screen.gt.xs">
-    <template v-if="$q.screen.gt.sm">
-      <q-separator dark vertical />
-      <div class="row items-center justify-center">
-        <q-btn
-          class="q-mr-sm"
-          type="a"
-          target="_blank"
-          :href="ctf.ctfUrl"
-          flat
-          icon="language"
-          size="sm"
-          round
-        />
-        <q-btn flat no-caps :to="ctf.tasksLink">{{ ctf.title }}</q-btn>
-      </div>
-    </template>
-    <q-separator v-show="ctf.tasks.length" dark vertical />
-    <task-list-menu v-show="ctf.tasks.length" :ctf="ctf" :task-id="taskId" />
+  <template v-if="ctf">
+    <q-separator v-if="$q.screen.gt.xs" ctdark vertical />
+
+    <div
+      class="row items-center justify-center"
+      :class="{ 'no-left-margin': $q.screen.xs }"
+    >
+      <logo-link flat dense class="q-mx-sm logo-link" :ctf="ctf" />
+
+      <q-btn
+        v-if="$q.screen.gt.sm"
+        flat
+        no-caps
+        style="padding-left: 12px; padding-right: 12px"
+        :to="ctf.tasksLink"
+      >
+        <q-tooltip :delay="400">Open tasks view</q-tooltip>
+        <div class="ellipsis" style="max-width: 285px">
+          {{ ctf.title }}
+        </div>
+      </q-btn>
+      <q-btn
+        v-else
+        flat
+        round
+        dense
+        icon="toc"
+        class="q-mr-xs"
+        :to="ctf.tasksLink"
+      >
+        <q-tooltip>Open tasks view</q-tooltip>
+      </q-btn>
+    </div>
+
+    <q-separator
+      v-if="$q.screen.gt.xs"
+      v-show="ctf.tasks.length"
+      dark
+      vertical
+    />
+
+    <task-list-menu
+      v-show="ctf.tasks.length"
+      :class="{ 'no-left-margin': $q.screen.xs }"
+      :ctf="ctf"
+      :task-id="taskId"
+    />
   </template>
 </template>
 
@@ -26,10 +54,11 @@ import { Id, Ctf } from 'src/ctfnote/models';
 import ctfnote from 'src/ctfnote';
 import { Task } from 'src/generated/graphql';
 import { defineComponent } from 'vue';
+import LogoLink from '../CTF/LogoLink.vue';
 import TaskListMenu from '../Utils/TaskListMenu.vue';
 
 export default defineComponent({
-  components: { TaskListMenu },
+  components: { LogoLink, TaskListMenu },
   props: {
     ctfId: { type: Number as unknown as () => Id<Ctf>, required: true },
     taskId: { type: Number as unknown as () => Id<Task> | null, default: null },
@@ -41,4 +70,12 @@ export default defineComponent({
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.logo-link >>> .q-icon {
+  transform: scale(0.8);
+}
+
+.no-left-margin {
+  margin-left: 0px;
+}
+</style>
diff --git a/front/src/components/Menu/MainMenu.vue b/front/src/components/Menu/MainMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <base-menu-bar
-    :drop-down-label="me.profile.username"
+    :drop-down-label="$q.screen.gt.xs ? me.profile.username : undefined"
     drop-down-link="settings"
     :show-logout="true"
     :show-search="true"
@@ -9,17 +9,43 @@
       <slot />
     </template>
     <template #dropdown>
-      <q-item v-if="me.isAdmin" clickable :to="{ name: 'admin' }">
+      <q-item
+        v-if="me.isAdmin"
+        clickable
+        :to="{ name: 'admin' }"
+        active-class="dimmed-background"
+      >
+        <q-item-section side>
+          <q-avatar icon="settings" />
+        </q-item-section>
         <q-item-section>
           <q-item-label>Admin</q-item-label>
         </q-item-section>
       </q-item>
-      <q-item v-if="me.isLogged" clickable :to="{ name: 'settings' }">
+
+      <q-item
+        v-if="me.isLogged"
+        clickable
+        :to="{ name: 'settings' }"
+        active-class="dimmed-background"
+      >
+        <q-item-section side>
+          <q-avatar icon="person" />
+        </q-item-section>
         <q-item-section>
           <q-item-label>Profile</q-item-label>
         </q-item-section>
       </q-item>
-      <q-item v-if="me.isLogged" clickable :to="{ name: 'team' }">
+
+      <q-item
+        v-if="me.isLogged"
+        clickable
+        :to="{ name: 'team' }"
+        active-class="dimmed-background"
+      >
+        <q-item-section side>
+          <q-avatar icon="group" />
+        </q-item-section>
         <q-item-section>
           <q-item-label>Team</q-item-label>
         </q-item-section>
@@ -43,3 +69,9 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+.dimmed-background {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>