💄 #133 add menu section with base design

JAGFx · Jul 24, 2022 · 6da8df4 · 6da8df4
1 parent 9d6188d
commit 6da8df4
Show file tree

Hide file tree

Showing 19 changed files with 278 additions and 25 deletions.
diff --git a/src/application/ApplicationNext.vue b/src/application/ApplicationNext.vue
@@ -3,7 +3,7 @@
     <Menu />
   </Navbar>
 
-  <h1 class="bg-gradient-accent">New dashboard</h1>
+  <!--  <h1 class="bg-gradient-accent">New dashboard</h1>-->
   <!--  <p>{{ $t('Skins') }}</p>-->
   <!--  <code>Current locale: {{ currentLocale }}</code-->
   <!--  ><br />-->

diff --git a/src/application/application.js b/src/application/application.js
@@ -11,6 +11,7 @@ import { createApp } from 'vue';
 //import { createPinia } from 'pinia'
 import AppPlugin from '@/application/plugin.js';
 import Vue3TouchEvents from 'vue3-touch-events';
+import 'bootstrap/js/src/dropdown.js';
 
 library.add(faEarthEurope);
 library.add(faAngleDown);

diff --git a/src/application/components/menu/AboutTab/AboutTab.vue b/src/application/components/menu/AboutTab/AboutTab.vue
@@ -17,7 +17,7 @@
           >
             <h2 class="m-0 mt-2 w-100 text-center">JAGFx</h2>
             <div class="author m-0 mb-2">
-              <span class="text">{{ $t('Author') }}</span>
+              <span class="text-gradient">{{ $t('Author') }}</span>
             </div>
           </div>
           <div

diff --git a/src/application/components/menu/AboutTab/aboutTab.scss b/src/application/components/menu/AboutTab/aboutTab.scss
@@ -17,12 +17,6 @@
 	.author {
 		font-size: .9rem;
 		overflow: hidden;
-
-		.text {
-			background-image: $gradient-accent;
-			background-clip: text;
-			-webkit-text-fill-color: transparent;
-		}
 	}
 
 	.version {

diff --git a/src/application/components/menu/ConfigurationTab.vue b/src/application/components/menu/ConfigurationTab.vue
@@ -1,7 +1,94 @@
 <template>
-  <h1>Configuration</h1>
+  <div>
+    <div class="row my-2 configuration-tab">
+      <div class="col-12">
+        <div class="d-flex-center-center">
+          <input
+            type="search"
+            class="form-control form-control-sm w-100 bg-acrylic"
+            placeholder="Type to search..."
+          />
+          <div class="dropdown dropdown-acrylic mx-1">
+            <button
+              type="button"
+              class="btn btn-acrylic dropdown-toggle d-flex-center-center"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <i class="icon-rest_stop"></i>
+            </button>
+            <ul class="dropdown-menu">
+              <li class="d-flex-center-center">
+                <Tag class="dropdown-item">#jagfx</Tag>
+              </li>
+              <li class="d-flex-center-center">
+                <Tag class="dropdown-item">#unit</Tag>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2 h-100 configuration-tab">
+      <div class="col">
+        <div class="card bg-transparent">
+          <div class="card-body p-0">
+            <div class="list-group">
+              <div class="list-group-item bg-acrylic light text-white">
+                <div class="d-flex-center-center">
+                  <div
+                    class="d-flex justify-content-center align-items-start flex-column w-100"
+                  >
+                    <div
+                      class="d-flex justify-content-start align-items-center"
+                    >
+                      <Tag class="ms-0">#jagfx</Tag>
+                      <span class="mx-1">Lorem ipsum dolor sit amet.</span>
+                    </div>
+                    <small class="text-muted">Lorem ipsum dolor.</small>
+                  </div>
+                  <div>
+                    <Switch />
+                  </div>
+                </div>
+              </div>
+              <div class="list-group-item bg-acrylic light text-white">
+                <div class="d-flex-center-center">
+                  <div
+                    class="d-flex justify-content-center align-items-start flex-column w-100"
+                  >
+                    <div
+                      class="d-flex justify-content-start align-items-center"
+                    >
+                      <Tag class="ms-0">#unit</Tag>
+                      <span class="mx-1">Lorem ipsum dolor sit amet.</span>
+                    </div>
+                    <small class="text-muted">Lorem ipsum dolor.</small>
+                  </div>
+                  <div>
+                    <select
+                      class="form-select form-select-sm"
+                      aria-label="Default select example"
+                    >
+                      <option selected>Open this select menu</option>
+                      <option value="1">One</option>
+                      <option value="2">Two</option>
+                      <option value="3">Three</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Switch from '@/application/ui/Switch/Switch.vue';
+import Tag from '@/application/ui/Tag/Tag.vue';
+</script>
 
 <style scoped lang="scss"></style>
diff --git a/src/application/components/menu/Menu.vue b/src/application/components/menu/Menu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="menu d-flex flex-column h-100 container-fluid">
-    <div class="row my-2">
+    <div class="row">
       <div class="col">
         <nav class="nav nav-pills d-flex-center-center my-2">
           <Navlink

diff --git a/src/application/components/menu/menu.scss b/src/application/components/menu/menu.scss
@@ -1,3 +1,7 @@
 @import "../../style/abstracts/variables";
 @import "../../style/abstracts/mixins";
-@import "../../style/vendors/bootstrap";
+@import "../../style/vendors/bootstrap";
+
+.menu {
+	overflow-x: auto;
+}
diff --git a/src/application/components/navbar/Navbar.vue b/src/application/components/navbar/Navbar.vue
@@ -2,7 +2,7 @@
   <div
     class="d-flex w-100 h-100 flex-column fixed-top"
     :class="{
-      'bg-acrylic': menuIsShown
+      'menu-is-shown': menuIsShown
     }"
   >
     <Transition name="fade" mode="out-in">

