Merge pull request #2694 from themeum/fix/v4-responsive

💅 Responsive desing fixes

Author: b-l-i-n-d

assets/core/scss/mixins/_inputs.scss

@@ -55,6 +55,13 @@
   @if $size == lg {
     padding: $tutor-spacing-5;
   }
+
+  // Prevent iOS Safari from auto-zooming focused fields and exposing
+  // horizontal overflow on mobile layouts.
+  @media (hover: none) and (pointer: coarse) {
+    font-size: $tutor-font-size-medium;
+    line-height: $tutor-line-height-medium;
+  }
 }
 
 @mixin tutor-textarea($min-height: 92px) {

assets/core/scss/tokens/_zIndex.scss

@@ -1,4 +1,4 @@
-// Design Tokens - z-index 
+// Design Tokens - z-index
 // CSS variables for z-index
 
 // =============================================================================
@@ -9,7 +9,7 @@ $tutor-z-negative: -1;
 $tutor-z-positive: 1;
 $tutor-z-dropdown: 2;
 $tutor-z-level: 0;
-$tutor-z-sidebar: 9;
+$tutor-z-sidebar: 20;
 $tutor-z-header: 10;
 $tutor-z-footer: 10;
 $tutor-z-modal: 25;
@@ -29,4 +29,4 @@ $tutor-z: (
   footer: $tutor-z-footer,
   modal: $tutor-z-modal,
   highest: $tutor-z-highest,
-);
+);

assets/icons/cross-colorize.svg

@@ -39,6 +39,7 @@ export const sidebarComponent = ({
     pagesHeight: 0,
     resizing: false,
     collapsed: isCollapsed,
+    sidebarOpen: false,
     courseId: courseId,
     resetModalId: resetModalId,
     resetProgressMutation: null as MutationState<ResetProgressResponse, ResetProgressPayload> | null,
@@ -71,6 +72,14 @@ export const sidebarComponent = ({
       );
     },
 
+    toggleSidebar() {
+      this.sidebarOpen = !this.sidebarOpen;
+    },
+
+    closeSidebar() {
+      this.sidebarOpen = false;
+    },
+
     startResizing(e: MouseEvent) {
       this.resizing = true;
       const startY = e.clientY;

assets/icons/info-colorize.svg

@@ -115,6 +115,7 @@ export const icons = [
   'cross2',
   'crossCircle',
   'crossCircleLine',
+  'crossColorize',
   'crown',
   'crownOutlined',
   'crownRounded',
@@ -212,6 +213,7 @@ export const icons = [
   'inactive',
   'info',
   'info2',
+  'infoColorize',
   'infoFill',
   'infoOctagon',
   'instructor',

assets/icons/kids/cross-colorize.svg

@@ -4,6 +4,16 @@
 @use '@Core/scss/tokens' as *;
 @use '@Core/scss/mixins' as *;
 
+.tutor-my-quiz-attempts-wrapper .tutor-quiz-attempts {
+  border-radius: $tutor-radius-2xl;
+
+  @include tutor-breakpoint-down(sm) {
+    border: 1px solid $tutor-border-idle;
+    overflow: hidden;
+    margin-top: $tutor-spacing-4;
+  }
+}
+
 .tutor-quiz-attempts-mobile-heading {
   @include tutor-breakpoint-up(sm) {
     display: none;
@@ -277,7 +287,7 @@
         }
 
         &:hover {
-          .tutor-quiz-item-info-title{
+          .tutor-quiz-item-info-title {
             color: $tutor-brand-700;
           }
         }