Update search and index for carbon

This commit is contained in:
Sam Carlton 2022-04-24 14:29:41 -05:00
parent 59f18d5d12
commit 90fa93a221
2 changed files with 34 additions and 25 deletions

View file

@ -1,11 +1,11 @@
<template> <template>
<div <div
ref="search-container" ref="search-container"
class="search-container w-full" class="search-container w-full space-y-4"
> >
<slot name="before-search"> <slot name="before-search">
<div class="list-summary-wrapper flex justify-center text-center text-sm my-4"> <div class="list-summary-wrapper flex justify-center text-center text-sm">
<ListSummary <ListSummary
:app-list="appList" :app-list="appList"
@ -15,7 +15,8 @@
</div> </div>
</slot> </slot>
<div class="search-input relative"> <div class="search-input relative space-y-4">
<div>
<input <input
id="search" id="search"
ref="search" ref="search"
@ -29,7 +30,8 @@
@keyup="queryResults(query); scrollInputToTop()" @keyup="queryResults(query); scrollInputToTop()"
> >
<div class="search-input-separator border-white border-t-2" /> <div class="search-input-separator border-white border-t-2" />
<div class="quick-buttons overflow-x-auto whitespace-no-wrap py-2 space-x-2"> </div>
<div class="quick-buttons overflow-x-auto whitespace-no-wrap space-x-2">
<button <button
v-for="button in quickButtons" v-for="button in quickButtons"
:key="button.query" :key="button.query"
@ -43,6 +45,9 @@
>{{ button.label }}</button> >{{ button.label }}</button>
</div> </div>
</div> </div>
<Carbon class="carbon-inline-wide" />
<div <div
ref="search-container" ref="search-container"
class="search-container relative divide-y divide-gray-700 w-full rounded-lg border border-gray-700 bg-gradient-to-br from-darker to-dark my-8 px-5" class="search-container relative divide-y divide-gray-700 w-full rounded-lg border border-gray-700 bg-gradient-to-br from-darker to-dark my-8 px-5"
@ -201,6 +206,7 @@ import { getAppCategory } from '~/helpers/categories.js'
import { getAppEndpoint } from '~/helpers/app-derived.js' import { getAppEndpoint } from '~/helpers/app-derived.js'
// import appList from '~/static/app-list.json' // import appList from '~/static/app-list.json'
import Carbon from '~/components/carbon-inline.vue'
import LinkButton from '~/components/link-button.vue' import LinkButton from '~/components/link-button.vue'
// import RelativeTime from '~/components/relative-time.vue' // import RelativeTime from '~/components/relative-time.vue'
import ListSummary from '~/components/list-summary.vue' import ListSummary from '~/components/list-summary.vue'
@ -208,6 +214,7 @@ import ListSummary from '~/components/list-summary.vue'
export default { export default {
components: { components: {
Carbon,
// EmailSubscribe: () => process.client ? import('~/components/email-subscribe.vue') : null, // EmailSubscribe: () => process.client ? import('~/components/email-subscribe.vue') : null,
ListSummary, ListSummary,
LinkButton, LinkButton,

View file

@ -1,12 +1,14 @@
<template> <template>
<section class="container py-24"> <section class="container py-24">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center space-y-4">
<h1 class="title text-4xl md:text-6xl font-hairline leading-tight text-center"> <div class="hero">
<h1 class="title text-3xl md:text-6xl font-hairline leading-tight text-center">
Does It ARM? Does It ARM?
</h1> </h1>
<h2 class="subtitle md:text-xl text-center"> <h2 class="subtitle md:text-xl text-center">
Apps that are reported to support Apple Silicon Apps that are reported to support Apple Silicon
</h2> </h2>
</div>
<Search <Search
:app-list="allList" :app-list="allList"
@ -15,7 +17,7 @@
@update:query="onQueryUpdate" @update:query="onQueryUpdate"
> >
<template v-slot:before-search> <template v-slot:before-search>
<div class="list-summary-wrapper flex justify-center text-center text-sm my-4"> <div class="list-summary-wrapper flex justify-center text-center text-sm">
<ListSummary <ListSummary
:custom-numbers="customSummaryNumbers" :custom-numbers="customSummaryNumbers"