add email modal

css/list-style-mb.css

@@ -798,11 +798,48 @@ a {
   height: 215px;
 }
 
-#pills-intro .work__row .col-6:nth-of-type(2n+1) {
-  margin-top: -1rem;
+.emodal-title {
+  color: #EE7800;
+  margin: 0 auto;
+  font-size: 18px;
+}
+
+.emodal .form-control:focus {
+  border-color: #ffb76f;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.emodal .btn-plus {
+  color: #aaa;
+  border-color: #aaa;
+}
+
+.emodal .btn-send {
+  background-color: #ee7800;
+  color: white;
+  width: 30%;
+  border: none;
+  padding: 0.875rem 1rem;
+  border-radius: 2px;
+}
+
+.emodal .btn-dismiss {
+  width: 30%;
+  border: none;
+  padding: 0.875rem 1rem;
+  background-color: #d1d2d3;
+  border-radius: 2px;
+  color: #fff;
+}
+
+#putEmail_hidden {
+  border: 1px solid;
+  border-radius: 28px;
+  color: #EE7800 !important;
 }
 
-#pills-intro .work__row .col-6:nth-of-type(2) {
-  margin-top: .5rem;
+#putEmail_hidden .fm-email-btn {
+  padding: 2px 5px 2px 5px;
 }
 /*# sourceMappingURL=list-style-mb.css.map */

css/list-style-mb.scss

@@ -674,13 +674,44 @@ a {
     height: 215px;
 }
 
-#pills-intro {
-    .work__row  {
-        .col-6:nth-of-type(2n+1) {
-            margin-top: -1rem;
-        }
-        .col-6:nth-of-type(2) {
-            margin-top: .5rem;
-        }
+
+.emodal {
+    &-title {
+        color: #EE7800;
+        margin: 0 auto;
+        font-size: 18px;;
+    }
+    .form-control:focus {
+        border-color: #ffb76f;
+        box-shadow: none;
+    }
+    .btn-plus {
+        color: #aaa;
+        border-color: #aaa;
+    }
+    .btn-send {
+        background-color: #ee7800;
+        color: white;
+        width: 30%;
+        border: none;
+        padding: 0.875rem 1rem;
+        border-radius: 2px;
+    }
+    .btn-dismiss {
+        width: 30%;
+        border: none;
+        padding: 0.875rem 1rem;
+        background-color: #d1d2d3;
+        border-radius: 2px;
+        color: #fff;
+    }
+}
+
+#putEmail_hidden {
+    border: 1px solid;
+    border-radius: 28px;
+    color: #EE7800 !important;
+    .fm-email-btn {
+        padding: 2px 5px 2px 5px;
     }
 }

css/list-style.css

@@ -752,6 +752,7 @@ a {
 
 .content .infoCard .scMedia span {
   width: 16%;
+  cursor: pointer;
 }
 
 .content .infoCard .scMedia span img {
@@ -1141,22 +1142,6 @@ a {
   display: none;
 }
 
-#pills-intro .work__row .col-md-4:nth-of-type(3n-1) {
-  margin-top: .5rem;
-}
-
-#pills-intro .work__row .col-md-4:nth-of-type(3n) {
-  margin-top: -1rem;
-}
-
-#pills-intro .work__row .col-md-4:nth-of-type(3n+1) {
-  margin-top: -1rem;
-}
-
-#pills-intro .work__row .col-md-4:nth-of-type(2) {
-  margin-top: .5rem;
-}
-
 .emodal-title {
   color: #EE7800;
   margin: 0 auto;
@@ -1191,4 +1176,14 @@ a {
   border-radius: 2px;
   color: #fff;
 }
+
+#putEmail_hidden {
+  border: 1px solid;
+  border-radius: 28px;
+  color: #EE7800 !important;
+}
+
+#putEmail_hidden .fm-email-btn {
+  padding: 2px 5px 2px 5px;
+}
 /*# sourceMappingURL=list-style.css.map */

css/list-style.scss

