Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dispatch a click event on an off-DOM <a> element when clicking on .table-seamless-links rows #2349

Merged

Conversation

niklasmohrin
Copy link
Member

@niklasmohrin niklasmohrin commented Dec 2, 2024

Closes #2292

This brings the interaction closer to clicking on an actual a tag and enables Ctrl-Click again. Having an a in there is still not feasible, because we cannot have any elements between tr and td.

… `.table-seamless-links` rows

This brings the interaction closer to clicking on an actual `a` tag and
enables Ctrl-Click again. Having an `a` in there is still not feasible,
because we cannot have any elements between `tr` and `td`.
evap/evaluation/templates/base.html Outdated Show resolved Hide resolved
evap/evaluation/templates/base.html Outdated Show resolved Hide resolved
Copy link
Member

@janno42 janno42 left a comment

Choose a reason for hiding this comment

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

This solves the main problem, but it's not very nice. After control-clicking, there's an ugly selection box around part of the row, and because we don't have an anchor element, there's no link preview in the browser.
Maybe we should use a grid like on the results page instead of tables?

@niklasmohrin
Copy link
Member Author

With this version, the outline is fixed, but I think we can't show a link preview with this approach at all. I think replacing the table with grid is the end solution, but I don't know when someone will do this and it will definitely take longer than the fix here

@niklasmohrin niklasmohrin requested a review from janno42 December 9, 2024 17:16
window.location.assign(row.dataset.url);
row.addEventListener("click", event => {
// We navigate via the <a> tag to enable browser behavior for Ctrl-Click. We cannot insert an actual
// <a> tag, because there cannot be any non-table tags between the for example <tbody> and <tr>.
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
// <a> tag, because there cannot be any non-table tags between the for example <tbody> and <tr>.
// <a> tag, because there cannot be any non-table tags between for example <tbody> and <tr>.

@niklasmohrin niklasmohrin merged commit 2c5f711 into e-valuation:main Dec 9, 2024
12 checks passed
@niklasmohrin niklasmohrin deleted the seamless-links-ctrl-click branch December 9, 2024 21:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

Open evaluations in new tabs
4 participants