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

more mobile styles

This commit is contained in:
Sam Lavigne 2023-08-30 23:56:24 -04:00
parent 7fca16d0fa
commit e7e7074a05
1 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/App.svelte
View File

@ -138,8 +138,8 @@
<li>To edit the graph, disable "lock layout."</li> <li>To edit the graph, disable "lock layout."</li>
</ol> </ol>
<p> <p>
Note: work in progress, many things may be broken! Refresh if it hangs or crashes. May not work on mobile. Post Note: work in progress, many things may be broken! Refresh if it hangs or crashes. May not
issues/feedback to work on mobile. Post 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>
@ -267,8 +267,8 @@
.header { .header {
grid-area: hdr; grid-area: hdr;
overflow: scroll; overflow: scroll;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.command { .command {
@ -405,8 +405,8 @@
.help { .help {
font-size: 0.9em; font-size: 0.9em;
flex: 1; flex: 1;
overflow: scroll; overflow: scroll;
} }
ol { ol {
margin: 5px 0px; margin: 5px 0px;
@ -421,10 +421,28 @@
flex: 1; flex: 1;
} }
@media only screen and (max-width: 1400px) { @media only screen and (max-width: 1100px) {
main {
grid-template-columns: 250px 1fr 1fr 1fr 1fr 300px;
grid-template-rows: 40px 15% 15% calc(35% - 25px) calc(35% - 40px);
grid-template-areas:
"hdr hdr hdr hdr hdr hdr"
"log log log log prv prv"
"cmd cmd cmd cmd prv prv"
"flt gra gra gra gra gra"
"edt gra gra gra gra gra";
grid-gap: 7px;
}
.header {
overflow: hidden;
}
section {
padding: 7px;
box-shadow: 3px 3px 0px var(--b2);
}
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 700px) {
main { main {
grid-template-areas: grid-template-areas:
"hdr hdr hdr" "hdr hdr hdr"
@ -438,7 +456,11 @@
padding: 10px; padding: 10px;
height: auto; height: auto;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: fit-content; grid-template-rows: auto;
}
.header {
overflow: scroll;
height: auto;
} }
.graph { .graph {
height: 60vh; height: 60vh;
@ -447,9 +469,10 @@
margin: 0; margin: 0;
margin-bottom: 10px; margin-bottom: 10px;
} }
.command, .log { .command,
height: 15vh; .log {
} height: 15vh;
}
section { section {
box-shadow: none; box-shadow: none;
margin-bottom: 10px; margin-bottom: 10px;