@@ -627,6 +627,7 @@ a {
         }
         span {
             width: 16%;
+            cursor: pointer;
             img {
                 width: 100%;
             }
@@ -925,22 +926,22 @@ a {
     display: none;
 }
 
-#pills-intro {
-    .work__row  {
-        .col-md-4:nth-of-type(3n-1) {
-            margin-top: .5rem;
-        }
-        .col-md-4:nth-of-type(3n) {
-            margin-top: -1rem;
-        }
-        .col-md-4:nth-of-type(3n+1) {
-            margin-top: -1rem;
-        }
-        .col-md-4:nth-of-type(2) {
-            margin-top: .5rem;
-        }
-    }
-}
+// #pills-intro {
+//     .work__row  {
+//         .col-md-4:nth-of-type(3n-1) {
+//             margin-top: .5rem;
+//         }
+//         .col-md-4:nth-of-type(3n) {
+//             margin-top: -1rem;
+//         }
+//         .col-md-4:nth-of-type(3n+1) {
+//             margin-top: -1rem;
+//         }
+//         .col-md-4:nth-of-type(2) {
+//             margin-top: .5rem;
+//         }
+//     }
+// }
 
 .emodal {
     &-title {
@@ -972,4 +973,13 @@ a {
         border-radius: 2px;
         color: #fff;
     }
+}
+
+#putEmail_hidden {
+    border: 1px solid;
+    border-radius: 28px;
+    color: #EE7800 !important;
+    .fm-email-btn {
+        padding: 2px 5px 2px 5px;
+    }
 }

index_designerList.html

@@ -1479,33 +1479,33 @@
                 <div class="modal-body">
                   <div class="col">
                     <div class="input-group">
-                      <input type="text" class="form-control fm-input-border" placeholder="收件人email" name="email" v-model="email" id="email">
+                      <input type="text" class="form-control fm-input-border" placeholder="收件人email" name="email" id="email">
                       <div class="input-group-append">
-                        <button class="btn btn-plus" id="putEmail" type="button" @click="putEmail()">
+                        <button class="btn btn-plus" id="putEmail" type="button" onclick="putEmail()">
                         <i class="fa fa-plus fm-plus" aria-hidden="true"></i></button>
                       </div>
                     </div>
-                    <div class="text-right">
+                    <div class="text-end">
                       <small class="text-danger" id="error"></small>
                     </div>
                   </div>
                   <div class="col mb-3 d-flex flex-wrap">
-                    <span class="text-primary fm-email-btnWrapper m-1" id="putEmail_hidden" style="display: none;">
+                    <span class="fm-email-btnWrapper m-1" id="putEmail_hidden" style="display: none;">
                       <span class="fm-email-btn">
                         <small class="mr-1" id="add_email"></small>
-                        <i class="fa fa-times-circle fm-close" aria-hidden="true" @click="del_email(e)"></i>
+                        <i class="fa fa-times-circle fm-close" aria-hidden="true"></i>
                       </span>
                     </span>
                   </div>
                   <div class="col mb-3">
-                    <input type="text" class="form-control font-weight-bold " v-model="forward_title" id="title" value="澄羿空間設計室內裝修有限公司" placeholder="澄羿空間設計室內裝修有限公司">
+                    <input type="text" class="form-control font-weight-bold " id="title" value="" placeholder="">
                   </div>
                   <div class="col mb-3">
-                    <textarea class="form-control" id="content" rows="5" name="content" v-model="content" placeholder="內容"></textarea>
+                    <textarea class="form-control" id="content" rows="5" name="content" placeholder="內容"></textarea>
                   </div>
                 </div>
                 <div class="modal-button-wrapper d-flex justify-content-center mb-4">
-                  <a class="btn modal-button me-2 btn-send active" @click="doSend()" id="doSend">送出</a>
+                  <a class="btn modal-button me-2 btn-send active" id="doSend">送出</a>
                   <a class="btn modal-button btn-dismiss" data-bs-dismiss="modal" aria-label="Close">取消</a>
                 </div>
               </div>

index_designerList_mb.html

@@ -963,6 +963,47 @@
         </div>
       </div>
     </div>
