Skip to content

Commit 6b4f509

Browse files
RubenHalmanRubenHalman
committed
final styling
1 parent c5d40b0 commit 6b4f509

File tree

2 files changed

+111
-73
lines changed

2 files changed

+111
-73
lines changed

‎webviews/components/Navigation.svelte‎

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
function onSearch(e) {
2222
tsvscode.postMessage({ type: "searchFlowName", value: e.target.value });
2323
}
24-
function onSecondarySearch(e) {
24+
25+
function onSecondarySearch(e) {
2526
tsvscode.postMessage({ type: "searchAttributes", value: e.target.value });
2627
}
2728
</script>
@@ -38,21 +39,18 @@
3839
</div>
3940
{/if}
4041

41-
<!-- Search Bar (in-line, smaller) -->
42-
<div class="search-container">
42+
<div class="search-group">
4343
<input
4444
type="search"
4545
placeholder="Search flow name..."
4646
on:input={onSearch}
47-
class="flow-search-input"
47+
class="search-input primary"
4848
/>
49-
</div>
50-
<div class="search-container">
5149
<input
5250
type="search"
5351
placeholder="Search attributes..."
5452
on:input={onSecondarySearch}
55-
class="flow-search-input"
53+
class="search-input secondary"
5654
/>
5755
</div>
5856

@@ -75,36 +73,50 @@
7573
gap: 12px;
7674
}
7775
78-
.search-container {
76+
.search-group {
7977
flex: 1;
8078
display: flex;
79+
gap: 12px;
8180
justify-content: center;
81+
min-width: 0; /* Allow shrinking */
8282
}
8383
84-
.flow-search-input {
85-
width: 100%;
86-
max-width: 240px;
87-
height: 28px; /* Smaller height */
88-
padding: 4px 10px;
84+
.search-input {
85+
height: 32px;
86+
padding: 6px 14px;
8987
border: none;
90-
border-radius: 14px;
88+
border-radius: 16px;
9189
background: rgba(255, 255, 255, 0.95);
9290
font-size: 13px;
9391
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
9492
outline: none;
9593
transition: all 0.2s;
94+
min-width: 140px;
9695
}
9796
98-
.flow-search-input:focus {
97+
.search-input:focus {
9998
box-shadow: 0 0 0 2px #2765ae;
10099
background: white;
101100
}
102101
103-
.flow-search-input::placeholder {
102+
.search-input::placeholder {
104103
color: #999;
105104
font-style: italic;
106105
}
107106
107+
/* Primary (flow name) takes more space */
108+
.search-input.primary {
109+
flex: 1.2;
110+
max-width: 300px;
111+
}
112+
113+
/* Secondary (attributes) */
114+
.search-input.secondary {
115+
flex: 1;
116+
max-width: 260px;
117+
}
118+
119+
/* Buttons */
108120
button {
109121
background: #2765ae;
110122
color: white;
@@ -129,4 +141,26 @@
129141
display: flex;
130142
align-items: center;
131143
}
144+
145+
/* Responsive: stack on very small screens */
146+
@media (max-width: 700px) {
147+
.nav-menu {
148+
flex-wrap: wrap;
149+
height: auto;
150+
padding: 8px;
151+
gap: 8px;
152+
}
153+
.search-group {
154+
order: 3;
155+
width: 100%;
156+
flex-direction: column;
157+
}
158+
.search-input {
159+
max-width: none;
160+
}
161+
.nav-button-left,
162+
.nav-button-right {
163+
flex: 1;
164+
}
165+
}
132166
</style>

‎webviews/components/Sidebar.svelte‎

Lines changed: 61 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,68 @@
1-
<script>
2-
import TailwindWrapper from './commons/TailwindWrapper.svelte';
3-
import Banner from './Banner.svelte'
1+
<script>
2+
import TailwindWrapper from "./commons/TailwindWrapper.svelte";
3+
import Banner from "./Banner.svelte";
44
5-
function openDocumentation() {
6-
tsvscode.postMessage({
7-
type: "openDocumentation"
8-
});
9-
}
5+
function openDocumentation() {
6+
tsvscode.postMessage({
7+
type: "openDocumentation",
8+
});
9+
}
1010
11-
function configRules() {
12-
tsvscode.postMessage({
13-
type: "configRules"
14-
});
15-
}
11+
function configRules() {
12+
tsvscode.postMessage({
13+
type: "configRules",
14+
});
15+
}
1616
17-
function scanFlows() {
18-
tsvscode.postMessage({
19-
type: "scanFlows"
20-
});
21-
}
17+
function scanFlows() {
18+
tsvscode.postMessage({
19+
type: "scanFlows",
20+
});
21+
}
2222
23-
function fixFlows() {
24-
tsvscode.postMessage({
25-
type: "fixFlows"
26-
});
27-
}
23+
function fixFlows() {
24+
tsvscode.postMessage({
25+
type: "fixFlows",
26+
});
27+
}
28+
</script>
2829

29-
</script>
30-
<TailwindWrapper>
31-
<div class="sb">
32-
<Banner/>
33-
<nav aria-label="Sidebar">
34-
<button class="btn btn-blue" on:click={configRules}>
35-
Configure Rules
36-
</button>
37-
<button class="btn btn-blue" on:click={scanFlows}>
38-
Scan Flows
39-
</button>
40-
<button class="btn btn-blue" on:click={fixFlows}>
41-
Fix Flows
42-
</button>
43-
<button class="btn btn-blue" on:click={openDocumentation}>
44-
Documentation
45-
</button>
46-
</nav>
47-
</div>
48-
</TailwindWrapper>
49-
<style>
30+
<TailwindWrapper>
31+
<div class="sb">
32+
<Banner />
5033

51-
.sb{
52-
@apply flex flex-col;
53-
}
34+
<nav aria-label="Sidebar" class="flex flex-col gap-3">
35+
<button class="btn btn-blue" on:click={configRules}>Configure Rules</button>
36+
<button class="btn btn-blue" on:click={scanFlows}>Scan Flows</button>
37+
<button class="btn btn-blue" on:click={fixFlows}>Fix Flows</button>
38+
<button class="btn btn-blue" on:click={openDocumentation}>Documentation</button>
39+
</nav>
5440

55-
.btn {
56-
@apply font-bold py-2 my-2 px-4 rounded;
57-
}
58-
.btn-blue {
59-
@apply bg-blue-500 text-white;
60-
}
61-
.btn-blue:hover {
62-
@apply bg-blue-700;
63-
}
64-
</style>
41+
<p class="mt-6 text-center text-sm text-gray-600">
42+
Since 2021, built by the community.
43+
<a
44+
href="https://github.com/Flow-Scanner/lightning-flow-scanner-core?tab=contributing-ov-file"
45+
target="_blank"
46+
class="text-blue-600 font-medium hover:underline"
47+
>
48+
Join us.
49+
</a>
50+
</p>
51+
</div>
52+
</TailwindWrapper>
53+
54+
<style>
55+
.btn-blue {
56+
@apply bg-blue-600 text-white font-medium py-2 px-4 rounded-md hover:bg-blue-700 transition;
57+
}
58+
.sb {
59+
@apply flex flex-col;
60+
}
61+
62+
.btn {
63+
@apply font-bold py-2 my-2 px-4 rounded;
64+
}
65+
.btn-blue:hover {
66+
@apply bg-blue-700;
67+
}
68+
</style>

0 commit comments

Comments
 (0)