elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-11 21:58:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

- remove header icons (except play/stop button)

Browse Source 
- use unicode spiral instead of emoji spiral
- fix header height on mobile
This commit is contained in:
Felix Roos 2024-10-23 02:29:23 +02:00
parent 801879bddf
commit 2a67698616
3 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
website/src/components/Header/Header.astro
View File

@ -28,11 +28,10 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
<div class="flex overflow-visible items-center grow" style="overflow:visible">
<div class="flex items-center text-2xl space-x-2">
<h1 class="font-bold flex space-x-2 items-baseline text-xl">
<span>🌀</span>
<span class="block rotate-90 text-blue-500">꩜</span>
<div class="flex space-x-2 items-baseline">
<span class="">strudel</span>
<span class="text-sm">DOCS</span>
<a href={`${baseNoTrailing}/`} class="text-sm opacity-25">REPL</a>
<span class="text-sm font-medium">DOCS</span>
</div>
</h1>
</div>

30
website/src/repl/components/Header.jsx
View File

@ -1,8 +1,8 @@
import AcademicCapIcon from '@heroicons/react/20/solid/AcademicCapIcon';
/* import AcademicCapIcon from '@heroicons/react/20/solid/AcademicCapIcon';
import ArrowPathIcon from '@heroicons/react/20/solid/ArrowPathIcon';
import LinkIcon from '@heroicons/react/20/solid/LinkIcon';
import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon'; */
import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
import cx from '@src/cx.mjs';
import { useSettings, setIsZen } from '../../settings.mjs';
@ -21,7 +21,7 @@ export function Header({ context, embedded = false }) {
<header
id="header"
className={cx(
'flex-none text-black z-[100] text-lg select-none h-14',
'flex-none text-black z-[100] text-lg select-none h-20 md:h-14',
!isZen && !isEmbedded && 'bg-lineHighlight',
isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full py-1 justify-between',
isEmbedded ? 'flex' : 'md:flex',
@ -41,7 +41,7 @@ export function Header({ context, embedded = false }) {
className={cx(
'mt-[1px]',
started && !isCSSAnimationDisabled && 'animate-spin',
'cursor-pointer',
'cursor-pointer text-blue-500',
isZen && 'fixed top-2 right-4',
)}
onClick={() => {
@ -50,14 +50,14 @@ export function Header({ context, embedded = false }) {
}
}}
>
🌀
<span className="block rotate-90">꩜</span>
</div>
{!isZen && (
<div className={cx(started && !isCSSAnimationDisabled && 'animate-pulse', 'space-x-2')}>
<div className="space-x-2">
<span className="">strudel</span>
<span className="text-sm">REPL</span>
{!isEmbedded && (
<a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25">
<span className="text-sm font-medium">REPL</span>
{!isEmbedded && isButtonRowHidden && (
<a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25 font-medium">
DOCS
</a>
)}
@ -66,7 +66,7 @@ export function Header({ context, embedded = false }) {
</h1>
</div>
{!isZen && !isButtonRowHidden && (
<div className="flex max-w-full overflow-auto text-foreground">
<div className="flex max-w-full overflow-auto text-foreground px-1 md:px-2">
<button
onClick={handleTogglePlay}
title={started ? 'stop' : 'play'}
@ -77,7 +77,7 @@ export function Header({ context, embedded = false }) {
)}
>
{!pending ? (
<span className={cx('flex items-center space-x-1', isEmbedded ? '' : 'w-16')}>
<span className={cx('flex items-center space-x-2')}>
{started ? <StopCircleIcon className="w-6 h-6" /> : <PlayCircleIcon className="w-6 h-6" />}
{!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
</span>
@ -95,7 +95,7 @@ export function Header({ context, embedded = false }) {
)}
>
{/* <CommandLineIcon className="w-6 h-6" /> */}
<ArrowPathIcon className="w-6 h-6" />
{/* <ArrowPathIcon className="w-6 h-6" /> */}
{!isEmbedded && <span>update</span>}
</button>
{!isEmbedded && (
@ -104,7 +104,7 @@ export function Header({ context, embedded = false }) {
className="hover:opacity-50 p-2 flex items-center space-x-1"
onClick={handleShuffle}
>
<SparklesIcon className="w-6 h-6" />
{/* <SparklesIcon className="w-6 h-6" /> */}
<span> shuffle</span>
</button>
)}
@ -117,7 +117,7 @@ export function Header({ context, embedded = false }) {
)}
onClick={handleShare}
>
<LinkIcon className="w-6 h-6" />
{/* <LinkIcon className="w-6 h-6" /> */}
<span>share</span>
</button>
)}
@ -127,7 +127,7 @@ export function Header({ context, embedded = false }) {
href={`${baseNoTrailing}/workshop/getting-started/`}
className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
>
<AcademicCapIcon className="w-6 h-6" />
{/* <AcademicCapIcon className="w-6 h-6" /> */}
<span>learn</span>
</a>
)}

6
website/src/repl/components/panel/WelcomeTab.jsx
View File

@ -6,9 +6,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
export function WelcomeTab({ context }) {
return (
<div className="prose dark:prose-invert min-w-full pt-2 font-sans pb-8 px-4 ">
<h3>
<span className={cx('animate-spin inline-block select-none')}>🌀</span> welcome
</h3>
<h3>꩜ welcome</h3>
<p>
You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic music
pieces in the browser! It is free and open-source and made for beginners and experts alike. To get started:
@ -30,7 +28,7 @@ export function WelcomeTab({ context }) {
</a>{' '}
to ask any questions, give feedback or just say hello.
</p>
<h3>about</h3>
<h3>꩜ about</h3>
<p>
strudel is a JavaScript version of{' '}
<a href="https://tidalcycles.org/" target="_blank">