+    <div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered emodal">
+        <div class="modal-content">
+          <div class="modal-header text-center border-0">
+            <h5 class="modal-title font-weight-bold emodal-title" id="forwardModalLabel">轉寄好友</h5>
+          </div>
+          <div class="modal-body">
+            <div class="col">
+              <div class="input-group">
+                <input type="text" class="form-control fm-input-border" placeholder="收件人email" name="email" id="email">
+                <div class="input-group-append">
+                  <button class="btn btn-plus" id="putEmail" type="button" onclick="putEmail()">
+                  <i class="fa fa-plus fm-plus" aria-hidden="true"></i></button>
+                </div>
+              </div>
+              <div class="text-end">
+                <small class="text-danger" id="error"></small>
+              </div>
+            </div>
+            <div class="col mb-3 d-flex flex-wrap">
+              <span class="fm-email-btnWrapper m-1" id="putEmail_hidden" style="display: none;">
+                <span class="fm-email-btn">
+                  <small class="mr-1" id="add_email"></small>
+                  <i class="fa fa-times-circle fm-close" aria-hidden="true"></i>
+                </span>
+              </span>
+            </div>
+            <div class="col mb-3">
+              <input type="text" class="form-control font-weight-bold " id="title" value="" placeholder="">
+            </div>
+            <div class="col mb-3">
+              <textarea class="form-control" id="content" rows="5" name="content" placeholder="內容"></textarea>
+            </div>
+          </div>
+          <div class="modal-button-wrapper d-flex justify-content-center mb-4">
+            <a class="btn modal-button me-2 btn-send active" id="doSend">送出</a>
+            <a class="btn modal-button btn-dismiss" data-bs-dismiss="modal" aria-label="Close">取消</a>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- <div class="sec-favor d-none">
       <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
         <div class="container-fluid" style="padding:0 8px;margin:0;">

js/index-designer.js

@@ -61,7 +61,7 @@ let totalPages = {
 
 window.onload = function(){
     if(screen.width < 900){
-        window.location.href = "../index_designerList_mb.html";   
+        window.location.href = `../index_designerList_mb.html?cid=${cid}`;   
     }
     userAgent = navigator.userAgent;
     detectBrowser(userAgent);
@@ -103,6 +103,7 @@ window.onload = function(){
         renderinfoCard(designer);
         renderTab(designer['Content']);
         renderTabContent(designer['Content']);
+        renderModalTitle(designer['CompanyName']);
         // $(window).scroll(function() {
         //     loadMore(designer);
         // })
@@ -573,3 +574,21 @@ document.addEventListener('lazybeforeunveil', function(e){
     }
 });
 
+function renderModalTitle(title) {
+    $('#emailModal #title').val(title);
+}
+
+function putEmail() {
+    const emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    if($('#email').val() !== null && emailPattern.test($('#email').val())) {
+        $('#error').hide();
+        $('#putEmail_hidden').css('display', 'block');
+        $('#add_email').text($('#email').val());
+        $('#email').val('');
+    } else {
+        $('#error').show();
+        $('#error').text('email 格式有誤');
+    }
+    
+}
+

js/index-list-mb.js

@@ -51,7 +51,7 @@ function getQuery() {
 window.onload = function(){
   //window.scrollBy(0, 1);
   if(screen.width >= 901){
-      window.location.href = "../index_designerList.html";   
+      window.location.href = `../index_designerList.html?cid=${cid}`;   
   }
   userAgent = navigator.userAgent;
   detectBrowser(userAgent);
@@ -73,6 +73,7 @@ window.onload = function(){
     renderinfoCard(designer);
     renderTab(designer['Content']);
     renderTabContent(designer['Content']);
+    renderModalTitle(designer['CompanyName']);
     console.log(filter);
     console.log(designer['Content'][0]['Carddata']);
   });
@@ -157,11 +158,15 @@ function renderinfoCard(designer) {
                     <img src="${designer['scMedia'][i].img}" class="dislike" alt="">
                     <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
                 </span>`;
-    } else {
+      } else if (i === 3) {
+        mediaStr += `<span class="send" data-bs-toggle="modal" data-bs-target="#emailModal">
+                      <img src="${designer['scMedia'][i].img}" alt="">
+                    </span>`;
+      } else {
         mediaStr += `<a href="${designer['scMedia'][i].link}">
                     <img src="${designer['scMedia'][i].img}" alt="">
                 </a>`;
-    }
+      }
   }
   $('.scMedia').html(mediaStr);
 
@@ -397,3 +402,21 @@ function checkTab() {
   }
 }
 
+
+function renderModalTitle(title) {
+  $('#emailModal #title').val(title);
+}
+
+function putEmail() {
+  const emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  if($('#email').val() !== null && emailPattern.test($('#email').val())) {
+      $('#error').hide();
+      $('#putEmail_hidden').css('display', 'block');
+      $('#add_email').text($('#email').val());
+      $('#email').val('');
+  } else {
+      $('#error').show();
+      $('#error').text('email 格式有誤');
+  }
+  
+}