Better Random Story placement

This commit is contained in:
ebolam
2022-08-15 18:56:39 -04:00
parent 594789bdfa
commit 8cd14713f9
2 changed files with 29 additions and 14 deletions

View File

@@ -102,6 +102,8 @@
z-index: 2;
border-bottom-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
@@ -166,7 +168,7 @@
grid-template-areas: "label value"
"item item"
"minlabel maxlabel";
grid-template-rows: 20px 25px 10px;
grid-template-rows: 20px 25px 15px;
grid-template-columns: 160px 40px;
row-gap: 0.2em;
background-color: var(--setting_background);
@@ -190,12 +192,16 @@
.setting_minlabel {
grid-area: minlabel;
overflow: hidden;
padding: 5px;
padding-top: 0px;
font-size: 0.8em;
}
.setting_maxlabel {
grid-area: maxlabel;
overflow: hidden;
padding: 5px;
padding-top: 0px;
text-align: right;
font-size: 0.8em;
}
@@ -203,11 +209,15 @@
.setting_label {
grid-area: label;
overflow: hidden;
padding: 5px;
padding-top: 0px;
}
.setting_value {
text-align: right;
grid-area: value;
padding: 5px;
padding-top: 0px;
background-color: inherit;
color: inherit;
border: none;
@@ -319,7 +329,7 @@
height: 100%;
width: var(--flyout_menu_closed_width);
position: fixed;
z-index: 1;
z-index: 3;
top: 0;
left: 0;
background-color: var(--flyout_background);
@@ -332,7 +342,7 @@
height: 100%;
width: var(--flyout_menu_width);
position: fixed;
z-index: 1;
z-index: 2;
top: 0;
left: 0;
background-color: var(--flyout_background);
@@ -511,7 +521,7 @@
height: 100%;
width: 0;
position: fixed;
z-index: 1;
z-index: 3;
top: 0;
right: 0;
background-color: var(--flyout_background);

View File

@@ -45,20 +45,25 @@
<div id="Select Options" class="sequence_area"></div>
<!------------ Theme Area--------------------->
<div class="themerow" id="themerow">
<h4>If you want to generate a random prompt, insert a theme here:</h4>
<input type="text" autocomplete="off" style="width: 100%;" id="themetext" placeholder="Theme for Random Story" oninput='if (this.value != "") {
document.getElementById("input_text").disabled = true;
} else {
document.getElementById("input_text").disabled = false;
}'/>
<h4>If you want to write your prompt, insert it here:</h4>
<div class="tabrow nomenu_icon">
<span class="prompt_menu selected" id="prompt_menu_random" onclick="this.classList.add('selected');
document.getElementById('prompt_menu_normal').classList.remove('selected');
document.getElementById('random_game_prompt').classList.add('hidden');
document.getElementById('input_text').classList.remove('hidden');">Prompt</span>
<span class="prompt_menu" id="prompt_menu_normal" onclick="this.classList.add('selected');
document.getElementById('prompt_menu_random').classList.remove('selected');
document.getElementById('random_game_prompt').classList.remove('hidden');
document.getElementById('input_text').classList.add('hidden');">Random Prompt</span>
</div>
</div>
<!------------ Input Area--------------------->
<div class="inputrow" id="inputrow_container">
<div id="random_game_prompt" class="hidden">
<input type="text" autocomplete="off" style="width: 100%;" id="themetext" placeholder="Theme for Random Story" oninput='if (this.value != "") {
document.getElementById("input_text").value = "";'/>
</div>
<textarea autocomplete="off" row=5 id="input_text" placeholder="Enter Prompt Here" oninput='if (this.value != "") {
document.getElementById("themetext").disabled = true;
} else {
document.getElementById("themetext").disabled = false;
document.getElementById("themetext").value = "";
}'></textarea>
<div class="statusbar_outer hidden">
<div class="statusbar_inner" style="width:0%">0%</div>