Skip to content

feat(ui): make collections and workflow views responsive #7827

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.

Sign up for GitHub

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

Open
delucis wants to merge 15 commits into
base: main
Choose a base branch
from
Open

feat(ui): make collections and workflow views responsive #7827

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2cb9d2a
fix: remove minimum width from app container
delucis May 23, 2026
980ba5c
feat: use smaller margin on small viewports in collection and workflo…
delucis May 23, 2026
3c2bc2a
feat: snugger collection controls on small screens and let them wrap
delucis May 23, 2026
5e1cca3
feat: make top cards responsive in collection and workflow views
delucis May 23, 2026
b8ead5f
feat: stack collection sidebar vertically on small screens
delucis May 23, 2026
b0a4976
fix: prevent “No entries” message overflowing
delucis May 23, 2026
9ef9b79
feat: make workflow column spacing responsive
delucis May 23, 2026
81a1090
feat: make workflow column headings responsive
delucis May 23, 2026
b848afd
fix: prevent text overflowing collection view control dropdowns
delucis May 23, 2026
a8018c6
feat: make workflow cards responsive
delucis May 23, 2026
efc0e71
feat: hide delete/publish buttons on workflow cards on small screens
delucis May 23, 2026
77ebb5c
fix: don’t hide buttons on workflow cards if device doesn’t support h…
delucis May 23, 2026
c767ab3
fix: remove unnecessary style in workflow list
delucis May 23, 2026
eef5c0c
fix: address lint error
delucis May 23, 2026
7ab0fe0
test: update snapshots to match changes
delucis May 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/decap-cms-core/src/components/App/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ TopBarProgress.config({
});

const AppMainContainer = styled.div`
min-width: 800px;
max-width: 1440px;
margin: 0 auto;
`;
Expand Down
13 changes: 10 additions & 3 deletions packages/decap-cms-core/src/components/Collection/Collection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,23 @@ import {
} from '../../reducers/entries';

const CollectionContainer = styled.div`
margin: ${lengths.pageMargin};
display: flex;
flex-direction: column;
gap: 20px;
margin: ${lengths.pageMarginMobile};
@media (min-width: 500px) {
margin: ${lengths.pageMargin};
}
`;

const CollectionMain = styled.main`
padding-left: 280px;
@media (min-width: 800px) {
padding-left: 280px;
}
`;

const SearchResultContainer = styled.div`
${components.cardTop};
margin-bottom: 22px;
`;

const SearchResultHeading = styled.h1`
Expand Down
7 changes: 4 additions & 3 deletions packages/decap-cms-core/src/components/Collection/CollectionControls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@ import GroupControl from './GroupControl';

const CollectionControlsContainer = styled.div`
display: flex;
flex-flow: row-reverse wrap;
align-items: center;
flex-direction: row-reverse;
gap: 6px 0;
margin-top: 22px;
width: ${lengths.topCardWidth};
max-width: 100%;

& > div {
margin-left: 6px;
@media (min-width: 500px) {
gap: 6px;
}
`;

Expand Down
5 changes: 3 additions & 2 deletions packages/decap-cms-core/src/components/Collection/CollectionTop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ import { components, buttons, shadows } from 'decap-cms-ui-default';

const CollectionTopContainer = styled.div`
${components.cardTop};
margin-bottom: 22px;
`;

const CollectionTopRow = styled.div`
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: space-between;
`;
Expand All @@ -26,13 +27,13 @@ const CollectionTopNewButton = styled(Link)`
${shadows.dropDeep};
${buttons.default};
${buttons.gray};
white-space: nowrap;

padding: 0 30px;
`;

const CollectionTopDescription = styled.p`
${components.cardTopDescription};
margin-bottom: 0;
`;

function getCollectionProps(collection) {
Expand Down
1 change: 1 addition & 0 deletions packages/decap-cms-core/src/components/Collection/ControlButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const Button = styled(StyledDropdownButton)`
${buttons.medium};
${buttons.grayText};
font-size: 14px;
white-space: nowrap;

&:after {
top: 11px;
Expand Down
1 change: 1 addition & 0 deletions packages/decap-cms-core/src/components/Collection/Entries/Entries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import EntryListing from './EntryListing';

const PaginationMessage = styled.div`
width: ${lengths.topCardWidth};
max-width: 100%;
padding: 16px;
text-align: center;
`;
Expand Down
15 changes: 8 additions & 7 deletions packages/decap-cms-core/src/components/Collection/Sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import styled from '@emotion/styled';
import { css } from '@emotion/react';
import { translate } from 'react-polyglot';
import { NavLink } from 'react-router-dom';
import { Icon, components, colors } from 'decap-cms-ui-default';
import { Icon, components, colors, lengths } from 'decap-cms-ui-default';

import { searchCollections } from '../../actions/collections';
import CollectionSearch from './CollectionSearch';
Expand All @@ -21,19 +21,20 @@ const styles = {

const SidebarContainer = styled.aside`
${components.card};
width: 250px;
width: ${lengths.topCardWidth};
max-width: 100%;
padding: 8px 0 12px;
position: fixed;
max-height: calc(100vh - 112px);
display: flex;
flex-direction: column;
@media (min-width: 800px) {
position: fixed;
width: 250px;
}
`;

const SidebarHeading = styled.h2`
font-size: 22px;
font-weight: 600;
line-height: 37px;
padding: 0;
${components.cardTopHeading};
margin: 10px 20px;
color: ${colors.textLead};
`;
Expand Down
88 changes: 76 additions & 12 deletions .../decap-cms-core/src/components/Collection/__tests__/__snapshots__/Collection.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,27 @@
exports[`Collection should render connected component 1`] = `
<DocumentFragment>
.emotion-0 {
margin: 28px 18px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
margin: 12px 8px;
}

.emotion-2 {
padding-left: 280px;
@media (min-width: 500px) {
.emotion-0 {
margin: 28px 18px;
}
}

@media (min-width: 800px) {
.emotion-2 {
padding-left: 280px;
}
}

<div
Expand Down Expand Up @@ -45,11 +61,27 @@ exports[`Collection should render connected component 1`] = `
exports[`Collection should render with collection with create url 1`] = `
<DocumentFragment>
.emotion-0 {
margin: 28px 18px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
margin: 12px 8px;
}

@media (min-width: 500px) {
.emotion-0 {
margin: 28px 18px;
}
}

.emotion-2 {
padding-left: 280px;
@media (min-width: 800px) {
.emotion-2 {
padding-left: 280px;
}
}

<div
Expand Down Expand Up @@ -78,11 +110,27 @@ exports[`Collection should render with collection with create url 1`] = `
exports[`Collection should render with collection with create url and path 1`] = `
<DocumentFragment>
.emotion-0 {
margin: 28px 18px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
margin: 12px 8px;
}

.emotion-2 {
padding-left: 280px;
@media (min-width: 500px) {
.emotion-0 {
margin: 28px 18px;
}
}

@media (min-width: 800px) {
.emotion-2 {
padding-left: 280px;
}
}

<div
Expand Down Expand Up @@ -113,11 +161,27 @@ exports[`Collection should render with collection with create url and path 1`] =
exports[`Collection should render with collection without create url 1`] = `
<DocumentFragment>
.emotion-0 {
margin: 28px 18px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
margin: 12px 8px;
}

@media (min-width: 500px) {
.emotion-0 {
margin: 28px 18px;
}
}

.emotion-2 {
padding-left: 280px;
@media (min-width: 800px) {
.emotion-2 {
padding-left: 280px;
}
}

<div
Expand Down
Loading
Loading