mobile ansicht angepasst.

Lyuris1995 · Nov 11, 2023 · da13cfc · da13cfc
1 parent bb147db
commit da13cfc
Showing 1 changed file with 13 additions and 18 deletions.
diff --git a/gamescouter_test/src/style.less b/gamescouter_test/src/style.less
@@ -190,7 +190,8 @@ body, html {
 
 // Filter komponente
         .filter-container {
-            padding: 10px;
+            padding-top: 50px;
+            padding-left: 10px;
             height: 20px;
             width: 20px;
             display: flex;
@@ -210,18 +211,20 @@ body, html {
                 }
 
                 #filter-list {
-                    display: flex;
+                    left: 0;
                     list-style-type: none;
                     border: 2px solid @BrandColor;
-                    border-radius: 13px;
+                    border-radius: 10px;
                     opacity: 0;
-                    width: 250px;
+                    width: 320px;
                     pointer-events: none;
                     transition: 0.3s ease-in-out;
-
-                    @media screen and (min-width: 450px) {
-                        width: 450px;
-                    }
+                    display: grid;
+                    grid-template-columns: 1fr repeat(2, 2fr);
+                    grid-template-rows: repeat(5, 1fr);
+                    grid-column-gap: 5px;
+                    grid-row-gap: 5px;
+                    overflow: hidden;
 
                     &.active {
                         opacity: 1;
@@ -232,11 +235,6 @@ body, html {
                     }
 
                     li {
-                        flex-direction: row;
-                        margin-bottom: 10px;
-                        margin-left: 5px;
-                        margin: 0px;
-
                         a {
                             color: @TextColor;
                             text-decoration: none;
@@ -255,23 +253,19 @@ body, html {
                         }
 
                         .filter-option {
+                            display: flex;
                             margin: 0;
                             padding: 0;
-                            display: flex;
                             list-style-type: none;
                             opacity: 0;
                             width: 80px;
                             pointer-events: none;
                             transition: 0.3s ease-in-out;
                             white-space: break-spaces;
-                            @media screen and (min-width: 450px) {
-                                width: 150px;
-                            }
 
                             &.active {
                                 opacity: 1;
                                 pointer-events: all;
-                                /* margin-bottom: 10px; */
                             }
 
                             a {
@@ -289,6 +283,7 @@ body, html {
                                 border-radius: 5px;
                                 box-shadow: 2px 2px 2px @BrandColor;
                                 margin: 5px;
+                                width: 80px;
                             }
                         }
                     }