Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-01-08 16:42:10 +01:00
Code Issues Packages Projects Releases Activity

Make plugin overview header responsive

Browse Source 
Pushed-by: Konstantin Schaper<konstantin.schaper@cloudogu.com>
Co-authored-by: Konstantin Schaper<konstantin.schaper@cloudogu.com>
This commit is contained in:
Konstantin Schaper
2024-01-10 18:08:00 +01:00
parent a67d623042
commit 86e8ff99aa
3 changed files with 37 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/improve_plugin_overview_header_layout.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: fixed
description: Plugin overview header layout not responsive

30
scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx
View File

@@ -23,6 +23,26 @@
*/
import * as React from "react";
import classNames from "classnames";
import styled from "styled-components";
const ActionContainer = styled.div`
@media screen and (max-width: 768px) {
flex-direction: column;
> button {
flex: 1 1 100%;
}
}
@media screen and (min-width: 769px) and (max-width: 1215px) {
> button {
flex-grow: 1;
}
}
@media screen and (min-width: 1216px) {
> button {
min-width: 25ch;
}
}
`;
type Props = {
children?: React.ReactElement;
@@ -32,15 +52,9 @@ export default class PluginTopActions extends React.Component<Props> {
render() {
const { children } = this.props;
return (
<div
className={classNames(
"is-flex",
"is-justify-content-flex-end",
"is-align-items-center"
)}
>
<ActionContainer className={classNames("is-flex", "is-align-self-stretch", "has-gap-1")}>
{children}
</div>
</ActionContainer>
);
}
}

24
scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx
View File

@@ -25,7 +25,7 @@ import * as React from "react";
import { FC, useState } from "react";
import { useTranslation } from "react-i18next";
import { Plugin } from "@scm-manager/ui-types";
import { ButtonGroup, ErrorNotification, Loading, Notification, Subtitle, Title } from "@scm-manager/ui-components";
import { ErrorNotification, Loading, Notification, Subtitle, Title } from "@scm-manager/ui-components";
import PluginsList from "../components/PluginList";
import PluginTopActions from "../components/PluginTopActions";
import ExecutePendingActionModal from "../components/ExecutePendingActionModal";
@@ -69,6 +69,10 @@ const StickyHeader = styled.div`
border-bottom: solid 2px var(--scm-border-color);
padding-bottom: 1rem;
padding-top: 1rem;
@media screen and (max-width: 1215px) {
flex-direction: column !important;
}
`;
const PluginsOverview: FC<Props> = ({ installed }) => {
@@ -96,16 +100,14 @@ const PluginsOverview: FC<Props> = ({ installed }) => {
const renderHeader = (actions: React.ReactElement) => {
return (
<StickyHeader className="has-background-secondary-least ">
<div className="is-flex is-justify-content-space-between is-align-items-baseline">
<div>
<Title className="is-flex">
{t("plugins.title")} <PluginCenterAuthInfo {...pluginCenterAuthInfo} />
</Title>
<Subtitle subtitle={installed ? t("plugins.installedSubtitle") : t("plugins.availableSubtitle")} />
</div>
<PluginTopActions>{actions}</PluginTopActions>
<StickyHeader className="has-background-secondary-least is-flex is-justify-content-space-between is-align-items-baseline has-gap-2">
<div className="is-flex-shrink-0">
<Title className="is-flex">
{t("plugins.title")} <PluginCenterAuthInfo {...pluginCenterAuthInfo} />
</Title>
<Subtitle subtitle={installed ? t("plugins.installedSubtitle") : t("plugins.availableSubtitle")} />
</div>
<PluginTopActions>{actions}</PluginTopActions>
</StickyHeader>
);
};
@@ -147,7 +149,7 @@ const PluginsOverview: FC<Props> = ({ installed }) => {
);
}
return <>{buttons.length > 0 ? <ButtonGroup>{buttons}</ButtonGroup> : null}</>;
return <>{buttons.length > 0 ? buttons : null}</>;
};
const computeUpdateAllSize = () => {