Skip to content

Commit 1382fe8

Browse files
author
psriraj3
committed
All UI/UX issues fixed. Issues regarding focus mode not working on chrome browser and Responsiveness issues on mobile phones.
1 parent 5f4a76e commit 1382fe8

3 files changed

Lines changed: 187 additions & 81 deletions

File tree

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ export default function App() {
290290
<>
291291
<YearBackdrop ukYear={ukYear} />
292292
{/*<BubblesBackground year={ukYear} />*/}
293-
<BubblyBackground disabled={mode === "focus"} />
293+
<BubblyBackground disabled={false} />
294294
<div className="siteGrid">
295295
<aside className="adRail" aria-label="Left ads">
296296
<AdUnit client={ADS_CLIENT} slot={ADS_LEFT} className="adBox"/>

‎src/index.css‎

Lines changed: 105 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,71 @@ button {
227227
box-shadow: 0 14px 30px rgb(var(--accent) / 0.18);
228228
}
229229

230+
/* ---------- Mode switch (Practice / Worksheet / Focus) — real header buttons ---------- */
231+
/* ModeSwitch.tsx uses inline styles + aria attributes (no .modeSwitch/.modeBtn classes).
232+
These rules override the inline styles (via !important) so the 3 buttons match the site's theme. */
233+
[aria-label="Mode"]{
234+
display:flex !important;
235+
gap:10px !important;
236+
padding:6px !important;
237+
border-radius:16px !important;
238+
border:1px solid rgb(var(--border) / 0.14) !important;
239+
background: rgb(var(--surface) / 0.55) !important;
240+
backdrop-filter: blur(10px) saturate(140%) !important;
241+
-webkit-backdrop-filter: blur(10px) saturate(140%) !important;
242+
}
243+
244+
[aria-label="Mode"] > button[aria-pressed]{
245+
min-height:44px !important;
246+
padding:10px 14px !important;
247+
border-radius:14px !important;
248+
border:1px solid rgb(var(--border) / 0.16) !important;
249+
background: rgb(var(--surface2) / 0.78) !important;
250+
color: rgb(var(--text)) !important;
251+
font-weight: 900 !important;
252+
cursor:pointer !important;
253+
opacity: 1 !important; /* stop UA disabled fade from winning */
254+
filter: none !important;
255+
transition:
256+
background var(--anim) ease,
257+
border-color var(--anim) ease,
258+
transform 120ms ease,
259+
box-shadow var(--anim) ease,
260+
color var(--anim) ease !important;
261+
}
262+
263+
@media (hover:hover){
264+
[aria-label="Mode"] > button[aria-pressed]:not(:disabled):hover{
265+
border-color: rgb(var(--accent) / 0.40) !important;
266+
transform: translateY(-1px) !important;
267+
box-shadow: 0 18px 55px rgb(0 0 0 / 0.18) !important;
268+
}
269+
}
270+
[aria-label="Mode"] > button[aria-pressed]:active{ transform: translateY(1px) !important; }
271+
272+
/* Selected tab: visible in BOTH light and dark */
273+
[aria-label="Mode"] > button[aria-pressed="true"]{
274+
background: linear-gradient(180deg,
275+
rgb(var(--accent) / 0.98),
276+
rgb(var(--accent2) / 0.85)
277+
) !important;
278+
border-color: rgb(var(--accent) / 0.42) !important;
279+
color: rgb(var(--accentText)) !important;
280+
box-shadow: 0 14px 30px rgb(var(--accent) / 0.18) !important;
281+
opacity: 1 !important;
282+
}
283+
284+
/* Selected button is disabled in JSX; keep it looking active */
285+
[aria-label="Mode"] > button[aria-pressed="true"]:disabled{
286+
opacity: 1 !important;
287+
cursor: default !important;
288+
}
289+
290+
[aria-label="Mode"] > button[aria-pressed]:focus-visible{
291+
outline: 3px solid rgb(var(--accent) / 0.28) !important;
292+
outline-offset: 2px !important;
293+
}
294+
230295
/* ---------- Layout ---------- */
231296
.container {
232297
width: min(var(--app-max), 100%);
@@ -450,32 +515,13 @@ h1 { margin: 0; font-size: 22px; }
450515
}
451516
.siteMain { min-width: 0; }
452517

453-
/* ad rails sit in the gutters but do NOT “reserve” fixed 300px columns */
454-
.adRail{
455-
position: sticky;
456-
top: 16px;
518+
.adRail {
519+
position: relative;
457520
align-self: start;
458-
width: 300px;
459-
max-width: 300px;
460-
height: auto;
461-
min-height: 260px;
462-
opacity: 0.9;
463-
}
464-
465-
/* left rail hugs the center; right rail hugs the center */
466-
.siteGrid > .adRail:first-child{ grid-column: 1; justify-self: end; }
467-
.siteGrid > .adRail:last-child{ grid-column: 3; justify-self: start; }
468-
469-
/* Hide rails when screen isn’t wide enough for (app + 2 rails) */
470-
@media (max-width: 1580px){
471-
.siteGrid{ grid-template-columns: 1fr; padding: 18px 12px 52px; }
472-
.siteMain{ grid-column: 1; }
473-
.adRail{ display: none; }
521+
display: flex;
522+
justify-content: center;
474523
}
475524

476-
/* Prevent accidental horizontal scroll that makes things look “stuck left” */
477-
html, body{ overflow-x: clip; }
478-
479525
.adBox { width: 300px; min-height: 600px; }
480526

481527
.adFrame {
@@ -683,53 +729,72 @@ html:-webkit-full-screen .mobileAds,
683729
Paste at the VERY END of index.css
684730
=========================================== */
685731

686-
html, body {
732+
/* Prevent any background layer from creating horizontal scroll */
733+
html, body, #root{
687734
width: 100%;
688-
overflow-x: hidden;
735+
max-width: 100%;
736+
overflow-x: clip;
737+
}
738+
@supports not (overflow-x: clip){
739+
html, body, #root{ overflow-x: hidden; }
689740
}
690741

691742
/* --- Layout: always-center main column, show ad rails only when there’s room --- */
692743
.siteGrid{
693744
display: grid;
694-
/* side gutters are flexible; center column is your app width */
695745
grid-template-columns: minmax(0, 1fr) minmax(0, var(--app-max)) minmax(0, 1fr);
696746
gap: 18px;
697747
padding: 28px 18px 64px;
698748
align-items: start;
699749
}
700750

701-
/* center column always centered */
702751
.siteMain{
703752
grid-column: 2;
704-
width: min(100%, var(--app-max));
753+
width: 100%;
754+
min-width: 0; /* critical for grid shrink */
705755
justify-self: center;
706756
}
707757

708-
/* The actual app container should always center */
709-
.siteMain > .container {
758+
.siteMain > .container{
710759
width: 100%;
711760
max-width: var(--app-max);
712761
margin-left: auto;
713762
margin-right: auto;
714763
}
715764

716-
/* When ads collapse (single column), still center everything */
717-
@media (max-width: 1200px) {
718-
.siteGrid {
719-
grid-template-columns: 1fr !important;
720-
justify-content: stretch !important;
765+
/* Collapse to single column (tablet + mobile) */
766+
@media (max-width: 1200px){
767+
.siteGrid{
768+
grid-template-columns: 1fr; /* no !important */
769+
padding: 18px 12px 48px;
770+
gap: 14px;
721771
}
722772

723-
.siteMain {
724-
justify-content: center;
773+
.siteMain{
774+
grid-column: 1; /* ✅ THIS fixes mobile */
775+
justify-self: stretch;
725776
}
726777

727-
.siteMain > .container {
728-
padding-left: var(--pad);
729-
padding-right: var(--pad);
778+
.siteMain > .container{
779+
max-width: 100%;
780+
margin: 0 auto;
781+
}
782+
783+
/* hide side rails if you have them */
784+
.leftRail, .rightRail{
785+
display: none !important;
786+
}
787+
}
788+
789+
/* Phone polish */
790+
@media (max-width: 560px){
791+
.siteGrid{
792+
padding: 12px 10px 40px;
793+
gap: 12px;
730794
}
731795
}
732796

797+
733798
/* ===== Low-CPU Bubbly Background (no canvas) ===== */
734799

735800
/* Keep the app above the bubbles */

‎src/ui/ModeSwitch.tsx‎

Lines changed: 81 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,47 +7,88 @@ export function ModeSwitch(props: {
77
}) {
88
const { mode, onChange, disabledModes } = props;
99

10-
const mk = (m: Mode) => ({
11-
disabled: !!disabledModes?.[m],
12-
active: mode === m,
13-
onClick: () => !disabledModes?.[m] && onChange(m),
14-
});
15-
16-
const p = mk("practice");
17-
const w = mk("worksheet");
18-
const f = mk("focus");
10+
const mkBtnClass = (m: Mode) => {
11+
const active = mode === m;
12+
// ✅ EXACT same classes as Practice Mode buttons
13+
// active => primary .button
14+
// inactive => .button.secondary
15+
return `button msBtn ${active ? "isActive" : "secondary"} ${disabledModes?.[m] ? "isDisabled" : ""}`;
16+
};
1917

2018
return (
21-
<div className="modeSwitch" role="tablist" aria-label="Modes">
22-
<button
23-
type="button"
24-
className={`modeBtn ${p.active ? "isActive" : ""}`}
25-
aria-pressed={p.active}
26-
disabled={p.disabled}
27-
onClick={p.onClick}
28-
>
29-
Practice Mode
30-
</button>
31-
32-
<button
33-
type="button"
34-
className={`modeBtn ${w.active ? "isActive" : ""}`}
35-
aria-pressed={w.active}
36-
disabled={w.disabled}
37-
onClick={w.onClick}
38-
>
39-
Worksheet PDF
40-
</button>
41-
42-
<button
43-
type="button"
44-
className={`modeBtn ${f.active ? "isActive" : ""}`}
45-
aria-pressed={f.active}
46-
disabled={f.disabled}
47-
onClick={f.onClick}
48-
>
49-
Focus (Exam)
50-
</button>
51-
</div>
19+
<>
20+
<style>{`
21+
.modeSwitch{
22+
width: 100%;
23+
display: grid;
24+
grid-template-columns: repeat(3, minmax(0, 1fr));
25+
gap: 12px;
26+
align-items: stretch;
27+
min-width: 0;
28+
}
29+
30+
/* Keep the global .button look, just make them fill the grid nicely */
31+
.msBtn{
32+
width: 100%;
33+
justify-content: center;
34+
text-align: center;
35+
white-space: nowrap;
36+
overflow: hidden;
37+
text-overflow: ellipsis;
38+
}
39+
40+
/* If the app disables the currently selected mode, keep it looking selected */
41+
.msBtn.isActive:disabled{
42+
opacity: 1 !important;
43+
box-shadow: 0 14px 30px rgb(var(--accent) / 0.18) !important;
44+
cursor: default !important;
45+
}
46+
47+
.msLabel{ display: inline; }
48+
.msLabelShort{ display: none; }
49+
50+
@media (max-width: 520px){
51+
.modeSwitch{ gap: 10px; }
52+
.msLabel{ display: none; }
53+
.msLabelShort{ display: inline; }
54+
}
55+
56+
@media (max-width: 380px){
57+
.msBtn{ font-size: 14px; }
58+
}
59+
`}</style>
60+
61+
<div className="modeSwitch">
62+
<button
63+
className={mkBtnClass("practice")}
64+
disabled={!!disabledModes?.practice}
65+
onClick={() => onChange("practice")}
66+
type="button"
67+
>
68+
<span className="msLabel">Practice Mode</span>
69+
<span className="msLabelShort">Practice</span>
70+
</button>
71+
72+
<button
73+
className={mkBtnClass("worksheet")}
74+
disabled={!!disabledModes?.worksheet}
75+
onClick={() => onChange("worksheet")}
76+
type="button"
77+
>
78+
<span className="msLabel">Worksheet PDF</span>
79+
<span className="msLabelShort">PDF</span>
80+
</button>
81+
82+
<button
83+
className={mkBtnClass("focus")}
84+
disabled={!!disabledModes?.focus}
85+
onClick={() => onChange("focus")}
86+
type="button"
87+
>
88+
<span className="msLabel">Focus (Exam)</span>
89+
<span className="msLabelShort">Focus</span>
90+
</button>
91+
</div>
92+
</>
5293
);
5394
}

0 commit comments

Comments
 (0)