Skip to content

ThreatsDataViews: Improve responsiveness #40670

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

Merged
dkmyta merged 11 commits into from
Jan 14, 2025
Merged

ThreatsDataViews: Improve responsiveness #40670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
09991b1
Init project branch
nateweller Nov 14, 2024
9aa31c3
Init project branch
nateweller Nov 14, 2024
31c6f81
Improve component responsiveness
dkmyta Dec 18, 2024
2f73aa8
Init project branch
nateweller Nov 14, 2024
eadeae6
Fix merge conflict
nateweller Dec 31, 2024
ebe19c3
Simplify, and only default to list view in mobile
dkmyta Jan 2, 2025
cc1e0e9
Fix spacing
dkmyta Jan 2, 2025
79fbdcc
Minor adjustments to initialization of defaultLayouts, remove memo
nateweller Jan 12, 2025
2494779
Remove style overrides on core component
nateweller Jan 12, 2025
009f5ef
Rebase, fix conflicts
dkmyta Jan 14, 2025
d63c91f
Reapply min-width for ScanToggleGroupControl
dkmyta Jan 14, 2025
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
14 changes: 12 additions & 2 deletions projects/js-packages/components/components/threats-data-views/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/icons';
import { useCallback, useMemo, useState } from 'react';
import Badge from '../badge';
import useBreakpointMatch from '../layout/use-breakpoint-match';
import ThreatFixerButton from '../threat-fixer-button';
import ThreatSeverityBadge from '../threat-severity-badge';
import {
Expand Down Expand Up @@ -91,6 +92,8 @@ export default function ThreatsDataViews( {
onUnignoreThreats?: ActionButton< Threat >[ 'callback' ];
header?: JSX.Element;
} ): JSX.Element {
const [ isSm ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );

const baseView = {
sort: {
field: 'severity',
Expand Down Expand Up @@ -126,14 +129,21 @@ export default function ThreatsDataViews( {
},
};

/**
* Default View Type.
*
* Set the default view type (list or table) based on the initial screen size.
*/
const defaultViewType: 'list' | 'table' = isSm ? 'list' : 'table';

/**
* DataView view object - configures how the dataset is visible to the user.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
*/
const [ view, setView ] = useState< View >( {
type: 'table',
...defaultLayouts.table,
type: defaultViewType,
...defaultLayouts[ defaultViewType ],
} );

/**
Expand Down
5 changes: 0 additions & 5 deletions projects/plugins/protect/src/js/routes/home/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,6 @@
padding-left: 0;
padding-right: 0;
overflow: hidden;

> * {
margin-left: calc( var( --spacing-base ) * -3 ); // -24px
margin-right: calc( var( --spacing-base ) * -3 ); // -24px
}
}

.view-scan-report {
Expand Down
21 changes: 16 additions & 5 deletions projects/plugins/protect/src/js/routes/scan/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
.scan-results-container {
:global {
@media ( max-width: 599px ) {
div.dataviews-wrapper .dataviews__view-actions {
flex-wrap: wrap;
justify-content: center;
gap: calc( var( --spacing-base ) * 1.5 ); // 12px;
}
}
}
}

.hero-main {
max-width: 550px;
}
Expand All @@ -17,11 +29,6 @@
padding-left: 0;
padding-right: 0;
overflow: hidden;

> * {
margin-left: calc( var( --spacing-base ) * -3 ); // -24px
margin-right: calc( var( --spacing-base ) * -3 ); // -24px
}
}

.progress-animation {
Expand All @@ -33,3 +40,7 @@
.last-checked {
width: fit-content;
}

.toggle-group-control {
min-width: 300px;
}
Loading