appview/pages: add mobile version for minitimeline component #1100

+45 -14

appview/pages/templates/timeline/fragments/preview.html

··· 1 1 {{ define "timeline/fragments/preview" }} 2 2 <div class="flex flex-col gap-4 overflow-hidden"> 3 3 - <div class="relative h-96 w-full"> 3 3 + <div class="relative h-fit md:h-96 w-full"> 4 4 <!-- left fade overlay (fixed on left edge) --> 5 5 <div class="absolute left-0 top-0 h-full w-16 pointer-events-none z-10 bg-gradient-to-r from-white to-transparent dark:from-gray-900"></div> 6 6 ··· 8 8 <div class="absolute right-0 top-0 h-full w-16 pointer-events-none z-10 bg-gradient-to-l from-white to-transparent dark:from-gray-900"></div> 9 9 10 10 {{ template "marquee" $ }} 11 11 + {{ template "marquee-mobile" $ }} 11 12 </div> 12 13 </div> 13 14 {{ end }} ··· 17 18 {{ $prev := -1 }} 18 19 {{ $w := mul (len .Timeline) 150 }} 19 20 20 20 - <div class="absolute h-full flex animate-marquee"> 21 21 + <div class="absolute h-full hidden md:flex animate-marquee"> 21 22 <div class="relative h-full flex-shrink-0 bottom-4 border-b border-gray-200 dark:border-gray-700" style="width: {{ $w }}px;"> 22 23 {{ range $i, $e := .Timeline }} 23 24 {{ $curr := randInt 4 }} ··· 38 39 </div> 39 40 {{ end }} 40 41 41 41 - {{ define "timelineEvent" }} 42 42 - {{ $i := index . 0 }} 42 42 + {{ define "marquee-mobile" }} 43 43 + <div class="flex md:hidden flex-col gap-4 my-auto"> 44 44 + {{ range $rowIndex := list 0 1 2 3 }} 45 45 + {{ $offset := mul (add $rowIndex 2) 10 }} 46 46 + {{ if eq (mod $rowIndex 2) 0 }} 47 47 + {{ $offset = mul $offset -1 }} 48 48 + {{ end }} 49 49 + <div class="flex gap-4 overflow-hidden" style="padding-left: {{ $offset }}px; "> 50 50 + <div class="flex gap-4 animate-marquee"> 51 51 + {{ range $i, $e := $.Timeline }} 52 52 + {{ if eq (mod $i 4) $rowIndex }} 53 53 + <div class="flex-shrink-0"> 54 54 + {{ template "eventCard" (list $ $e) }} 55 55 + </div> 56 56 + {{ end }} 57 57 + {{ end }} 58 58 + </div> 59 59 + </div> 60 60 + {{ end }} 61 61 + </div> 62 62 + {{ end }} 63 63 + 64 64 + {{ define "eventCard" }} 65 65 + {{ $root := index . 0 }} 43 66 {{ $e := index . 1 }} 44 44 - {{ $variance := randInt 10 }} 45 45 - {{ $offset := add (index . 2) $variance }} 46 46 - {{ $left := mul $i 175 }} 47 67 {{ with $e }} 48 48 - <div 49 49 - class="absolute left-0 flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-sm bg-white dark:bg-gray-800 drop-shadow-sm" 50 50 - style="bottom: {{ $offset }}px; left: {{ $left }}px; transform: translateX(-50%); z-index: 5;" 51 51 - > 68 68 + <div class="flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-sm bg-white dark:bg-gray-800 drop-shadow-sm"> 52 69 {{ if .Repo }} 53 53 - {{ template "repoEvent" (list $ .) }} 70 70 + {{ template "repoEvent" (list $root .) }} 54 71 {{ else if .RepoStar }} 55 55 - {{ template "starEvent" (list $ .) }} 72 72 + {{ template "starEvent" (list $root .) }} 56 73 {{ else if .Follow }} 57 57 - {{ template "followEvent" (list $ .) }} 74 74 + {{ template "followEvent" (list $root .) }} 58 75 {{ end }} 59 76 </div> 60 77 {{ end }} 78 78 + {{ end }} 79 79 + 80 80 + {{ define "timelineEvent" }} 81 81 + {{ $i := index . 0 }} 82 82 + {{ $e := index . 1 }} 83 83 + {{ $variance := randInt 10 }} 84 84 + {{ $offset := add (index . 2) $variance }} 85 85 + {{ $left := mul $i 175 }} 86 86 + <div 87 87 + class="absolute left-0" 88 88 + style="bottom: {{ $offset }}px; left: {{ $left }}px; transform: translateX(-50%); z-index: 5;" 89 89 + > 90 90 + {{ template "eventCard" (list $ $e) }} 91 91 + </div> 61 92 62 93 <!-- vertical connector --> 63 94 <div

