wip

src/components/IssueDetails.vue

@@ -31,9 +31,7 @@ const { ckey } = defineProps<Props>()
 
 const createdAtFormatted = computed(() => {
   if (!issue.value?.createdAt) return ''
-  return new Intl.DateTimeFormat('ru-RU', { dateStyle: 'medium', timeStyle: 'short' }).format(
-    new Date(issue.value.createdAt),
-  )
+  return new Date(issue.value.createdAt).toLocaleString('ru-RU')
 })
 
 async function fetch() {
@@ -101,62 +99,97 @@ defineExpose({
 </script>
 
 <template>
-  <div v-if="issue" class="d-flex flex-column ga-4 pa-4">
-    <div>{{ ckey }}</div>
+  <div v-if="issue" class="pa-4 details">
+    <div class="d-flex flex-column ga-4">
+      <div>{{ ckey }}</div>
 
-    <issue-title :text="issue.title" @changed="onTitleChanged" />
+      <issue-title :text="issue.title" @changed="onTitleChanged" />
 
-    <v-card elevation="0" border>
-      <v-card-text class="u-grid">
-        <div class="text-medium-emphasis">Status:</div>
-        <status-menu :value="issue.status" @changed="onStatusChanged" />
+      <v-card elevation="0" border>
+        <v-card-text class="u-grid">
+          <div class="text-medium-emphasis">Status:</div>
+          <status-menu :value="issue.status" @changed="onStatusChanged" />
 
-        <div class="text-medium-emphasis">Reporter:</div>
-        <reporter-info :user="issue.reporter" />
+          <div class="text-medium-emphasis">Reporter:</div>
+          <reporter-info :user="issue.reporter" />
 
-        <div class="text-medium-emphasis">Assignee:</div>
-        <assignee-menu :value="issue.assignee" :compact="false" @changed="onAssigneeChanged" />
+          <div class="text-medium-emphasis">Assignee:</div>
+          <assignee-menu :value="issue.assignee" :compact="false" @changed="onAssigneeChanged" />
 
-        <div class="text-medium-emphasis">Created At:</div>
-        <div>{{ createdAtFormatted }}</div>
+          <div class="text-medium-emphasis">Created At:</div>
+          <div>{{ createdAtFormatted }}</div>
 
-        <div class="text-medium-emphasis">Due Date:</div>
-        <issue-date :date="issue.dueDate" @changed="onDueDateChanged" />
-      </v-card-text>
-    </v-card>
+          <div class="text-medium-emphasis">Due Date:</div>
+          <issue-date :date="issue.dueDate" @changed="onDueDateChanged" />
+        </v-card-text>
+      </v-card>
 
-    <expansion-panel title="Details">
-      <issue-content :text="issue.content" @changed="onContentChanged" />
-    </expansion-panel>
+      <expansion-panel title="Details">
+        <issue-content :text="issue.content" @changed="onContentChanged" />
+      </expansion-panel>
+    </div>
+    <div class="d-flex flex-column">
+      <expansion-panel title="Activity" class="activity">
+        <v-sheet class="activity__sheet">
+          <v-btn-toggle class="align-self-start" border divided v-model="activity" mandatory="force" density="compact">
+            <v-btn rounded="0" prepend-icon="mdi-chat" value="comment">Comments</v-btn>
+            <v-btn rounded="0" prepend-icon="mdi-history" value="history">History</v-btn>
+          </v-btn-toggle>
 
-    <expansion-panel title="Activity">
-      <v-sheet>
-        <v-tabs v-model="activity" density="compact">
-          <v-tab prepend-icon="mdi-star" value="comment">Comments</v-tab>
-          <v-tab prepend-icon="mdi-star" value="history">History</v-tab>
-        </v-tabs>
-
-        <v-divider />
-
-        <v-tabs-window v-model="activity">
-          <v-tabs-window-item value="comment">
-            <comments-list :issue-id="issue.id" />
-          </v-tabs-window-item>
-          <v-tabs-window-item value="history">
-            <history-list />
-          </v-tabs-window-item>
-        </v-tabs-window>
-      </v-sheet>
-    </expansion-panel>
+          <v-tabs-window v-model="activity" class="activity__window">
+            <v-tabs-window-item value="comment" class="h-100">
+              <comments-list :issue-id="issue.id" />
+            </v-tabs-window-item>
+            <v-tabs-window-item value="history">
+              <history-list />
+            </v-tabs-window-item>
+          </v-tabs-window>
+        </v-sheet>
+      </expansion-panel>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+.details {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.details > * {
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.activity {
+  flex: 1;
+  min-height: 0;
+
+  &__sheet {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__window {
+    flex: 1;
+    min-height: 0;
+
+    :deep(.v-window__container) {
+      height: 100%;
+    }
+  }
+}
+
 .u-grid {
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
   column-gap: 1rem;
-  row-gap: 0.75rem;
+  row-gap: 1.5rem;
 }
 </style>