Merge pull request #167 from JonathanBytes/master

Fix the grid styles of the palettes
Schroedinger-Hat · May 29, 2024 · 52acd3c · 52acd3c
2 parents b928cf5 + f919d9d
commit 52acd3c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 149 deletions.
diff --git a/src/ign-frontend/src/styles/_media_queries.scss b/src/ign-frontend/src/styles/_media_queries.scss
@@ -15,25 +15,4 @@
     display: block;
   }
 
-  .palette-grid {
-    .palette-post {
-      display: inline-flex;
-      width: 30%;
-      margin: 15px 10px;
-      flex: auto;
-    }
-    .palette-title {
-      font-size: 25px;
-      text-align: center;
-      width: calc(100% - 16px);
-      padding-top: 5em;
-      height: 6em;
-      color: $nord6;
-      background: #757575c9;
-      font-weight: bold;
-      display: block;
-      border: 8px solid transparent;
-    }
-
-  }
-}
+}
diff --git a/src/ign-frontend/src/styles/global.scss b/src/ign-frontend/src/styles/global.scss
@@ -251,48 +251,52 @@ html {
 }
 
 .palette-grid {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-around;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-gap: 1em;
+  box-sizing: border-box;
+  padding: 0 1em;
+  overflow-y: auto;
+  height: 500px;
 
   .palette-post {
     display: flex;
-    text-align: center;
-    width: 100%;
-    margin: 15px 10px;
-    flex: auto;
+    justify-content: center;
+    align-items: center;
+    position: relative;
     border: 8px solid transparent;
-
+    cursor: pointer;
     &:hover, &:focus, &:active, &.current-palette {
       border-color: $nord12;
-      cursor: pointer;
+      .palette-img {
+        -webkit-filter: brightness(0.6) blur(0);
+        filter: brightness(0.6) blur(0);
+      }
     }
 
     .palette-title {
       font-size: 25px;
       text-align: center;
-      width: calc(100% - 16px);
-      padding-top: 5em;
-      height: 6em;
-      color: $nord6;
-      background: #757575c9;
       font-weight: bold;
-      display: block;
+      color: $nord4;
+      position: absolute;
     }
 
-    img {
-      max-width: 100%;
-      max-height: 215px;
-      border: 6px solid $nord4;
-      border-radius: 5px;
+    .palette-img {
+      width: 100%;
+      aspect-ratio: 4/3;
+      object-fit: cover;
+      background-size: cover;
+      -webkit-filter: brightness(0.3) blur(2px);
+      filter: brightness(0.3) blur(2px);
+      overflow: hidden;
     }
+
   }
 }
 
-
 /* dark theme */
 @import 'dark';
 
 /* media queries */
-@import '_media_queries';
+@import '_media_queries';
diff --git a/src/ign-frontend/src/views/GoWild.vue b/src/ign-frontend/src/views/GoWild.vue
@@ -238,60 +238,6 @@ export default {
   }
 }
 
-.palette-grid {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-around;
-  flex-direction: row;
-
-  .palette-post {
-    display: flex;
-    text-align: center;
-    width: 100%;
-    margin: 15px 10px;
-    flex: auto;
-    border: 8px solid transparent;
-    .palette-img {
-      -webkit-filter: brightness(0.6) blur(0);
-      filter: brightness(0.6) blur(0);
-    }
-
-    &:hover, &:focus, &:active, &.current-palette {
-      border-color: $nord12;
-      cursor: pointer;
-    }
-
-    .palette-title {
-      font-size: 25px;
-      text-align: center;
-      width: calc(100% - 16px);
-      padding-top: 5em;
-      height: 6em;
-      color: $nord6;
-      background: #757575c9;
-      font-weight: bold;
-      display: block;
-    }
-
-    .palette-img {
-      width: 100%;
-      aspect-ratio: 4/3;
-      object-fit: cover;
-      background-size: cover;
-      -webkit-filter: brightness(0.3) blur(2px);
-      filter: brightness(0.3) blur(2px);
-      overflow: hidden;
-    }
-
-    img {
-      max-width: 100%;
-      max-height: 215px;
-      border: 6px solid $nord4;
-      border-radius: 5px;
-    }
-  }
-}
-
 @media (min-width: 56.25em) {
   .slider-section {
     .slider-item {
@@ -305,27 +251,6 @@ export default {
       }
     }
   }
-  .palette-grid {
-    .palette-post {
-      display: inline-flex;
-      width: 30%;
-      margin: 15px 10px;
-      flex: auto;
-    }
-    .palette-title {
-      font-size: 25px;
-      text-align: center;
-      width: calc(100% - 16px);
-      padding-top: 5em;
-      height: 6em;
-      color: $nord6;
-      background: #757575c9;
-      font-weight: bold;
-      display: block;
-      border: 8px solid transparent;
-    }
-
-  }
 }
 
 .#{$dark-mode-class} {

diff --git a/src/ign-frontend/src/views/ImagIA.vue b/src/ign-frontend/src/views/ImagIA.vue
@@ -4,9 +4,6 @@
         h1="Image Go AI 🤖"
         h2="Use the power of the PaletteNet to recolor your images"
       />
-    <center>
-      <a class="github-button" href="https://github.com/Schrodinger-Hat/ImageGoNord" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="Star Schrodinger-Hat/ImageGoNord on GitHub">Star</a>
-    </center>
     <div class="canvas-container">
       <svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
         <path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5
@@ -21,10 +18,9 @@
       </center>
       <div class="palette-grid container">
         <div @click="selectedPalette = palette.name" :class="{'palette-post': true, 'current-palette': (selectedPalette === palette.name)}" v-for="palette in availablePalettes" :key="palette.name">
-          <div :style="`width: 100%; min-height: 80px; background-size: cover; background: linear-gradient(to right, ${palette.colors[0]} 16.65%, ${palette.colors[1]} 16.65% 33.3%, ${palette.colors[2]} 33.3% 49.95%, ${palette.colors[3]} 49.95% 66.55%, ${palette.colors[4]} 66.55% 83.2%, ${palette.colors[5]} 83.2%
-          );`">
-            <span class="palette-title">{{ palette.name }}</span>
-          </div>
+          <div class="palette-img" :style="`background: linear-gradient(to right, ${palette.colors[0]} 16.65%, ${palette.colors[1]} 16.65% 33.3%, ${palette.colors[2]} 33.3% 49.95%, ${palette.colors[3]} 49.95% 66.55%, ${palette.colors[4]} 66.55% 83.2%, ${palette.colors[5]} 83.2%
+          );`"/>
+          <span class="palette-title">{{ palette.name }}</span>
         </div>
       </div>
       <Demo :isAi="true" :selectedPalette="`${(selectedPalette !== '') ? selectedPalette : []}`" />
@@ -64,28 +60,6 @@ export default {
   }
 }
 
-.palette-grid {
-  max-height: 380px;
-  overflow-y: auto;
-
-  .palette-post {
-    .palette-title {
-      padding-top: 0;
-      height: 65px;
-      align-content: space-around;
-    }
-  }
-}
-
-@media (min-width: 56.25em) {
-  .palette-grid {
-    .palette-post {
-      width: 21%;
-      max-height: 80px;
-    }
-  }
-}
-
 .demo-section {
   min-height: 500px;
   background: $nord5;