Select

profcomff · Oct 16, 2022 · 8ec52fb · 8ec52fb
1 parent 366c824
commit 8ec52fb
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 14 deletions.
diff --git a/src/components/NavbarDesktop.vue b/src/components/NavbarDesktop.vue
@@ -23,7 +23,7 @@
           :tabindex="i"
           @click="$emit('navigate', i)"
           aria-current="page"
-          class="nav-link"
+          class="nav-link noselect"
         >
           <span class="bi me-2 material-symbols-sharp" width="16" height="16">
             {{ b.icon }}
@@ -42,16 +42,26 @@ export default {
   async beforeMount() {
     document.getElementsByTagName("body")[0].style.marginLeft = "340px";
   },
-  computed:{
-    logoItem(){
+  computed: {
+    logoItem() {
       return `${process.env.VUE_APP_CDN}/app/logo/logo_ff.svg`;
-    }
-  }
+    },
+  },
 };
-
 </script>
 
 <style scoped>
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+  cursor: pointer;
+}
+
 .sidebar {
   width: 340px;
   position: fixed;
@@ -66,18 +76,19 @@ export default {
   width: 60%;
 }
 
-/*! CSS Used from: https://getbootstrap.com/docs/5.0/examples/sidebars/sidebars.css */
 .bi {
   vertical-align: -0.125em;
   pointer-events: none;
   fill: currentColor;
 }
-.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
   background-color: var(--bs-primary);
   color: var(--bs-on-primary);
 }
 
-.nav-link, .nav-link:hover {
+.nav-link,
+.nav-link:hover {
   color: var(--bs-primary);
 }
 

diff --git a/src/components/NavbarMobile.vue b/src/components/NavbarMobile.vue
@@ -13,7 +13,7 @@
                 :tabindex="i"
                 @click="$emit('navigate', i)"
                 :aria-selected="i == active"
-                class="tab tab--stacked ripple-upgraded"
+                class="tab tab--stacked ripple-upgraded noselect"
                 role="tab"
                 v-for="(b, i) in buttons"
               >
@@ -55,7 +55,17 @@ export default {
 </script>
 
 <style scoped>
-/*! CSS Used from: Embedded */
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+  cursor: pointer;
+}
+
 .tab {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;

diff --git a/src/components/NavbarTop.vue b/src/components/NavbarTop.vue
@@ -1,7 +1,19 @@
 <template>
-  <navbar-top-plain v-bind:options="options" v-if="layoutName == 'plain'" />
-  <navbar-top-back v-bind:options="options" v-else-if="layoutName == 'back'" />
-  <navbar-top-calendar v-bind:options="options" v-else-if="layoutName == 'calendar'" />
+  <navbar-top-plain
+    class="noselect"
+    v-bind:options="options"
+    v-if="layoutName == 'plain'"
+  />
+  <navbar-top-back
+    class="noselect"
+    v-bind:options="options"
+    v-else-if="layoutName == 'back'"
+  />
+  <navbar-top-calendar
+    class="noselect"
+    v-bind:options="options"
+    v-else-if="layoutName == 'calendar'"
+  />
 </template>
 
 <script>
@@ -28,3 +40,15 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none;   /* Non-prefixed version, currently
+  supported by Chrome, Edge, Opera and Firefox */
+}
+</style>