Improve search results layout/styling

This commit is contained in:
2026-01-27 08:48:48 +07:00
parent 254e177cbf
commit e8af959be6
3 changed files with 16 additions and 9 deletions

View File

@@ -17,6 +17,7 @@ import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
import phone from 'feather-icons/dist/icons/phone.svg?raw'; import phone from 'feather-icons/dist/icons/phone.svg?raw';
import server from 'feather-icons/dist/icons/server.svg?raw'; import server from 'feather-icons/dist/icons/server.svg?raw';
import settings from 'feather-icons/dist/icons/settings.svg?raw'; import settings from 'feather-icons/dist/icons/settings.svg?raw';
import target from 'feather-icons/dist/icons/target.svg?raw';
import user from 'feather-icons/dist/icons/user.svg?raw'; import user from 'feather-icons/dist/icons/user.svg?raw';
import x from 'feather-icons/dist/icons/x.svg?raw'; import x from 'feather-icons/dist/icons/x.svg?raw';
import zap from 'feather-icons/dist/icons/zap.svg?raw'; import zap from 'feather-icons/dist/icons/zap.svg?raw';
@@ -38,6 +39,7 @@ const ICONS = {
phone, phone,
server, server,
settings, settings,
target,
user, user,
x, x,
zap, zap,

View File

@@ -148,7 +148,7 @@ export default class PlacesSidebar extends Component {
{{on "click" this.clearSelection}} {{on "click" this.clearSelection}}
><Icon @name="arrow-left" @size={{20}} @color="#333" /></button> ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
{{else}} {{else}}
<h2>Nearby Places</h2> <h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</h2>
{{/if}} {{/if}}
<button type="button" class="close-btn" {{on "click" @onClose}}><Icon <button type="button" class="close-btn" {{on "click" @onClose}}><Icon
@name="x" @name="x"

View File

@@ -226,6 +226,9 @@ body {
.sidebar-header h2 { .sidebar-header h2 {
margin: 0; margin: 0;
font-size: 1.2rem; font-size: 1.2rem;
display: flex;
align-items: center;
gap: 0.5rem;
} }
.sidebar-content { .sidebar-content {
@@ -365,29 +368,31 @@ body {
.places-list { .places-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: -1rem;
} }
.places-list li { .places-list li {
margin-bottom: 0.5rem;
} }
.place-item { .place-item {
width: 100%; width: 100%;
text-align: left; text-align: left;
background: #f8f9fa; border: none;
border: 1px solid #ddd; border-bottom: 1px solid #eee;
padding: 0.75rem; background: #fff;
border-radius: 4px; color: #333;
padding: 1rem;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
font-family: inherit;
} }
.place-item:hover { .place-item:hover {
background: #e9ecef; background: #eee;
} }
.place-name { .place-name {
font-size: 1rem;
font-weight: bold; font-weight: bold;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }