From 627937f56fb28b8430ddc696fbb29f2af265c801 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Sun, 5 Feb 2023 10:36:38 +0200 Subject: [PATCH] Refactoring Css mobile fixes --- javascript/ui.js | 66 +++++++++++++++- modules/ui.py | 9 ++- style.css | 196 ++++++++++++++++++++++++++++++++++------------- 3 files changed, 211 insertions(+), 60 deletions(-) diff --git a/javascript/ui.js b/javascript/ui.js index b14a11f5..26e1b0b6 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -286,16 +286,74 @@ onUiUpdate(function(){ * matches any position $ matches the end - */ + */ gradioApp().querySelectorAll('[id *= "sub-group"]').forEach(function(elem){ elem.classList.add("sub-group"); - console.log(elem.id); + //console.log(elem.id); }) - + gradioApp().querySelectorAll('textarea').forEach(function(elem){ + elem.classList.add("input-text"); + elem.classList.remove("gr-text-input", "gr-box"); + }) + + /* coming soon split view resize + + const resizer = gradioApp().getElementById('handler'); + const leftSide = resizer.previousElementSibling; + const rightSide = resizer.nextElementSibling; + const container = gradioApp().getElementById('tab_txt2img'); + var x = 0; + var y = 0; + var leftWidth = 0; + + + + function mouseMoveHandler(e) { + resizer.style.cursor = 'col-resize'; + container.style.cursor = 'col-resize'; + + const dx = e.clientX - x; + const dy = e.clientY - y; + + const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width; + leftSide.style.flexBasis = `${newLeftWidth}%`; + leftSide.style.userSelect = 'none'; + leftSide.style.pointerEvents = 'none'; + rightSide.style.userSelect = 'none'; + rightSide.style.pointerEvents = 'none'; + console.log("Move"); + + }; + + function mouseUpHandler() { + resizer.style.removeProperty('cursor'); + container.style.removeProperty('cursor'); + leftSide.style.removeProperty('user-select'); + leftSide.style.removeProperty('pointer-events'); + rightSide.style.removeProperty('user-select'); + rightSide.style.removeProperty('pointer-events'); + container.removeEventListener('mousemove', mouseMoveHandler); + container.removeEventListener('mouseup', mouseUpHandler); + console.log("Up"); + }; + + function mouseDownHandler(e) { + x = e.clientX; + y = e.clientY; + leftWidth = leftSide.getBoundingClientRect().width; + container.addEventListener('mousemove', mouseMoveHandler); + container.addEventListener('mouseup', mouseUpHandler); + console.log("Down"); + }; + + // Attach the handler + resizer.addEventListener('mousedown', mouseDownHandler); + */ + }) @@ -357,3 +415,5 @@ function selectCheckpoint(name){ desiredCheckpointName = name; gradioApp().getElementById('change_checkpoint').click() } + + diff --git a/modules/ui.py b/modules/ui.py index 83c0a31f..7a2d7541 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -332,14 +332,14 @@ def create_toprow(is_img2img): prompt_styles = gr.Dropdown(label="Styles", elem_id=f"{id_part}_styles", choices=[k for k, v in shared.prompt_styles.styles.items()], value=[], multiselect=True) create_refresh_button(prompt_styles, shared.prompt_styles.reload, lambda: {"choices": [k for k, v in shared.prompt_styles.styles.items()]}, f"refresh_{id_part}_style_index") with gr.Row(): - prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=True, lines=7, + prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=True, lines=5, placeholder="Prompt (press Ctrl+Enter or Alt+Enter to generate)" ) with gr.Row(): with gr.Column(scale=80): with gr.Row(): - negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=True, lines=7, + negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=True, lines=5, placeholder="Negative prompt (press Ctrl+Enter or Alt+Enter to generate)" ) @@ -498,6 +498,7 @@ def create_ui(): with gr.Row().style(equal_height=False): txt2img_gallery, generation_info, html_info, html_log = create_output_panel("txt2img", opts.outdir_txt2img_samples) + #gr.Row(elem_id="handler") with gr.Column(variant='panel', elem_id="txt2img_settings"): @@ -516,7 +517,7 @@ def create_ui(): steps, sampler_index = create_sampler_and_steps_selection(samplers, "txt2img") elif category == "dimensions": - with FormRow(): + with gr.Row(): width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="txt2img_width") res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="txt2img_res_switch_btn") height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="txt2img_height") @@ -848,7 +849,7 @@ def create_ui(): steps, sampler_index = create_sampler_and_steps_selection(samplers_for_img2img, "img2img") elif category == "dimensions": - with FormRow(): + with gr.Row(): #with gr.Column(elem_id="img2img_column_size", scale=4): width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width") diff --git a/style.css b/style.css index 289ff8cb..f41384ea 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,27 @@ + + + + + +:root { + --main-bg-color: #1a1a1a; + +} + + +.livePreview > img, +#img2img_gallery .overflow-y-auto, +#txt2img_gallery .overflow-y-auto +{ + background: var(--main-bg-color); +} + + + + + + + .container { max-width: 100%; } @@ -1331,11 +1355,11 @@ label.bg-white { gap: .5em; } -.dark .gr-box-unrounded { +.gr-box-unrounded { background: 0 0; } -.dark .gr-text-input { +.gr-text-input { height: 32px !important; } @@ -1450,9 +1474,6 @@ div#script_list { margin-top: 1px; } -body { - background: #1a1a1a !important; -} .dark { background-color: #1a1a1a; @@ -1595,6 +1616,29 @@ body { background-color: #1a1a1a !important; } + +.dark .dark\:hover\:border-gray-600:hover { + border: 1px solid #03d0a8; + background-color: #1a1a1a; +} + +.dark .dark\:hover\:border-gray-600>div.cursor-pointer { + padding: 12px !important; + margin: -12px !important; + width: auto !important; +} + +.dark .dark\:hover\:border-gray-600:hover>div.cursor-pointer { + background: #03d0a8 !important; + color: #1a1a1a !important; + font-weight: 700 !important; +} + +.dark .dark\:hover\:border-gray-600>div.cursor-pointer+div { + margin-top: .8em !important; +} + + .tabs>div>button { border-bottom: 2px solid #494c50; } @@ -1702,9 +1746,7 @@ body { background-color: transparent !important; } -.livePreview > img{ - background-color: #1a1a1a !important; -} + #img2img_gallery div>div, #txt2img_gallery div>div { @@ -1713,8 +1755,7 @@ body { #img2img_gallery .overflow-y-auto, #txt2img_gallery .overflow-y-auto { - min-height: calc(100vh - 220px) !important; - background: #1a1a1a !important; + min-height: calc(100vh - 220px) !important; } #quicksettings { @@ -1745,6 +1786,7 @@ body { #img2img_settings, #txt2img_settings { min-width: min(680px, 100%) !important; + flex: 1 1 0%; } #img2img_settings_scroll, @@ -1758,7 +1800,7 @@ body { #img2img_results, #txt2img_results { overflow-x: hidden !important; - flex-grow: 2 !important; + /*flex-grow: 2 !important;*/ max-height: calc(100vh - 200px); overflow-y: auto !important; } @@ -1773,53 +1815,19 @@ input:focus { border-color: #03d0a8 !important; } -#img2img_settings::before, -#txt2img_settings::before { - pointer-events: none; - content: ""; - position: absolute; - z-index: 1000; - height: calc(100vh - 288px); - top: 88px; - left: 0; - bottom: 0; - width: 100%; - background: linear-gradient(0deg, rgb(26 26 26), transparent 2%, transparent 98%, rgb(26 26 26) 100%); -} -.dark .dark\:hover\:border-gray-600:hover { - border: 1px solid #03d0a8; - background-color: #1a1a1a; -} -.dark .dark\:hover\:border-gray-600>div.cursor-pointer { - padding: 12px !important; - margin: -12px !important; - width: auto !important; -} - -.dark .dark\:hover\:border-gray-600:hover>div.cursor-pointer { - background: #03d0a8 !important; - color: #1a1a1a !important; - font-weight: 700 !important; -} - -.dark .dark\:hover\:border-gray-600>div.cursor-pointer+div { - margin-top: .8em !important; -} - -.dark .gr-button { +.gr-button { border-radius: 0 !important; } -::-webkit-scrollbar { - width: 10px; +#img2img_neg_prompt label, #img2img_prompt label, #txt2img_neg_prompt label, #txt2img_prompt label { + border: 0; +} +#img2img_neg_prompt span, #img2img_prompt span, #txt2img_neg_prompt span, #txt2img_prompt span { + border-bottom: 0 !important; } -#img2img_settings_scroll::-webkit-scrollbar, -#txt2img_settings_scroll::-webkit-scrollbar { - width: 12px; -} @media only screen and (max-width: 1024px) { /* For tablets: */ @@ -1854,7 +1862,7 @@ input:focus { } .gap-4 { - gap: 2px; + gap: 2px !important; } .gr-box>div>div>input.gr-text-input { @@ -1875,12 +1883,94 @@ input:focus { border:none; } + + div.sub-group { + padding: 4px 3px 0; + margin-top: -3px; + } + + div.sub-group > div { + margin-bottom: 3px !important; + } + + /* accordion */ + .p-3 { + padding: 8px; + } + + .dark .dark\:hover\:border-gray-600>div.cursor-pointer { + padding: 8px !important; + margin: -8px !important; + } + + #img2img_settings_scroll, + #txt2img_settings_scroll { + padding-top: 0; + } + + .dark .gr-block, + .gr-form, + #txt2img_seed, + #img2img_seed, + #txt2img_subseed, + #img2img_subseed, + #txt2img_seed_row > div, + #img2img_seed_row > div, + #txt2img_subseed_row > div, + #img2img_subseed_row > div { + min-width:90px; + } + + + + #img2img_gallery, #txt2img_gallery { + margin-bottom: 0px; + } + + div.svelte-10ogue4>:not(.absolute) { + margin-bottom: 3px; + } + + + #img2img_tools, #txt2img_tools { + gap: 2px; + } + + .dark .dark\:hover\:border-gray-600>div.cursor-pointer+div { + margin-top: 4px !important; + } + } -/* Sliders Scrollbar */ +/* Scroll mask fader*/ + +#img2img_settings::before, +#txt2img_settings::before { + pointer-events: none; + content: ""; + position: absolute; + z-index: 1000; + height: calc(100vh - 288px); + top: 88px; + left: 0; + bottom: 0; + width: 100%; + background: linear-gradient(0deg, rgb(26 26 26), transparent 2%, transparent 98%, rgb(26 26 26) 100%); +} + +/* Sliders Scrollbars */ + +::-webkit-scrollbar { + width: 10px; +} + +#img2img_settings_scroll::-webkit-scrollbar, +#txt2img_settings_scroll::-webkit-scrollbar { + width: 12px; +} ::-webkit-scrollbar-track { box-shadow: inset 0 0 10px 10px #1a1a1a;