search

oursky / mockuphone.com

Apache License 2.0
6 stars 6 forks source link

Layout search bar in homepage & device list #31

Closed pkong-ds closed 4 months ago

pkong-ds commented 4 months ago

Preview

Width Homepage Device List Page
<=640px image image
>640px image image
cychiuae commented 4 months ago

Suggestion:

1. Use astro component for search input

Search.astro

<div class="the-search-input-container">
  <input id="the-search-input" />
</div>

<style>
.the-search-input-container {
  ..
}

.the-search-input {
  ..
}
</style>

<script>
  document.getElementByID('the-search-input').addEventListener('keyup', () => {
      ....
  })
</script>

2. Introduce a slot for searchbar

In base layout, introduce a named slot

<html>
  ...
  <body>
    ...
        <header>
            ...
            <slot name="header-center" />
            ...        
        </header>
    ...
  </body>
</html>

Then, in the specified page component

<BaseLayout>
    <TheSearchComponent slot="header-center" />
</BaseLayout>
pkong-ds commented 4 months ago

Agree with SearchComponent Disagree with usage of slot

Will do SearchComponent refactoring later 👍