romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 21:17:59 +00:00
Code Issues Releases Activity

CSS tweaks for shell

Browse Source
This commit is contained in:
Romein van Buren 2023-06-24 11:05:02 +02:00
parent 51897adf8d
commit 3893c8dd06
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/organisms/connection/collection/index.svelte
View File

@ -43,7 +43,8 @@
<div class="view" class:empty={!collection}> <div class="view" class:empty={!collection}>
{#if collection} {#if collection}
{#key collection} {#key collection}
<TabBar tabs={[ <TabBar
tabs={[
{ key: 'stats', icon: 'chart', title: 'Stats' }, { key: 'stats', icon: 'chart', title: 'Stats' },
{ key: 'find', icon: 'db', title: 'Find' }, { key: 'find', icon: 'db', title: 'Find' },
{ key: 'insert', icon: '+', title: 'Insert' }, { key: 'insert', icon: '+', title: 'Insert' },
@ -53,7 +54,8 @@
{ key: 'aggregate', icon: 're', title: 'Aggregate' }, { key: 'aggregate', icon: 're', title: 'Aggregate' },
{ key: 'shell', icon: 'shell', title: 'Shell' }, { key: 'shell', icon: 'shell', title: 'Shell' },
]} ]}
bind:selectedKey={tab} /> bind:selectedKey={tab}
/>
<div class="container"> <div class="container">
{#if tab === 'stats'} <Stats {collection} /> {#if tab === 'stats'} <Stats {collection} />

22
frontend/src/organisms/connection/collection/shell.svelte
View File

@ -30,11 +30,12 @@
</script> </script>
<div class="shell"> <div class="shell">
<div class="panels"> <div class="overflow">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="field"> <label class="field">
<CodeEditor bind:text={script} {extensions} /> <CodeEditor bind:text={script} {extensions} />
</label> </label>
</div>
<div class="output"> <div class="output">
{#if busy} {#if busy}
@ -49,7 +50,6 @@
<pre>{result.output || ''}</pre> <pre>{result.output || ''}</pre>
{/if} {/if}
</div> </div>
</div>
<div class="controls"> <div class="controls">
{#key result} {#key result}
@ -69,18 +69,16 @@
<style> <style>
.shell { .shell {
display: grid; display: grid;
grid-template: 1fr auto / 1fr; grid-template: 1fr auto / 1fr 1fr;
} }
.panels { .overflow {
display: flex; overflow: auto;
}
.field {
height: 100%; height: 100%;
} }
.panels > * {
flex: 1 1 0;
width: 100%;
}
.field :global(.editor) { .field :global(.editor) {
border-radius: 0; border-radius: 0;
} }
@ -97,6 +95,9 @@
.output pre { .output pre {
font-family: monospace; font-family: monospace;
padding: 0.5rem; padding: 0.5rem;
user-select: text;
-webkit-user-select: text;
cursor: text;
} }
.output :global(.blankstate) { .output :global(.blankstate) {
margin: auto; margin: auto;
@ -107,6 +108,7 @@
margin-top: 0.5rem; margin-top: 0.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
grid-column: 1 / 3;
} }
.controls .status { .controls .status {
margin-right: auto; margin-right: auto;