Merge pull request #233 from geoql/fix/minor-housekeeping

geoql · Sep 19, 2021 · 17ad245 · 17ad245
2 parents 32b0b97 + 67598f2
commit 17ad245
Show file tree

Hide file tree

Showing 14 changed files with 709 additions and 88 deletions.
diff --git a/assets/css/tooltip.css b/assets/css/tooltip.css
@@ -0,0 +1,91 @@
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+}
+.tooltip .tooltip-inner {
+  background: theme('colors.gray.900');
+  color: theme('colors.gray.200');
+  border-radius: 16px;
+  padding: 5px 10px 4px;
+}
+.tooltip .tooltip-arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+  border-color: theme('colors.gray.900');
+  z-index: 1;
+}
+.tooltip[x-placement^="top"] {
+  margin-bottom: 5px;
+}
+.tooltip[x-placement^="top"] .tooltip-arrow {
+  border-width: 5px 5px 0 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.tooltip[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+.tooltip[x-placement^="bottom"] .tooltip-arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.tooltip[x-placement^="right"] {
+  margin-left: 5px;
+}
+.tooltip[x-placement^="right"] .tooltip-arrow {
+  border-width: 5px 5px 5px 0;
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+.tooltip[x-placement^="left"] {
+  margin-right: 5px;
+}
+.tooltip[x-placement^="left"] .tooltip-arrow {
+  border-width: 5px 0 5px 5px;
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+.tooltip.popover .popover-inner {
+  background: theme('colors.blue.500');
+  color: theme('colors.green.500');
+  padding: 24px;
+  border-radius: 5px;
+  box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
+}
+.tooltip.popover .popover-arrow {
+  border-color: theme('colors.blue.500');
+}
+.tooltip[aria-hidden='true'] {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.15s, visibility 0.15s;
+}
+.tooltip[aria-hidden='false'] {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.15s;
+}
diff --git a/components/VFooter.vue → components/common/ui/VFooter.vue b/components/VFooter.vue → components/common/ui/VFooter.vue
diff --git a/components/VHeader.vue → components/common/ui/VHeader.vue b/components/VHeader.vue → components/common/ui/VHeader.vue
@@ -7,11 +7,12 @@
       w-full
       h-20
       px-4
+      invisible
       border-b border-gray-300
       dark:border-gray-700
     "
   >
-    <div title="Dashboard">
+    <div title="Dashboard" class="visible">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="
@@ -41,23 +42,92 @@
         />
       </svg>
     </div>
-    <select
-      v-model="$colorMode.preference"
-      class="
-        w-32
-        px-4
-        text-base text-gray-800
-        bg-gray-200
-        border border-gray-700
-        rounded
-        dark:text-gray-300 dark:bg-gray-900
-        form-select
-      "
-    >
-      <option value="system">System</option>
-      <option value="light">Light</option>
-      <option value="dark">Dark</option>
-    </select>
+    <div tile="Theme Picker" class="visible">
+      <span class="relative z-0 inline-flex shadow rounded-full">
+        <button
+          type="button"
+          class="
+            relative
+            inline-flex
+            items-center
+            px-3
+            py-1.5
+            rounded-l-full
+            border border-gray-300
+            bg-transparent
+            text-sm
+            font-medium
+            focus:z-10
+            focus:outline-none
+            focus:ring-1
+            focus:ring-gray-500
+            focus:border-gray-500
+            active:ring-0
+          "
+          :class="{
+            'bg-gray-500 text-white': $colorMode.preference === 'system',
+          }"
+          @click="$colorMode.preference = 'system'"
+        >
+          System
+        </button>
+        <button
+          type="button"
+          class="
+            -ml-px
+            relative
+            inline-flex
+            items-center
+            px-3
+            py-1.5
+            border border-gray-300
+            bg-transparent
+            text-sm
+            font-medium
+            focus:z-10
+            focus:outline-none
+            focus:ring-1
+            focus:ring-blueGray-500
+            focus:border-blueGray-500
+            active:ring-0
+          "
+          :class="{
+            'bg-blueGray-800 text-gray-50': $colorMode.preference === 'dark',
+          }"
+          @click="$colorMode.preference = 'dark'"
+        >
+          Dark
+        </button>
+        <button
+          type="button"
+          class="
+            -ml-px
+            relative
+            inline-flex
+            items-center
+            px-3
+            py-1.5
+            rounded-r-full
+            border border-gray-300
+            bg-transparent
+            text-sm
+            font-medium
+            focus:z-10
+            focus:outline-none
+            focus:ring-1
+            focus:ring-yellow-500
+            focus:border-yellow-500
+            active:ring-0
+          "
+          :class="{
+            'bg-yellow-500 text-gray-700': $colorMode.preference === 'light',
+          }"
+          @click="$colorMode.preference = 'light'"
+        >
+          Light
+        </button>
+      </span>
+    </div>
   </div>
 </template>