feat(ui): redesign mobile footer to a responsive multi-column grid#255
Merged
matteopilz merged 5 commits intoOpenMS:mainfrom Apr 7, 2026
Merged
feat(ui): redesign mobile footer to a responsive multi-column grid#255matteopilz merged 5 commits intoOpenMS:mainfrom
matteopilz merged 5 commits intoOpenMS:mainfrom
Conversation
✅ Deploy Preview for openms ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR redesigns the website footer layout and styling. Changes include introducing a CSS Grid-based footer structure with organized columns, header elements, brand/partner logos, social links, and mobile-responsive adjustments. Configuration updates add column headings, and the footer template is restructured to use new semantic containers and support the redesigned layout. Changes
Possibly Related PRs
Suggested Reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@assets/css/styles_override.css`:
- Around line 86-108: The footer partner group currently applies opacity to
.footer-partners which dims all logos; remove that container-level opacity and
instead set a neutral appearance on .footer-partners img (e.g., opacity:1 or no
filter) and implement hover/tap states on .footer-partners a img so the hovered
logo becomes visually lifted (e.g., increase opacity to 1 and/or slight
scale/brightness) while keeping transitions. Also make the anchors reachable by
touch by adding the minimum interactive target sizing to .footer-partners a
(min-width and min-height of 44px and center the img within) so logos meet the
44px touch target without changing image proportions.
In `@layouts/partials/footer.html`:
- Around line 55-56: The aria-label for social links currently uses the raw URL
(aria-label="{{ .link }}") which exposes the href to assistive tech; update the
template inside the range over $socialMedia to use an explicit, human-readable
label (prefer a label field like .label from your config.yaml for each social
item) and fall back to the icon name (.icon) if .label is missing, e.g. set
aria-label to .label || .icon; ensure you update the anchor generation inside
the range ($socialMedia) to reference these properties rather than the raw
.link.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2081d482-be6d-4548-97ab-a9699384f502
📒 Files selected for processing (3)
assets/css/styles_override.cssconfig.yamllayouts/partials/footer.html
Contributor
Author
|
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
content/en/news/gsoc2025.md (1)
34-36: Keep the heading hierarchy consistent.
# Available Projectsjumps back to a top-level heading after earlier##sections, which makes heading navigation harder to follow. This section should stay nested under the existing outline.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@content/en/news/gsoc2025.md` around lines 34 - 36, The heading "Available Projects" is using a top-level "#" which breaks the existing `##` hierarchy; change the markdown heading for "Available Projects" to a lower level consistent with surrounding sections (e.g., "### Available Projects" or the same level as other subsection headings) so it stays nested under the existing outline and preserves navigation consistency.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@assets/css/styles_override.css`:
- Around line 157-194: The hover-only styling for footer links and social icons
must also apply when focused via keyboard: add matching :focus-visible selectors
so .footer-link-group ul li a:focus-visible receives the same color and
text-decoration as .footer-link-group ul li a:hover, and .footer-socials
a:focus-visible receives the same color/transition as .footer-socials a:hover;
place these rules alongside the existing hover rules to ensure keyboard users
get identical visual feedback.
In `@content/en/news/gsoc2025.md`:
- Around line 18-22: Remove the duplicated timeline bullet in the contributor
checklist: locate the two lines containing "remember the [GSOC 2025
timeline](https://developers.google.com/open-source/gsoc/timeline)" and delete
the redundant instance so the timeline link appears only once in the list.
- Line 44: Replace the weak anchor text "here" in the sentence "This calculation
can be performed using pyopenms as demonstrated
[here](https://pyopenms.readthedocs.io/en/latest/user_guide/peptides_proteins.html)"
with a descriptive link label such as "pyopenms peptide/protein guide" or
"pyopenms peptides_proteins documentation" so screen readers and markdownlint
understand the destination; update the link text while keeping the existing URL
intact and ensure the edited sentence still reads naturally.
In `@layouts/partials/footer.html`:
- Around line 17-18: Update the alt text on the Netlify logo image in the footer
partial: locate the <img> element that uses src="{{ $deployedBy }}" and change
its alt attribute from "Deploys by Netlify" to "Deployed by Netlify" so the
linked logo has the correct accessible name.
---
Nitpick comments:
In `@content/en/news/gsoc2025.md`:
- Around line 34-36: The heading "Available Projects" is using a top-level "#"
which breaks the existing `##` hierarchy; change the markdown heading for
"Available Projects" to a lower level consistent with surrounding sections
(e.g., "### Available Projects" or the same level as other subsection headings)
so it stays nested under the existing outline and preserves navigation
consistency.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 45877327-2982-4bd5-9a6a-537a542aa8f9
📒 Files selected for processing (3)
assets/css/styles_override.csscontent/en/news/gsoc2025.mdlayouts/partials/footer.html
Comment on lines
+157
to
194
| .footer-link-group ul li a:hover { | ||
| color: #ffffff; | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| /* ---- Bottom bar ---- */ | ||
| .footer-bottom { | ||
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| padding: 1.25rem 2rem; | ||
| border-top: 1px solid rgba(255, 255, 255, 0.1); | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| flex-wrap: wrap; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| /* ---- Social icons ---- */ | ||
| .footer-socials { | ||
| display: flex; | ||
| gap: 0.75rem; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .footer-socials a { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| min-width: 44px; | ||
| min-height: 44px; | ||
| color: #c8d4e8; | ||
| transition: color 0.2s ease; | ||
| } | ||
|
|
||
| .footer-socials a:hover { | ||
| color: #ffffff; | ||
| } |
Contributor
There was a problem hiding this comment.
Add keyboard-visible states for footer links and socials.
These controls currently get enhanced styling on :hover only. Please mirror that on :focus-visible so keyboard users receive the same feedback in the redesigned footer.
⌨️ Suggested follow-up
-.footer-link-group ul li a:hover {
+.footer-link-group ul li a:hover,
+.footer-link-group ul li a:focus-visible {
color: `#ffffff`;
text-decoration: underline;
}
-.footer-socials a:hover {
+.footer-socials a:hover,
+.footer-socials a:focus-visible {
color: `#ffffff`;
}
+
+.footer-link-group ul li a:focus-visible,
+.footer-socials a:focus-visible {
+ outline: 2px solid rgba(255, 255, 255, 0.45);
+ outline-offset: 2px;
+}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/css/styles_override.css` around lines 157 - 194, The hover-only
styling for footer links and social icons must also apply when focused via
keyboard: add matching :focus-visible selectors so .footer-link-group ul li
a:focus-visible receives the same color and text-decoration as
.footer-link-group ul li a:hover, and .footer-socials a:focus-visible receives
the same color/transition as .footer-socials a:hover; place these rules
alongside the existing hover rules to ensure keyboard users get identical visual
feedback.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@assets/css/styles_override.css`:
- Around line 203-207: The CSS rule for the selector .footer-socials svg.icon
uses the property fill: currentColor which violates Stylelint's
value-keyword-case; update the value to lowercase by changing the fill value
from currentColor to currentcolor in the .footer-socials svg.icon rule so the
value-keyword-case rule passes.
In `@content/en/news/gsoc2025.md`:
- Around line 10-12: Move the “no longer accepting” notice into the opening
paragraph so readers immediately see the program is closed: update the lead (the
first paragraph that currently contains the sentence starting "OpenMS is
planning to apply..." and the deadline "February 7th 2025 at 23:59 UTC") to
begin with a clear closed-status line such as "Note: We are no longer accepting
project proposals from mentors." and then reword the rest of that paragraph to
past tense (remove or de-emphasize the active call to submit proposals and the
deadline) so the page reads as an announcement of closure rather than an open
call.
- Around line 94-97: Proofread and correct the task list in the GSOC paragraph:
fix typos ("Leaverage" -> "Leverage"), change "splicing" to "slicing",
capitalize the sentence that begins mid-line (ensure the fourth/bullet line
starts with an uppercase letter), and normalize punctuation/formatting so each
numbered item is a complete, parallel sentence (e.g., end items with periods and
use consistent verb forms like "Create", "Benchmark", "Publish" or "Release on
PyPI"). Reference the numbered task list lines in the GSOC section and apply
these edits for clear, applicant-facing wording.
- Line 43: The sentence around the pyOpenMS link is awkward and ungrammatical:
update the phrase to include the lead-in (e.g., "in the pyOpenMS peptide and
protein guide") and fix "further can be extend" to "can further be extended" (or
"can be further extended"), and reflow the sentence so it reads
smoothly—specifically edit the sentence that mentions "[pyOpenMS peptide and
protein guide]" and the following clause about extending the web application
(referencing the OpenMS-WebApps template and the pyopenms usage example) to
produce a single clear sentence with correct grammar and punctuation.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 7fcc8663-7a2a-4fe2-a0db-05b95c1e42a7
📒 Files selected for processing (3)
assets/css/styles_override.csscontent/en/news/gsoc2025.mdlayouts/partials/footer.html
Comment on lines
+203
to
+207
| .footer-socials svg.icon { | ||
| width: 1.4rem; | ||
| height: 1.4rem; | ||
| fill: currentColor; | ||
| } |
Contributor
There was a problem hiding this comment.
Fix keyword casing to satisfy Stylelint.
currentColor should be currentcolor (lowercase) per the value-keyword-case rule flagged by Stylelint.
Suggested fix
.footer-socials svg.icon {
width: 1.4rem;
height: 1.4rem;
- fill: currentColor;
+ fill: currentcolor;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .footer-socials svg.icon { | |
| width: 1.4rem; | |
| height: 1.4rem; | |
| fill: currentColor; | |
| } | |
| .footer-socials svg.icon { | |
| width: 1.4rem; | |
| height: 1.4rem; | |
| fill: currentcolor; | |
| } |
🧰 Tools
🪛 Stylelint (17.4.0)
[error] 206-206: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/css/styles_override.css` around lines 203 - 207, The CSS rule for the
selector .footer-socials svg.icon uses the property fill: currentColor which
violates Stylelint's value-keyword-case; update the value to lowercase by
changing the fill value from currentColor to currentcolor in the .footer-socials
svg.icon rule so the value-keyword-case rule passes.
content/en/news/gsoc2025.md
Outdated
| **Skills:** Python, Git, Streamlit | ||
| **Estimated Project Length:** 90 hours | **Difficulty:** Easy | ||
|
|
||
| In mass spectrometry (MS) proteomics and metabolomics, one common task is to compute the mass-to-charge (m/z) ratio of the analyte so that it can be located in a spectrum. Although the calculation is computationally simple and can easily be performed by the pyopenms package, this simple, commonly used calculation can be cumbersome for wet lab scientists with little programming experience. In this project the student will use the new [OpenMS-WebApps template](https://pubs.acs.org/doi/10.1021/acs.jproteome.4c00872) to create a simple GUI to allow researchers to perform this calculation. This calculation can be performed using pyopenms as demonstrated [pyOpenMS peptide and protein guide](https://pyopenms.readthedocs.io/en/latest/user_guide/peptides_proteins.html) Furthermore, this outcome web application further can be extend to other MS calculations tasks (e.g. theoretical spectra generation etc.) for quick interpretation of MS data. |
Contributor
There was a problem hiding this comment.
Fix the broken sentence around the pyOpenMS link.
This paragraph currently reads awkwardly: the link is missing a lead-in (“in the”), and “further can be extend” is ungrammatical. It looks unfinished in a public-facing project brief.
✏️ Suggested wording
-In mass spectrometry (MS) proteomics and metabolomics, one common task is to compute the mass-to-charge (m/z) ratio of the analyte so that it can be located in a spectrum. Although the calculation is computationally simple and can easily be performed by the pyopenms package, this simple, commonly used calculation can be cumbersome for wet lab scientists with little programming experience. In this project the student will use the new [OpenMS-WebApps template](https://pubs.acs.org/doi/10.1021/acs.jproteome.4c00872) to create a simple GUI to allow researchers to perform this calculation. This calculation can be performed using pyopenms as demonstrated [pyOpenMS peptide and protein guide](https://pyopenms.readthedocs.io/en/latest/user_guide/peptides_proteins.html) Furthermore, this outcome web application further can be extend to other MS calculations tasks (e.g. theoretical spectra generation etc.) for quick interpretation of MS data.
+In mass spectrometry (MS) proteomics and metabolomics, one common task is to compute the mass-to-charge (m/z) ratio of the analyte so that it can be located in a spectrum. Although the calculation is computationally simple and can easily be performed by the pyOpenMS package, this simple, commonly used calculation can be cumbersome for wet-lab scientists with little programming experience. In this project, the student will use the new [OpenMS-WebApps template](https://pubs.acs.org/doi/10.1021/acs.jproteome.4c00872) to create a simple GUI that allows researchers to perform this calculation. This calculation can be performed using pyOpenMS, as demonstrated in the [pyOpenMS peptide and protein guide](https://pyopenms.readthedocs.io/en/latest/user_guide/peptides_proteins.html). Furthermore, the resulting web application could be extended to other MS calculation tasks (e.g. theoretical spectra generation) for quick interpretation of MS data.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@content/en/news/gsoc2025.md` at line 43, The sentence around the pyOpenMS
link is awkward and ungrammatical: update the phrase to include the lead-in
(e.g., "in the pyOpenMS peptide and protein guide") and fix "further can be
extend" to "can further be extended" (or "can be further extended"), and reflow
the sentence so it reads smoothly—specifically edit the sentence that mentions
"[pyOpenMS peptide and protein guide]" and the following clause about extending
the web application (referencing the OpenMS-WebApps template and the pyopenms
usage example) to produce a single clear sentence with correct grammar and
punctuation.
content/en/news/gsoc2025.md
Outdated
Comment on lines
+94
to
+97
| 1. Leaverage the pyopenms documentation to get familiar with pyopenms .mzML file reading. | ||
| 2. Create a class which allows for splicing of the .mzML file across various dimensions and returning a DataFrame object. | ||
| 3. Benchmarking this class on various .mzML files for read times and memory usage. | ||
| 4. creating a python package and releasing it on PyPI. |
Contributor
There was a problem hiding this comment.
Proofread this task list before publishing.
There are multiple visible copy errors here: “Leaverage”, “splicing” looks like “slicing”, and Line 97 starts mid-sentence in lowercase. Small issues, but this section is applicant-facing.
✏️ Suggested wording
-1. Leaverage the pyopenms documentation to get familiar with pyopenms .mzML file reading.
-2. Create a class which allows for splicing of the .mzML file across various dimensions and returning a DataFrame object.
-3. Benchmarking this class on various .mzML files for read times and memory usage.
-4. creating a python package and releasing it on PyPI.
+1. Leverage the pyOpenMS documentation to get familiar with pyOpenMS .mzML file reading.
+2. Create a class that allows slicing the .mzML file across various dimensions and returns a DataFrame object.
+3. Benchmark this class on various .mzML files for read times and memory usage.
+4. Create a Python package and release it on PyPI.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| 1. Leaverage the pyopenms documentation to get familiar with pyopenms .mzML file reading. | |
| 2. Create a class which allows for splicing of the .mzML file across various dimensions and returning a DataFrame object. | |
| 3. Benchmarking this class on various .mzML files for read times and memory usage. | |
| 4. creating a python package and releasing it on PyPI. | |
| 1. Leverage the pyOpenMS documentation to get familiar with pyOpenMS .mzML file reading. | |
| 2. Create a class that allows slicing the .mzML file across various dimensions and returns a DataFrame object. | |
| 3. Benchmark this class on various .mzML files for read times and memory usage. | |
| 4. Create a Python package and release it on PyPI. |
🧰 Tools
🪛 LanguageTool
[grammar] ~94-~94: Ensure spelling is correct
Context: ...lable .mzML python parsers. Tasks: 1. Leaverage the pyopenms documentation to get famil...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@content/en/news/gsoc2025.md` around lines 94 - 97, Proofread and correct the
task list in the GSOC paragraph: fix typos ("Leaverage" -> "Leverage"), change
"splicing" to "slicing", capitalize the sentence that begins mid-line (ensure
the fourth/bullet line starts with an uppercase letter), and normalize
punctuation/formatting so each numbered item is a complete, parallel sentence
(e.g., end items with periods and use consistent verb forms like "Create",
"Benchmark", "Publish" or "Release on PyPI"). Reference the numbered task list
lines in the GSOC section and apply these edits for clear, applicant-facing
wording.
Contributor
|
@Tanush576, can you merge your branch with the most recent changes? |
Contributor
Author
|
Hey @matteopilz ! I just updated the branch for the mobile footer PR (#255) with the latest main changes like you asked. I also knocked out the accessibility and stylelint warnings the bot flagged, so all checks should be green now. Ready for a look whenever you have a second! |
matteopilz
reviewed
Apr 5, 2026
Contributor
There was a problem hiding this comment.
Why has the gsoc news file been changed in this PR? The source file seems outdated.
Contributor
Author
There was a problem hiding this comment.
Hey @matteopilz, my bad! I accidentally staged gsoc2025.md in this branch while working locally. I've reverted those out-of-scope changes, so this PR is now 100% focused just on the mobile footer redesign
matteopilz
approved these changes
Apr 7, 2026
Contributor
|
It looks good now, thank you! |
Contributor
Author
|
Awesome, thanks for the merge, @matteopilz ! This was a fun UI refactor to tackle. I've also officially submitted my GSoC 2026 application , fingers crossed! I'm looking forward to contributing more to OpenMS. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR addresses Issue #254 by completely refactoring the website footer for better mobile responsiveness and UI/UX hierarchy.
Key Technical Changes:
grid-template-columns: repeat(2, 1fr)on mobile,repeat(4, 1fr)on desktop).config.yamlto categorize links under specific headings (RESOURCES, COMMUNITY, ABOUT, LEGAL).layouts/partials/footer.htmlto dynamically render link groups using range loops.Visual Changes
Before:
After:
Fixes #254
Summary by CodeRabbit