From 12f3fe5390b874e6b2af54f5dec01f6bed61754f Mon Sep 17 00:00:00 2001
From: Dominik Chrastecky <dominik@chrastecky.cz>
Date: Thu, 6 Jun 2024 23:12:43 +0200
Subject: [PATCH] Feat: Compact GUI boxes

---
 .../gui-card/gui-card.component.html          | 51 ++++++++++++++-----
 src/app/services/ai-horde.service.ts          | 32 ++++++------
 src/styles.scss                               |  8 ++-
 src/styles/_additional_pieces.scss            |  4 ++
 src/styles/_mixins.scss                       |  6 +++
 src/styles/_xl.scss                           |  5 ++
 6 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/src/app/components/gui-card/gui-card.component.html b/src/app/components/gui-card/gui-card.component.html
index 14c18a0..3abbcee 100644
--- a/src/app/components/gui-card/gui-card.component.html
+++ b/src/app/components/gui-card/gui-card.component.html
@@ -1,21 +1,46 @@
+<!--<div-->
+<!--  class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:text-white"-->
+<!--  [class.bg-white]="!darkBackground()"-->
+<!--  [class.bg-gray-50]="darkBackground()"-->
+<!--  [class.dark:bg-gray-800]="!darkBackground()"-->
+<!--  [class.dark:bg-gray-900]="darkBackground()"-->
+<!--&gt;-->
+<!--  <h3 class="mb-4 text-2xl font-semibold">{{name()}}</h3>-->
+<!--  <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400 description">{{description()}}</p>-->
+<!--  <div class="flex items-baseline justify-center my-8">-->
+<!--    <img [ngSrc]="image()" [width]="330" [height]="185" [alt]="'guis.gui_image_alt' | transloco:{guiName: name()}" />-->
+<!--  </div>-->
+
+<!--  <a href="{{link()}}" target="_blank" class="text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white  dark:focus:ring-purple-900">-->
+<!--    @if (goToLinkName()) {-->
+<!--      {{goToLinkName()}}-->
+<!--    } @else {-->
+<!--      {{'guis.go_to' | transloco:{guiName: name()} }}-->
+<!--    }-->
+<!--  </a>-->
+<!--</div>-->
+
 <div
-  class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:text-white"
+  class="flex flex-col mx-auto text-center ext-gray-900 border border-gray-100 rounded-lg shadow dark:border-gray-600 dark:border-gray-600"
   [class.bg-white]="!darkBackground()"
   [class.bg-gray-50]="darkBackground()"
   [class.dark:bg-gray-800]="!darkBackground()"
   [class.dark:bg-gray-900]="darkBackground()"
 >
-  <h3 class="mb-4 text-2xl font-semibold">{{name()}}</h3>
-  <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400 description">{{description()}}</p>
-  <div class="flex items-baseline justify-center my-8">
-    <img [ngSrc]="image()" [width]="330" [height]="185" [alt]="'guis.gui_image_alt' | transloco:{guiName: name()}" />
+  <div class="mb-4">
+    <img [ngSrc]="image()" [width]="330" [height]="185" [alt]="'guis.gui_image_alt' | transloco:{guiName: name()}"/>
+  </div>
+  <div class="px-5 xl:px-8 mb-2">
+    <h3 class="mb-4 text-2xl font-semibold">{{ name() }}</h3>
+    <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400 description">{{ description() }}</p>
+  </div>
+  <div class="mb-8">
+    <a href="{{link()}}" target="_blank" class="text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-purple-900">
+      @if (goToLinkName()) {
+        {{ goToLinkName() }}
+      } @else {
+        {{ 'guis.go_to' | transloco:{guiName: name()} }}
+      }
+    </a>
   </div>
-
-  <a href="{{link()}}" target="_blank" class="text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white  dark:focus:ring-purple-900">
-    @if (goToLinkName()) {
-      {{goToLinkName()}}
-    } @else {
-      {{'guis.go_to' | transloco:{guiName: name()} }}
-    }
-  </a>
 </div>
