back round 1 view raw

collection filter styling #4

closed

opened by

futur.blue 3 months ago targeting main from futur.blue/pdsls: filter-styling

preview: https://github.com/user-attachments/assets/6281c46d-eccf-4900-9d71-6027d447fa96

options

unified split

Changed files

+33 -19

src

components

button.tsx

views

collection.tsx

+1 -1

src/components/button.tsx

···

       13
       13
        
             type="button"

     

       14
       14
        
             class={

     

       15
       15
        
               props.class ??

     

       16
       16
       -
               "dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-800 dark:active:bg-dark-100 flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md  hover:bg-neutral-50 active:bg-neutral-50"

     

       16
       16
       +
               "dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-800 dark:active:bg-dark-100 flex items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1.5 text-xs font-semibold shadow-md hover:bg-neutral-50 active:bg-neutral-50 dark:border-neutral-700"

     

       17
       17
        
             }

     

       18
       18
        
             classList={props.classList}

     

       19
       19
        
             onClick={props.onClick}

+32 -18

src/views/collection.tsx

···

       3
       3
        
       import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";

     

       4
       4
        
       import * as TID from "@atcute/tid";

     

       5
       5
        
       import { A, useParams } from "@solidjs/router";

     

       6
       6
       -
       import { createEffect, createResource, createSignal, For, Show, untrack, onMount, onCleanup } from "solid-js";

     

       6
       6
       +
       import {

     

       7
       7
       +
         createEffect,

     

       8
       8
       +
         createResource,

     

       9
       9
       +
         createSignal,

     

       10
       10
       +
         For,

     

       11
       11
       +
         onCleanup,

     

       12
       12
       +
         onMount,

     

       13
       13
       +
         Show,

     

       14
       14
       +
         untrack,

     

       15
       15
       +
       } from "solid-js";

     

       7
       16
        
       import { createStore } from "solid-js/store";

     

       8
       17
        
       import { Button, type ButtonProps } from "../components/button.jsx";

     

       9
       18
        
       import { JSONType, JSONValue } from "../components/json.jsx";

     
···

       160
       169
        
           );

     

       161
       170
        
       

     

       162
       171
        
         const FilterButton = (props: ButtonProps) => {

     

       163
       163
       -
       	return <Button

     

       164
       164
       -
       	    class="flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md"

     

       165
       165
       -
       		classList={{

     

       166
       166
       -
       			"dark:bg-dark-300 dark:hover:bg-dark-100 dark:active:bg-dark-100 bg-white hover:bg-neutral-50 active:bg-neutral-50": !filterStuck(),

     

       167
       167
       -
       			"dark:bg-dark-100 dark:hover:bg-dark-50 dark:active:bg-dark-50 bg-neutral-50 hover:bg-neutral-200 active:bg-neutral-200": filterStuck()

     

       168
       168
       -
       		}}

     

       169
       169
       -
       		{...props}

     

       170
       170
       -
       	/>

     

       171
       171
       -
         }

     

       172
       172
       +
           return (

     

       173
       173
       +
             <Button

     

       174
       174
       +
               class="flex items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1.5 text-xs font-semibold shadow-md dark:border-neutral-700"

     

       175
       175
       +
               classList={{

     

       176
       176
       +
                 "dark:bg-dark-300 dark:hover:bg-dark-100 dark:active:bg-dark-100 bg-white hover:bg-neutral-50 active:bg-neutral-50":

     

       177
       177
       +
                   !filterStuck(),

     

       178
       178
       +
                 "dark:bg-dark-100 dark:hover:bg-dark-50 dark:active:bg-dark-50 bg-neutral-50 hover:bg-neutral-200 active:bg-neutral-200":

     

       179
       179
       +
                   filterStuck(),

     

       180
       180
       +
               }}

     

       181
       181
       +
               {...props}

     

       182
       182
       +
             />

     

       183
       183
       +
           );

     

       184
       184
       +
         };

     

       172
       185
        
       

     

       173
       186
        
         onMount(() => {

     

       174
       187
        
           let ticking = false;

     
···

       198
       211
        
         return (

     

       199
       212
        
           <Show when={records.length || response()}>

     

       200
       213
        
             <div class="flex w-full flex-col items-center">

     

       201
       201
       -
             <div

     

       202
       202
       -
               ref={(el) => (sticky = el)}

     

       203
       203
       -
               class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"

     

       204
       204
       -
               classList={{

     

       205
       205
       -
                 "bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md": filterStuck(),

     

       206
       206
       -
                 "bg-transparent border-transparent shadow-none -mt-2": !filterStuck(),

     

       207
       207
       -
               }}

     

       208
       208
       -
             >

     

       214
       214
       +
               <div

     

       215
       215
       +
                 ref={(el) => (sticky = el)}

     

       216
       216
       +
                 class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"

     

       217
       217
       +
                 classList={{

     

       218
       218
       +
                   "bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md":

     

       219
       219
       +
                     filterStuck(),

     

       220
       220
       +
                   "bg-transparent border-transparent shadow-none -mt-2": !filterStuck(),

     

       221
       221
       +
                 }}

     

       222
       222
       +
               >

     

       209
       223
        
                 <div class="flex w-[22rem] items-center gap-2 sm:w-[24rem]">

     

       210
       224
        
                   <Show when={agent() && agent()?.sub === did}>

     

       211
       225
        
                     <div class="flex items-center gap-x-2">