From d14de4ac9e911c0b1bd5ca752012d6663f533ac8 Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Tue, 5 Jun 2018 02:51:21 +0200
Subject: [PATCH] Lower minimum width of browser window & fix modals breaking
in small windows
---
Core/FormBrowser.Designer.cs | 6 +++---
Resources/Plugins/templates/browser.js | 6 +++---
Resources/Scripts/introduction.js | 7 ++++---
Resources/Scripts/styles/browser.css | 17 +++++++++++++++++
4 files changed, 27 insertions(+), 9 deletions(-)
diff --git a/Core/FormBrowser.Designer.cs b/Core/FormBrowser.Designer.cs
index e86f17b8..80ac482e 100644
--- a/Core/FormBrowser.Designer.cs
+++ b/Core/FormBrowser.Designer.cs
@@ -39,17 +39,17 @@ private void InitializeComponent() {
this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.BackColor = TweetDuck.Core.Utils.TwitterUtils.BackgroundColor;
- this.ClientSize = new System.Drawing.Size(400, 386);
+ this.ClientSize = new System.Drawing.Size(1008, 730);
this.Icon = Properties.Resources.icon;
this.Location = TweetDuck.Core.Controls.ControlExtensions.InvisibleLocation;
- this.MinimumSize = new System.Drawing.Size(416, 424);
+ this.MinimumSize = new System.Drawing.Size(348, 424);
this.Name = "FormBrowser";
this.StartPosition = System.Windows.Forms.FormStartPosition.Manual;
this.Activated += new System.EventHandler(this.FormBrowser_Activated);
this.FormClosing += new System.Windows.Forms.FormClosingEventHandler(this.FormBrowser_FormClosing);
this.FormClosed += new System.Windows.Forms.FormClosedEventHandler(this.FormBrowser_FormClosed);
- this.LocationChanged += new System.EventHandler(this.FormBrowser_LocationChanged);
this.ResizeEnd += new System.EventHandler(this.FormBrowser_ResizeEnd);
+ this.LocationChanged += new System.EventHandler(this.FormBrowser_LocationChanged);
this.Resize += new System.EventHandler(this.FormBrowser_Resize);
this.ResumeLayout(false);
diff --git a/Resources/Plugins/templates/browser.js b/Resources/Plugins/templates/browser.js
index 450179bc..c4e9c5ae 100644
--- a/Resources/Plugins/templates/browser.js
+++ b/Resources/Plugins/templates/browser.js
@@ -51,7 +51,7 @@ enabled(){
this.css.insert(".manage-templates-btn.active { color: #fff; box-shadow: 0 0 2px 3px #50a5e6; outline: 0; }");
this.css.insert("#templates-modal-wrap { width: 100%; height: 100%; padding: 49px; position: absolute; z-index: 999; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5); }");
- this.css.insert("#templates-modal { width: 100%; height: 100%; background-color: #fff; display: flex; }");
+ this.css.insert("#templates-modal { width: 100%; height: 100%; min-width: 500px; background-color: #fff; display: flex; }");
this.css.insert("#templates-modal > div { display: flex; flex-direction: column; }");
this.css.insert(".templates-modal-bottom { flex: 0 0 auto; padding: 16px; }");
@@ -68,7 +68,7 @@ enabled(){
this.css.insert("#template-list li .icon:hover { opacity: 1; }");
this.css.insert("#template-list li .template-actions { float: right; }");
- this.css.insert("#template-editor { height: 100%; flex: 0 0 auto; width: 25vw; min-width: 150px; max-width: 400px; background-color: #485865; }");
+ this.css.insert("#template-editor { height: 100%; flex: 0 0 auto; width: 25vw; min-width: 225px; max-width: 400px; background-color: #485865; }");
this.css.insert(".template-editor-form { flex: 1 1 auto; padding: 12px 16px; font-size: 14px; overflow-y: auto; }");
this.css.insert(".template-editor-form .compose-text-title { margin: 24px 0 9px; }");
this.css.insert(".template-editor-form .compose-text-title:first-child { margin-top: 0; }");
@@ -261,7 +261,7 @@ enabled(){
$(".manage-templates-btn").addClass("active");
let html = `
-<div id="templates-modal-wrap">
+<div id="templates-modal-wrap" class="scroll-v scroll-styled-v">
<div id="templates-modal">
<div id="template-list">
<ul></ul>
diff --git a/Resources/Scripts/introduction.js b/Resources/Scripts/introduction.js
index e94cda3d..02e788b5 100644
--- a/Resources/Scripts/introduction.js
+++ b/Resources/Scripts/introduction.js
@@ -3,12 +3,13 @@
let css = $(`
<style>
#td-introduction-modal {
- display: block;
+ display: flex;
}
#td-introduction-modal .mdl {
width: 90%;
- max-width: 830px;
+ min-width: 515px;
+ max-width: 835px;
height: 328px;
}
@@ -73,7 +74,7 @@
</style>`).appendTo(document.head);
let ele = $(`
-<div id="td-introduction-modal" class="ovl">
+<div id="td-introduction-modal" class="ovl scroll-v scroll-styled-v">
<div class="mdl is-inverted-dark">
<header class="mdl-header">
<h3 class="mdl-header-title">Welcome to TweetDuck</h3>
diff --git a/Resources/Scripts/styles/browser.css b/Resources/Scripts/styles/browser.css
index a354f3c0..088f22b1 100644
--- a/Resources/Scripts/styles/browser.css
+++ b/Resources/Scripts/styles/browser.css
@@ -244,6 +244,23 @@ a[data-full-url] {
min-width: 86px;
}
+/************************************************************/
+/* Fix modal dialogs breaking when window size is too small */
+/************************************************************/
+
+.ovl, .overlay {
+ flex-direction: column;
+ justify-content: center;
+}
+
+.ovl[style="display: block;"], .overlay {
+ display: flex !important;
+}
+
+.overlay:before, .ovl:before {
+ display: none !important;
+}
+
/*******************************************/
/* Fix general visual issues or annoyances */
/*******************************************/