Make some components smaller on desktop screens

chataize · Jun 15, 2024 · 2a97b31 · 2a97b31
1 parent c0a7a16
commit 2a97b31
Show file tree

Hide file tree

Showing 5 changed files with 221 additions and 42 deletions.
diff --git a/preview/wwwroot/css/tailwind.css b/preview/wwwroot/css/tailwind.css
@@ -578,6 +578,10 @@ video {
   display: flex;
 }
 
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -590,18 +594,6 @@ video {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-
-.space-y-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-
 @media (prefers-color-scheme: dark) {
   .dark\:bg-neutral-900 {
     --tw-bg-opacity: 1;

diff --git a/src/Components/DPCheckBox.razor b/src/Components/DPCheckBox.razor
@@ -3,7 +3,10 @@
     <label for="@_id" class="@ActualLabelStyle">
         <input id="@_id" type="checkbox" disabled="@IsDisabled" hidden @bind="ActualValue" />
         <div class="@ActualContainerStyle">
-            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 30 30">
+             <svg class="sm:hidden" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 30 30">
+                <path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"></path>
+            </svg>
+            <svg class="-sm:hidden" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 30 30">
                 <path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"></path>
             </svg>
         </div>
@@ -14,7 +17,10 @@ else
     <label for="@_id" class="@ActualLabelStyle">
         <input id="@_id" type="checkbox" disabled="@IsDisabled" hidden @bind="ActualValue" />
         <div class="@ActualContainerStyle">
-            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 30 30">
+             <svg class="sm:hidden" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 30 30">
+                <path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"></path>
+            </svg>
+            <svg class="-sm:hidden" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 30 30">
                 <path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"></path>
             </svg>
         </div>

diff --git a/src/Components/DPToggleSwitch.razor b/src/Components/DPToggleSwitch.razor
@@ -3,8 +3,8 @@
     <label for="@_id" class="@ActualLabelStyle">
         <input id="@_id" type="checkbox" disabled="@IsDisabled" hidden @bind="ActualValue" />
         <div class="@ActualContainerStyle">
-            <div class="@ActualDotStyle" style="transform: translateX(@(Value ? "115%" : "15%"));">
-            </div>
+            <div class="@ActualDotStyle sm:hidden" style="transform: translateX(@(Value ? "110%" : "15%"));" />
+            <div class="@ActualDotStyle -sm:hidden" style="transform: translateX(@(Value ? "140%" : "25%"));" />
         </div>
     </label>
 }
@@ -14,8 +14,8 @@ else
         <input id="@_id" type="checkbox" disabled="@IsDisabled" hidden @bind="ActualValue" />
         <span>@Label</span>
         <div class="@ActualContainerStyle">
-            <div class="@ActualDotStyle" style="transform: translateX(@(Value ? "115%" : "15%"));">
-            </div>
+            <div class="@ActualDotStyle sm:hidden" style="transform: translateX(@(Value ? "110%" : "15%"));" />
+            <div class="@ActualDotStyle -sm:hidden" style="transform: translateX(@(Value ? "140%" : "25%"));" />
         </div>
     </label>
 }

diff --git a/src/wwwroot/css/dopamine.css b/src/wwwroot/css/dopamine.css
@@ -92,7 +92,7 @@
     }
 
     .switch-container-base {
-        @apply flex items-center h-8 transition-all duration-300 ease-in-out border rounded-full shadow-sm w-14;
+        @apply flex items-center h-8 transition-all duration-300 ease-in-out border rounded-full shadow-sm sm:h-6 w-14 sm:w-11;
     }
 
     .switch-container-off {
@@ -108,7 +108,7 @@
     }
 
     .switch-dot-base {
-        @apply w-6 h-6 transition-all duration-300 ease-in-out border rounded-full shadow-sm;
+        @apply w-6 h-6 transition-all duration-300 ease-in-out border rounded-full shadow-sm sm:w-4 sm:h-4;
     }
 
     .switch-dot-off {
@@ -136,7 +136,7 @@
     }
 
     .checkbox-container-base {
-        @apply flex items-center justify-center w-8 h-8 transition-all duration-300 ease-in-out border rounded-lg shadow-sm stroke-2;
+        @apply flex items-center justify-center w-8 h-8 transition-all duration-300 ease-in-out border rounded-md shadow-sm stroke-2 sm:w-6 sm:h-6;
     }
 
     .checkbox-container-off {
@@ -168,7 +168,7 @@
     }
 
     .radio-container-base {
-        @apply flex items-center justify-center w-8 h-8 transition-all duration-300 ease-in-out border rounded-full shadow-sm stroke-2;
+        @apply flex items-center justify-center w-8 h-8 transition-all duration-300 ease-in-out border rounded-full shadow-sm stroke-2 sm:w-6 sm:h-6;
     }
 
     .radio-container-off {
@@ -192,18 +192,18 @@
     }
 
     .radio-dot-off {
-        @apply w-4 h-4 radio-dot-base border-neutral-200 dark:border-neutral-700 group-hover:bg-neutral-500 group-active:bg-neutral-600 group-active:border-neutral-600 group-hover:border-neutral-500 dark:group-hover:bg-neutral-400 dark:group-hover:border-neutral-400 group-hover:shadow-sm dark:group-active:bg-neutral-300 dark:group-active:border-neutral-300;
+        @apply w-4 h-4 sm:w-3 sm:h-3 radio-dot-base border-neutral-200 dark:border-neutral-700 group-hover:bg-neutral-500 group-active:bg-neutral-600 group-active:border-neutral-600 group-hover:border-neutral-500 dark:group-hover:bg-neutral-400 dark:group-hover:border-neutral-400 group-hover:shadow-sm dark:group-active:bg-neutral-300 dark:group-active:border-neutral-300;
     }
 
     .radio-dot-on {
-        @apply w-5 h-5 bg-white border-blue-700 shadow-sm radio-dot-base group-hover:border-blue-800 dark:border-blue-700 dark:group-hover:border-blue-600;
+        @apply w-5 h-5 bg-white border-blue-700 shadow-sm sm:w-3 sm:h-3 radio-dot-base group-hover:border-blue-800 dark:border-blue-700 dark:group-hover:border-blue-600;
     }
 
     .radio-dot-disabled-off {
-        @apply w-5 h-5 radio-dot-base bg-neutral-100 border-neutral-100 dark:bg-neutral-800 dark:border-neutral-800;
+        @apply w-5 h-5 sm:w-3 sm:h-3 radio-dot-base bg-neutral-100 border-neutral-100 dark:bg-neutral-800 dark:border-neutral-800;
     }
 
     .radio-dot-disabled-on {
-        @apply w-5 h-5 radio-dot-base bg-neutral-300 switch-dot-base dark:bg-neutral-600 border-neutral-300 dark:border-neutral-600;
+        @apply w-5 h-5 sm:w-3 sm:h-3 radio-dot-base bg-neutral-300 switch-dot-base dark:bg-neutral-600 border-neutral-300 dark:border-neutral-600;
     }
 }