[Site] Better the CSS, and Make Display Mobile-Friendly #241

pishoyg · 2024-09-13T06:37:37Z

No description provided.

This keeps things simple and localized, and will make it possible to reuse the styling for other subpages as well.

pishoyg · 2024-09-16T07:05:08Z

Flashcard pages are far from having mobile-friendly display. Make them look more like they do on Anki.
Revisit the Crum Xooxle page display.

pishoyg · 2024-10-08T14:06:41Z

Adding the card class might do the trick.

pishoyg · 2024-10-09T06:12:41Z

TODO:

All images in the Crum notes to be resized by the @media rule.
Fix the Crum note styling (might be automatically fixed if images in the Crum notes are allowed to be resized by the @media rule).
KELLIA search results have a fixed width, and they don't show on mobile!
Can / should you store all images under one <figure> tag?
Do you need to restore the figure img rule's vertical-align: top property?
Eliminate all styling from within the HTML. Restrict styling, including tag attributes such as width, to CSS.
Partially revert dd5ee96, using resized logos. The larger logos might be making the page a little slower, and they often end up rendering in their original sizes, e.g. on GitHub Android or on Edge Android! While this is, technically speaking, a browser issue rather than our own issue, it's still nice to address it.

Summary of changes: - Control the KELLIA table width using percentages rather than `px` units. This makes the display much better on mobile. It's still not mobile-friendly, because the results (search) table has tables within cells! But it's a bit better. More content actually shows on small screens than previously, and we start losing content at around ~500px rather than ~670px. - Delete idempotent rules for unused classes `sense_n` and `sense_id`. - Delete an idempotent `float: right` rule for `.bible`. - Remove the table border on small screens. We thought that changing the table border colors to light gray (#DDD) instead of black would prettify the rendering on small screens. We implemented it simplistically with a single `td`-generic rule, without implementing the `last-child`- or `first-child`-specific rules. It's not worth maintaining, so we simply delete it.

This gives us the ability to extract text from the HTML more granularly, which will help us output an optimized HTML, while also retaining just the HTML tags that we need. The reduced HTML will also help us make the search page more mobile-friendly.

Also get rid of the KELLIA tables, to make the search page more mobile-friendly.

Newlines are problematic, because they get converted downstream (by the Xooxle engine) to `<br>` tags.

Pick up the use of the correct HTML class. NOTE: We (temporarily) changed the value of the `--web_mask` flag in Flashcards, in order to rewrite copticsite data.

This is a followup to 7f6f726. We added the classes for the spellings and the dialect codes, but not types!

Pick up the addition of the `type` class.

Pick up the `type` class.

Pick up the reduced HTML.

pishoyg · 2024-10-09T14:41:31Z

Thanks to 90d16eb, and the subsequent d46980f, the new search page is much more mobile-friendly. We no longer have tables within tables!
Right now, we start losing content in the KELLIA table at 412px.

NOTE: We could perhaps make up for some of that loss by eliminating padding or margins!

This partially reverts dd5ee96. The larger logos might be making the page a little slower, and they often end up rendering in their original sizes, e.g. on GitHub Android or on Edge Android! While this is, technically speaking, a browser issue rather than our own issue, it's still nice to address it.

This mainly picks up changes related to #227, but there are also other categories of changes.

This makes it possible to read the CSS file from a different domain. This is useful when developing the site locally, when we try to test the site by opening an HTML file without a server. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin.

Pick up disabling CORS for CSS files. And pick up the new images for 1.

This reverts commit 2e328af.

This reverts commit 48bc855.

Our logic used to fail with this error when run locally *without* a server: ``` script.js:51 Uncaught SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules at new Highlighter (script.js:51:42) at main (script.js:387:25) at script.js:679:3 ``` This is due to CORS. We tried disabling CORS in 2e328af, but this ended up causing other problems, so we reverted that commit. Now we try to work around the failure by resorting to the Anki highlighting when failing to read CSS rules in the JavaScript.

Mostly #227, with a bit of JavaScript (#241), and an image (#5).

There is no need to fill large spaces with titles. The search functionality is more worthy of the space. Also keep the search panel (search box and checkboxes) on the same line on mobile.

This is a (small) followup to ffaae5d.

This reduces jitter. Otherwise, if they are visible by default and only get hidden by JavaScript, they will jitter on page load.

Side Change: - Change title capitalization.

pishoyg · 2025-03-03T06:47:19Z

Chrome Developer Tools offers device toggle features. You may be able to use it to simulate a mobile environment on your laptop.

pishoyg added maintenance UI Why: Better user interface user Why: User convenience labels Sep 13, 2024

pishoyg added this to the Pipeline: Site milestone Sep 13, 2024

pishoyg added this to coptic Sep 13, 2024

github-project-automation bot moved this to Todo in coptic Sep 13, 2024

pishoyg closed this as completed in 25a7675 Sep 15, 2024

pishoyg added a commit that referenced this issue Sep 15, 2024

[#171,#241][Site/CSS] Crum and Home Share a CSS File.

f7d9d32

This keeps things simple and localized, and will make it possible to reuse the styling for other subpages as well.

pishoyg reopened this Sep 16, 2024

pishoyg mentioned this issue Oct 6, 2024

[Crum/Flashcards] Note HTML should be Mobile-Friendly #247

Closed

pishoyg changed the title ~~[Site] Make Display Mobile-Friendly~~ [Site] Better the CSS, and Make Display Mobile-Friendly Oct 9, 2024

pishoyg added a commit that referenced this issue Oct 9, 2024

[#241][Site/CSS] Restore Body Padding. Resize iframe on Small Screens.

48996a3

pishoyg added a commit that referenced this issue Oct 9, 2024

[#241][Site/CSS] Copy the New CSS to Flashcards.

f255919

pishoyg added a commit that referenced this issue Oct 9, 2024

[#230,#241][Xooxle] Use retain_classes to Minimize Index HTML.

90d16eb

Also get rid of the KELLIA tables, to make the search page more mobile-friendly.

pishoyg added a commit that referenced this issue Oct 9, 2024

[#230,#241][Xooxle/Index] Replace Whitespace with one Space Character.

644012b

Newlines are problematic, because they get converted downstream (by the Xooxle engine) to `<br>` tags.

pishoyg added a commit that referenced this issue Oct 9, 2024

[#264,#241,#230][KELLIA/HTML] Add "type" Class for Dialect Highlighting.

514f5f2

This is a followup to 7f6f726. We added the classes for the spellings and the dialect codes, but not types!

pishoyg added a commit that referenced this issue Oct 9, 2024

[#264,#230,#241][copticsite/Flashcards] Run make kellia test.

7063f87

Pick up the addition of the `type` class.

pishoyg added a commit that referenced this issue Oct 9, 2024

[#264,#241,#230][KELLIA/HTML] Run make flashcards test.

e3d84ad

Pick up the `type` class.

pishoyg added a commit that referenced this issue Oct 9, 2024

[#230,#241][Xooxle/Index] Run make xooxle test.

d46980f

Pick up the reduced HTML.

pishoyg added a commit that referenced this issue Oct 9, 2024

[#241,#230,#264][Xooxle/Dictionary] Dialect-highlight the type Class.

6e108db

pishoyg added a commit that referenced this issue Oct 9, 2024

[#230,#241][Xooxle] Nit: Use set for retain_classes.

7098451

pishoyg mentioned this issue Oct 9, 2024

[Site/Xooxle] Reduce Technical Debt, and Parameterize, the Pipeline #230

Open

pishoyg added a commit that referenced this issue Oct 21, 2024

[#227,#189,#8,#241] Run make flashcards test.

11b37f3

This mainly picks up changes related to #227, but there are also other categories of changes.

pishoyg added a commit that referenced this issue Oct 26, 2024

[#241,#5][Crum/CSS] Run make flashcards test.

48bc855

Pick up disabling CORS for CSS files. And pick up the new images for 1.

pishoyg added a commit that referenced this issue Oct 27, 2024

Revert "[#241][Crum/CSS] Disable CORS for CSS Access."

37b25f9

This reverts commit 2e328af.

pishoyg added a commit that referenced this issue Oct 27, 2024

Revert "[#241,#5][Crum/CSS] Run make flashcards test."

89d9867

This reverts commit 48bc855.

pishoyg added a commit that referenced this issue Oct 27, 2024

[#241][Crum/TypeScript] Run make transpile test.

f13dc04

pishoyg added a commit that referenced this issue Oct 27, 2024

[#227,#241,#5][Crum/Flashcards] Run make flashcards test.

d475506

Mostly #227, with a bit of JavaScript (#241), and an image (#5).

pishoyg added a commit that referenced this issue Oct 30, 2024

[#241][Crum/Flashcards] Nit: Retain <a> Color under <strong>.

c892577

pishoyg self-assigned this Oct 30, 2024

pishoyg added a commit that referenced this issue Nov 1, 2024

[#241][CSS] Split the Shared CSS File into Sections.

4dbb2a1

pishoyg added a commit that referenced this issue Nov 19, 2024

[#229,#241][Crum/Xooxle] Run make flashcards test.

d559a4f

pishoyg added a commit that referenced this issue Nov 21, 2024

[#241][Crum/Xooxle] Nit: Rename "Word" to "Words" for Full-Word Search.

1ffe92e

This is a (small) followup to ffaae5d.

pishoyg modified the milestones: Pipeline: Site, Site v1.0 Nov 24, 2024

pishoyg removed their assignment Nov 28, 2024

pishoyg added a commit that referenced this issue Dec 10, 2024

[#167,#262,#241][Crum/Flashcards] Hide Developer-Mode Elements in CSS.

14e6302

This reduces jitter. Otherwise, if they are visible by default and only get hidden by JavaScript, they will jitter on page load.

pishoyg added a commit that referenced this issue Dec 10, 2024

[#167,#262,#241][Crum/Flashcards] Run make flashcards test.

816998d

pishoyg mentioned this issue Feb 19, 2025

[Site] Reduce the Dependency on HTML Content #202

Open

pishoyg added the dev Why: Developer experience label Feb 23, 2025

pishoyg modified the milestones: Site v1.0, Pipeline: Site Feb 27, 2025

pishoyg removed the maintenance label Feb 27, 2025

pishoyg added a commit that referenced this issue Feb 27, 2025

[#241][Crum/Flashcards] Nit: Keep Colon outside of the Link.

db13bde

pishoyg added a commit that referenced this issue Mar 2, 2025

[#241,#197][Bible] Use Style Sheets.

99a5573

Side Change: - Change title capitalization.

pishoyg added a commit that referenced this issue Mar 2, 2025

[#197,#179,#241][Bible] Run make bible test.

1ba03db

pishoyg added a commit that referenced this issue Mar 2, 2025

[#241,#197][Bible] Use Style Sheets.

11e3aeb

Side Change: - Change title capitalization.

pishoyg added a commit that referenced this issue Mar 2, 2025

[#197,#179,#241][Bible] Run make bible test.

82c3d1f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Site] Better the CSS, and Make Display Mobile-Friendly #241

[Site] Better the CSS, and Make Display Mobile-Friendly #241

pishoyg commented Sep 13, 2024

pishoyg commented Sep 16, 2024

pishoyg commented Oct 8, 2024

pishoyg commented Oct 9, 2024

pishoyg commented Oct 9, 2024 •

edited

Loading

pishoyg commented Mar 3, 2025

[Site] Better the CSS, and Make Display Mobile-Friendly #241

[Site] Better the CSS, and Make Display Mobile-Friendly #241

Comments

pishoyg commented Sep 13, 2024

pishoyg commented Sep 16, 2024

pishoyg commented Oct 8, 2024

pishoyg commented Oct 9, 2024

pishoyg commented Oct 9, 2024 • edited Loading

pishoyg commented Mar 3, 2025

pishoyg commented Oct 9, 2024 •

edited

Loading