From cee72bb8da1aaccce187b95622c3486562c73c6e Mon Sep 17 00:00:00 2001 From: chiayin Date: Tue, 18 Apr 2023 11:13:09 +0800 Subject: [PATCH] tidy up assets files. --- src/assets/base.css | 20 ++++++ src/assets/components.css | 52 +++++++++++++++ src/assets/google.css | 11 --- src/assets/layout.css | 12 ++++ src/assets/main.css | 7 +- src/assets/tailwind.css | 85 ------------------------ src/assets/{primevue.css => vendors.css} | 13 ++++ src/stores/allMapData.js | 4 +- 8 files changed, 103 insertions(+), 101 deletions(-) create mode 100644 src/assets/base.css delete mode 100644 src/assets/google.css create mode 100644 src/assets/layout.css rename src/assets/{primevue.css => vendors.css} (59%) diff --git a/src/assets/base.css b/src/assets/base.css new file mode 100644 index 0000000..80bc6c0 --- /dev/null +++ b/src/assets/base.css @@ -0,0 +1,20 @@ +/* 全域字型 */ +@layer base { + html { + font-family: 'Roboto', sans-serif, system-ui; + color: #0f172a; + } + h1, h2, h3, h4, h5, h6 { + line-height: 1; + } +} + +/* invalid */ +.is-invalid :invalid{ + @apply invalid:border-danger focus:ring-danger +} + +/* height */ +.h-screen-main { + height: calc(100vh - 104px); +} diff --git a/src/assets/components.css b/src/assets/components.css index b6cc52c..5480f49 100644 --- a/src/assets/components.css +++ b/src/assets/components.css @@ -1,3 +1,4 @@ +/* loading */ .loader { width: 64px; height: 64px; @@ -86,3 +87,54 @@ background: #009688; left: 44px; } + +/* components */ +/* Scrollbar */ +@layer utilities { + .scrollbar::-webkit-scrollbar { + @apply w-2 h-2 + } + + .scrollbar::-webkit-scrollbar-track { + @apply bg-transparent rounded-full + } + + .scrollbar::-webkit-scrollbar-thumb { + @apply bg-primary rounded-full + } + + .scrollbar::-webkit-scrollbar-thumb:hover { + @apply bg-primary + } +} + +/* button */ +.btn { +@apply inline-block rounded-full text-sm font-medium text-center align-middle transition-colors duration-300 +} +.btn-sm { +@apply px-5 py-2 +} +.btn-lg { + @apply px-4 py-2.5 +} +.btn-c-primary { + @apply text-neutral-50 bg-primary border border-primary hover:bg-neutral-50 hover:text-primary hover:border hover:border-primary active:border active:ring focus:outline-none focus:border-primary focus:ring +} +.btn-disable { + @apply border border-neutral-200 bg-neutral-50 text-neutral-200 +} +.btn-neutral { + @apply text-neutral-700 bg-neutral-100 border border-neutral-500 hover:bg-neutral-500 hover:text-neutral-100 hover:border-neutral-300 focus:outline-none focus:border-neutral-500 focus:ring active:ring +} + +/* button toggle */ +.btn-toggle-content { + @apply flex justify-between items-center w-full rounded-full bg-neutral-100 text-neutral-500 +} +.btn-toggle-item { + @apply text-sm leading-5 font-medium text-center justify-center w-1/2 px-7 py-1.5 rounded-full cursor-pointer transition-all duration-200 +} +.btn-toggle-show { + @apply bg-primary text-neutral-10 shadow-md +} diff --git a/src/assets/google.css b/src/assets/google.css deleted file mode 100644 index 1e21c63..0000000 --- a/src/assets/google.css +++ /dev/null @@ -1,11 +0,0 @@ -/* import Google font icon */ -@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'); - -/* icon default set */ -.material-symbols-outlined { - font-variation-settings: - 'FILL' 0, - 'wght' 400, - 'GRAD' 0, - 'opsz' 40 -} diff --git a/src/assets/layout.css b/src/assets/layout.css new file mode 100644 index 0000000..f0c5990 --- /dev/null +++ b/src/assets/layout.css @@ -0,0 +1,12 @@ +/* Navbar */ +nav ul>li { + @apply px-2 py-3.5 duration-300 hover:bg-neutral-900 hover:text-neutral-10 active:bg-neutral-900 active:text-neutral-10; +} + +/* Header */ +.h1 { + @apply font-bold text-base leading-10 +} +.h2 { + @apply font-bold text-sm leading-10 +} diff --git a/src/assets/main.css b/src/assets/main.css index e06be40..67a6650 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,4 +1,5 @@ -@import './google.css'; -@import './components.css'; @import './tailwind.css'; -@import './primevue.css'; +@import './base.css'; +@import './components.css'; +@import './layout.css'; +@import './vendors.css'; diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css index 5ef3a6c..69b2562 100644 --- a/src/assets/tailwind.css +++ b/src/assets/tailwind.css @@ -4,88 +4,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -/* 全域字型 */ -@layer base { - html { - font-family: 'Roboto', sans-serif, system-ui; - color: #0f172a; - } - h1, h2, h3, h4, h5, h6 { - line-height: 1; - } -} - -/* Scrollbar */ -@layer utilities { - .scrollbar::-webkit-scrollbar { - @apply w-2 h-2 - } - - .scrollbar::-webkit-scrollbar-track { - @apply bg-transparent rounded-full - } - - .scrollbar::-webkit-scrollbar-thumb { - @apply bg-primary rounded-full - } - - .scrollbar::-webkit-scrollbar-thumb:hover { - @apply bg-primary - } -} - -/* components */ -/* button */ -.btn { -@apply inline-block rounded-full text-sm font-medium text-center align-middle transition-colors duration-300 -} -.btn-sm { -@apply px-5 py-2 -} -.btn-lg { - @apply px-4 py-2.5 -} -.btn-c-primary { - @apply text-neutral-50 bg-primary border border-primary hover:bg-neutral-50 hover:text-primary hover:border hover:border-primary active:border active:ring focus:outline-none focus:border-primary focus:ring -} -.btn-disable { - @apply border border-neutral-200 bg-neutral-50 text-neutral-200 -} -.btn-neutral { - @apply text-neutral-700 bg-neutral-100 border border-neutral-500 hover:bg-neutral-500 hover:text-neutral-100 hover:border-neutral-300 focus:outline-none focus:border-neutral-500 focus:ring active:ring -} - -/* button toggle */ -.btn-toggle-content { - @apply flex justify-between items-center w-full rounded-full bg-neutral-100 text-neutral-500 -} -.btn-toggle-item { - @apply text-sm leading-5 font-medium text-center justify-center w-1/2 px-7 py-1.5 rounded-full cursor-pointer transition-all duration-200 -} -.btn-toggle-show { - @apply bg-primary text-neutral-10 shadow-md -} - -/* invalid */ -.is-invalid :invalid{ - @apply invalid:border-danger focus:ring-danger -} - -/* height */ -.h-screen-main { - height: calc(100vh - 104px); -} - -/* Navbar */ -nav ul>li { - @apply px-2 py-3.5 duration-300 hover:bg-neutral-900 hover:text-neutral-10 active:bg-neutral-900 active:text-neutral-10; -} - -/* Header */ -.h1 { - @apply font-bold text-base leading-10 -} -.h2 { - @apply font-bold text-sm leading-10 -} diff --git a/src/assets/primevue.css b/src/assets/vendors.css similarity index 59% rename from src/assets/primevue.css rename to src/assets/vendors.css index 9a15e8a..d7ecb06 100644 --- a/src/assets/primevue.css +++ b/src/assets/vendors.css @@ -1,3 +1,16 @@ +/* import Google font icon */ +@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'); + +/* icon default set */ +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 40 +} + +/* Primevue */ .p-sidebar-left { @apply ml-14 } diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js index 56529d3..2d90a9f 100644 --- a/src/stores/allMapData.js +++ b/src/stores/allMapData.js @@ -78,8 +78,8 @@ export default defineStore('allMapDataStore', { let logId = this.logId; let tempFilterId = this.tempFilterId; let api = tempFilterId !== null ? `/api/temp-filters/${tempFilterId}/discover` : `/api/logs/${logId}/discover`; - console.log(tempFilterId); - console.log(logId); + // console.log(tempFilterId); + // console.log(logId); // const api = `/api/logs/${logId}/discover`; try {