Fix styling on mobile devices

This commit is contained in:
cmdr2 2023-08-23 12:11:06 +05:30
parent f387b9f464
commit 04274f5839
4 changed files with 75 additions and 5 deletions

View File

@ -17,6 +17,7 @@
- **Major rewrite of the code** - We've switched to using diffusers under-the-hood, which allows us to release new features faster, and focus on making the UI and installer even easier to use.
### Detailed changelog
* 3.0.2 - 23 Aug 2023 - Fix styling on mobile devices.
* 3.0.2 - 22 Aug 2023 - Full support for inpainting models, including custom models. Support SD 1.x and SD 2.x inpainting models. Does not require you to specify a yaml config file.
* 3.0.2 - 22 Aug 2023 - Reduce VRAM consumption of controlnet in 'low' VRAM mode, and allow accelerating controlnets using xformers.
* 3.0.2 - 22 Aug 2023 - Improve auto-detection of SD 2.0 and 2.1 models, removing the need for custom yaml files for SD 2.x models. Improve the model load time by speeding-up the black image test.

View File

@ -157,9 +157,9 @@
<tr><b class="settings-subheader">Image Settings</b></tr>
<tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="0" onkeypress="preventNonNumericalInput(event)"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr>
<tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td>
<td><input id="num_outputs_total" name="num_outputs_total" value="1" type="number" value="1" min="1" step="1" style="width:42pt;" onkeypres"="preventNonNumericalInput(event)">
<td><input id="num_outputs_total" name="num_outputs_total" value="1" type="number" value="1" min="1" step="1" onkeypres"="preventNonNumericalInput(event)">
<label><small>(total)</small></label>
<input id="num_outputs_parallel" name="num_outputs_parallel" value="1" type="number" value="1" min="1" step="1" style="width:42pt;" onkeypress="preventNonNumericalInput(event)">
<input id="num_outputs_parallel" name="num_outputs_parallel" value="1" type="number" value="1" min="1" step="1" onkeypress="preventNonNumericalInput(event)">
<label id="num_outputs_parallel_label" for="num_outputs_parallel"><small>(in parallel)</small></label></td>
</tr>
<tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td class="model-input">
@ -290,7 +290,7 @@
<option value="1792">1792</option>
<option value="2048">2048</option>
</select>
<label for="width"><small>(width)</small></label>
<label id="widthLabel" for="width"><small><span>(width)</span></small></label>
<span id="swap-width-height" class="clickable smallButton" style="margin-left: 2px; margin-right:2px;"><i class="fa-solid fa-right-left"><span class="simple-tooltip top-left"> Swap width and height </span></i></span>
<select id="height" name="height" value="512">
<option value="128">128</option>
@ -313,7 +313,7 @@
<option value="1792">1792</option>
<option value="2048">2048</option>
</select>
<label for="height"><small>(height)</small></label>
<label id="heightLabel" for="height"><small><span>(height)</span></small></label>
<div id="recent-resolutions-container">
<span id="recent-resolutions-button" class="clickable"><i class="fa-solid fa-sliders"><span class="simple-tooltip top-left"> Advanced sizes </span></i></span>
<div id="recent-resolutions-popup" class="displayNone">

View File

@ -1940,8 +1940,77 @@ div#enlarge-buttons {
margin: 12px 10px;
}
#num_outputs_total {
width: 42pt;
}
#num_outputs_parallel {
width: 42pt;
}
.model_entry .model_weight {
width: 50pt;
}
/* hack for fixing Image Modifier Improvements plugin */
#imageTagPopupContainer {
position: absolute;
}
@media screen and (max-width: 400px) {
.editor-slider {
width: 40%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
/* Firefox */
}
#num_outputs_total {
width: 27pt;
}
#num_outputs_parallel {
width: 27pt;
margin-left: -4pt;
}
.model_entry .model_weight {
width: 30pt;
}
#width {
width: 50pt;
}
#height {
width: 50pt;
}
}
@media screen and (max-width: 460px) {
#widthLabel small span {
display: none;
}
#widthLabel small:after {
content: "(w)";
}
#heightLabel small span {
display: none;
}
#heightLabel small:after {
content: "(h)";
}
#prompt-toolbar-right {
text-align: right;
}
#editor-settings label {
font-size: 9pt;
}
#editor-settings .model-filter {
width: 56%;
}
#vae_model {
width: 65% !important;
}
.model_entry .model_name {
width: 60% !important;
}
}

View File

@ -137,7 +137,7 @@ class MultiModelSelector {
modelElement.className = "model_entry"
modelElement.innerHTML = `
<input id="${this.modelType}_${idx}" class="model_name model-filter" type="text" spellcheck="false" autocomplete="off" data-path="" />
<input class="model_weight" type="number" step="${this.weightStep}" style="width: 50pt" value="${this.defaultWeight}" pattern="^-?[0-9]*\.?[0-9]*$" onkeypress="preventNonNumericalInput(event)">
<input class="model_weight" type="number" step="${this.weightStep}" value="${this.defaultWeight}" pattern="^-?[0-9]*\.?[0-9]*$" onkeypress="preventNonNumericalInput(event)">
`
this.modelContainer.appendChild(modelElement)