Merge commit '0fc25586e9e0bbad4dc498389483fde23b2cc15f'

gsabater · Jun 20, 2024 · 2cccf29 · 2cccf29
2 parents 660d817 + 0fc2558
commit 2cccf29
Show file tree

Hide file tree

Showing 40 changed files with 5,426 additions and 6,683 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,12 +1,27 @@
-node_modules
-*.log*
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
 .nitro
 .cache
-.output
-.env
 dist
 
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+# Local env files
+.env
+.env.*
+!.env.example
+
 .assets/P22 Mackinac.zip
 .assets/exports/*
 .assets/Mackinac/*

diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
@@ -1,16 +1,27 @@
-body {
+::root {
+  --tblr-scrollbar-color: #e9ecef;
+
+  //+-------------------------------------------------
+  // Wowfactor
+  //+-------------------------------------------------
+  --color-bg: #212325;
+  --color-bg-alt: #191a22;
+  --color-title: #191818;
 }
 
 [data-bs-theme='dark'] {
-  --tblr-primary: rgb(124, 58, 237);
-  --tblr-primary-rgb: 124, 58, 237;
+  // -- primary - alt rgb(100, 102, 216)
+  // -- Secondary: rgb(239, 151, 65) (orange)
+
+  --tblr-primary: rgb(87, 90, 198); //  rgb(124, 58, 237);
+  --tblr-primary-rgb: 87, 90, 189; // 124, 58, 237;
 
   --tblr-body-bg: #191a22;
 
   --tblr-bg-surface: #2c2e3bef;
   --tblr-bg-surface-tertiary: #202231ef;
 
-  --tblr-bg-forms: #191a22;
+  --tblr-bg-forms: #1e1f2a; // #191a22;
 
   --tblr-card-border-color: #38394c;
   --tblr-border-color: var(--tblr-card-border-color); // #2a2d39;
@@ -24,13 +35,4 @@ body {
   // .status {
   //   --tblr-status-color: #dce1e7;
   // }
-
-  // wowfactor colors
-  --color-bg: #212325;
-  --color-bg-alt: #191a22;
-  --color-title: #191818;
-}
-
-::root {
-  --tblr-scrollbar-color: #e9ecef;
 }
diff --git a/assets/scss/components/b-game.scss b/assets/scss/components/b-game.scss
@@ -47,6 +47,12 @@
       box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.36);
     }
 
+    &:not(.is-banner) img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
     & img {
       z-index: 1;
       /* object-fit: cover; */

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -7,7 +7,9 @@
 @import '../../node_modules/@tabler/core/dist/css/tabler-vendors.css';
 @import '../../node_modules/@tabler/core/dist/css/demo.css';
 @import 'extend';
-@import 'tabler_override';
+
+@import 'overrides/tabler';
+@import 'overrides/vuetify';
 
 @import 'base';
 @import 'colors';

diff --git a/assets/scss/tabler_override.scss → assets/scss/overrides/tabler.scss b/assets/scss/tabler_override.scss → assets/scss/overrides/tabler.scss
@@ -29,3 +29,10 @@ kbd {
   justify-content: center;
   // font-size: 0.65rem;
 }
