From 78871b355b74bba194db713e97f984f0f8fc9828 Mon Sep 17 00:00:00 2001 From: clacina Date: Thu, 30 Apr 2026 13:26:28 -0700 Subject: [PATCH 1/3] styling / spacing tweaks --- src/App.css | 22 +++++++++++++++------- src/components/FlashcardSession.jsx | 18 ++++++++++++++++-- src/components/TermInput.jsx | 1 + src/index.css | 6 +++--- 4 files changed, 35 insertions(+), 12 deletions(-) diff --git a/src/App.css b/src/App.css index ec91e1d..8b8ef07 100644 --- a/src/App.css +++ b/src/App.css @@ -1,8 +1,8 @@ .flashcard-app { width: 100%; margin: 0 auto; - padding: 28px 12px; - height: 100svh; + padding: 10px 2px; + /*height: 100svh;*/ overflow: hidden; display: flex; flex-direction: column; @@ -107,7 +107,7 @@ color: var(--accent); text-decoration: none; font-size: 14px; - line-height: 1.4; + line-height: 1.1; &:hover { text-decoration: underline; @@ -395,7 +395,7 @@ } .btn-nav { - padding: 10px 24px; + padding: 5px 12px; background: var(--code-bg); color: var(--text-h); border: 1px solid var(--border); @@ -413,6 +413,11 @@ outline: 2px solid var(--accent); outline-offset: 2px; } + &.btn-nav--active { + background: var(--accent-bg); + border-color: var(--accent-border); + color: var(--accent); + } } /* ── Footer ───────────────────────────────────────────── */ @@ -420,15 +425,18 @@ .site-footer { margin-top: auto; padding: 12px 0 4px; - border-top: 1px solid var(--border); + /*border-top: 1px solid var(--border);*/ font-size: 13px; color: var(--text); opacity: 0.7; - text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 16px; } .site-footer__icon { - margin: 0 0 6px; + margin: 0; } .site-footer__disclaimer-btn { diff --git a/src/components/FlashcardSession.jsx b/src/components/FlashcardSession.jsx index 6128c12..42b3c62 100644 --- a/src/components/FlashcardSession.jsx +++ b/src/components/FlashcardSession.jsx @@ -3,6 +3,7 @@ import {contrastColor} from "../utils/contrastColor"; import {shuffle} from "../utils/shuffle"; import ReactPlayer from 'react-player' import toast from "react-hot-toast"; +import Tippy from "@tippyjs/react"; export function FlashcardSession({terms, cardColors, onBack, title, description}) { const [currentIndex, setCurrentIndex] = useState(0); @@ -10,6 +11,7 @@ export function FlashcardSession({terms, cardColors, onBack, title, description} const [localColors, setLocalColors] = useState(cardColors); const [termDrawerOpen, setTermDrawerOpen] = useState(false); const [isMobileHorizontal, setIsMobileHorizontal] = useState(false); + const [autoPlay, setAutoPlay] = useState(false); const selectRef = useRef(null); useEffect(() => { @@ -102,6 +104,12 @@ export function FlashcardSession({terms, cardColors, onBack, title, description} + + +
@@ -111,7 +119,7 @@ export function FlashcardSession({terms, cardColors, onBack, title, description} className="flashcard-video-iframe" title="ASL sign video" src={playbackUrl} - autoPlay={true} + autoPlay={autoPlay} controls={true} muted={true} width="100%" @@ -163,7 +171,7 @@ export function FlashcardSession({terms, cardColors, onBack, title, description} className="flashcard-video-iframe" title="ASL sign video" src={playbackUrl} - autoPlay={true} + autoPlay={autoPlay} controls={true} muted={true} width="100%" @@ -182,6 +190,12 @@ export function FlashcardSession({terms, cardColors, onBack, title, description} + + +
diff --git a/src/components/TermInput.jsx b/src/components/TermInput.jsx index 3960a80..3cf7c69 100644 --- a/src/components/TermInput.jsx +++ b/src/components/TermInput.jsx @@ -45,6 +45,7 @@ const webResources = [ {url: "https://www.startasl.com/asl-dictionary/", description: "Free dictionary on Paid site with Phrases.", type: ""}, {url: "https://asl.ms/", description: "ASL Finger Spell Comprehension Test", type: ""}, {url: "https://www.signingsavvy.com/", description: "Sign Savvy", type: ""}, + {url: "https://en.wikipedia.org/wiki/American_Sign_Language", description: "Wikipedia", type: ""}, ]; export function TermInput({onStart}) { diff --git a/src/index.css b/src/index.css index 7d9ef06..900a56c 100644 --- a/src/index.css +++ b/src/index.css @@ -67,11 +67,11 @@ body { max-width: 100%; margin: 0 auto; text-align: center; - border-inline: 1px solid var(--border); - min-height: 100svh; + /*border-inline: 1px solid var(--border);*/ + /*min-height: 100svh;*/ display: flex; flex-direction: column; - box-sizing: border-box; + /*box-sizing: border-box;*/ } h1, From c906a816137cb7b6e212ab54d3e9e46f2ffa3f51 Mon Sep 17 00:00:00 2001 From: clacina Date: Thu, 30 Apr 2026 13:31:56 -0700 Subject: [PATCH 2/3] Tweaking for tablets --- src/components/FlashcardSession.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FlashcardSession.jsx b/src/components/FlashcardSession.jsx index 42b3c62..9c986c2 100644 --- a/src/components/FlashcardSession.jsx +++ b/src/components/FlashcardSession.jsx @@ -17,7 +17,7 @@ export function FlashcardSession({terms, cardColors, onBack, title, description} useEffect(() => { function check() { setIsMobileHorizontal( - window.innerWidth < 1024 && window.matchMedia('(orientation: landscape)').matches + window.innerWidth < 1424 && window.matchMedia('(orientation: landscape)').matches ); } check(); From 55da2d0f77b6c2209b2ea232f2b5e6a04f632b99 Mon Sep 17 00:00:00 2001 From: clacina Date: Fri, 1 May 2026 06:05:31 -0700 Subject: [PATCH 3/3] Trying to restrict player --- src/components/FlashcardSession.jsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/FlashcardSession.jsx b/src/components/FlashcardSession.jsx index 9c986c2..32ba3cf 100644 --- a/src/components/FlashcardSession.jsx +++ b/src/components/FlashcardSession.jsx @@ -121,10 +121,18 @@ export function FlashcardSession({terms, cardColors, onBack, title, description} src={playbackUrl} autoPlay={autoPlay} controls={true} + playsinline={true} muted={true} - width="100%" - height="100%" + // width="100%" + // height="100%" onError={playbackError} + config={{ + file: { + attributes: { + playsinline: true + } + } + }} /> ) : (
@@ -171,12 +179,20 @@ export function FlashcardSession({terms, cardColors, onBack, title, description} className="flashcard-video-iframe" title="ASL sign video" src={playbackUrl} + playsinline={true} autoPlay={autoPlay} controls={true} muted={true} width="100%" height="100%" onError={playbackError} + config={{ + file: { + attributes: { + playsinline: true + } + } + }} > ) : (