sundog
/
ffmpeg-explorer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

small copy edits and marginal mobile improvements

This commit is contained in:
Sam Lavigne 2023-08-30 23:29:54 -04:00
parent 5093c49b11
commit 7fca16d0fa
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.svelte
View File

@ -133,13 +133,13 @@
</p> </p>
<ol> <ol>
<li>Add filters from the list on the left.</li> <li>Add filters from the list on the left.</li>
<li>Click on filters in the center panel to edit options.</li> <li>Click on filters in the node editor to modify options.</li>
<li>Hit "render" to preview the output in browser.</li> <li>Hit "render" to preview the output in browser.</li>
<li>To edit the graph, disable "automatic layout."</li> <li>To edit the graph, disable "lock layout."</li>
</ol> </ol>
<p> <p>
Note: this is a work in progress, many things may still be broken! If it hangs/crashes Note: work in progress, many things may be broken! Refresh if it hangs or crashes. May not work on mobile. Post
refresh the page. Post issues/feedback to issues/feedback to
<a href="https://github.com/antiboredom/ffmpeg-explorer/" target="_blank">GitHub</a>. By <a href="https://github.com/antiboredom/ffmpeg-explorer/" target="_blank">GitHub</a>. By
<a href="https://lav.io" target="_blank">Sam Lavigne</a>. <a href="https://lav.io" target="_blank">Sam Lavigne</a>.
</p> </p>
@ -226,8 +226,7 @@
bind:this={fileinput} bind:this={fileinput}
style="display: none;" style="display: none;"
/> />
<label for="auto" <label for="auto"><input id="auto" type="checkbox" bind:checked={$auto} />Lock Layout</label
><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label
> >
</div> </div>
<Graph {fetchFile} ffmepg={ffmpeg} /> <Graph {fetchFile} ffmepg={ffmpeg} />
@ -268,6 +267,8 @@
.header { .header {
grid-area: hdr; grid-area: hdr;
overflow: scroll; overflow: scroll;
display: flex;
flex-direction: column;
} }
.command { .command {
@ -371,12 +372,12 @@
box-shadow: none; box-shadow: none;
resize: none; resize: none;
height: auto; height: auto;
font: inherit;
} }
.actual-command { .actual-command {
border: none; border: none;
flex: 1; flex: 1;
font: inherit;
padding: 5px; padding: 5px;
height: 100%; height: 100%;
} }
@ -404,6 +405,8 @@
.help { .help {
font-size: 0.9em; font-size: 0.9em;
flex: 1;
overflow: scroll;
} }
ol { ol {
margin: 5px 0px; margin: 5px 0px;
@ -431,19 +434,22 @@
"flt flt flt" "flt flt flt"
"gra gra gra" "gra gra gra"
"edt edt edt"; "edt edt edt";
grid-gap: 5px; grid-gap: 0;
padding: 10px; padding: 10px;
height: auto; height: auto;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto; grid-template-rows: fit-content;
} }
.graph { .graph {
height: 50vh; height: 60vh;
} }
.command { .command {
margin: 0; margin: 0;
margin-bottom: 10px; margin-bottom: 10px;
} }
.command, .log {
height: 15vh;
}
section { section {
box-shadow: none; box-shadow: none;
margin-bottom: 10px; margin-bottom: 10px;