+
+//+-------------------------------------------------
+// Form elements
+//+-------------------------------------------------
+.form-label {
+  margin-bottom: 0.3rem;
+}
diff --git a/assets/scss/overrides/vuetify.scss b/assets/scss/overrides/vuetify.scss
@@ -0,0 +1,81 @@
+//+-------------------------------------------------
+// Vuetify colors
+//+-------------------------------------------------
+[data-bs-theme='dark'] {
+  --v-border-color: 207, 102, 121;
+  --v-theme-error: 1, 2, 3;
+}
+
+//+-------------------------------------------------
+// v-card
+//+-------------------------------------------------
+.v-card {
+  & .v-card-title {
+    display: flex;
+    align-items: center;
+
+    & svg {
+      width: 17px;
+      height: 17px;
+      margin-right: 0.4rem;
+      transform: translateY(1px);
+    }
+  }
+}
+
+//+-------------------------------------------------
+// v-text-field
+//+-------------------------------------------------
+.v-input {
+  & .v-field--variant-solo {
+    background: var(--tblr-bg-forms);
+    border: var(--tblr-border-width) solid var(--tblr-border-color);
+    // color: var(--tblr-border-color);
+
+    &.v-field--focused {
+      color: var(--tblr-body-color);
+      background-color: var(--tblr-bg-forms);
+      border-color: #80aad3;
+      outline: 0;
+      box-shadow:
+        var(--tblr-box-shadow-input),
+        0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+    }
+  }
+
+  & .v-field__input {
+    --v-field-input-padding-top: 0.45rem; //0.5625rem;
+    --v-field-input-padding-bottom: 0.45rem; //0.5625rem;
+
+    padding-top: var(--v-field-input-padding-top);
+    padding-bottom: var(--v-field-input-padding-bottom);
+    min-height: unset;
+    font-size: 0.875rem;
+  }
+
+  & .v-input__details {
+    padding-inline: 5px !important;
+    padding-top: 7px;
+    min-height: 17px;
+
+    & .v-messages__message {
+      color: var(--tblr-secondary);
+      font-size: 95%;
+    }
+  }
+
+  & .v-field--error {
+    border-color: var(--tblr-form-invalid-border-color);
+    padding-right: calc(1.4285714286em + 1.125rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.3571428572em + 0.28125rem) center;
+    background-size: calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
+  }
+  &.v-input--error {
+    & .v-messages__message {
+      color: var(--tblr-form-invalid-color);
+      color: rgb(var(--v-theme-error));
+    }
+  }
+}
diff --git a/assets/scss/partials/nav.scss b/assets/scss/partials/nav.scss
@@ -31,6 +31,11 @@ aside .dropdown-menu {
   & .dropdown-divider {
     margin: 0.5rem -10px;
   }
+
+  & .router-link-active {
+    background-color: var(--tblr-dropdown-link-active-bg);
+    color: var(--tblr-dropdown-link-color);
+  }
 }
 
 // #sidebar-menu li {

diff --git a/components/b/game.vue b/components/b/game.vue
@@ -27,10 +27,68 @@
     </div>
 
     <div v-if="body" class="card-game__details">
-      <span class="details__name font-serif">
+      <span
+        v-if="body.includes('name') || body.includes('default')"
+        class="details__name font-serif d-block">
         {{ app.name }}
       </span>
-      <div v-if="$app.dev" class="details__secondary text-muted">
+
+      <small v-if="body.includes('score')" class="details__secondary text-muted">
+        <Icon
+          size="12"
+          width="1.8"
+          style="transform: translateY(-1px); margin-right: 3px">
+          Universe
+        </Icon>
+        {{ app.score ?? 'Unscored' }}
+        <template v-if="$app.dev">-- {{ app._.score }}</template>
+      </small>
+
+      <small
+        v-if="body.includes('released')"
+        class="d-block details__secondary text-muted">
+        <Icon
+          size="12"
+          width="1.8"
+          style="transform: translateY(-1px); margin-right: 3px">
+          Calendar
+        </Icon>
+        {{ app._.released_at }}
+      </small>
+
+      <small
+        v-if="body.includes('playtime')"
+        class="d-block details__secondary text-muted">
+        <Icon
+          size="12"
+          width="1.8"
+          style="transform: translateY(-1px); margin-right: 3px">
+          ClockHour3
+        </Icon>
+
+        <span style="font-size: 0.775rem">
+          <template v-if="app._.playtime == 0">Not played</template>
+          <template v-else>
+            Played
+            {{ dates.minToHours(app._.playtime, 'Not played') }}
+            <!-- {{ dates.timeAgo(app.playtime.steam_last * 1000) }} -->
+          </template>
+        </span>
+      </small>
+
+      <small
+        v-if="body.includes('hltb') && app.hltb && app.hltb.main"
+        class="d-block details__secondary text-muted">
+        <Icon
+          size="12"
+          width="1.8"
+          style="transform: translateY(-1px); margin-right: 3px">
+          SquareRoundedCheck
+        </Icon>
+        {{ dates.minToHours(app.hltb.main / 60) }}
+      </small>
+
+      <!-- <div v-if="$app.dev" class="details__secondary text-muted">
         score: {{ app.score }} -- {{ app._.score }}
         <br />
         state: {{ app.state ?? '--' }}
@@ -40,7 +98,7 @@
           <br />
           {{ app.released_at }} -- {{ app._.released_at }}
         </template>
-      </div>
+      </div> -->
     </div>
     <!-- <div class="card-body">
                     <div class="d-flex align-items-center">
@@ -81,7 +139,7 @@
  * @desc:    ...
  * -------------------------------------------
  * Created Date: 16th November 2023
- * Modified: Fri Apr 26 2024
+ * Modified: Fri May 17 2024
  **/
 
 export default {