Skip to content

Commit c737da9

Browse files
jozsefsallaijozsefsallai
authored
Merge pull request #75 from jozsefsallai/fix/a11y-issues
fix: the a11y issues
2 parents f7b5a14 + 886555f commit c737da9

File tree

4 files changed

+261
-235
lines changed

4 files changed

+261
-235
lines changed

‎src/App.svelte

Lines changed: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
2-
import Sidebar from "./components/Sidebar.svelte";
3-
import Content from "./components/Content.svelte";
4-
import applyEnvForObject from "./lib/applyEnvForObject";
2+
import Sidebar from './components/Sidebar.svelte';
3+
import Content from './components/Content.svelte';
4+
import applyEnvForObject from './lib/applyEnvForObject';
55
66
export let config;
77
@@ -30,8 +30,65 @@
3030
}
3131
</script>
3232

33+
<svelte:head>
34+
<title>{config.workspace.name}</title>
35+
</svelte:head>
36+
37+
<header style="border-top: 6px solid {color !== null ? color : '#6a57d5'};">
38+
<div class="header-left">
39+
<span class="hamburger-toggler" on:click={toggleHamburger}>
40+
<i class="fa fa-bars" aria-hidden="true" />
41+
</span>
42+
43+
<div class="logo">
44+
<img src="logo.png" alt={config.workspace.name} />
45+
</div>
46+
47+
<h1 class="title">{config.workspace.name}</h1>
48+
</div>
49+
<div class="header-right">
50+
<div class="run">
51+
<a href={runInInsomniaLink} target="_blank">
52+
<img src="https://insomnia.rest/images/run.svg" alt="Run in Insomnia" />
53+
</a>
54+
</div>
55+
<div class="environment">
56+
<label for="env" style="display:inline-block;">Environment:</label>
57+
<select id="env" bind:value={envId}>
58+
{#each config.environments as environment, idx}
59+
<option value={idx}>{environment.name}</option>
60+
{/each}
61+
</select>
62+
</div>
63+
<span
64+
class="example-toggler"
65+
class:inactive={!exampleVisible}
66+
on:click={toggleExample}
67+
title="Toggle request examples"
68+
>
69+
<i class="fa fa-code" aria-hidden="true" />
70+
</span>
71+
</div>
72+
</header>
73+
74+
<section class="wrapper" class:hide-right={!exampleVisible}>
75+
<Sidebar
76+
{requests}
77+
{groups}
78+
workspace={config.workspace}
79+
visible={menuVisible}
80+
/>
81+
<Content
82+
{requests}
83+
{groups}
84+
workspace={config.workspace}
85+
cookiejars={config.cookiejars}
86+
{env}
87+
/>
88+
</section>
89+
3390
<style type="scss" global>
34-
@import "./styles/main";
91+
@import './styles/main';
3592
3693
header {
3794
box-sizing: border-box;
@@ -68,6 +125,7 @@
68125
vertical-align: middle;
69126
font-size: 22px;
70127
color: #000;
128+
cursor: pointer;
71129
}
72130
73131
header .logo {
@@ -100,62 +158,11 @@
100158
vertical-align: middle;
101159
}
102160
161+
.example-toggler {
162+
cursor: pointer;
163+
}
164+
103165
.wrapper {
104166
margin-top: 60px;
105167
}
106168
</style>
107-
108-
<svelte:head>
109-
<title>{config.workspace.name}</title>
110-
</svelte:head>
111-
112-
<header style="border-top: 6px solid {color !== null ? color : '#6a57d5'};">
113-
<div class="header-left">
114-
<a href="javascript:" class="hamburger-toggler" on:click={toggleHamburger}>
115-
<i class="fa fa-bars" aria-hidden="true"></i>
116-
</a>
117-
118-
<div class="logo">
119-
<img src="logo.png" alt={config.workspace.name} />
120-
</div>
121-
122-
<h1 class="title">{config.workspace.name}</h1>
123-
</div>
124-
<div class="header-right">
125-
<div class="run">
126-
<a href={runInInsomniaLink} target="_blank">
127-
<img src="https://insomnia.rest/images/run.svg" alt="Run in Insomnia" />
128-
</a>
129-
</div>
130-
<div class="environment">
131-
<label for="env" style="display:inline-block;">Environment:</label>
132-
<select id="env" bind:value={envId}>
133-
{#each config.environments as environment, idx}
134-
<option value={idx}>{environment.name}</option>
135-
{/each}
136-
</select>
137-
</div>
138-
<a
139-
href="javascript:;"
140-
class="example-toggler"
141-
class:inactive={!exampleVisible}
142-
on:click={toggleExample}
143-
title="Toggle request examples">
144-
<i class="fa fa-code" aria-hidden="true"></i>
145-
</a>
146-
</div>
147-
</header>
148-
149-
<section class="wrapper" class:hide-right={!exampleVisible}>
150-
<Sidebar
151-
{requests}
152-
{groups}
153-
workspace={config.workspace}
154-
visible={menuVisible} />
155-
<Content
156-
{requests}
157-
{groups}
158-
workspace={config.workspace}
159-
cookiejars={config.cookiejars}
160-
{env} />
161-
</section>

‎src/components/content/Group.svelte

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,28 @@
22
import applyEnv from '../../lib/applyEnv';
33
44
import showdown from 'showdown';
5+
56
const markdown = new showdown.Converter({
67
simplifiedAutoLink: true,
78
openLinksInNewWindow: true,
89
excludeTrailingPunctuationFromURLs: true,
9-
tables: true
10+
tables: true,
1011
});
1112
1213
export let group;
1314
export let env;
1415
1516
$: groupData = {
1617
name: applyEnv(group.name, env),
17-
description: applyEnv(group.description, env)
18+
description: applyEnv(group.description, env),
1819
};
1920
2021
// The Insomnia JSON file seems to have a description field here, but I couldn't find
2122
// any way to change the description of the groups in Insomnia itself.
2223
// The declaration will stay here anyway in case there will be better support for
2324
// this added later on in Insomnia.
24-
$: description = groupData.description && markdown.makeHtml(groupData.description);
25+
$: description =
26+
groupData.description && markdown.makeHtml(groupData.description);
2527
</script>
2628

2729
<div class="row">
@@ -34,5 +36,5 @@
3436

3537
<hr />
3638
</div>
37-
<div class="right"></div>
39+
<div class="right" />
3840
</div>

0 commit comments

Comments
 (0)