fix(search): improve search results layout

hello-nrfcloud · Feb 22, 2024 · b7a341d · b7a341d
1 parent 2c29804
commit b7a341d
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 21 deletions.
diff --git a/src/component/DeviceSidebar.tsx b/src/component/DeviceSidebar.tsx
@@ -13,7 +13,7 @@ export const DeviceSidebar = ({ device }: { device: Device }) => (
 				<Close size={20} />
 			</a>
 		</header>
-		<div style={{ padding: '1rem' }}>
+		<div style={{ margin: '0 1rem' }}>
 			<div class="boxed">
 				<p>Model: {device.model}</p>
 			</div>

diff --git a/src/component/Search.css b/src/component/Search.css
@@ -30,10 +30,10 @@ aside.search form button {
   border-width: 1px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
-  border-top-color: #d3d3d3;
-  border-left-color: #d3d3d3;
-  border-bottom-color: rgb(129, 129, 129);
-  border-right-color: rgb(129, 129, 129);
+  border-bottom-color: #d3d3d3;
+  border-right-color: #d3d3d3;
+  border-top-color: rgb(129, 129, 129);
+  border-left-color: rgb(129, 129, 129);
   background-color: rgb(184, 184, 184);
   height: 32px;
   padding: 0 0.5rem;
@@ -76,7 +76,7 @@ aside.search div.terms button svg {
 }
 
 aside.search section.results {
-  margin: 2rem 1rem 1rem 1rem;
+  margin: 1rem;
 }
 
 aside.search section.results header {
@@ -92,11 +92,11 @@ aside.search section.results .result {
 aside.search section.results .result .icon {
   width: 24px;
   margin-right: 0.5rem;
+  flex-shrink: 0;
 }
 
 aside.search section.results .result small {
   opacity: 0.75;
-  margin-left: 0.5rem;
 }
 
 aside.search section.results .result a {

diff --git a/src/component/Search.tsx b/src/component/Search.tsx
@@ -116,10 +116,13 @@ const SearchResult = ({ terms }: { terms: SearchTerm[] }) => {
 				{(device) => (
 					<span class="result">
 						<DeviceIcon class="icon" />
-						<a href={link(`/#id:${device.id}`)}>
-							<code>{device.id}</code>
-						</a>
-						<small>({device.model})</small>
+						<span>
+							<a href={link(`/#id:${device.id}`)}>
+								<code>{device.id}</code>
+							</a>
+							<br />
+							<small>{device.model}</small>
+						</span>
 					</span>
 				)}
 			</For>

diff --git a/src/component/Sidebar.css b/src/component/Sidebar.css
@@ -41,15 +41,11 @@ nav.sidebar .warning {
   color: var(--color-warning);
 }
 
-nav.sidebar .white {
-  background-color: white;
-}
-
 aside.sidebar {
   position: fixed;
   left: calc(var(--base-size-sidebar) - 1px);
   top: var(--base-size-sidebar);
-  border-top-right-radius: calc(var(--base-size-sidebar) / 2);
+  border-top-right-radius: calc(var(--base-size-sidebar) / 4);
   z-index: 2000;
 }
 

diff --git a/src/component/Sidebar.tsx b/src/component/Sidebar.tsx
@@ -40,7 +40,7 @@ export const SidebarContent = (props: ParentProps<{ class?: string }>) => (
 
 const SidebarNav = () => (
 	<nav class="sidebar">
-		<a href={link('/#')} class="button white">
+		<a href={link('/#')} class="button">
 			<img
 				src={link('/assets/logo.svg')}
 				class="logo"
@@ -79,12 +79,12 @@ const SearchButton = () => {
 				when={location().panel === 'search'}
 				fallback={
 					<a class="button" href={link('/#search')}>
-						<Search strokeWidth={2} size={32} />
+						<Search strokeWidth={2} />
 					</a>
 				}
 			>
 				<a class="button active" href={link('/#')}>
-					<Search strokeWidth={2} size={32} />
+					<Search strokeWidth={2} />
 				</a>
 			</Show>
 			<hr />
@@ -101,12 +101,12 @@ const WarningButton = () => {
 				when={location().panel === 'warning'}
 				fallback={
 					<a class="button warning" href={link('/#warning')}>
-						<Warning strokeWidth={2} size={32} />
+						<Warning strokeWidth={2} />
 					</a>
 				}
 			>
 				<a class="button warning active" href={link('/#')}>
-					<Warning strokeWidth={2} size={32} />
+					<Warning strokeWidth={2} />
 				</a>
 			</Show>
 			<hr />