atproto explorer
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix layout width

Juliet bd73e42d f6826a8e

+24 -29
+10 -26
src/components/navbar.tsx
··· 11 11 const NavBar = (props: { params: Params }) => { 12 12 const [openMenu, setOpenMenu] = createSignal(false); 13 13 const [dropdown, setDropdown] = createSignal<HTMLDivElement>(); 14 - const [viewportWidth, setViewportWidth] = createSignal(window.innerWidth); 15 14 16 15 const clickEvent = (event: MouseEvent) => { 17 16 if (openMenu() && event.target !== dropdown()) setOpenMenu(false); 18 17 }; 19 18 20 - const resizeEvent = () => setViewportWidth(window.innerWidth); 21 - 22 - onMount(() => { 23 - window.addEventListener("click", clickEvent); 24 - window.addEventListener("resize", resizeEvent); 25 - }); 26 - onCleanup(() => { 27 - window.removeEventListener("click", clickEvent); 28 - window.removeEventListener("resize", resizeEvent); 29 - }); 19 + onMount(() => window.addEventListener("click", clickEvent)); 20 + onCleanup(() => window.removeEventListener("click", clickEvent)); 30 21 31 22 return ( 32 - <div class="break-anywhere mt-4 flex min-w-[21rem] max-w-full flex-col font-mono"> 23 + <div class="break-anywhere xs:w-sm mt-4 flex w-[21rem] flex-col font-mono"> 33 24 <div class="relative flex items-center justify-between"> 34 25 <div class="flex basis-full items-center"> 35 26 <Show when={pds() && props.params.pds}> ··· 97 88 </div> 98 89 </Show> 99 90 </div> 100 - <div 101 - classList={{ 102 - "flex flex-col flex-wrap md:flex-row": true, 103 - "md:mt-1": !!props.params.repo, 104 - }} 105 - > 91 + <div class="flex flex-col flex-wrap"> 106 92 <Show when={props.params.repo}> 107 93 <div> 108 - <div class="mt-1 flex items-center md:mt-0"> 109 - <Tooltip text={viewportWidth() > 768 ? "AT URI" : "Repository"}> 94 + <div class="mt-1 flex items-center"> 95 + <Tooltip text="Repository"> 110 96 <div class="i-atproto-logo mr-1 text-sm" /> 111 97 </Tooltip> 112 98 <A ··· 132 118 </div> 133 119 </Show> 134 120 <Show when={props.params.collection}> 135 - <div class="mt-1 flex items-center md:mt-0"> 121 + <div class="mt-1 flex items-center"> 136 122 <Tooltip text="Collection"> 137 - <div class="i-uil-list-ul mr-1 text-sm md:hidden" /> 123 + <div class="i-uil-list-ul mr-1 text-sm" /> 138 124 </Tooltip> 139 - <span class="mx-1 hidden md:inline">/</span> 140 125 <A 141 126 end 142 127 href={`at/${props.params.repo}/${props.params.collection}`} ··· 147 132 </div> 148 133 </Show> 149 134 <Show when={props.params.rkey}> 150 - <div class="mt-1 flex items-center md:mt-0"> 135 + <div class="mt-1 flex items-center"> 151 136 <Tooltip text="Record"> 152 - <div class="i-mdi-code-json mr-1 text-sm md:hidden" /> 137 + <div class="i-mdi-code-json mr-1 text-sm" /> 153 138 </Tooltip> 154 - <span class="mx-1 hidden md:inline">/</span> 155 139 <span class="mr-1 cursor-pointer">{props.params.rkey}</span> 156 140 <Show when={validRecord()}> 157 141 <Tooltip
+1 -1
src/layout.tsx
··· 82 82 </a> 83 83 </div> 84 84 </div> 85 - <div class="mb-5 flex max-w-full flex-col items-center text-pretty md:max-w-screen-md"> 85 + <div class="mb-5 flex w-full flex-col items-center text-pretty md:max-w-screen-md"> 86 86 <Show when={useLocation().pathname !== "/login"}> 87 87 <Search /> 88 88 </Show>
+1 -1
src/views/home.tsx
··· 1 1 const Home = () => { 2 2 return ( 3 - <div class="mt-4 flex w-full flex-col break-words"> 3 + <div class="mt-4 flex flex-col break-words"> 4 4 <div class="mb-2"> 5 5 <p> 6 6 Browse the public data on{" "}
+12 -1
uno.config.ts
··· 1 1 import { defineConfig, presetUno } from "unocss"; 2 2 3 - export default defineConfig({ presets: [presetUno()] }); 3 + export default defineConfig({ 4 + presets: [presetUno()], 5 + extendTheme: (theme) => { 6 + return { 7 + ...theme, 8 + breakpoints: { 9 + ...theme.breakpoints, 10 + xs: "400px", 11 + }, 12 + }; 13 + }, 14 + });