brianr/MojoTemplateFormatter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Centre left hand textarea, merge top controls for output textarea

Browse Source
This commit is contained in:
Brian Read
2025-08-11 18:13:07 +01:00
parent dd90e45410
commit 471075ee30
1 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
website.py
View File

@@ -404,7 +404,8 @@ HTML_TEMPLATE = """
/* Remove outline/extra vertical space browsers add */ /* Remove outline/extra vertical space browsers add */
vertical-align: middle; vertical-align: middle;
} }
button {background:#a950e6; border:none; color:#fff; border-radius:5px; button {background:#a950e6; border:none; color:#fff; border-radius:5px;
padding:9px 16px; font-size:15px; cursor:pointer; box-shadow:0 2px 7px -3px #bb76c1;} padding:9px 16px; font-size:15px; cursor:pointer; box-shadow:0 2px 7px -3px #bb76c1;}
@@ -413,7 +414,7 @@ HTML_TEMPLATE = """
input[type="file"] {margin-bottom:10px;} input[type="file"] {margin-bottom:10px;}
textarea {width:100%; flex:1 1 auto; min-height:30px; max-height:60vh; font-family:'Fira Mono', monospace; textarea {width:100%; flex:1 1 auto; min-height:30px; max-height:60vh; font-family:'Fira Mono', monospace;
font-size:15px; border:2px solid #bdb0da; background:#f6eafe; font-size:15px; border:2px solid #bdb0da; background:#f6eafe;
border-radius:7px; padding:8px; color:#432d67; resize:vertical; transition:height .2s;} border-radius:7px; color:#432d67; resize:vertical; transition:height .2s; margin-left:auto;margin-right:auto;}
select {padding:6px 10px; border-radius:5px; border:1px solid #b993d6; select {padding:6px 10px; border-radius:5px; border:1px solid #b993d6;
background:#eee0f6; color:#6d378d; font-size:15px;} background:#eee0f6; color:#6d378d; font-size:15px;}
#output_block {background:#16151a !important; color:white !important; border-radius:8px; padding:1em; #output_block {background:#16151a !important; color:white !important; border-radius:8px; padding:1em;
@@ -421,6 +422,19 @@ HTML_TEMPLATE = """
border:2px solid #bdb0da; flex:1 1 auto; min-height:0;} border:2px solid #bdb0da; flex:1 1 auto; min-height:0;}
@media (max-width:800px) {.container {flex-direction:column; height:auto;} @media (max-width:800px) {.container {flex-direction:column; height:auto;}
.panel {height:auto; min-width:0;}} .panel {height:auto; min-width:0;}}
.output-header {
margin-top: 8px;
display: flex;
justify-content: space-between; /* Push left and right sections apart */
align-items: center; /* Vertically align */
}
.syntax-select {
display: flex;
align-items: center;
gap: 6px; /* Space between label and dropdown */
}
</style> </style>
<link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.min.css" <link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.min.css"
rel="stylesheet" rel="stylesheet"
@@ -496,15 +510,17 @@ HTML_TEMPLATE = """
</label> </label>
</div> </div>
<div class="panel"> <div class="panel">
<label>Formatted Output:</label> <div class="output-header">
<div style="margin-top:8px;"> <label>Formatted Output:</label>
<label for="syntaxmode">Output Syntax:</label> <div class="syntax-select">
<select id="syntaxmode" name="syntaxmode"> <label for="syntaxmode">Output Syntax:</label>
<option value="none">Plain Text</option> <select id="syntaxmode" name="syntaxmode">
<option value="perl">Perl</option> <option value="none">Plain Text</option>
<option value="html">HTML</option> <option value="perl">Perl</option>
</select> <option value="html">HTML</option>
</div> </select>
</div>
</div>
<pre id="output_block"><code id="output_code" class="language-none"></code></pre> <pre id="output_block"><code id="output_code" class="language-none"></code></pre>
</div> </div>
</div> </div>