Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-08 22:45:45 +01:00
Code Issues Packages Projects Releases Activity

Enhance ui-elements to be more accessible on smaller screens (#1950)

Browse Source 
Enable breaking of content to be fully available on small screens or highly zoomed displays. This should help improve accessibility.

Co-authored-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
This commit is contained in:
Phil-Ah
2022-02-18 14:48:21 +01:00
committed by GitHub
parent b85dc8f0e6
commit 78b507921d
38 changed files with 2649 additions and 3233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
scm-ui/ui-components/src/Breadcrumb.tsx
View File

@@ -32,6 +32,7 @@ import { binder, ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensi
import Icon from "./Icon";
import Tooltip from "./Tooltip";
import copyToClipboard from "./CopyToClipboard";
import { devices } from "./devices";
type Props = {
repository: Repository;
@@ -51,6 +52,13 @@ const PermaLinkWrapper = styled.span`
height: 16px;
font-size: 13px;
@media screen and (min-width: ${devices.tablet.width}px) {
margin-left: 0.25rem;
}
@media screen and (max-width: ${devices.mobile.width}px) {
margin-left: auto;
}
i {
color: #dbdbdb;
opacity: 0.75;
@@ -64,9 +72,10 @@ const PermaLinkWrapper = styled.span`
const BreadcrumbNav = styled.nav`
flex: 1;
display: flex;
align-items: center;
width: 100%;
@media screen and (max-width: ${devices.mobile.width}px) {
flex-wrap: wrap;
}
/* move slash to end */
li + li::before {
@@ -198,7 +207,15 @@ const Breadcrumb: FC<Props> = ({
return (
<BreadcrumbNav
className={classNames("breadcrumb", "sources-breadcrumb", "mx-2", "my-4")}
className={classNames(
"breadcrumb",
"sources-breadcrumb",
"mx-2",
"my-4",
"is-flex",
"is-align-items-center",
"is-full-width"
)}
aria-label="breadcrumbs"
>
{prefixButtons}
@@ -214,7 +231,7 @@ const Breadcrumb: FC<Props> = ({
</li>
{pathSection()}
</ul>
<PermaLinkWrapper className="ml-1" tabIndex={0} onKeyDown={e => e.key === "Enter" && copySource()}>
<PermaLinkWrapper tabIndex={0} onKeyDown={e => e.key === "Enter" && copySource()}>
{copying ? (
<Icon name="spinner fa-spin" alt={t("breadcrumb.loading")} />
) : (
@@ -251,10 +268,20 @@ const Breadcrumb: FC<Props> = ({
return (
<>
<div className={classNames("is-flex", "is-justify-content-flex-end", "is-align-items-center")}>
<div
className={classNames("is-flex", "is-justify-content-flex-end", "is-align-items-center", "is-flex-wrap-wrap")}
>
{renderBreadcrumbNav()}
{
<ActionBar className={classNames("is-flex", "is-justify-content-flex-start", "is-align-self-center", "my-2")}>
<ActionBar
className={classNames(
"is-flex",
"is-justify-content-flex-start",
"is-align-self-center",
"m-2",
"is-flex-wrap-wrap"
)}
>
{renderExtensionPoints()}
</ActionBar>
}