diff --git a/src/application/components/navbar/navbar.scss b/src/application/components/navbar/navbar.scss
@@ -1,13 +1,23 @@
 @import "../../style/abstracts/variables";
 @import "../../style/abstracts/effects";
+@import "../../style/abstracts/mixins";
 @import "../../style/vendors/bootstrap";
 
+.menu-is-shown {
+	background: $color-black;
+
+	@supports (backdrop-filter: blur(30px)) {
+		@include background-acrylic;
+	}
+}
+
 nav.navbar {
 	.navbar-brand {
 		border-radius: $border-radius;
 		background: $gradient-accent;
 		padding-left: 1rem;
 		padding-right: 1rem;
+		font-size: 1.6rem;
 	}
 }
 

diff --git a/src/application/style/abstracts/_mixins.scss b/src/application/style/abstracts/_mixins.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 @mixin border-gradient( $color, $width ) {
 	position: relative;
 
@@ -14,4 +16,15 @@
 		mask-composite: xor;
 		mask-composite: exclude;
 	}
+}
+
+@mixin background-acrylic(){
+	background: $color-white-transparent-10;
+	border: none;
+	box-shadow: rgb(37 43 54 / 3%) 10px 10px 10px;
+
+	@supports (backdrop-filter: blur(30px)) {
+		background: rgba($color-white, 0.05);
+		backdrop-filter: blur(30px);
+	}
 }
diff --git a/src/application/style/abstracts/_variables.scss b/src/application/style/abstracts/_variables.scss
@@ -3,6 +3,8 @@
 $color-black: #122333;
 $color-black-2:  #272727;
 $color-black-light-5: color.adjust($color-black, $lightness: 5%);
+$color-black-light-15: color.adjust($color-black, $lightness: 15%);
+$color-black-light-30: color.adjust($color-black, $lightness: 30%);
 $color-black-transparent-high: color.adjust($color-black, $lightness: 3%);
 $color-white: #eee8d5;
 $color-white-2: #eaeaea;
@@ -15,8 +17,14 @@ $color-yellow: #f5bb00;
 $color-blue: #26d2e2;
 $color-accent-1: #4967ff;
 $color-accent-2: #00f6f5;
+$color-white-transparent-25: rgba($color-white, 0.25);
+$color-white-transparent-90: rgba($color-white, 0.9);
+$color-white-transparent-10: rgba($color-white, 0.10);
+$color-accent-2-transparent-25: rgba($color-accent-2, 0.25);
+$color-accent-2-transparent-10: rgba($color-accent-2, 0.10);
+$color-acrylic-compatibility: #293744;
 $gradient-accent: linear-gradient(-45deg, $color-accent-1, $color-accent-2);
-$border-radius: 5rem;
+$border-radius: 1.1rem;
 $input-btn-padding-y: 0.375rem;
 $button-width-open: 9rem;
 $button-width-close: 2rem;

diff --git a/src/application/style/vendors/_bootstrap.scss b/src/application/style/vendors/_bootstrap.scss
@@ -1,22 +1,38 @@
+@use "sass:color";
+
 @import "../abstracts/variables";
+@import "../abstracts/mixins";
 @import "bootstrap/scss/functions";
 
 // <editor-folder> Custom variables
 $body-bg: $color-black;
 $body-color: $color-white;
 $primary: $color-accent-2;
+$secondary: $color-accent-1;
 $dark: $color-black;
 $black: $color-black;
