Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-12-23 16:59:48 +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

19
scm-ui/ui-components/src/layout/Page.tsx
View File

@@ -51,11 +51,6 @@ const PageActionContainer = styled.div`
}
`;
const MaxTitleHeight = styled.div`
// remove blank space in repo create form
height: 2.25rem;
`;
export default class Page extends React.Component<Props> {
componentDidUpdate() {
const textualTitle = this.getTextualTitle();
@@ -90,7 +85,7 @@ export default class Page extends React.Component<Props> {
let pageActions = null;
let pageActionsExists = false;
React.Children.forEach(children, (child) => {
React.Children.forEach(children, child => {
if (child && !error) {
if (this.isPageAction(child)) {
pageActions = (
@@ -118,10 +113,12 @@ export default class Page extends React.Component<Props> {
<>
<div className="columns">
<div className="column">
<MaxTitleHeight className="is-flex">
<Title title={this.getTextualTitle()}>{this.getTitleComponent()}</Title>
{afterTitle && <div className="ml-2">{afterTitle}</div>}
</MaxTitleHeight>
<div className="is-flex is-flex-wrap-wrap is-align-items-center">
<Title className="mb-0 mr-2" title={this.getTextualTitle()}>
{this.getTitleComponent()}
</Title>
{afterTitle}
</div>
{subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
</div>
{pageActions}
@@ -144,7 +141,7 @@ export default class Page extends React.Component<Props> {
}
const content: ReactNode[] = [];
React.Children.forEach(children, (child) => {
React.Children.forEach(children, child => {
if (child) {
if (!this.isPageAction(child)) {
content.push(child);