feat: added notes indicator to grids

Tormak9970 · Apr 23, 2023 · 953af8d · 953af8d
1 parent fa33853
commit 953af8d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/src/components/core/grids/Grid.svelte b/src/components/core/grids/Grid.svelte
@@ -27,6 +27,14 @@
       <path d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/>
     </svg>
   </div>
+  {#if grid?.notes}
+    <div class="image-control show-notes" use:AppController.tippy={{ content: "Notes", placement: "right", onShow: AppController.onTippyShow}}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+        <path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/>
+      </svg>
+    </div>
+  {/if}
   <div class="img" style="height: {heights[$gridType]}px;">
     <Lazy height="{heights[$gridType]}px" fadeOption={{delay: 500, duration: 1000}}>
       <img src="{grid.url.toString()}" alt="{grid.author}'s {$gridType} image" style="max-width: {widths[$gridType]}px; max-height: {heights[$gridType]}px; width: auto; height: auto;" />
@@ -130,5 +138,7 @@
   }
 
   .show-view { top: 2px; }
+  .show-notes { cursor: default; top: 30px; }
+  .show-notes:hover { cursor: default; opacity: 0.8; }
   .grid:hover > .image-control { display: flex; }
 </style>
diff --git a/src/components/toast-modals/GridPreviewModal.svelte b/src/components/toast-modals/GridPreviewModal.svelte
@@ -31,15 +31,15 @@
     "Capsule": 300,
     "Wide Capsule": 600,
     "Hero": 956,
-    "Logo": 200,
+    "Logo": 600,
     "Icon": 60,
   };
 
   const heights = {
     "Capsule": 450,
     "Wide Capsule": 291,
     "Hero": 342,
-    "Logo": 134,
+    "Logo": 402,
     "Icon": 60,
   };
 
@@ -55,7 +55,7 @@
     <div class="border" />
     <div class="content {$gridType.split(" ").join("-").toLowerCase()}">
       <div class="img-cont">
-        <div class="img" style="height: {heights[$gridType]}px;">
+        <div class="img" class:img-background={$gridType == GridTypes.LOGO} style="max-height: {heights[$gridType]}px;">
           <Lazy height="{heights[$gridType]}px" fadeOption={{delay: 500, duration: 1000}}>
             <img src="{$gridModalInfo?.url?.toString()}" alt="{$gridModalInfo?.author}'s {$gridType} image" style="max-width: {widths[$gridType]}px; max-height: {heights[$gridType]}px; width: auto; height: auto;" />
           </Lazy>
@@ -73,12 +73,12 @@
           <div class="label-small">Style: {$gridModalInfo?.style}</div>
           <div class="label-small">Dimensions: {$gridModalInfo?.width}x{$gridModalInfo?.height}</div>
           <VerticalSpacer />
-          <VerticalSpacer />
-          {#if $gridType == GridTypes.CAPSULE}
+          {#if $gridModalInfo?.notes}
+            <VerticalSpacer />
             <div class="label">Notes:</div>
             <div class="border" />
             <VerticalSpacer />
-            <div class="notes">{$gridModalInfo}</div>
+            <div class="notes">{$gridModalInfo?.notes}</div>
           {:else}
             <div class="border" />
           {/if}
@@ -172,13 +172,32 @@
     justify-content: space-between;
   }
 
+  .logo .info {
+    margin-bottom: 10px;
+    margin-left: 14px;
+    margin-right: 10px;
+    min-width: 200px;
+    min-height: calc(100% - 20px);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
   .img-cont { padding: 10px; }
 
   .img-cont > .img {
     border-radius: 2px;
     overflow: hidden;
   }
 
+  .img-background {
+    border-radius: 8px;
+    background-color: #a3a3a3;
+    background-image: linear-gradient(140deg, #adadad 0%, #727272 50%, #535353 75%);
+    padding: 5px;
+  }
+
   .author {
     display: flex;
     align-items: center;

diff --git a/src/lib/models/SGDB.ts b/src/lib/models/SGDB.ts
@@ -42,6 +42,8 @@ export interface SGDBImage {
   height: number;
   epilepsy: boolean;
   nsfw: boolean;
+  language: string;
+  notes: string|null;
 }
 
 export interface SGDBOptions {