+$text-muted: $color-white-transparent-25;
 $badge-padding-x: 0;
 $badge-padding-y: 0;
 $badge-color: $color-accent-1;
 $nav-link-color: $color-white;
-$nav-link-hover-color: $color-accent-1;
+$nav-link-hover-color: $color-white;
 $nav-pills-link-active-color: $color-white;
 $nav-pills-border-radius: $border-radius;
+$nav-link-padding-y: .25rem;
 $card-border-width: 0;
 $btn-padding-x: 0;
 $btn-padding-y: 0;
+$border-radius-sm: $border-radius;
+$input-bg: $color-white-transparent-10;
+$input-border-color: transparent;
+$input-placeholder-color: $text-muted;
+$input-focus-border-color: transparent;
+$form-switch-color: $color-white;
+$form-select-indicator-color: $color-white-transparent-25;
+$dropdown-padding-x: .25rem;
+$dropdown-border-color: transparent;
+$dropdown-font-size: .875rem;
 
 // $theme-colors: (
 //	"accent-1": $color-accent-1,
@@ -39,6 +55,9 @@ $btn-padding-y: 0;
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/card";
 @import "bootstrap/scss/buttons";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/dropdown";
 
 // Helpers
 @import "bootstrap/scss/helpers";
@@ -55,10 +74,7 @@ $btn-padding-y: 0;
 }
 
 .bg-acrylic {
-	background-color: rgba($color-black, 0.2);
-	border-color: initial;
-	box-shadow: rgb(37 43 54 / 3%) 10px 10px 10px;
-	backdrop-filter: blur(30px);
+	@include background-acrylic;
 }
 
 .text-accent-1 {
@@ -73,6 +89,47 @@ $btn-padding-y: 0;
 	color: $color-black;
 }
 
+.text-gradient {
+	background-image: $gradient-accent;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+.btn.btn-acrylic {
+	@include background-acrylic;
+
+	@supports not (backdrop-filter: blur(30px)) {
+		@include button-variant(
+			$color-acrylic-compatibility,
+			transparent,
+			$color-white,
+			$hover-color:$color-white,
+			$active-color: $color-white
+		);
+	}
+
+	@supports (backdrop-filter: blur(30px)) {
+		@include button-variant(
+			$color-white-transparent-10,
+			transparent,
+			$color-white,
+			$hover-color:$color-white,
+			$active-color: $color-white
+		);
+	}
+
+	&.dropdown-toggle {
+		padding: 0.3rem 0.5rem;
+		font-size: 1.2rem;
+	}
+}
+
+.dropdown.dropdown-acrylic{
+	.dropdown-menu {
+		background: $color-acrylic-compatibility;
+	}
+}
+
 .d-flex-center-center {
 	display: flex;
 	justify-content: center;

diff --git a/src/application/ui/Button/Button.vue b/src/application/ui/Button/Button.vue
@@ -2,7 +2,7 @@
   <a
     v-if="asLink"
     :href="href"
-    class="btn btn-dark mx-1 my-1 d-flex-center-center"
+    class="btn btn-acrylic mx-1 my-1 d-flex-center-center"
     :class="{
       animate: hover,
       left: side === 'left',
@@ -23,7 +23,7 @@
   </a>
   <button
     v-else
-    class="btn btn-dark mx-1 my-1 d-flex-center-center"
+    class="btn btn-acrylic mx-1 my-1 d-flex-center-center"
     :class="{
       animate: hover,
       left: side === 'left',

diff --git a/src/application/ui/Button/button.scss b/src/application/ui/Button/button.scss
@@ -9,8 +9,8 @@
 	width: $button-width-close;
 
 	.icon {
-		background: $gradient-accent;
-		border-radius: 5rem;
+		background: $color-white-transparent-25;
+		border-radius: $border-radius;
 		padding: 0.5rem;
 		color: $color-white;
 		z-index: 1;
@@ -68,7 +68,7 @@
 
 		&.toggle {
 			.icon {
-				background: $color-black !important;
+				background: $color-white-transparent-25 !important;
 			}
 
 			&:hover, &:active, &.active {

diff --git a/src/application/ui/Navlink/navlink.scss b/src/application/ui/Navlink/navlink.scss
@@ -2,7 +2,9 @@
 @import "../../style/vendors/bootstrap";
 
 .nav-item > .nav-link{
-	background: $color-black-light-5;
+	background: $color-white-transparent-10;
+	box-shadow: rgb(37 43 54 / 3%) 10px 10px 10px;
+	backdrop-filter: blur(30px);
 
 	i[class^=icon] {
 		font-size: 1.4rem;