+42 -31

appview/pages/templates/timeline/home.html

··· 81 81 {{ $labelStyle := "normal-case cursor-pointer w-auto md:w-full p-4 md:px-6 rounded bg-white dark:bg-gray-800 font-medium text-base md:text-lg opacity-50 border border-gray-200 dark:border-gray-700 relative overflow-hidden" }} 82 82 {{ $spanStyle := "z-10 items-center justify-between gap-2 w-full" }} 83 83 {{ $connectorStyle := "w-0.5 h-6 bg-gray-300 dark:bg-gray-600 opacity-0 mx-auto" }} 84 84 - {{ $contentStyle := "hidden bg-white dark:bg-gray-800 rounded shadow-sm p-6 md:p-8 border border-gray-200 dark:border-gray-700 grid-cols-1 animate-fadein" }} 84 84 + {{ $contentStyle := "hidden bg-white dark:bg-gray-800 rounded shadow-sm border border-gray-200 dark:border-gray-700 grid-cols-1 animate-fadein" }} 85 85 {{ $progressOverlayStyle := "absolute inset-0 bg-gray-600/10 dark:bg-gray-100/10 w-0 transition-none" }} 86 86 87 87 <style> ··· 139 139 <div class="{{ $connectorStyle }} peer-checked/spindles:opacity-100"></div> 140 140 141 141 {{ $titleStyle := "text-2xl md:text-6xl my-2 md:mb-4 text-black dark:text-white font-medium" }} 142 142 - {{ $textContentStyle := "pb-6 md:text-xl" }} 143 143 - {{ $imgContentStyle := "w-full min-h-96 min-h-[400px] md:min-h-[500px] rounded overflow-hidden place-content-center bg-gradient-to-b from-slate-50 to-slate-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700" }} 142 142 + {{ $textContentStyle := "p-4 md:p-6 md:text-xl" }} 143 143 + {{ $imgContentStyle := "w-full overflow-hidden place-content-center bg-gradient-to-b from-slate-50 to-slate-100 dark:from-gray-800 dark:to-gray-900 border-t border-gray-200 dark:border-gray-700" }} 144 144 {{ $linkDesktopStyle := "hover:no-underline items-center gap-2 p-3 text-base btn" }} 145 145 146 146 <div class="col-span-3 {{ $contentStyle }} peer-checked/prs:grid relative"> ··· 158 158 </a> 159 159 </section> 160 160 <div class="w-fit hidden md:flex items-center"> 161 161 - <div class="size-32 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 -mr-4" > 162 162 - {{ i "wand-sparkles" "size-16 text-green-500 dark:text-green-500" }} 161 161 + <div class="size-32 rounded-full flex items-center justify-center bg-yellow-100 dark:bg-yellow-900 -mr-4" > 162 162 + {{ i "wand-sparkles" "size-16 text-yellow-500 dark:text-yellow-500" }} 163 163 </div> 164 164 - <div class="size-40 rounded-full flex items-center justify-center bg-indigo-100 dark:bg-indigo-900 z-10"> 165 165 - {{ i "git-pull-request" "size-24 text-indigo-500 dark:text-indigo-500 rotate-12" }} 164 164 + <div class="size-40 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 z-10"> 165 165 + {{ i "git-pull-request-arrow" "size-24 text-green-500 dark:text-green-500 rotate-12" }} 166 166 </div> 167 167 </div> 168 168 </div> 169 169 - <div class="{{ $imgContentStyle }} min-h-[500px] relative overflow-hidden"> 170 170 - <div class="w-full h-full relative overflow-hidden"> 171 171 - <img src="https://assets.tangled.network/home-page-prs.png" class="h-full w-[200%] md:w-full object-cover object-left" /> 169 169 + <div class="{{ $imgContentStyle }} relative overflow-hidden flex items-center"> 170 170 + <div class="w-full md:w-full flex justify-center"> 171 171 + <img src="https://assets.tangled.network/home-page-prs.svg" class="w-[120%] md:w-full" /> 172 172 </div> 173 173 </div> 174 174 <a href="https://blog.tangled.org/stacking" class="hover:no-underline hidden md:inline-flex absolute -bottom-6 -right-12 items-center gap-2 p-3 text-base btn"> ··· 177 177 </a> 178 178 </div> 179 179 180 180 - <div class="col-span-3 {{ $contentStyle }} peer-checked/knots:grid"> 180 180 + <div class="col-span-3 {{ $contentStyle }} peer-checked/knots:grid relative"> 181 181 <div class="{{ $textContentStyle }} flex place-content-between gap-4 md:gap-8"> 182 182 <section class="space-y-4"> 183 183 <h1 class="{{ $titleStyle }}">Run it at home</h1> 184 184 <p class="text-gray-600 dark:text-gray-400"> 185 185 Host your repositories on your own infrastructure with <a href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide" class="no-underline">knots</a>. 186 186 - Run CI on your own machines with <a href="https://docs.tangled.org/spindles.html#self-hosting-guide" class="no-underline">spindles</a>. 186 186 + Run CI on your own machines with <a href="https://docs.tangled.org/spindles.html#self-hosting-guide" class="no-underline">spindles</a>. 187 187 <br> 188 188 Don't want to self-host? All are welcome on our hosted instances. 189 189 </p> 190 190 + <a href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide" class="hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-black dark:text-white font-medium"> 191 191 + Learn more 192 192 + {{ i "arrow-right" "size-4" }} 193 193 + </a> 190 194 </section> 191 195 <div class="w-fit hidden md:flex items-center"> 192 192 - <div class="size-32 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 -mr-4" > 193 193 - {{ i "workflow" "size-16 text-green-500 dark:text-green-500" }} 196 196 + <div class="size-32 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-900 -mr-4" > 197 197 + {{ i "workflow" "size-16 text-blue-500 dark:text-blue-500" }} 194 198 </div> 195 195 - <div class="size-40 rounded-full flex items-center justify-center bg-indigo-100 dark:bg-indigo-900 z-10"> 196 196 - {{ i "server" "size-24 text-indigo-500 dark:text-indigo-500" }} 199 199 + <div class="size-40 rounded-full flex items-center justify-center bg-yellow-100 dark:bg-yellow-900 z-10"> 200 200 + {{ i "server" "size-24 text-yellow-500 dark:text-yellow-500" }} 197 201 </div> 198 202 </div> 199 203 </div> 200 200 - <div class="{{ $imgContentStyle }} min-h-[500px] relative overflow-hidden"> 201 201 - <div class="w-full h-full relative overflow-hidden"> 202 202 - <img src="https://assets.tangled.network/home-page-self-host.png" class="h-full w-[200%] md:w-full object-cover object-center" /> 204 204 + <div class="{{ $imgContentStyle }} relative overflow-hidden flex items-center"> 205 205 + <div class="w-full md:w-full flex justify-center"> 206 206 + <img src="https://assets.tangled.network/home-page-self-host.svg" class="w-[120%] md:w-full" /> 203 207 </div> 204 208 </div> 209 209 + <a href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide" class="hover:no-underline hidden md:inline-flex absolute -bottom-6 -right-12 items-center gap-2 p-3 text-base btn"> 210 210 + Learn more 211 211 + {{ i "arrow-right" "size-4" }} 212 212 + </a> 205 213 </div> 206 214 207 207 - <div class="col-span-3 {{ $contentStyle }} peer-checked/spindles:grid"> 215 215 + <div class="col-span-3 {{ $contentStyle }} peer-checked/spindles:grid relative"> 208 216 <div class="{{ $textContentStyle }} flex place-content-between gap-4 md:gap-8"> 209 217 <section class="space-y-4"> 210 218 <h1 class="{{ $titleStyle }}">Nix-powered CI</h1> ··· 216 224 <br> 217 225 Support for Docker and MicroVM based runners coming soon! 218 226 </p> 227 227 + <a href="https://docs.tangled.org/spindles.html#pipelines" class="hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-black dark:text-white font-medium"> 228 228 + Learn more 229 229 + {{ i "arrow-right" "size-4" }} 230 230 + </a> 219 231 </section> 220 232 <div class="w-fit hidden md:flex items-center"> 221 233 <div class="size-32 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 -mr-4" > ··· 227 239 </div> 228 240 </div> 229 241 <div class="{{ $imgContentStyle }} flex items-end pb-0 overflow-hidden"> 230 230 - <div class="w-full h-full relative overflow-hidden"> 231 231 - <img src="https://assets.tangled.network/home-page-ci.png" class="h-full w-[200%] md:w-full object-cover object-left md:object-center" /> 242 242 + <div class="w-full md:w-full flex justify-center"> 243 243 + <img src="https://assets.tangled.network/home-page-ci.svg" class="w-[120%] md:w-full" /> 232 244 </div> 233 245 </div> 246 246 + <a href="https://docs.tangled.org/spindles.html#pipelines" class="hover:no-underline hidden md:inline-flex absolute -bottom-6 -right-12 items-center gap-2 p-3 text-base btn"> 247 247 + Learn more 248 248 + {{ i "arrow-right" "size-4" }} 249 249 + </a> 234 250 </div> 235 251 </div> 236 252 ··· 328 344 <div class="{{ $cardInnerStyle }}"> 329 345 {{ $moreLink := "https://tangled.org/core" }} 330 346 <div class="{{ $contentStyle }}"> 331 331 - <h3 class="{{ $titleStyle }}">Free and Open-source</h3> 347 347 + <h3 class="{{ $titleStyle }}">Free and open source</h3> 332 348 <p class="{{ $descriptionStyle }}"> 333 333 - All of Tangled is open-source and built in the open! 334 334 - Check out the <a class="underline" href="https://tangled.org/core">monorepo</a> and join in on the fun. 349 349 + All of Tangled is open source and built with the community! 350 350 + Check out the <a href="https://tangled.org/core">monorepo</a> and join in on the fun. 335 351 <br> 336 352 <br> 337 353 We welcome contributions however big or small. You can start contributing by picking up a 338 338 - <a class="underline" href="https://tangled.org/tangled.org/core/issues">good-first-issue</a>. 354 354 + <a href="https://tangled.org/tangled.org/core/issues">good-first-issue</a>. 339 355 </p> 340 356 <a href="{{ $moreLink }}" class="{{ $linkMobileStyle }}"> 341 357 View source ··· 364 380 <h3 class="{{ $titleStyle }}">Social coding is back</h3> 365 381 <p class="{{ $descriptionStyle }}"> 366 382 Discover trending projects, follow your friends and star your favourite repositories. Coding is better together! 367 367 - <br> 368 368 - <br> 369 369 - You can use one account for all of the atmosphere. If you have 370 370 - friends on Bluesky, you will find them on Tangled with the same 371 371 - handle. 372 383 </p> 373 384 <a href="{{ $moreLink }}" class="{{ $linkMobileStyle }}"> 374 385 Explore timeline

-5

appview/pages/templates/timeline/timeline.html

··· 8 8 {{ end }} 9 9 10 10 {{ define "content" }} 11 11 - {{ if .LoggedInUser }} 12 12 - {{ else }} 13 13 - {{ template "timeline/fragments/hero" . }} 14 14 - {{ end }} 15 15 - 16 11 {{ template "timeline/fragments/goodfirstissues" . }} 17 12 {{ template "timeline/fragments/trending" . }} 18 13 {{ template "timeline/fragments/timeline" . }}