k3y0708/RestRover
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 UI Improvements

Browse Source
This commit is contained in:
k3y0708
2023-10-12 18:49:01 +02:00
parent 3a15ef6a91
commit 4ee63a731a
4 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/routes/+layout.svelte
View File

@@ -58,6 +58,7 @@
left: 1rem; left: 1rem;
height: calc(100vh - 2rem); height: calc(100vh - 2rem);
width: calc(20vw - 1.5rem); width: calc(20vw - 1.5rem);
border-right: 1px solid #fff;
} }
nav input { nav input {

3
src/routes/request/+page.svelte
View File

@@ -14,6 +14,7 @@
$: headers = [{ key: 'User-Agent', value: 'RestRover/0.0.1' }]; $: headers = [{ key: 'User-Agent', value: 'RestRover/0.0.1' }];
$: body = ''; $: body = '';
$: response = null;
$: responseBody = ''; $: responseBody = '';
$: responseHeaders = {}; $: responseHeaders = {};
@@ -37,7 +38,7 @@
} }
</script> </script>
<h1>{id} - {name}</h1> <h1>{name}</h1>
<div> <div>
<input type="text" bind:value={method} /> <input type="text" bind:value={method} />
<input type="text" bind:value={requestUrl} /> <input type="text" bind:value={requestUrl} />

18
src/routes/request/Request.svelte
View File

@@ -62,10 +62,10 @@
padding: 20px; padding: 20px;
width: 100%; width: 100%;
border: 1px solid silver; border: 1px solid silver;
background: #fff; background: #323232;
line-height: 1.5em; line-height: 1.5em;
letter-spacing: 0.3px; letter-spacing: 0.3px;
color: #444; color: #fff;
} }
#tab-request-body:checked ~ figure .tab-request-body, #tab-request-body:checked ~ figure .tab-request-body,
@@ -79,24 +79,24 @@
padding: 15px 15px; padding: 15px 15px;
border-top: 1px solid silver; border-top: 1px solid silver;
border-right: 1px solid silver; border-right: 1px solid silver;
background: hsl(210, 50%, 50%); background: #323232;
color: #eee; color: #fff;
} }
nav label:nth-child(1) { nav label:nth-child(1) {
border-left: 1px solid silver; border-left: 1px solid #c0c0c0;
} }
nav label:hover { nav label:hover {
background: hsl(210, 50%, 40%); background: #252525;
} }
nav label:active { nav label:active {
background: #ffffff; background: #fff;
} }
#tab-request-body:checked ~ nav label[for='tab-request-body'], #tab-request-body:checked ~ nav label[for='tab-request-body'],
#tab-request-headers:checked ~ nav label[for='tab-request-headers'], #tab-request-headers:checked ~ nav label[for='tab-request-headers'],
#tab-request-unused:checked ~ nav label[for='tab-request-unused'] { #tab-request-unused:checked ~ nav label[for='tab-request-unused'] {
background: white; background: #fff;
color: #111; color: #111;
position: relative; position: relative;
border-bottom: none; border-bottom: none;
@@ -110,7 +110,7 @@
position: absolute; position: absolute;
height: 2px; height: 2px;
width: 100%; width: 100%;
background: white; background: #fff;
left: 0; left: 0;
bottom: -1px; bottom: -1px;
} }

18
src/routes/request/Response.svelte
View File

@@ -47,10 +47,10 @@
padding: 20px; padding: 20px;
width: 100%; width: 100%;
border: 1px solid silver; border: 1px solid silver;
background: #fff; background: #323232;
line-height: 1.5em; line-height: 1.5em;
letter-spacing: 0.3px; letter-spacing: 0.3px;
color: #444; color: #fff;
} }
#tab1:checked ~ figure .tab1, #tab1:checked ~ figure .tab1,
@@ -64,24 +64,24 @@
padding: 15px 15px; padding: 15px 15px;
border-top: 1px solid silver; border-top: 1px solid silver;
border-right: 1px solid silver; border-right: 1px solid silver;
background: hsl(210, 50%, 50%); background: #323232;
color: #eee; color: #fff;
} }
nav label:nth-child(1) { nav label:nth-child(1) {
border-left: 1px solid silver; border-left: 1px solid #c0c0c0;
} }
nav label:hover { nav label:hover {
background: hsl(210, 50%, 40%); background: #252525;
} }
nav label:active { nav label:active {
background: #ffffff; background: #fff;
} }
#tab1:checked ~ nav label[for='tab1'], #tab1:checked ~ nav label[for='tab1'],
#tab2:checked ~ nav label[for='tab2'], #tab2:checked ~ nav label[for='tab2'],
#tab3:checked ~ nav label[for='tab3'] { #tab3:checked ~ nav label[for='tab3'] {
background: white; background: #fff;
color: #111; color: #111;
position: relative; position: relative;
border-bottom: none; border-bottom: none;
@@ -95,7 +95,7 @@
position: absolute; position: absolute;
height: 2px; height: 2px;
width: 100%; width: 100%;
background: white; background: #fff;
left: 0; left: 0;
bottom: -1px; bottom: -1px;
} }