Skip to content

Homepage scroll indicator#1178

Open
hleepfl wants to merge 10 commits into
developfrom
1142-main-page-scroll-indicator
Open

Homepage scroll indicator#1178
hleepfl wants to merge 10 commits into
developfrom
1142-main-page-scroll-indicator

Conversation

@hleepfl

@hleepfl hleepfl commented Jul 10, 2026

Copy link
Copy Markdown
Collaborator

Add a clickable bouncing chevron to the first screen of the homepage to show that the page is scrollable. Also cleans up the tailwind classes in the page. Some alignments/gap have slightly moved but I don't think it's bad ?

Screenshots

Before
image
After
image

closes #1142

@JulienVig JulienVig left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly subjective preferences, the one important thing is that the lab logos are outside the screen on phones

Comment thread webapp/src/components/simple/ScrollIndicator.vue Outdated
Comment thread webapp/src/components/simple/ScrollIndicator.vue
Comment thread webapp/src/components/pages/HomePage.vue Outdated
Comment thread webapp/src/components/pages/HomePage.vue Outdated
Comment on lines +157 to +173
<span :class="bigTextTw"> A joint project of </span>
<div class="flex flex-row items-center gap-8">
<a href="https://www.epfl.ch/labs/mlo/" target="_blank">
<MLOLogo />
</a>
<a href="https://www.light-laboratory.org/" target="_blank">
<LightLogo />
</a>
</div>
<span :class="bigTextTw"> Supported by </span>
<div class="flex flex-row items-center gap-8">
<a href="https://www.epfl.ch/en/" target="_blank">
<EPFL />
</a>
<a href="https://www.ariadnelabs.org/" target="_blank">
<AriadneLabsLogo />
</a>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Too big on phones:

Image

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new spacing makes the logo too far from the subheadings:
Screenshot 2026-07-10 at 15 17 38

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ironically I think this is a tailwind merge conflict haha
gap is defined twice, and the first definition seems to take precedence
I just reversed both declarations, should be good now

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha damn maybe at least using TailwindMerge will be useful?

It doesn't look any different after pulling your last commit, how does it look on your side?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot_20260710-170717

Look better on my side

Comment thread webapp/src/components/pages/HomePage.vue
Comment thread webapp/src/components/pages/HomePage.vue Outdated
Comment thread webapp/src/components/pages/HomePage.vue
Comment thread webapp/src/components/pages/HomePage.vue
Comment thread webapp/src/components/pages/HomePage.vue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a scrolling hint to the main page

2 participants