Исправления

– Исправил ширину полей (проблему создал сам ранее). – Добавил окну overscroll-behavior. – Исправил .awooc-popup-qty. – Изменил стили сброса отступов в wpcf7.
artikus11 · Nov 29, 2023 · 8c7ffd9 · 8c7ffd9
1 parent db27910
commit 8c7ffd9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/classes/class-enqueue.php b/classes/class-enqueue.php
@@ -167,18 +167,19 @@ public function localize(): void {
 						'invalid_timeout'  => 5000,
 						'cf7_form_id'      => $this->main->get_selected_form_id(),
 						'css'              => [
-							'width'        => 'calc(100vw - 1rem)',
-							'maxWidth'     => '600px',
-							'maxHeight'    => 'calc(100vh - 1rem)',
-							'top'          => '50%',
-							'left'         => '50%',
-							'border'       => '4px',
-							'borderRadius' => '4px',
-							'cursor'       => 'default',
-							'overflowY'    => 'auto',
-							'boxShadow'    => '0px 0px 3px 0px rgba(0, 0, 0, 0.2)',
-							'zIndex'       => '1000000',
-							'transform'    => 'translate(-50%, -50%)',
+							'width'               => 'calc(100vw - 1rem)',
+							'maxWidth'            => '600px',
+							'maxHeight'           => 'calc(100vh - 1rem)',
+							'top'                 => '50%',
+							'left'                => '50%',
+							'border'              => '4px',
+							'borderRadius'        => '4px',
+							'cursor'              => 'default',
+							'overflowY'           => 'auto',
+							'boxShadow'           => '0px 0px 3px 0px rgba(0, 0, 0, 0.2)',
+							'zIndex'              => '1000000',
+							'transform'           => 'translate(-50%, -50%)',
+							'overscroll-behavior' => 'contain',
 						],
 						'overlay'          => [
 							'zIndex'          => '100000',

diff --git a/src/scss/public/_popup.scss b/src/scss/public/_popup.scss
@@ -102,12 +102,12 @@
 
 .awooc-popup-image {
   text-align: center;
+  float: left;
 
   & img {
     width: 100%;
     max-width: 100px;
     height: auto;
-    float: left;
     margin-right: 1rem;
 
     @include minWidth568px() {
@@ -135,6 +135,10 @@
   align-items: center;
   gap: 0.5rem;
 
+  @include minWidth568px() {
+    width: 100%; // без этого стиля этот элемент, идущий сразу после изображения, ужимается до 0px
+  }
+
   .quantity {
     display: inline-flex;
     vertical-align: top;
@@ -163,13 +167,22 @@
 }
 
 .awooc-custom-order-wrap {
-  .wpcf7-form > p:nth-child(2) {
-      margin-top: 0
+  .wpcf7-form {
+    margin-bottom: 0;
+    & > p {
+      &:nth-child(2) {
+        margin-top: 0
+      }
+      &:nth-last-child(2) {
+        margin-bottom: 0
+      }
+    }
   }
 
   .wpcf7-form-control-wrap {
     display: inline-block;
     margin-bottom: 0.875rem;
+    width: 100%;
   }
 
   .wpcf7-form-control {