diff --git a/src/app/services/ai-horde.service.ts b/src/app/services/ai-horde.service.ts
index d7408de..5903d81 100644
--- a/src/app/services/ai-horde.service.ts
+++ b/src/app/services/ai-horde.service.ts
@@ -17,25 +17,25 @@ export class AiHordeService {
   }
 
   public get imageStats(): Observable<ImageTotalStats> {
-    // return of({
-    //   month: { images: 105150339, ps: 1553239485353984 },
-    //   total: { images: 105150339, ps: 1553239485353984 },
-    //   day: { images: 105150339, ps: 1553239485353984 },
-    //   hour: { images: 105150339, ps: 1553239485353984 },
-    //   minute: { images: 105150339, ps: 1553239485353984 },
-    // });
-    return this.httpClient.get<ImageTotalStats>('https://aihorde.net/api/v2/stats/img/totals');
+    return of({
+      month: { images: 105150339, ps: 1553239485353984 },
+      total: { images: 105150339, ps: 1553239485353984 },
+      day: { images: 105150339, ps: 1553239485353984 },
+      hour: { images: 105150339, ps: 1553239485353984 },
+      minute: { images: 105150339, ps: 1553239485353984 },
+    });
+    // return this.httpClient.get<ImageTotalStats>('https://aihorde.net/api/v2/stats/img/totals');
   }
 
   public get textStats(): Observable<TextTotalStats> {
-    // return of({
-    //   total: { requests: 111931745, tokens: 20444501084 },
-    //   day: { requests: 111931745, tokens: 20444501084 },
-    //   hour: { requests: 111931745, tokens: 20444501084 },
-    //   minute: { requests: 111931745, tokens: 20444501084 },
-    //   month: { requests: 111931745, tokens: 20444501084 },
-    // });
-    return this.httpClient.get<TextTotalStats>('https://aihorde.net/api/v2/stats/text/totals');
+    return of({
+      total: { requests: 111931745, tokens: 20444501084 },
+      day: { requests: 111931745, tokens: 20444501084 },
+      hour: { requests: 111931745, tokens: 20444501084 },
+      minute: { requests: 111931745, tokens: 20444501084 },
+      month: { requests: 111931745, tokens: 20444501084 },
+    });
+    // return this.httpClient.get<TextTotalStats>('https://aihorde.net/api/v2/stats/text/totals');
   }
 
   public get performance(): Observable<HordePerformance> {
diff --git a/src/styles.scss b/src/styles.scss
index 52d9bc1..299ef39 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -44,6 +44,10 @@ h3, p, .underline-links {
   }
 }
 
+.m-auto {
+  margin: auto;
+}
+
 // The terms are dynamically loaded and due to encapsulation, we need to use the global styles
 .terms{
   ul {
@@ -56,7 +60,7 @@ h3, p, .underline-links {
       font-size: 1.5em;
       font-weight: bold;
       margin-bottom: 20px;
-      margin-top: 40px;  
+      margin-top: 40px;
       border-bottom: 3px solid #a0a0a0;
       display: inline-block;
   }
@@ -86,4 +90,4 @@ h3, p, .underline-links {
       margin-top: 30px;
       margin-bottom: 30px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/_additional_pieces.scss b/src/styles/_additional_pieces.scss
index 83d9218..a2c9177 100644
--- a/src/styles/_additional_pieces.scss
+++ b/src/styles/_additional_pieces.scss
@@ -36,6 +36,10 @@
   width: auto;
 }
 
+.px-6 {
+  @include px(6);
+}
+
 @import "md";
 @import "lg";
 @import "xl";
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index ee4d36f..a870d10 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -16,3 +16,9 @@
   margin-top: calc($num * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc($num * var(--tw-space-y-reverse));
 }
+
+@mixin px($amount) {
+  $value: 0.25rem * $amount;
+  padding-left: $value;
+  padding-right: $value;
+}
diff --git a/src/styles/_xl.scss b/src/styles/_xl.scss
index 4f572c1..af3adca 100644
--- a/src/styles/_xl.scss
+++ b/src/styles/_xl.scss
@@ -1,9 +1,14 @@
 @import "breakpoints";
+@import "mixins";
 
 @media screen and (min-width: $xl) {
   .xl {
     &\:grid-cols-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
     }
+
+    &\:px-8 {
+      @include px(8);
+    }
   }
 }