Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-13 10:08:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Various mobile UI fixes

Browse Source 
-second quality pass for the entire ui to fix any issues, eg items being pushed off screen, non selectable items, radio buttons being pushed off of the display.
This commit is contained in:
Redacted
2023-11-22 16:09:38 -06:00
committed by GitHub
parent fd9d747a47
commit 0b576c646d
1 changed files with 113 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/sdnext.css
+113 -24
View File
@@ -9,7 +9,7 @@ tr { border-bottom: none !important; padding: 0.1em 0.5em !important; }
textarea { overflow-y: auto !important; }
/* gradio elements */
.block .padded:not(.gradio-accordion) { padding: 0 !important; margin-right: 0; min-width: 90px !important; }
.block .padded:not(.gradio-accordion) {padding: 0 !important;margin-right: 0;min-width: 90px !important;}
.compact { gap: 1em 0.2em; background: transparent !important; padding: 0 !important; }
.flex-break { flex-basis: 100% !important; }
.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; gap: 0.5em 1em; flex-grow: 1 !important; }
@@ -27,12 +27,12 @@ textarea { overflow-y: auto !important; }
.gradio-button.secondary-down:hover { background: var(--button-secondary-background-fill-hover); color: var(--button-secondary-text-color-hover); }
.gradio-button.tool { max-width: min-content; min-width: min-content !important; align-self: end; font-size: 1.4em; color: var(--body-text-color) !important; margin-top: auto; margin-bottom: var(--spacing-md); align-self: center; }
.gradio-checkbox { margin: 0.75em 1.5em 0 0; align-self: center; }
.gradio-column { min-width: min(160px, 100%) !important; }
.gradio-column {min-width: min(160px, 100%) !important;}
.gradio-container { max-width: unset !important; padding: var(--block-label-padding) !important; }
.gradio-container .prose a, .gradio-container .prose a:visited{ color: unset; text-decoration: none; }
.gradio-dropdown { margin-right: var(--spacing-sm) !important; min-width:160px; max-width:fit-content }
.gradio-dropdown ul.options { z-index: 1000; min-width: fit-content; max-height: 33vh !important; white-space: nowrap; }
.gradio-dropdown ul.options li.item { padding: var(--spacing-xs); }
.gradio-dropdown ul.options {z-index: 1000;min-width: fit-content;max-height: 33vh !important;white-space: nowrap;}
.gradio-dropdown ul.options li.item {padding: var(--spacing-xs);}
.gradio-dropdown ul.options li.item:not(:has(.hide)) { background-color: var(--primary-500); }
.gradio-dropdown .token { padding: var(--spacing-xs); }
.gradio-dropdown span { margin-bottom: 0 !important; font-size: 0.9em; }
@@ -48,8 +48,8 @@ textarea { overflow-y: auto !important; }
/* custom gradio elements */
.accordion-compact { padding: 8px 0px 4px 0px !important; }
.settings-accordion > div { flex-flow: wrap; }
.small-accordion .form { min-width: var(--left-column) !important; max-width: max-content; }
.settings-accordion > div {flex-flow: wrap;}
.small-accordion .form {min-width: var(--left-column) !important;max-width: max-content;}
.small-accordion .label-wrap .icon { margin-right: 1.6em; margin-left: 0.6em; color: var(--button-primary-border-color); }
.small-accordion .label-wrap { padding: 16px 0px 8px 0px; margin: 0; border-top: 2px solid var(--button-secondary-border-color); }
.small-accordion { width: fit-content !important; padding-left: 0 !important; }
@@ -105,16 +105,16 @@ div#extras_scale_to_tab div.form{ flex-direction: row; }
#si-sparkline-memo, #si-sparkline-load { background-color: #111; }
#quicksettings { width: fit-content; }
#quicksettings > button { padding: 0 1em 0 0; align-self: end; margin-bottom: var(--text-sm); }
#settings { display: flex; gap: var(--layout-gap); }
#settings div { border: none; gap: 0; margin: 0 0 var(--layout-gap) 0px; padding: 0; }
#settings > div.tab-content { flex: 10 0 75%; display: grid; }
#settings {display: flex;gap: var(--layout-gap);}
#settings div {border: none;gap: 0;margin: 0 0 var(--layout-gap) 0px;padding: 0;}
#settings > div.tab-content {flex: 10 0 75%;display: grid;}
#settings > div.tab-content > div { border: none; padding: 0; }
#settings > div.tab-content > div > div > div > div > div { flex-direction: unset; }
#settings > div.tab-nav { display: grid; grid-template-columns: repeat(auto-fill, .5em minmax(10em, 1fr)); flex: 1 0 auto; width: 12em; align-self: flex-start; gap: var(--spacing-xxl); }
#settings > div.tab-content > div > div > div > div > div {flex-direction: unset;}
#settings > div.tab-nav {display: grid;grid-template-columns: repeat(auto-fill, .5em minmax(10em, 1fr));flex: 1 0 auto;width: 12em;align-self: flex-start;gap: var(--spacing-xxl);}
#settings > div.tab-nav button { display: block; border: none; text-align: left; white-space: initial; padding: 0; }
#settings > div.tab-nav > #settings_show_all_pages { padding: var(--size-2) var(--size-4); }
#settings .block.gradio-checkbox { margin: 0; width: auto; }
#settings .dirtyable { gap: .5em; }
#settings .dirtyable {gap: .5em;:;}
#settings .dirtyable.hidden { display: none; }
#settings .modification-indicator { height: 1.2em; border-radius: 1em !important; padding: 0; width: 0; margin-right: 0.5em; }
#settings .modification-indicator:disabled { visibility: hidden; }
@@ -280,25 +280,114 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
--spacing-xxl: 6px;
}
/* Apply different styles for devices with coarse pointers dependant on screen resolution */
@media (hover: none) and (pointer: coarse) {
/* Screens 400px and smaller */
@media (max-width: 425px) {
@media (max-width: 399px) {
:root, .light, .dark { --left-column: 100%; }
#settings {display: flex;gap: var(--layout-gap);flex-wrap: wrap;flex-direction: row;}
#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; min-width: calc(min(320px, 100%)) !important;}
/* maintain single column for from image operations on larger mobile devices */
#txt2img_results, #img2img_results, #extras_results { min-width: calc(min(320px, 100%)) !important;}
/* maintain single column for from image operations on larger mobile devices */
#img2img_settings, #img2img_results { min-width: 100% !important; max-width: 100% !important;}
/* fix inpaint image display being too large for mobile displays */
#img2img_sketch, #img2maskimg, #inpaint_sketch {display: flex;alignment-baseline:after-edge !important;overflow: auto !important;resize: none !important;}
#img2maskimg canvas { width: 100% !important; max-height: 100% !important; height: auto !important; }
/* fix from text/image UI elements to prevent them from moving around within the UI */
#txt2img_sampler, #txt2img_batch, #txt2img_seed_group, #txt2img_advanced, #txt2img_second_pass, #img2img_sampling_group, #img2img_resize_group, #img2img_batch_group, #img2img_seed_group, #img2img_denoise_group, #img2img_advanced_group { width: 100% !important; }
/* adjust slider input fields as they were too large for mobile devices. */
.gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; }
/* Various interface elements default to row, this breaks UI placement on mobile. */
#component-886, #component-1915, #component-2018 div, #component-2044 div > div, #component-2087 div, #component-2091 div, #component-2140 div, #component-2144 div, #component-3435 div { display:flex; flex-wrap: wrap; align-content:flex-start; flex-direction: column; }
/* move image preview/output to bottom of page */
#models_tab { flex-direction: column-reverse !important; }
#component-3464 div { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
#enqueue_keyboard_shortcut_modifiers, #enqueue_keyboard_shortcut_key div { max-width: 40% !important;}
#component-2906, #component-2953, #component-2957 {max-width: 85%;}
#settings > div.tab-nav {gap: var(--layout-gap);display: flex;flex-wrap: wrap;flex-direction: column;align-content: flex-start;align-items: flex-start;justify-content: flex-start;}
#settings { gap: var(--layout-gap); display: flex; flex-wrap: wrap; flex-direction: row; }
/* enable scrolling on extensions tab */
#tab_extensions table, #tab_config table{ border-collapse: collapse; display: block; overflow-x:auto;}
/* increase scrollbar size to make it finger friendly */
::-webkit-scrollbar { width: 25px !important; height:25px; }
}
/* Screens 400px and larger up to 1080px */
@media (max-width: 1080px) and (min-width:425px) {
:root, .light, .dark { --left-column: 39%; }
#scripts_alwayson_txt2img div { max-width: 99%; }
#settings {display: flex;gap: var(--layout-gap);flex-wrap: wrap;flex-direction: row;}
#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0;}
.gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; }
}
/* Apply different styles for devices with coarse pointers dependant on screen resolution */
@media (hover: none) and (pointer: coarse) {
/* Do not affect displays larger than 1024px wide. */
@media (max-width: 1024px) {
/* Screens smaller than 424px wide */
@media (max-width: 399px) {
:root, .light, .dark { --left-column: 100%; }
/* maintain single column for from image operations on larger mobile devices */
#txt2img_results, #img2img_results, #extras_results { min-width: calc(min(320px, 100%)) !important;}
}
/* Screens larger than 425px wide */
@media (min-width: 425px) {
:root, .light, .dark {--left-column: 50% ;}
/* adjust extension panel to fit within resized sidebar */
#scripts_alwayson_txt2img div { max-width: 99%; }
/* maintain side by side split on larger mobile displays for from text */
#txt2img_results, #extras_results { min-width: 50% !important;}
}
#txt2img_prompt_container, #img2img_prompt_container { resize:vertical !important; }
/* make generate and enqueue buttons take up the entire width of their rows. */
#txt2img_generate_box, #txt2img_enqueue_wrapper { min-width: 100% !important;}
/*make interrogate buttons take up appropriate space. */
#img2img_toprow > div.gradio-column {flex-grow: 1 !important;}
#img2img_actions_column {display: flex; min-width: fit-content !important; flex-direction: row;justify-content: space-evenly; align-items: center;}
#txt2img_generate_box, #img2img_generate_box, #txt2img_enqueue_wrapper,#img2img_enqueue_wrapper {display: flex;flex-direction: column;height: 4em !important;align-items: stretch;justify-content: space-evenly;}
/* maintain single column for from image operations on larger mobile devices */
#img2img_settings, #img2img_results { min-width: 100% !important; max-width: 100% !important;}
/* fix inpaint image display being too large for mobile displays */
#img2img_sketch, #img2maskimg, #inpaint_sketch {display: flex;alignment-baseline:after-edge !important;overflow: auto !important;resize: none !important;}
#img2maskimg canvas { width: 100% !important; max-height: 100% !important; height: auto !important; }
/* fix from text/image UI elements to prevent them from moving around within the UI */
#txt2img_sampler, #txt2img_batch, #txt2img_seed_group, #txt2img_advanced, #txt2img_second_pass, #img2img_sampling_group, #img2img_resize_group, #img2img_batch_group, #img2img_seed_group, #img2img_denoise_group, #img2img_advanced_group { width: 100% !important; }
#img2img_resize_group .gradio-radio > div { display: flex; flex-direction: column; width: unset !important; }
#inpaint_controls div {display:flex;flex-direction: row;}
#inpaint_controls .gradio-radio > div { display: flex; flex-direction: column !important; }
/* move image preview/output on models page to bottom of page */
#models_tab { flex-direction: column-reverse !important; }
/* fix settings for agent scheduler */
#enqueue_keyboard_shortcut_modifiers, #enqueue_keyboard_shortcut_key div { max-width: 40% !important;}
/* adjust width of certain settings item to allow aligning as row, but not have it go off the screen */
#settings { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 100% !important; }
#settings div.tab-content > div > div > div { max-width: 80% !important;}
#settings div .gradio-radio { width: unset !important; }
/* enable scrolling on extensions tab */
#tab_extensions table { border-collapse: collapse; display: block; overflow-x:auto !important;}
/* increase scrollbar size to make it finger friendly */
::-webkit-scrollbar { width: 25px !important; height:25px; }
/* adjust dropdown size to make them easier to select individual items on mobile. */
.gradio-dropdown ul.options {max-height: 41vh !important; }
.gradio-dropdown ul.options li.item {height: 40px !important; display: flex; align-items: center;}
/* adjust slider input fields as they were too large for mobile devices. */
.gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; }
#txt2img_settings .block .padded:not(.gradio-accordion) {padding: 0 !important;margin-right: 0; min-width: 100% !important; width:100% !important;}
}
}