fix(gpth-settings): Fix the Font tab section and make mobile screen…

… improvements (#53) - Fix the broken style of the "GPThemes Customization" font tab section (#53) Changes summary: - Addressed a visual issue: - Restored the correct styling to the font tab section, ensuring a consistent and visually appealing user experience.
itsmartashub · Sep 25, 2024 · c4e6ba5 · c4e6ba5
1 parent 5d75026
commit c4e6ba5
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 24 deletions.
diff --git a/src/js/app/mainFonts.js b/src/js/app/mainFonts.js
@@ -57,7 +57,7 @@ const lineHeightData = {
 }
 
 const letterSpacingData = {
-	name: 'Letter Spacing',
+	name: 'Letter Space',
 	className: 'fonts__letterSpacing',
 	inputId: 'letterSpacing',
 	inputType: 'number',
@@ -72,22 +72,25 @@ const letterSpacingData = {
 let renderFontsTab = `
   <section id="fontChangerPopover" class="fonts">
     <div class="fonts__props">
-      <div class="fonts__family fonts__group card card--big h-full">
-        <label for="fontFamily" class="grid gap-1 h-full w-full">
-          <div>
-            <p class="card__unit card__icon">T</p>
-            <p class="card__name uppercase font-semibold">FONT FAMILY</p>
-          </div>
-          <select id="fontFamily" class="border-none outline-none focus:none font-bold">
-            ${FONT_NAMES.map(
-				(name) => `<option value="${name === 'Default' ? DEFAULTS.fontFamily : name}">${name}</option>`
-			).join('')}
-          </select>
-        </label>
-      </div>
-      ${renderFontBigCard(fontSizeData)}
-      ${renderFontSmallCard(lineHeightData)}
-      ${renderFontSmallCard(letterSpacingData)}
+	<div class="fonts__bigcards-wrapper">
+		<div class="fonts__family fonts__group card card--big h-full">
+			<label for="fontFamily" class="grid gap-1 h-full w-full">
+			<div>
+				<p class="card__unit card__icon">T</p>
+				<p class="card__name uppercase font-semibold">FONT FAMILY</p>
+			</div>
+			<select id="fontFamily" class="border-none outline-none focus:none font-bold">
+				${FONT_NAMES.map((name) => `<option value="${name === 'Default' ? DEFAULTS.fontFamily : name}">${name}</option>`).join(
+					''
+				)}
+			</select>
+			</label>
+		</div>
+		${renderFontBigCard(fontSizeData)}</div>
+	<div class="fonts__smallcards-wrapper">
+		${renderFontSmallCard(lineHeightData)}
+		${renderFontSmallCard(letterSpacingData)}
+	</div>
     </div>
     <footer class="grid mt-10">
       ${renderButton({ id: 'resetFont', content: 'Reset Fonts', disabled: false, className: 'btn-primary' })}

diff --git a/src/sass/abstract/_bp.scss b/src/sass/abstract/_bp.scss
@@ -1,4 +1,6 @@
 // Tailwind CSS breakpoints converted to em units
+$xxs: 20em; // px
+$xs: 31.25em; // px
 $sm: 40em; // 640px
 $md: 48em; // 768px
 $lg: 64em; // 1024px
@@ -7,6 +9,18 @@ $xxl: 96em; // 1536px
 
 // Mixins using Tailwind's breakpoints
 @mixin dev($bp) {
+    @if $bp =='xxs' {
+        @media (max-width: #{$xxs}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xs' {
+        @media (max-width: #{$xs}) {
+            @content;
+        }
+    }
+
     @if $bp =='sm' {
         @media (max-width: #{$sm}) {
             @content;

diff --git a/src/sass/gpthemes/_gpth-settings.scss b/src/sass/gpthemes/_gpth-settings.scss
@@ -10,8 +10,8 @@
 	border-radius: var(--br-dialog);
 	top: var(--top);
 	right: var(--right);
-	width: clamp(24rem, 25vw, 30rem);
-	max-height: 70vh;
+	width: clamp(25rem, 25vw, 30rem);
+	max-height: 75vh;
 	transform: translateX(calc(100% + 1.5rem)) !important;
 	z-index: calc(var(--z-modal) + 10);
 	background-color: var(--c-bg-sidebar);
@@ -36,9 +36,19 @@
 		transform: translateX(0%) !important;
 	}
 
-	@include dev('sm') {
+
+
+	@include dev('xxs') {
+		padding: 4vw;
+		border: 2px salmon solid;
+	}
+
+	@include dev('xs') {
 		width: calc(100% - 2.5rem);
 		max-height: 70vh;
-		padding: 2rem;
+		// padding: 2rem;
+		padding: 5.5vw;
+		border: 2px salmon greenyellow;
+
 	}
 }
diff --git a/src/sass/gpthemes/theme-manager/components/_cards.scss b/src/sass/gpthemes/theme-manager/components/_cards.scss
@@ -4,10 +4,16 @@
     font-size: 1.6rem;
     position: relative;
 
+
     @include dev('sm') {
         font-size: 1.4rem;
     }
 
+    /* this fix some crazy long width in v4.0.4 */
+    input {
+        max-width: max-content;
+    }
+
     input,
     select,
     label {

diff --git a/src/sass/gpthemes/theme-manager/components/_fonts.scss b/src/sass/gpthemes/theme-manager/components/_fonts.scss
@@ -1,10 +1,17 @@
 .fonts {
     &__props {
+        display: grid;
+        gap: 1.5rem;
+    }
+
+    &__bigcards-wrapper,
+    &__smallcards-wrapper {
         --gap: 0.65rem;
 
+        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
         align-items: center;
-        gap: calc(var(--gap) * 2) var(--gap);
+        // gap: calc(var(--gap) * 2) var(--gap);
+        gap: var(--gap);
     }
 }
diff --git a/src/sass/gpthemes/theme-manager/components/_switch.scss b/src/sass/gpthemes/theme-manager/components/_switch.scss
@@ -12,13 +12,22 @@
     border: 1px solid transparent;
     transition: .25s ease-in;
 
+    @include dev('xxs') {
+        display: grid;
+        gap: 1rem 0.5rem;
+        grid-template-areas:
+            'icon . checkbox'
+            'text text text';
+    }
+
     &:hover {
         // background-image: var(--c-bg-gradient);
         background-color: hsla(var(--accent-hsl) / 0.1);
         border-color: hsla(var(--accent-hsl) / 0.1) !important;
         transform: scale(0.98);
     }
 
+
     &__icon {
         --icon-size: 2.8em;
         --svg-muliplicator: 0.6;
@@ -34,6 +43,10 @@
             width: calc(var(--icon-size) * var(--svg-muliplicator));
             height: calc(var(--icon-size) * var(--svg-muliplicator));
         }
+
+        @include dev('xxs') {
+            grid-area: icon;
+        }
     }
 
     &__text {
@@ -55,6 +68,10 @@
             line-height: 1.25;
             font-weight: 400;
         }
+
+        @include dev('xxs') {
+            grid-area: text;
+        }
     }
 
     &__checkbox {
@@ -108,5 +125,9 @@
                 background-color: var(--c-on-accent);
             }
         }
+
+        @include dev('xxs') {
+            grid-area: checkbox;
+        }
     }
 }
diff --git a/src/sass/gpthemes/theme-manager/layouts/_gpth-assets.scss b/src/sass/gpthemes/theme-manager/layouts/_gpth-assets.scss
@@ -1,7 +1,7 @@
 .gpth-assets {
     &__custom-width {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
         gap: 1rem 0.5rem;
     }
 }