💄 优化弹出层层级及最小宽度

Licoy · Dec 17, 2022 · ab38fa5 · ab38fa5
1 parent 49b7021
commit ab38fa5
Show file tree

Hide file tree

Showing 12 changed files with 193 additions and 152 deletions.
diff --git a/assets/dist/js/libs.min.js b/assets/dist/js/libs.min.js
diff --git a/assets/dist/js/puock.min.js b/assets/dist/js/puock.min.js
diff --git a/assets/dist/style/common.min.css b/assets/dist/style/common.min.css
diff --git a/assets/dist/style/libs.min.css b/assets/dist/style/libs.min.css
diff --git a/assets/dist/style/style.min.css b/assets/dist/style/style.min.css
diff --git a/assets/js/puock.js b/assets/js/puock.js
@@ -926,12 +926,14 @@ class Puock {
             const title = el.attr("title") || el.attr("data-title") || '提示';
             const url = el.attr("data-url");
             this.getRemoteHtmlNode(url, (res) => {
+                const id = "pk-modal-" + (new Date()).getTime();
                 layer.open({
                     type: 1,
                     title: noTitle ? false : title,
-                    content: `<div style='${noPadding ? '' : 'padding: 20px'}' class='fs14'>${res}</div>`,
+                    content: `<div id="${id}" style='${noPadding ? '' : 'padding: 20px'}' class='fs14'>${res}</div>`,
                     shadeClose: true,
                 })
+                this.lazyLoadInit($("#" + id));
             })
         })
     }

diff --git a/assets/style/common.less b/assets/style/common.less
@@ -125,6 +125,36 @@ a {
   margin-left: 0.25rem !important;
 }
 
+.ml-2 {
+  margin-left: 0.5rem !important;
+}
+
+.ml-3 {
+  margin-left: 1rem !important;
+}
+
+.mr-1 {
+  margin-right: 0.25rem !important;
+}
+
+.mr-2 {
+  margin-right: 0.5rem !important;
+}
+
+.mr-3 {
+  margin-right: 1rem !important;
+}
+
+.min-width-modal {
+  min-width: 420px;
+}
+
+@media (max-width: 576px) {
+  .min-width-modal {
+    min-width: 300px;
+  }
+}
+
 .--dynamic-distance(@pre,@attr,@step,@start,@end) when (@start<=@end) {
   .--dynamic-distance(@pre, @attr, @step, @start + @step, @end);
   .@{pre}@{start} {

diff --git a/assets/style/style.less b/assets/style/style.less
@@ -401,7 +401,7 @@ body.pre-mac pre {
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 1050;
+  z-index: 9999;
   overflow-y: scroll;
   height: 100vh;
   background-color: var(--pk-bg-box);

diff --git a/comments.php b/comments.php
@@ -58,7 +58,7 @@ class="form-control form-control-sm t-sm"
                             <?php if (pk_is_checked('vd_comment') && pk_get_option('vd_type', 'img') === 'img'): ?>
                                 <div class="col-12 col-sm-3">
                                     <div class="row flex-row justify-content-end">
-                                        <div class="col-8 col-sm-7 text-right pl15">
+                                        <div class="col-8 col-sm-7 text-end pl15">
                                             <input type="text" value="" placeholder="验证码" maxlength="4"
                                                    class="form-control form-control-sm t-sm" name="comment-vd"
                                                    autocomplete="off"

diff --git a/header.php b/header.php
@@ -94,7 +94,7 @@ class="fa fa-close"></i></button>
     <div id="mobile-menu" class="d-none">
         <div class="menus">
             <div class="p-block">
-                <div class="text-right"><i class="fa fa-close t-xl puock-link mobile-menu-close ta3"></i></div>
+                <div class="text-end"><i class="fa fa-close t-xl puock-link mobile-menu-close ta3"></i></div>
                 <nav>
                     <?php echo pk_get_main_menu(true) ?>
                 </nav>

diff --git a/inc/ajax/page-front-login.php b/inc/ajax/page-front-login.php
diff --git a/templates/module-cms.php b/templates/module-cms.php
@@ -53,7 +53,7 @@
                                                    title="<?php the_title() ?>" <?php pk_link_target() ?>
                                                    href="<?php the_permalink() ?>"><?php the_title() ?></a>
                                             </div>
-                                            <div class="col-lg-3 text-right d-none d-lg-block">
+                                            <div class="col-lg-3 text-end d-none d-lg-block">
                                                 <span class="c-sub t-sm"><?php pk_get_post_date() ?></span>
                                             </div>
                                         </div>