mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

change buttons that act as links to anchor tags

Browse source 
Buttons and links are different and serve different purposes. Links _go
somewhere_ while buttons _do something_.

When I click on a movie title to _go to_ the movie page the thing I
click should act like a link. If I ctrl+click or middle click it it
should still act like a link... by opening in a new tab.
This commit is contained in:
David Murdoch 2022-03-02 18:24:52 -05:00
parent 09a36cbbfd
commit 0ffff84a9e
No known key found for this signature in database
GPG key ID: 222CDCBDB133DA33
3 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/cardbuilder/card.scss
View file

@ -327,6 +327,7 @@ button::-moz-focus-inner {
vertical-align: middle;
font-family: inherit;
font-size: inherit;
text-decoration: none;
}
.textActionButton:hover {

13
src/components/cardbuilder/cardBuilder.js
View file

@ -22,6 +22,7 @@ import './card.scss';
import '../../elements/emby-button/paper-icon-button-light';
import '../guide/programs.scss';
import ServerConnections from '../ServerConnections';
import { appRouter } from '../appRouter';
const enableFocusTransform = !browser.slow && !browser.edge;
@ -1038,9 +1039,10 @@ import ServerConnections from '../ServerConnections';
return text;
}
let html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" title="' + text + '" data-action="link">';
const url = appRouter.getRouteUrl(item);
let html = '<a href="' + url + '" ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' class="itemAction textActionButton" title="' + text + '" data-action="link">';
html += text;
html += '</button>';
html += '</a>';
return html;
}
@ -1349,10 +1351,11 @@ import ServerConnections from '../ServerConnections';
} else {
const cardImageContainerAriaLabelAttribute = ` aria-label="${item.Name}"`;
const url = appRouter.getRouteUrl(item);
// Don't use the IMG tag with safari because it puts a white border around it
cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + cardImageContainerAriaLabelAttribute + '>') : ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction"' + cardImageContainerAriaLabelAttribute + '>');
cardImageContainerOpen = imgUrl ? ('<a href="' + url + '" data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + cardImageContainerAriaLabelAttribute + '>') : ('<a href="' + url + '" data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction"' + cardImageContainerAriaLabelAttribute + '>');
cardImageContainerClose = '</button>';
cardImageContainerClose = '</a>';
}
const cardScalableClass = 'cardScalable';
@ -1470,6 +1473,8 @@ import ServerConnections from '../ServerConnections';
let html = '';
html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
const url = appRouter.getRouteUrl(item);
html += '<a href="' + url + '" class="cardImageContainer"></a>'
const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';

2
src/controllers/itemDetails/index.js
View file

@ -785,7 +785,7 @@ function renderDetailImage(elem, item, imageLoader) {
imageLoader.lazyChildren(elem);
// Avoid breaking the design by preventing focus of the poster using the keyboard.
elem.querySelector('button').tabIndex = -1;
elem.querySelector('a').tabIndex = -1;
}
function renderImage(page, item) {