fix(panel): remove checkin and fix sizing

dvcol · dvcol · commit 761167de7304 · 2024-04-08T14:33:57.000+02:00
diff --git a/src/components/views/panel/MoviePanelButtons.vue b/src/components/views/panel/MoviePanelButtons.vue
@@ -1,16 +1,13 @@
 <script lang="ts" setup>
-import { NButton, NFlex, NIcon } from 'naive-ui';
+import { NFlex } from 'naive-ui';
 import { computed, onMounted, type PropType, ref, toRefs } from 'vue';
 
 import IconCheckedList from '~/components/icons/IconCheckedList.vue';
-import IconCloseSmall from '~/components/icons/IconCloseSmall.vue';
 import IconGrid from '~/components/icons/IconGrid.vue';
 import IconGridEmpty from '~/components/icons/IconGridEmpty.vue';
 import IconListEmpty from '~/components/icons/IconListEmpty.vue';
 import IconPlay from '~/components/icons/IconPlay.vue';
 import IconPlayFilled from '~/components/icons/IconPlayFilled.vue';
-
-import IconTrakt from '~/components/icons/IconTrakt.vue';
 import PanelButtonProgress from '~/components/views/panel/PanelButtonProgress.vue';
 import { usePanelButtons } from '~/components/views/panel/use-panel-buttons';
 import {
@@ -38,18 +35,6 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
-  checkin: {
-    type: Boolean,
-    required: false,
-  },
-  checkinProgress: {
-    type: Number,
-    required: false,
-  },
-  checkinLoading: {
-    type: Boolean,
-    required: false,
-  },
   activeLists: {
     type: Array as PropType<ListEntity['id'][]>,
     required: false,
@@ -104,23 +89,6 @@ onMounted(() => {
 
 <template>
   <div ref="root" class="panel-buttons">
-    <!--  Checkin  -->
-    <NFlex class="button-container checkin" justify="center" align="center">
-      <NButton round :secondary="!checkin" type="error" :disabled="checkinLoading">
-        <template #icon>
-          <NIcon
-            class="button-icon"
-            :component="checkin ? IconCloseSmall : IconTrakt"
-            :style="{
-              '--trakt-icon-path': 'var(--color-error-lighter)',
-              '--trakt-icon-circle': 'transparent',
-            }"
-          />
-        </template>
-        <span>{{ i18n(`label__${ checkin ? 'cancel_checkin' : 'checkin' }`) }}</span>
-      </NButton>
-    </NFlex>
-
     <!--  List  -->
     <NFlex class="button-container list" justify="center" align="center">
       <PanelButtonProgress
@@ -176,7 +144,7 @@ onMounted(() => {
 .panel-buttons {
   display: flex;
   flex-wrap: wrap;
-  gap: 1.25rem 1rem;
+  gap: 1.25rem 1.5rem;
   align-items: center;
   justify-content: center;
   width: 100%;
@@ -187,25 +155,23 @@ onMounted(() => {
       margin-left: calc(0% - var(--n-icon-margin));
     }
 
-    &.history,
+    &.history {
+      min-width: 10.125rem;
+    }
+
     &.collection {
-      min-width: 12.5rem;
+      min-width: 11.375rem;
     }
 
-    &.checkin,
     &.list {
-      min-width: 10rem;
+      min-width: 8.875rem;
     }
   }
 }
 
-@media (width <= 800px) {
+@media (width > 800px) {
   .panel-buttons {
-    width: 80%;
-
-    .button-container {
-      flex: 1 1 40%;
-    }
+    gap: 1.25rem 3rem;
   }
 }
 </style>
diff --git a/src/components/views/panel/MoviePanelDetails.vue b/src/components/views/panel/MoviePanelDetails.vue
@@ -36,7 +36,10 @@ const releasedDate = computed(() => {
 const releasedTime = computed(() => {
   if (!released.value) return;
   if (typeof released.value === 'string') return released.value;
-  return released.value.toLocaleTimeString();
+  return released.value.toLocaleTimeString(navigator.language, {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
 });
 
 const runtime = computed(() => {
@@ -69,6 +72,13 @@ const country = computed(() => {
 <template>
   <NFlex size="large" class="container" vertical>
     <NFlex class="row" size="large">
+      <!--  Release date  -->
+      <PanelDetail
+        :label="i18n('released')"
+        :value="releasedDate"
+        :skeleton="{ width: '5.125rem' }"
+      />
+
       <!--  Year  -->
       <PanelDetail :label="i18n('year')" :value="year" :skeleton="{ width: '2.25rem' }" />
 
@@ -78,23 +88,9 @@ const country = computed(() => {
         :value="country"
         :skeleton="{ width: '2ch' }"
       />
-
-      <!--  Status  -->
-      <PanelDetail
-        :label="i18n('status')"
-        :value="status"
-        :skeleton="{ width: '7.5rem' }"
-      />
     </NFlex>
 
     <NFlex class="row" size="large">
-      <!--  Release date  -->
-      <PanelDetail
-        :label="i18n('released_date')"
-        :value="releasedDate"
-        :skeleton="{ width: '5.125rem' }"
-      />
-
       <!--  Release Time  -->
       <PanelDetail
         :label="i18n('released_time')"
@@ -108,6 +104,13 @@ const country = computed(() => {
         :value="runtime"
         :skeleton="{ width: '3.75rem' }"
       />
+
+      <!--  Status  -->
+      <PanelDetail
+        :label="i18n('status')"
+        :value="status"
+        :skeleton="{ width: '7.5rem' }"
+      />
     </NFlex>
 
     <NFlex class="lists" vertical size="large">
diff --git a/src/components/views/panel/PanelDetail.vue b/src/components/views/panel/PanelDetail.vue
@@ -71,7 +71,7 @@ const { openTab } = useExtensionSettingsStore();
 }
 
 .detail {
-  flex: 0 1 30%;
+  flex: 0 1 31.5%;
 
   &:hover .prefix {
     color: var(--white-70);
diff --git a/src/components/views/panel/ShowPanelButtons.vue b/src/components/views/panel/ShowPanelButtons.vue
@@ -1,15 +1,13 @@
 <script lang="ts" setup>
-import { NButton, NFlex, NIcon } from 'naive-ui';
+import { NFlex } from 'naive-ui';
 import { computed, onMounted, type PropType, ref, toRefs } from 'vue';
 
 import IconCheckedList from '~/components/icons/IconCheckedList.vue';
-import IconCloseSmall from '~/components/icons/IconCloseSmall.vue';
 import IconGrid from '~/components/icons/IconGrid.vue';
 import IconGridEmpty from '~/components/icons/IconGridEmpty.vue';
 import IconListEmpty from '~/components/icons/IconListEmpty.vue';
 import IconPlay from '~/components/icons/IconPlay.vue';
 import IconPlayFilled from '~/components/icons/IconPlayFilled.vue';
-import IconTrakt from '~/components/icons/IconTrakt.vue';
 import PanelButtonProgress from '~/components/views/panel/PanelButtonProgress.vue';
 
 import { usePanelButtons } from '~/components/views/panel/use-panel-buttons';
@@ -48,18 +46,6 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
-  checkin: {
-    type: Boolean,
-    required: false,
-  },
-  checkinProgress: {
-    type: Number,
-    required: false,
-  },
-  checkinLoading: {
-    type: Boolean,
-    required: false,
-  },
   activeLists: {
     type: Array as PropType<ListEntity['id'][]>,
     required: false,
@@ -146,23 +132,6 @@ onMounted(() => {
 
 <template>
   <div ref="root" class="panel-buttons">
-    <!--  Checkin  -->
-    <NFlex class="button-container checkin" justify="center" align="center">
-      <NButton round :secondary="!checkin" type="error" :disabled="checkinLoading">
-        <template #icon>
-          <NIcon
-            class="button-icon"
-            :component="checkin ? IconCloseSmall : IconTrakt"
-            :style="{
-              '--trakt-icon-path': 'var(--color-error-lighter)',
-              '--trakt-icon-circle': 'transparent',
-            }"
-          />
-        </template>
-        <span>{{ i18n(`label__${ checkin ? 'cancel_checkin' : 'checkin' }`) }}</span>
-      </NButton>
-    </NFlex>
-
     <!--  List  -->
     <NFlex class="button-container list" justify="center" align="center">
       <PanelButtonProgress
@@ -229,7 +198,7 @@ onMounted(() => {
 .panel-buttons {
   display: flex;
   flex-wrap: wrap;
-  gap: 1.25rem 1rem;
+  gap: 1.25rem 1.5rem;
   align-items: center;
   justify-content: center;
   width: 100%;
@@ -240,25 +209,23 @@ onMounted(() => {
       margin-left: calc(0% - var(--n-icon-margin));
     }
 
-    &.history,
+    &.history {
+      min-width: 10.125rem;
+    }
+
     &.collection {
-      min-width: 12.5rem;
+      min-width: 11.375rem;
     }
 
-    &.checkin,
     &.list {
-      min-width: 10rem;
+      min-width: 8.875rem;
     }
   }
 }
 
-@media (width <= 800px) {
+@media (width > 800px) {
   .panel-buttons {
-    width: 80%;
-
-    .button-container {
-      flex: 1 1 40%;
-    }
+    gap: 1.25rem 3rem;
   }
 }
 </style>
diff --git a/src/components/views/panel/ShowPanelDetails.vue b/src/components/views/panel/ShowPanelDetails.vue
@@ -61,7 +61,10 @@ const airedDate = computed(() => {
 const airedTime = computed(() => {
   if (!aired.value) return;
   if (typeof aired.value === 'string') return '-';
-  return aired.value.toLocaleTimeString();
+  return aired.value.toLocaleTimeString(navigator.language, {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
 });
 
 const runtime = computed(() => {
@@ -157,7 +160,7 @@ const ids = computed(() => {
     <NFlex class="row" size="large">
       <!--  Air date  -->
       <PanelDetail
-        :label="i18n('aired_date')"
+        :label="i18n('aired')"
         :value="airedDate"
         :skeleton="{ width: '5.125rem' }"
       />
diff --git a/src/i18n/en/panel/panel-buttons.json b/src/i18n/en/panel/panel-buttons.json
@@ -12,27 +12,27 @@
     "description": "Label for the cancel button in the checkin panel"
   },
   "panel__buttons__label__history__add": {
-    "message": "Add to my History",
+    "message": "Add to History",
     "description": "Label for the add to history button in the panel"
   },
   "panel__buttons__label__history__remove": {
-    "message": "Remove from History",
+    "message": "Remove History",
     "description": "Label for the remove from history button in the panel"
   },
   "panel__buttons__label__collection__add": {
-    "message": "Add to my Collection",
+    "message": "Add to Collection",
     "description": "Label for the add to collection button in the panel"
   },
   "panel__buttons__label__collection__remove": {
-    "message": "Remove from Collection",
+    "message": "Remove Collection",
     "description": "Label for the remove from collection button in the panel"
   },
   "panel__buttons__label__list__add": {
-    "message": "Add to my List",
+    "message": "Add to Lists",
     "description": "Label for the add to list button in the panel"
   },
   "panel__buttons__label__list__update": {
-    "message": "Update my Lists",
+    "message": "Update Lists",
     "description": "Label for the update lists button in the panel"
   },
   "panel__buttons__label__now": {
@@ -58,5 +58,13 @@
   "panel__buttons__label__cancel": {
     "message": "Cancel",
     "description": "Label for the cancel button in the checkin panel"
+  },
+  "panel__buttons__label__collected": {
+    "message": "Collected",
+    "description": "Label for the collected button in the checkin panel"
+  },
+  "panel__buttons__label__watched": {
+    "message": "Watched",
+    "description": "Label for the watched button in the checkin panel"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ const { openTab } = useExtensionSettingsStore();`
`71`	`71`	`}`
`72`	`72`
`73`	`73`	`.detail {`
`74`		`- flex: 0 1 30%;`
	`74`	`+ flex: 0 1 31.5%;`
`75`	`75`
`76`	`76`	`&:hover .prefix {`
`77`	`77`	`color: var(--white-70);`