jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make mobile smaller

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-19 15:18:42 -07:00
commit cc30b13383
No known key found for this signature in database
GPG key ID: DDF6AF5B21B407D4
2 changed files with 19 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/QuestionCard.tsx
View file

@ -58,7 +58,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
}`} }`}
> >
<div <div
className="flex items-center gap-3 p-4 cursor-pointer" className="flex items-center gap-2 md:gap-3 p-2 md:p-4 cursor-pointer"
onClick={onToggleExpand} onClick={onToggleExpand}
> >
<div <div
@ -68,7 +68,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
<GripVertical size={20} /> <GripVertical size={20} />
</div> </div>
<div className="flex-shrink-0 w-8 h-8 bg-theme-primary text-white rounded-lg flex items-center justify-center font-black text-sm"> <div className="flex-shrink-0 w-6 h-6 md:w-8 md:h-8 bg-theme-primary text-white rounded-lg flex items-center justify-center font-black text-xs md:text-sm">
{index + 1} {index + 1}
</div> </div>
@ -77,7 +77,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
</div> </div>
{correctOption && ( {correctOption && (
<div className={`flex-shrink-0 px-3 py-1 rounded-full text-white text-xs font-bold flex items-center gap-1.5 ${colorMap[correctOption.color]}`}> <div className={`flex-shrink-0 px-2 md:px-3 py-1 rounded-full text-white text-xs font-bold flex items-center gap-1 md:gap-1.5 ${colorMap[correctOption.color]}`}>
<ShapeIcon shape={correctOption.shape} className="fill-current" /> <ShapeIcon shape={correctOption.shape} className="fill-current" />
<span className="hidden sm:inline max-w-[100px] truncate">{correctOption.text}</span> <span className="hidden sm:inline max-w-[100px] truncate">{correctOption.text}</span>
</div> </div>
@ -111,21 +111,21 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
className="overflow-hidden" className="overflow-hidden"
> >
<div className="px-4 pb-4 pt-0 border-t-2 border-gray-50"> <div className="px-2 md:px-4 pb-2 md:pb-4 pt-0 border-t-2 border-gray-50">
<p className="text-gray-700 font-medium py-3">{question.text}</p> <p className="text-gray-700 font-medium py-2 md:py-3 text-sm md:text-base">{question.text}</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
{question.options.map((option, idx) => ( {question.options.map((option, idx) => (
<div <div
key={idx} key={idx}
className={`p-3 rounded-xl border-2 ${ className={`p-2 md:p-3 rounded-xl border-2 ${
option.isCorrect option.isCorrect
? 'border-green-500 bg-green-50' ? 'border-green-500 bg-green-50'
: 'border-gray-200 bg-gray-50' : 'border-gray-200 bg-gray-50'
}`} }`}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className={`w-6 h-6 rounded flex items-center justify-center ${colorMap[option.color]}`}> <div className={`w-5 h-5 md:w-6 md:h-6 rounded flex items-center justify-center ${colorMap[option.color]}`}>
<ShapeIcon shape={option.shape} className="text-white fill-white" /> <ShapeIcon shape={option.shape} className="text-white fill-white" />
</div> </div>
<span className={`font-bold flex-1 ${option.isCorrect ? 'text-green-700' : 'text-gray-700'}`}> <span className={`font-bold flex-1 ${option.isCorrect ? 'text-green-700' : 'text-gray-700'}`}>
@ -138,7 +138,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
)} )}
</div> </div>
{option.reason && ( {option.reason && (
<p className="text-xs text-gray-500 mt-2 pl-8">{option.reason}</p> <p className="text-xs text-gray-500 mt-1 md:mt-2 pl-8">{option.reason}</p>
)} )}
</div> </div>
))} ))}

22
components/QuizEditor.tsx
View file

