1
0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-04-13 18:15:48 +02:00

Lower minimum width of browser window & fix modals breaking in small windows

This commit is contained in:
chylex 2018-06-05 02:51:21 +02:00
parent b7f325a241
commit d14de4ac9e
4 changed files with 27 additions and 9 deletions
Core
Resources
Plugins/templates
Scripts

View File

@ -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);

View File

@ -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>

View File

@ -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>

View File

@ -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 */
/*******************************************/