Responsive search xs (#200)

* fix: responsive search xs * fix: responsive search xs
onecx · Aug 4, 2024 · 64e29aa · 64e29aa
1 parent 300ab10
commit 64e29aa
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/src/_mixins.scss b/src/_mixins.scss
@@ -252,7 +252,7 @@
   }
 }
 
-@mixin media-md-h-3-5 {
+@mixin media-queries {
   :host ::ng-deep {
     @media screen and (min-width: 768px) {
       .md\:h-3-5rem {

diff --git a/src/app/theme/theme-search/theme-search.component.html b/src/app/theme/theme-search/theme-search.component.html
@@ -77,29 +77,29 @@
         <!-- GRID -->
         <ng-template let-themes let-row="rowIndex" pTemplate="gridItem">
           <div class="p-grid p-nogutter grid grid-nogutter">
-            <div *ngFor="let theme of themes" class="col-12 sm:col-6 md:col-4 lg:col-4 xl:col-3 p-3">
+            <div *ngFor="let theme of themes" class="col-6 md:col-4 xl:col-3 p-2 md:p-3">
               <div
-                class="card p-2 flex flex-column gap-2 justify-content-between text-center hover:bg-gray-200 cursor-pointer"
+                class="card px-2 p-1 sm:p-2 flex flex-column gap-1 sm:gap-2 justify-content-between text-center hover:bg-gray-200 cursor-pointer"
                 [routerLink]="['./', theme.name]"
               >
                 <app-image-container
                   [id]="'theme_search_data_row_' + row + '_logo'"
                   [small]="false"
-                  styleClass="h-3rem md:h-4rem max-h-3rem md:max-h-4rem max-w-10rem"
+                  styleClass="h-2rem sm:h-3rem md:h-4rem max-h-2rem sm:max-h-3rem md:max-h-4rem max-w-10rem"
                   [imageUrl]="getLogoUrl(theme)"
                 ></app-image-container>
-                <app-theme-color-box [properties]="theme.properties" styleClass="h-1rem m-auto" />
-                <div>
+                <app-theme-color-box [properties]="theme.properties" styleClass="h-05rem md:h-1rem m-auto" />
+                <div class="flex flex-column justify-content-between gap-1 text-center">
                   <div
-                    class="text-lg lg:text-xl font-bold text-responsive"
+                    class="font-bold sm:text-lg md:text-xl text-responsive"
                     [pTooltip]="theme.displayName.length < 20 ? '' : theme.displayName"
                     tooltipPosition="top"
                     tooltipEvent="hover"
                   >
                     {{ theme.displayName }}
                   </div>
                   <div
-                    class="mt-1 text-xs text-responsive"
+                    class="text-xs md:text-sm text-responsive"
                     [pTooltip]="theme.name.length < 30 ? '' : theme.displayName"
                     tooltipPosition="top"
                     tooltipEvent="hover"

diff --git a/src/app/theme/theme-search/theme-search.component.scss b/src/app/theme/theme-search/theme-search.component.scss
@@ -3,6 +3,7 @@
 @include correct-select-button;
 @include displaying-text-responsive;
 @include dataview-list-zebra-rows;
+@include media-queries;
 
 :host ::ng-deep {
   .h-05rem {