styling adjustements

AUTOMATIC1111 · Feb 9, 2023 · b030b67 · b030b67
1 parent 80a2acb
commit b030b67
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/javascript/aspectRatioSliders.js b/javascript/aspectRatioSliders.js
@@ -6,23 +6,26 @@ class AspectRatioSliderController {
         this.ratioSource = new DropdownComponentController(ratioSource);
         this.roundingSource = new CheckboxComponentController(roundingSource);
         this.roundingMethod = new RadioComponentController(roundingMethod);
-        // Badge implementation
         this.roundingIndicatorBadge = document.createElement("div");
+        // Badge implementation
         this.roundingIndicatorBadge.innerText = "📐";
         this.roundingIndicatorBadge.classList.add("rounding-badge");
         this.ratioSource.element.appendChild(this.roundingIndicatorBadge);
-        // Check initial value of ratioSource
+        // Check initial value of ratioSource to set badge visbility
         let initialRatio = this.ratioSource.getVal();
         if (!initialRatio.includes(":")) {
             this.roundingIndicatorBadge.style.display = "none";
         }
+        //Adjust badge icon if rounding is on
         if (this.roundingSource.getVal()) {
             this.roundingIndicatorBadge.classList.add("active");
             this.roundingIndicatorBadge.innerText = "⚠️";
         }
+        //Make badge clickable to toggle setting
         this.roundingIndicatorBadge.addEventListener("click", () => {
             this.roundingSource.setVal(!this.roundingSource.getVal());
         });
+        //Make rounding setting toggle badge text and style if setting changes
         this.roundingSource.child.addEventListener("change", () => {
             if (this.roundingSource.getVal()) {
                 this.roundingIndicatorBadge.classList.add("active");
@@ -41,6 +44,7 @@ class AspectRatioSliderController {
         this.heightSlider.childNumField.addEventListener("change", (e) => { e.preventDefault(); this.resize("height"); });
         this.ratioSource.childSelector.addEventListener("change", (e) => {
             e.preventDefault();
+            //Check and toggle display of badge conditionally on dropdown selection
             if (!this.ratioSource.getVal().includes(":")) {
                 this.roundingIndicatorBadge.style.display = 'none';
             }

diff --git a/style.css b/style.css
@@ -769,6 +769,7 @@ footer {
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
+   line-height: 40px;
    padding: 0;
    text-align: center;
 }
@@ -780,16 +781,18 @@ footer {
   position: absolute;
   top: -10px;
   right: -10px;
-  min-width: 16px;
-  min-height: 16px;
+  width: 20px;
+  height: 20px;
+  padding: 1px;
+  line-height: 16px;
+  font-size: 14px;
 }
 
 .rounding-badge.active {
   background-color: #007bff;
   border-radius: 50%;
 }
 
-
 .inactive{
     opacity: 0.5;
 }