client: refactor help, Gselect

Author: PrinsINT

client/StyleTemplate.vue

@@ -5,16 +5,19 @@
     - https://vuejs.org/guide/typescript/composition-api.html -->
 
     <!-- Attribute order: v-for/v-if; id; ref/key; v-model; others...; @click/@etc. -->
-    <button v-if="visible" class="btn" @click="handleClick">Button</button>
+    <button v-if="visible" v-model="foo" class="btn" @click="handleClick">Button</button>
 </template>
 
 <script setup lang="ts">
 // -- libraries --
 // --- stores ---
 // --- api ---
+// --- views ---
 // --- types ---
+// --- model ---
+const model = defineModel<string>()
 // --- props ---
-const {foo = "bar"} = defineProps<{
+const { foo = "bar" } = defineProps<{
     foo?: string
 }>()
 // --- emits ---

client/components.d.ts

@@ -32,10 +32,12 @@ declare module 'vue' {
     GInput: typeof import('./src/components/input/GInput.vue')['default']
     GModal: typeof import('./src/components/modals/GModal.vue')['default']
     GNav: typeof import('./src/components/links/GNav.vue')['default']
+    GSelect: typeof import('./src/components/input/GSelect.vue')['default']
     GSpinner: typeof import('./src/components/GSpinner.vue')['default']
     GTable: typeof import('./src/components/tables/GTable.vue')['default']
     GTabs: typeof import('./src/components/GTabs.vue')['default']
     HelpLink: typeof import('./src/components/links/HelpLink.vue')['default']
+    InlineTextButton: typeof import('./src/components/input/InlineTextButton.vue')['default']
     InspectButton: typeof import('./src/components/input/InspectButton.vue')['default']
     JobModal: typeof import('./src/components/modals/jobs/JobModal.vue')['default']
     JobProgress: typeof import('./src/components/modals/jobs/JobProgress.vue')['default']

client/package.json

@@ -1,6 +1,5 @@
 {
     "name": "galahad",
-    "version": "0.0.0",
     "private": true,
     "type": "module",
     "scripts": {

client/src/assets/main.scss

@@ -31,7 +31,7 @@ ul, ol {
     padding: revert;
 }
 
-a:link {
+a {
     color: #000;
     text-decoration: underline;
 

client/src/components/EvaluationInfoBox.vue

@@ -11,8 +11,8 @@
             </hgroup>
             <GInfo v-if="expand && $slots.help">
                 <slot name="help"></slot>
-                <template v-if="helpSubject" #footer>
-                    <HelpLink :subject="helpSubject" />
+                <template v-if="helpLink" #footer>
+                    <HelpLink :helpLink />
                 </template>
             </GInfo>
         </header>
@@ -26,9 +26,11 @@
 </template>
 
 <script setup lang="ts">
+import type { HelpLink } from '@/types/ui/help';
+
 // --- props ---
-const { helpSubject, title } = defineProps<{
-    helpSubject?: string
+const { helpLink, title } = defineProps<{
+    helpLink?: HelpLink | string
     title?: string
     article?: boolean
 }>()
@@ -38,19 +40,24 @@ const expand = ref(false)
 </script>
 
 <style scoped lang="scss">
+.view>.g-card,
+.view.g-card,
+.modal .g-card {
+    padding: 1rem;
+}
+
+.view.g-card>.content,
+{
+flex: 1;
+}
+
 .g-card {
     background-color: var(--white);
-    padding: 1em;
-    min-width: 250px;
     max-width: 100%;
     display: flex;
     flex-direction: column;
     gap: 1rem;
-
-    .g-card {
-        // Don't double up on padding
-        padding: 0;
-    }
+    align-items: stretch !important;
 
     .header {
         display: flex;
@@ -59,40 +66,36 @@ const expand = ref(false)
         align-items: center;
 
         .title {
-            text-align: center;
-
-            .h3 {
-                display: inline-block;
-            }
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
 
             .help-btn.plain {
                 border: 1px solid var(--int-grey);
-                padding: 0 0.6em;
-                font-size: 1.5em;
-                cursor: help;
-                width: 28px;
-                justify-content: center;
                 font-weight: bold;
-                margin-left: 0.5em;
+                cursor: help;
+                font-size: 1.5rem;
+                width: 2rem;
+                height: 2rem;
             }
         }
     }
 
     .content {
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: safe center;
         gap: 1rem;
         max-width: 100%;
-        overflow: scroll;
+        overflow-x: auto;
 
         &.article {
             max-width: 800px;
             align-items: start;
             align-self: center;
 
             :deep(h1) {
-                font-size: 2em;
+                font-size: 2rem;
             }
         }
     }

client/src/components/GCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <aside class="info" :class="classes">
+    <aside class="info" :class="{ error: error }">
         <GSpinner class="spinner" :error :still="!spinner" />
         <slot></slot>
         <template v-if="$slots.footer">
@@ -11,14 +11,10 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
+const { error, spinner } = defineProps<{
     error?: boolean
     spinner?: boolean
 }>()
-
-const classes = computed(() => ({
-    error: props.error,
-}))
 </script>
 
 <style scoped lang="scss">

client/src/components/GInfo.vue

@@ -12,11 +12,11 @@ const props = defineProps<{
     small?: boolean
     still?: boolean
 }>()
-const classes = computed(() => ({
+const classes = {
     error: props.error,
     small: props.small,
     still: props.still,
-}))
+}
 </script>
 
 <style scoped lang="scss">

client/src/components/GSpinner.vue

@@ -6,7 +6,7 @@
                 <slot name="banner"></slot>
             </template>
             <nav class="nav">
-                <div v-for="tab in tabs" :key="tab.id">
+                <template v-for="tab in tabs" :key="tab.id">
                     <a v-if="!tab.disabled && !tab.stub" :href="urlForTab(tab.id)"
                         :class="'textcolor ' + navLinkClass(tab.id)" @click.prevent="navigateTo(tab.id)">
                         <slot :name="`${tab.id}-title`" :isActive="currentTab == tab.id">{{ tab.title || tab.id }}
@@ -15,7 +15,7 @@
                     <span :class="`nav-link ${tab.disabled ? 'disabled' : ''}`" v-else>
                         <slot :name="`${tab.id}-title`">{{ tab.title || tab.id }}</slot>
                     </span>
-                </div>
+                </template>
             </nav>
         </header>
 
@@ -110,7 +110,6 @@ function urlForTab(tabId: string) {
 
         .nav {
             display: inline-flex;
-            flex-wrap: wrap;
             line-height: 45px;
             background-color: var(--int-theme);
 
@@ -168,6 +167,10 @@ function urlForTab(tabId: string) {
             border: var(--int-light-grey) 1px solid;
         }
     }
+
+    &.level-3 {
+        flex: 1;
+    }
 }
 
 @media (max-width: 730px) {
@@ -178,59 +181,4 @@ function urlForTab(tabId: string) {
         }
     }
 }
-
-
-// // Header nav for all tabs
-
-
-// // tabs level 1
-// .tabs.level-1 {
-//     display: flex;
-//     flex-direction: column;
-//     height: 100%;
-
-//     > .header {
-//         background-color: var(--int-theme);
-//         z-index: 1;
-//         top: 0;
-//         box-shadow: 0px 4px 5px 1px #ccc;
-
-//         .top {
-//             height: 70px;
-//         }
-
-//         .nav {
-//             line-height: 52px;
-//             font-size: 18px;
-//         }
-//     }
-// }
-
-// /* It's nice to read with a bit more space at the bottom*/
-// :deep(.tabs.level-2) > .content {
-//     padding-bottom: 2em !important;
-// }
-
-// .tabs.level-2,
-// .tabs.level-3 {
-//     .content {
-//         background-color: white;
-//         border: var(--int-light-grey) 1px solid;
-//     }
-
-//     .nav {
-//         border-top: var(--int-light-grey) 1px solid;
-//         border-left: var(--int-light-grey) 1px solid;
-//         border-right: var(--int-light-grey) 1px solid;
-//     }
-// }
-
-// .tabs.level-2 {
-//     display: flex;
-//     flex-direction: column;
-
-//     .content {
-//         overflow-y: auto;
-//     }
-// }
 </style>

client/src/components/GTabs.vue

@@ -1,7 +1,7 @@
 <template>
     <table class="key-values">
         <tbody>
-            <tr v-for="key in keys" :key="key">
+            <tr v-for="key in keys" :key>
                 <td class="key">{{ key }}</td>
                 <td>
                     {{ data[key] }}
@@ -21,8 +21,9 @@ const keys = Object.keys(data)
 <style scoped lang="scss">
 .key-values {
     font-family: monospace;
+
     .key {
-        padding-right: 2em;
+        padding-right: 2rem;
     }
 }
 </style>