From 3375d1baede8ac3a38603cfe402a8f79013bc0a1 Mon Sep 17 00:00:00 2001 From: glaszig Date: Sat, 2 Sep 2023 00:50:39 -0300 Subject: [PATCH] position dialog solely via css flexbox --- .../recurring_select_dialog.js.erb | 30 ------------ app/assets/stylesheets/recurring_select.scss | 47 +++++++++++++++---- 2 files changed, 39 insertions(+), 38 deletions(-) diff --git a/app/assets/javascripts/recurring_select_dialog.js.erb b/app/assets/javascripts/recurring_select_dialog.js.erb index 32f58c00..7e280aac 100644 --- 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,7 +41,6 @@ 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(); @@ -52,31 +48,6 @@ class RecurringSelectDialog { 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 index 4d5bd72f..517afb1b 100644 --- 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,7 +102,10 @@ 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;} @@ -85,7 +113,10 @@ select { 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;}