Merge pull request #20 from 0PandaDEV/issue/metadata

Metadata/Information for Items
0PandaDEV · Dec 20, 2024 · 56fab79 · 56fab79
2 parents 9b31183 + ccb40c4
commit 56fab79
Show file tree

Hide file tree

Showing 27 changed files with 1,138 additions and 369 deletions.
diff --git a/assets/css/index.scss b/assets/css/index.scss
@@ -89,7 +89,7 @@ $mutedtext: #78756f;
   }
 
   .icon {
-    width: 20px;
+    width: 18px;
     height: 18px;
   }
 }
@@ -98,32 +98,32 @@ $mutedtext: #78756f;
   position: absolute;
   top: 53px;
   left: 284px;
-  padding: 8px;
-  height: calc(100vh - 256px);
+  height: calc(100vh - 254px);
   font-family: CommitMono Nerd Font !important;
-  font-size: 14px;
+  font-size: 12px;
   letter-spacing: 1;
   border-radius: 10px;
   width: calc(100vw - 286px);
   white-space: pre-wrap;
   word-wrap: break-word;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
 
-  span {
-    font-family: CommitMono Nerd Font !important;
+  &:not(:has(.image)) {
+    padding: 8px;
   }
 
-  .full-image {
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    object-fit: cover;
-    object-position: center;
+  span {
+    font-family: CommitMono Nerd Font !important;
   }
 
   .image {
-    max-width: 100%;
-    max-height: 100%;
+    width: 100%;
+    height: 100%;
     object-fit: contain;
-    object-position: top left;
+    object-position: center;
   }
 }
 
@@ -212,6 +212,9 @@ $mutedtext: #78756f;
 
 .information {
   position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
   bottom: 40px;
   left: 284px;
   height: 160px;
@@ -225,6 +228,47 @@ $mutedtext: #78756f;
     font-size: 12px;
     letter-spacing: 0.6px;
   }
+
+  .info-content {
+    display: flex;
+    gap: 0;
+    flex-direction: column;
+
+    .info-row {
+      display: flex;
+      width: 100%;
+      font-size: 12px;
+      justify-content: space-between;
+      padding: 8px 0;
+      border-bottom: 1px solid $divider;
+      line-height: 1;
+
+      &:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      &:first-child {
+        padding-top: 22px;
+      }
+
+      p {
+        font-family: SFRoundedMedium;
+        color: $text2;
+        font-weight: 500;
+        flex-shrink: 0;
+      }
+
+      span {
+        font-family: CommitMono;
+        color: $text;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        margin-left: 32px;
+      }
+    }
+  }
 }
 
 .clothoid-corner {