@ -163,13 +163,13 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
}; };
return ( return (
<div className="h-screen bg-gray-100 text-gray-900 p-4 md:p-8 flex flex-col items-center overflow-hidden"> <div className="h-screen bg-gray-100 text-gray-900 p-2 md:p-8 flex flex-col items-center overflow-hidden">
<div className="max-w-4xl w-full bg-white rounded-[2rem] shadow-xl overflow-hidden border-4 border-white flex-1 min-h-0 flex flex-col"> <div className="max-w-4xl w-full bg-white rounded-[2rem] shadow-xl overflow-hidden border-4 border-white flex-1 min-h-0 flex flex-col">
<div className="bg-theme-primary p-6 text-white relative overflow-hidden"> <div className="bg-theme-primary p-3 md:p-6 text-white relative overflow-hidden">
<div className="relative z-10 flex items-center justify-between gap-4"> <div className="relative z-10 flex items-center justify-between gap-4">
<button <button
onClick={onBack} onClick={onBack}
className="bg-white/20 p-2 rounded-full hover:bg-white/30 transition" className="bg-white/20 p-1.5 md:p-2 rounded-full hover:bg-white/30 transition"
> >
<ArrowLeft size={24} /> <ArrowLeft size={24} />
</button> </button>
@ -183,13 +183,13 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
onBlur={() => setTitleEditing(false)} onBlur={() => setTitleEditing(false)}
onKeyDown={(e) => e.key === 'Enter' && setTitleEditing(false)} onKeyDown={(e) => e.key === 'Enter' && setTitleEditing(false)}
autoFocus autoFocus
className="bg-white/20 text-white text-2xl md:text-3xl font-black text-center w-full max-w-md px-4 py-2 rounded-xl outline-none placeholder:text-white/50" className="bg-white/20 text-white text-xl md:text-3xl font-black text-center w-full max-w-md px-2 md:px-4 py-1 md:py-2 rounded-xl outline-none placeholder:text-white/50"
placeholder="Quiz Title" placeholder="Quiz Title"
/> />
) : ( ) : (
<h1 <h1
onClick={() => setTitleEditing(true)} onClick={() => setTitleEditing(true)}
className="text-2xl md:text-3xl font-black cursor-pointer hover:bg-white/10 px-4 py-2 rounded-xl transition inline-block" className="text-xl md:text-3xl font-black cursor-pointer hover:bg-white/10 px-2 md:px-4 py-1 md:py-2 rounded-xl transition inline-block"
> >
{quiz.title || 'Untitled Quiz'} {quiz.title || 'Untitled Quiz'}
</h1> </h1>
@ -203,7 +203,7 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
<button <button
onClick={() => onSave({ ...quiz, config })} onClick={() => onSave({ ...quiz, config })}
disabled={isSaving} disabled={isSaving}
className="bg-white/20 p-2 rounded-full hover:bg-white/30 transition disabled:opacity-50" className="bg-white/20 p-1.5 md:p-2 rounded-full hover:bg-white/30 transition disabled:opacity-50"
title="Save to library" title="Save to library"
> >
<Save size={24} /> <Save size={24} />
@ -219,7 +219,7 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
<div className="flex bg-white border-b border-gray-100"> <div className="flex bg-white border-b border-gray-100">
<button <button
onClick={() => setActiveTab('questions')} onClick={() => setActiveTab('questions')}
className={`flex-1 py-3 font-bold text-center border-b-2 transition-all ${ className={`flex-1 py-2 md:py-3 font-bold text-center border-b-2 transition-all ${
activeTab === 'questions' activeTab === 'questions'
? 'border-theme-primary text-theme-primary bg-theme-primary/5' ? 'border-theme-primary text-theme-primary bg-theme-primary/5'
: 'border-transparent text-gray-400 hover:text-gray-600 hover:bg-gray-50' : 'border-transparent text-gray-400 hover:text-gray-600 hover:bg-gray-50'
@ -232,7 +232,7 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
</button> </button>
<button <button
onClick={() => setActiveTab('settings')} onClick={() => setActiveTab('settings')}
className={`flex-1 py-3 font-bold text-center border-b-2 transition-all ${ className={`flex-1 py-2 md:py-3 font-bold text-center border-b-2 transition-all ${
activeTab === 'settings' activeTab === 'settings'
? 'border-theme-primary text-theme-primary bg-theme-primary/5' ? 'border-theme-primary text-theme-primary bg-theme-primary/5'
: 'border-transparent text-gray-400 hover:text-gray-600 hover:bg-gray-50' : 'border-transparent text-gray-400 hover:text-gray-600 hover:bg-gray-50'
@ -245,7 +245,7 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
</button> </button>
</div> </div>
<div className="p-6 space-y-4 flex-1 min-h-0 overflow-y-auto"> <div className="p-3 md:p-6 space-y-4 flex-1 min-h-0 overflow-y-auto">
{activeTab === 'questions' ? ( {activeTab === 'questions' ? (
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -305,11 +305,11 @@ export const QuizEditor: React.FC<QuizEditorProps> = ({
)} )}
</div> </div>
<div className="p-6 bg-gray-50 border-t-2 border-gray-100 space-y-4"> <div className="p-3 md:p-6 bg-gray-50 border-t-2 border-gray-100 space-y-4">
<button <button
onClick={handleStartGame} onClick={handleStartGame}
disabled={!canStartGame} disabled={!canStartGame}
className="w-full bg-green-500 text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#16a34a] active:shadow-none active:translate-y-[6px] transition-all hover:bg-green-600 flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed disabled:active:translate-y-0 disabled:active:shadow-[0_6px_0_#16a34a]" className="w-full bg-green-500 text-white py-3 md:py-4 rounded-2xl text-lg md:text-xl font-black shadow-[0_6px_0_#16a34a] active:shadow-none active:translate-y-[6px] transition-all hover:bg-green-600 flex items-center justify-center gap-2 md:gap-3 disabled:opacity-50 disabled:cursor-not-allowed disabled:active:translate-y-0 disabled:active:shadow-[0_6px_0_#16a34a]"
> >
<Play size={24} fill="currentColor" /> Start Game with {quiz.questions.length} Questions <Play size={24} fill="currentColor" /> Start Game with {quiz.questions.length} Questions
</button> </button>