improve styles and templates

lekoala · Nov 29, 2021 · c03b8ce · c03b8ce
1 parent c0ab581
commit c03b8ce
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 143 deletions.
diff --git a/client/pure-modal.css b/client/pure-modal.css
@@ -1,209 +1,221 @@
 .pure-modal .checkbox {
-  display: none;
+    display: none;
 }
 
 /* Gray background */
 
 .pure-modal .pure-modal-overlay {
-  opacity: 0;
-  transition: all 0.3s ease;
-  width: 50%;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -100;
-  transform: scale(1);
-  display: none;
-  background-color: rgba(0, 0, 0, 0.7);
+    opacity: 0;
+    transition: all 0.3s ease;
+    width: 50%;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -100;
+    transform: scale(1);
+    display: none;
+    background-color: rgba(0, 0, 0, 0.7);
 }
 
 /* Box */
 
 .pure-modal .pure-modal-wrap {
-  background-color: #f7f8fa;
-  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-  padding: 3.077rem 1.5385rem;
-  width: 60%;
-  margin: 1.5385rem auto;
-  align-self: flex-start;
-  border-radius: 3px;
-  transition: all 0.3s ease;
+    background-color: #f7f8fa;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+    padding: 3.077rem 1.5385rem;
+    width: 60%;
+    margin: 1.5385rem auto;
+    align-self: flex-start;
+    border-radius: 3px;
+    transition: all 0.3s ease;
 }
 
 .pure-modal .pure-modal-wrap.small {
-  width: 30%;
+    width: 30%;
 }
 
 .pure-modal .pure-modal-wrap.full {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 .pure-modal .pure-modal-wrap.a-center {
-  align-self: center;
+    align-self: center;
 }
 
 .pure-modal .pure-modal-wrap.from-left {
-  transform: translateX(-100%);
+    transform: translateX(-100%);
 }
 
 .pure-modal .pure-modal-wrap.from-right {
-  transform: translateX(100%);
+    transform: translateX(100%);
 }
 
 .pure-modal .pure-modal-wrap.from-top {
-  transform: translateY(-100%);
+    transform: translateY(-100%);
 }
 
 .pure-modal .pure-modal-wrap.from-bottom {
-  transform: translateY(100%);
+    transform: translateY(100%);
 }
 
 /* Close button */
 
 .pure-modal .pure-modal-overlay .close {
-  position: absolute;
-  right: 1.5385rem;
-  top: 1.5385rem;
-  width: 32px;
-  height: 32px;
-  text-align: center;
-  line-height: 32px;
-  display: inline-block;
-  color: rgba(0, 0, 0, 0.7);
+    position: absolute;
+    right: 1.5385rem;
+    top: 1.5385rem;
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    line-height: 32px;
+    display: inline-block;
+    color: rgba(0, 0, 0, 0.7);
 }
 
 .pure-modal .pure-modal-overlay .close:hover {
-  cursor: pointer;
-  color: rgba(0, 0, 0, 0.9);
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.9);
 }
 
