position dialog solely via css flexbox

gregschmit · Sep 2, 2023 · 3375d1b · 3375d1b
1 parent ede6b8f
commit 3375d1b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 38 deletions.
diff --git a/app/assets/javascripts/recurring_select_dialog.js.erb b/app/assets/javascripts/recurring_select_dialog.js.erb
@@ -6,7 +6,6 @@ class RecurringSelectDialog {
 
   constructor(recurring_selector) {
     this.config = this.constructor.config
-    this.positionDialogVert = this.positionDialogVert.bind(this);
     this.cancel = this.cancel.bind(this);
     this.outerCancel = this.outerCancel.bind(this);
     this.save = this.save.bind(this);
@@ -25,8 +24,6 @@ class RecurringSelectDialog {
     this.initDialogBox();
     if ((this.current_rule.hash == null) || (this.current_rule.hash.rule_type == null)) {
       this.freqChanged();
-    } else {
-      setTimeout(this.positionDialogVert, 10); // allow initial render
     }
   }
 
@@ -44,39 +41,13 @@ class RecurringSelectDialog {
     this.inner_holder = this.outer_holder.querySelector(".rs_dialog");
     this.content = this.outer_holder.querySelector(".rs_dialog_content");
 
-    this.positionDialogVert(true);
     this.mainEventInit();
     this.freqInit();
     this.summaryInit();
     trigger(this.outer_holder, "recurring_select:dialog_opened");
     this.freq_select.focus();
   }
 
-  positionDialogVert(initial_positioning) {
-    const window_height = window.innerHeight;
-    const window_width  = window.innerWidth;
-    const dialog_height = Math.max(80, this.content.offsetHeight)
-    const margin_top    = Math.max(10, (window_height - dialog_height)/2 - 30)
-
-    const new_style_hash = {
-      marginTop: `${margin_top}px`,
-      minHeight: `${dialog_height}px`
-    }
-
-    if (initial_positioning) {
-      css(this.inner_holder, new_style_hash)
-      trigger(this.inner_holder, "recurring_select:dialog_positioned")
-    } else {
-      css(this.inner_holder, new_style_hash)
-      trigger(this.inner_holder, "recurring_select:dialog_positioned")
-      // this.inner_holder.animate(new_style_hash, 200, () => {
-      //   this.inner_holder.classList.remove("animated");
-      //   this.content.css({"width": "auto"});
-      //   this.inner_holder.trigger("recurring_select:dialog_positioned");
-      // });
-    }
-  }
-
   cancel() {
     this.outer_holder.remove();
     this.recurring_selector.recurring_select('cancel');
@@ -338,7 +309,6 @@ class RecurringSelectDialog {
         this.initDailyOptions();
     };
     this.summaryUpdate();
-    this.positionDialogVert();
   }
 
   intervalChanged(event) {

diff --git a/app/assets/stylesheets/recurring_select.scss b/app/assets/stylesheets/recurring_select.scss
@@ -2,7 +2,9 @@
 
 /* -------- resets ---------------*/
 
-.rs_dialog_holder { font-size:14px; color:black;
+.rs_dialog_holder {
+  font-size:14px;
+  color:black;
   a {color:black;}
   input[type=button] {
     font: small/normal Arial,sans-serif;
@@ -28,10 +30,32 @@ select {
   option.bold {font-weight:bold; color:red;}
 }
 
-.rs_dialog_holder { position:fixed; left:0px; right:0px; top:0px; bottom:0px; padding-left:50%; background-color:rgba(255,255,255,0.2); z-index:50;
-  .rs_dialog { background-color:#f6f6f6; border:1px solid #acacac; @include shadows(1px, 3px, 8px, rgba(0,0,0,0.25)); @include rounded_corners(7px);
-              display:inline-block; min-width:200px; margin-left:-125px; overflow:hidden; position:relative;
-    .rs_dialog_content { padding:10px;
+.rs_dialog_holder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  left:0px;
+  right:0px;
+  top:0px;
+  bottom:0px;
+  background-color:rgba(255,255,255,0.2);
+  z-index:50;
+
+  .rs_dialog {
+    background-color:#f6f6f6;
+    border:1px solid #acacac;
+    @include shadows(1px, 3px, 8px, rgba(0,0,0,0.25));
+    @include rounded_corners(7px);
+    display:inline-block;
+    min-width:200px;
+    margin-left:-125px;
+    overflow:hidden;
+    position:relative;
+
+    .rs_dialog_content {
+      padding:10px;
+
       h1 { font-size:16px; padding:0px; margin:0 0 10px 0;
         a {float:right; display:inline-block; height:16px; width:16px; background-image:image-url("recurring_select/cancel.png"); background-position:center; background-repeat:no-repeat;}
       }
@@ -42,7 +66,8 @@ select {
 
       a { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
 
-      .freq_option_section { display:none;
+      .freq_option_section {
+        display:none;
         label { font-weight: bold; }
         .rs_interval {width:30px; text-align:center; display: inline-block;}
 
@@ -77,15 +102,21 @@ select {
       }
 
 
-      .rs_summary { padding:0px; margin-top:15px; border-top:1px solid #ccc;
+      .rs_summary {
+        padding: 0px;
+        margin-top: 15px;
+        border-top: 1px solid #ccc;
         span {font-weight:bold; border-top:1px solid #fff; display:block; padding:10px 0 5px 0;}
         &.fetching {color:#999;
           span {background-image:image-url("recurring_select/throbber_13x13.gif"); background-position:center; background-repeat:no-repeat; display:inline-block; height:13px; width:13px; margin-top:-4px; padding-right:5px;}
         }
         label {font-weight:normal;}
       }
 
-      .controls { padding:10px 0px 5px 0px; min-width:170px; text-align:center;
+      .controls {
+        padding:10px 0px 5px 0px;
+        min-width:170px;
+        text-align:center;
         input[type=button] { margin:0px 5px; width:70px;
           &.rs_save {color:#333; }
           &.rs_cancel {color:#666;}