-.pure-modal .o-close {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: -100;
+.pure-modal .pure-modal-close {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: -100;
 }
 
-.pure-modal input:checked ~ .o-close {
-  z-index: 9998;
+.pure-modal input:checked ~ .pure-modal-close {
+    z-index: 9998;
 }
 
 .pure-modal input:checked ~ .pure-modal-overlay {
-  transform: scale(1);
-  opacity: 1;
-  z-index: 9997;
-  overflow: auto;
-  display: flex;
-  animation-duration: 0.3s;
-  animation-name: fade-in;
-  -moz-animation-duration: 0.3s;
-  -moz-animation-name: fade-in;
-  -webkit-animation-duration: 0.3s;
-  -webkit-animation-name: fade-in;
+    transform: scale(1);
+    opacity: 1;
+    z-index: 9997;
+    overflow: auto;
+    display: flex;
+    animation-duration: 0.3s;
+    animation-name: fade-in;
+    -moz-animation-duration: 0.3s;
+    -moz-animation-name: fade-in;
+    -webkit-animation-duration: 0.3s;
+    -webkit-animation-name: fade-in;
 }
 
 .pure-modal input:checked ~ .pure-modal-overlay .pure-modal-wrap {
-  transform: translateY(0);
-  z-index: 9999;
+    transform: translateY(0);
+    z-index: 9999;
 }
 
 /* Responsive Design */
 
 /* Tablet size */
 
 @media (max-width: 800px) {
-  .pure-modal .pure-modal-wrap {
-    width: 80%;
-    padding: 16px;
-  }
+    .pure-modal .pure-modal-wrap {
+        width: 80%;
+        padding: 16px;
+    }
 }
 
 /* Phone size */
 
 @media (max-width: 500px) {
-  .pure-modal .pure-modal-wrap {
-    width: 90%;
-  }
+    .pure-modal .pure-modal-wrap {
+        width: 90%;
+    }
 }
 
 /* Fadein from display:none */
 
 @keyframes fade-in {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: flex;
-    opacity: 0;
-  }
-  100% {
-    display: flex;
-    opacity: 1;
-  }
+    0% {
+        display: none;
+        opacity: 0;
+    }
+    1% {
+        display: flex;
+        opacity: 0;
+    }
+    100% {
+        display: flex;
+        opacity: 1;
+    }
 }
 
 @-moz-keyframes fade-in {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: flex;
-    opacity: 0;
-  }
-  100% {
-    display: flex;
-    opacity: 1;
-  }
+    0% {
+        display: none;
+        opacity: 0;
+    }
+    1% {
+        display: flex;
+        opacity: 0;
+    }
+    100% {
+        display: flex;
+        opacity: 1;
+    }
 }
 
 @-webkit-keyframes fade-in {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: flex;
-    opacity: 0;
-  }
-  100% {
-    display: flex;
-    opacity: 1;
-  }
-}
-
-.cms .pure-modal .pure-modal-wrap {
+    0% {
+        display: none;
+        opacity: 0;
+    }
+    1% {
+        display: flex;
+        opacity: 0;
+    }
+    100% {
+        display: flex;
+        opacity: 1;
+    }
+}
+
+/* Custom actions style */
+
+.cms .pure-modal .pure-modal-action {
     padding: 0;
 }
-.cms .pure-modal .pure-modal-overlay .close {
-    right: 1rem;
+.cms .pure-modal .pure-modal-action .close {
     top: 1rem;
 }
-.cms .pure-modal .toolbar--north h1 {
-    margin-top: 16px;
+
+/* Let flex align the header */
+.cms .pure-modal .pure-modal-action .toolbar--north h1 {
+    margin-bottom: 0;
 }
 
 /* SS4.8 messes up the following when inside a toolbar and we have to revert their styles */
-.cms .pure-modal .pure-modal-wrap .form-group {
+.cms .pure-modal .pure-modal-action .form-group {
     padding-bottom: 1.2308rem !important;
 }
-.cms .pure-modal .pure-modal-wrap .form-group > label {
+.cms .pure-modal .pure-modal-action .form-group > label {
     margin-left: 1.5385rem !important;
 }
-.cms .pure-modal .pure-modal-wrap .btn {
+.cms .pure-modal .pure-modal-action .btn {
     width: auto !important;
 }
-.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .pure-modal-wrap .CompositeField {
+.cms
+    .ss-ui-action-tabset.action-menus.ss-tabset
+    .ui-tabs-panel
+    .pure-modal-action
+    .CompositeField {
     margin-left: -1.5385rem;
 }
-.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .pure-modal-wrap .form-group:not(.stacked) > label {
+.cms
+    .ss-ui-action-tabset.action-menus.ss-tabset
+    .ui-tabs-panel
+    .pure-modal-action
+    .form-group:not(.stacked)
+    > label {
     padding-top: 0.5385rem;
     padding-bottom: 0.5385rem;
 }
diff --git a/client/pure-modal.js b/client/pure-modal.js
diff --git a/src/PureModal.php b/src/PureModal.php
@@ -23,6 +23,11 @@ class PureModal extends DatalessField
      */
     protected $title;
 
+    /**
+     * @var string
+     */
+    protected $content;
+
     /**
      * @var string
      */
@@ -43,8 +48,9 @@ public function __construct($name, $title, $content)
     public function getAttributes()
     {
         $attrs = [];
+        // Since the frame is hidden, we need to compute size on click
         if ($this->getIframe()) {
-            $attrs['onclick'] = "resizeIframe('" .$this->getIframeID(). "')";
+            $attrs['onclick'] = "var i=document.querySelector('#" .$this->getIframeID(). "');i.style.height = 0; setTimeout(function() {i.style.height = i.contentWindow.document.body.scrollHeight + 'px';},100);";
         }
         return $attrs;
     }

diff --git a/src/PureModalAction.php b/src/PureModalAction.php
@@ -92,7 +92,6 @@ public function setDialogButtonTitle($value)
         return $this;
     }
 
-
     /**
      * Get an icon for this button
      *