From 8d87a09941354178999f75ecb9c6e024126384f7 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Sat, 7 Dec 2024 00:23:23 +0600 Subject: [PATCH 01/13] Fix content padding in mobile view --- .../domain-management/domain-overview-pane/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 client/my-sites/domains/domain-management/domain-overview-pane/style.scss diff --git a/client/my-sites/domains/domain-management/domain-overview-pane/style.scss b/client/my-sites/domains/domain-management/domain-overview-pane/style.scss new file mode 100644 index 00000000000000..f66dfb85be1757 --- /dev/null +++ b/client/my-sites/domains/domain-management/domain-overview-pane/style.scss @@ -0,0 +1,7 @@ +@media (max-width: 960px) { + .a4a-layout.domains-overview .domains-overview__details .item-preview__content { + padding-top: 24px; + padding-left: 24px; + padding-right: 24px; + } +} \ No newline at end of file From 6cb940e9999eb8107aa1f30ba25a2f63892cb63f Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Sat, 7 Dec 2024 00:24:26 +0600 Subject: [PATCH 02/13] Fix split button primary style for sidebar mode for flyout view --- .../domains/domain-management/list/bulk-all-domains.tsx | 8 +++++++- .../domain-management/list/options-domain-button.jsx | 6 ++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx index 8aa1c77ac39f2a..945faf093f2226 100644 --- a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx +++ b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx @@ -360,7 +360,13 @@ export default function BulkAllDomains( props: BulkAllDomainsProps ) { const isDomainsEmpty = isFetched && domains.length === 0; const buttons = ! isDomainsEmpty - ? [ ] + ? [ + , + ] : []; const purchaseActions = usePurchaseActions(); diff --git a/client/my-sites/domains/domain-management/list/options-domain-button.jsx b/client/my-sites/domains/domain-management/list/options-domain-button.jsx index 3bd444b628cd64..447cc5c8d4304e 100644 --- a/client/my-sites/domains/domain-management/list/options-domain-button.jsx +++ b/client/my-sites/domains/domain-management/list/options-domain-button.jsx @@ -20,10 +20,12 @@ class AddDomainButton extends Component { static propTypes = { selectedSiteSlug: PropTypes.string, allDomainsList: PropTypes.bool, + sidebarMode: PropTypes.bool, }; static defaultProps = { allDomainsList: false, + sidebarMode: false, }; constructor( props ) { @@ -87,8 +89,8 @@ class AddDomainButton extends Component { return ( Date: Sat, 7 Dec 2024 00:25:26 +0600 Subject: [PATCH 03/13] Add a comment to common function --- client/my-sites/domains/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/client/my-sites/domains/index.js b/client/my-sites/domains/index.js index 778f594a81fbde..8bc780ac6a6e0c 100644 --- a/client/my-sites/domains/index.js +++ b/client/my-sites/domains/index.js @@ -18,6 +18,13 @@ import { } from './domain-management/domain-overview-pane/constants'; import * as paths from './paths'; +/** + * Registers a multi-page route. + * + * @param {Object} options - The options object. + * @param {Array} options.paths - The paths to register. + * @param {Array} options.handlers - The handlers to register. These will be applied to each path. + */ function registerMultiPage( { paths: givenPaths, handlers } ) { givenPaths.forEach( ( path ) => page( path, ...handlers ) ); } From a07ce117b8daeea27543db1c298d3ec0ab386fd5 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Sat, 7 Dec 2024 00:25:57 +0600 Subject: [PATCH 04/13] Hide column headers in sidebar view of site list --- packages/domains-table/src/domains-table/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/domains-table/src/domains-table/index.tsx b/packages/domains-table/src/domains-table/index.tsx index a9cc3adaccbde7..4a6704fd0a5623 100644 --- a/packages/domains-table/src/domains-table/index.tsx +++ b/packages/domains-table/src/domains-table/index.tsx @@ -21,7 +21,7 @@ export function DomainsTable( props: DomainsTableProps & { footer?: ReactNode } const state = useGenerateDomainsTableState( allProps ); - const { isAllSitesView, domains } = props; + const { isAllSitesView, domains, sidebarMode } = props; const showDomainsToolbar = isAllSitesView || @@ -43,7 +43,7 @@ export function DomainsTable( props: DomainsTableProps & { footer?: ReactNode } 'has-checkbox': state.canSelectAnyDomains && ! hideCheckbox, } ) } > - + { ! sidebarMode && } ) } From df83ec91f9cf6b8c4bbbc2a79f6bd19c73993755 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Sat, 7 Dec 2024 00:28:23 +0600 Subject: [PATCH 05/13] Import stylesheet --- .../domains/domain-management/domain-overview-pane/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/my-sites/domains/domain-management/domain-overview-pane/index.tsx b/client/my-sites/domains/domain-management/domain-overview-pane/index.tsx index 51895efab9e144..13472c5500dba4 100644 --- a/client/my-sites/domains/domain-management/domain-overview-pane/index.tsx +++ b/client/my-sites/domains/domain-management/domain-overview-pane/index.tsx @@ -12,6 +12,7 @@ import type { ItemData, FeaturePreviewInterface, } from 'calypso/a8c-for-agencies/components/items-dashboard/item-preview-pane/types'; +import './style.scss'; interface Props { selectedDomainPreview: React.ReactNode; From 199aec4cc5bc9f1b6e7c9f43db5a7fdb2210d4eb Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Sat, 7 Dec 2024 00:29:06 +0600 Subject: [PATCH 06/13] Fix left title and button above domain list --- .../domains/domain-management/list/style.scss | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/client/my-sites/domains/domain-management/list/style.scss b/client/my-sites/domains/domain-management/list/style.scss index 4bbfc40a654033..1312234df89532 100644 --- a/client/my-sites/domains/domain-management/list/style.scss +++ b/client/my-sites/domains/domain-management/list/style.scss @@ -327,4 +327,68 @@ .domains-overview .main.domains-overview__list { max-width: 400px; +} + +main.domains-overview main.domains-overview__list .a4a-layout-column__container { + // Header navigation styles + .navigation-header { + padding: 0; + + .navigation-header__main { + padding-inline: 0; + padding: 12px 24px; + margin: 0; + } + } + + // Header title styles + .formatted-header__title { + display: flex; + align-items: center; + min-width: 40px; + font-size: 1.25rem; + font-weight: 500; + letter-spacing: normal; + } + + // Split button styles + .navigation-header__main .options-domain-button { + &.split-button { + --white-separator-color: rgba(255, 255, 255, 0.3); + display: inline-block; + white-space: nowrap; + } + + .split-button__main, + .split-button__toggle { + display: inline-flex; + align-items: center; + height: 28px; + padding: 0 12px; + font-size: 0.75rem; + line-height: 14px; + } + + .split-button__main { + font-weight: 400; + border-radius: 2px 0 0 2px; + -webkit-font-smoothing: antialiased; + } + + .split-button__toggle.button svg.gridicon { + position: relative; + top: 2px; + width: 18px; + height: 18px; + margin-top: -2px; + } + } +} + +// Similar to the sites-overview, hide the domains-overview list on the left on smaller screens. +@media (max-width: 1280px) { + main.domains-overview main.domains-overview__list { + display: none; + width: unset; + } } \ No newline at end of file From f4441405a424d3936a9b612a2f31bcafd1283af5 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Sat, 7 Dec 2024 00:57:25 +0600 Subject: [PATCH 07/13] Fix domain table item, search bar styles and spacings --- .../src/domains-table/style.scss | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/packages/domains-table/src/domains-table/style.scss b/packages/domains-table/src/domains-table/style.scss index d54ae3f4b505de..a3576ed82c97f9 100644 --- a/packages/domains-table/src/domains-table/style.scss +++ b/packages/domains-table/src/domains-table/style.scss @@ -424,3 +424,38 @@ a.domains-table-view-email-button { color: var(--color-link); } } + +main.domains-overview main.domains-overview__list .a4a-layout-column__container { + .domains-table { + margin-top: 0; + } + + .domains-table .domains-table-toolbar { + padding-inline: 0; + padding: 12px 24px; + margin: 0; + } + + .domains-table-search { + width: 100%; + } + + .domains-table-search .components-base-control__field { + margin-bottom: 0; + } + + .domains-table-search .components-input-base { + max-width: 100%; + width: 100%; + } + + .domains-table-toolbar { + border-block-end: 1px solid var(--color-border-secondary); + } + + .domains-table__row td.domains-table-row__domain, + .domains-table__row td.domains-table-row__actions { + padding: 16px 24px; + margin-inline-start: 0; + } +} From a43e3505bfdfe6b257379b3c1542d7f1a1547c32 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Sat, 7 Dec 2024 03:05:47 +0600 Subject: [PATCH 08/13] Fix title spacings --- client/my-sites/domains/domain-management/list/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/my-sites/domains/domain-management/list/style.scss b/client/my-sites/domains/domain-management/list/style.scss index 1312234df89532..19bcd12cf11c14 100644 --- a/client/my-sites/domains/domain-management/list/style.scss +++ b/client/my-sites/domains/domain-management/list/style.scss @@ -336,7 +336,7 @@ main.domains-overview main.domains-overview__list .a4a-layout-column__container .navigation-header__main { padding-inline: 0; - padding: 12px 24px; + padding: 16px 24px; margin: 0; } } @@ -345,7 +345,7 @@ main.domains-overview main.domains-overview__list .a4a-layout-column__container .formatted-header__title { display: flex; align-items: center; - min-width: 40px; + min-height: 40px; font-size: 1.25rem; font-weight: 500; letter-spacing: normal; From ddd028a0cb3a9c56036dda1335b93b61666b433b Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Tue, 10 Dec 2024 18:36:46 +0600 Subject: [PATCH 09/13] Use mixin for breakpoint --- .../domain-management/domain-overview-pane/style.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/my-sites/domains/domain-management/domain-overview-pane/style.scss b/client/my-sites/domains/domain-management/domain-overview-pane/style.scss index f66dfb85be1757..2e5b81d9c0d9ca 100644 --- a/client/my-sites/domains/domain-management/domain-overview-pane/style.scss +++ b/client/my-sites/domains/domain-management/domain-overview-pane/style.scss @@ -1,5 +1,8 @@ -@media (max-width: 960px) { - .a4a-layout.domains-overview .domains-overview__details .item-preview__content { +@import "@wordpress/base-styles/breakpoints"; +@import "@wordpress/base-styles/mixins"; + +.a4a-layout.domains-overview .domains-overview__details .item-preview__content { + @include break-large { padding-top: 24px; padding-left: 24px; padding-right: 24px; From 441cb4f1b14344db5595bac4165a884780674dd5 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Tue, 10 Dec 2024 18:37:15 +0600 Subject: [PATCH 10/13] Remove sidebar hiding style --- client/my-sites/domains/domain-management/list/style.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/client/my-sites/domains/domain-management/list/style.scss b/client/my-sites/domains/domain-management/list/style.scss index 19bcd12cf11c14..fe4621dedc3f0e 100644 --- a/client/my-sites/domains/domain-management/list/style.scss +++ b/client/my-sites/domains/domain-management/list/style.scss @@ -383,12 +383,4 @@ main.domains-overview main.domains-overview__list .a4a-layout-column__container margin-top: -2px; } } -} - -// Similar to the sites-overview, hide the domains-overview list on the left on smaller screens. -@media (max-width: 1280px) { - main.domains-overview main.domains-overview__list { - display: none; - width: unset; - } } \ No newline at end of file From 6388b61133747689b6dbdcacbb8d7f5de5b5eb71 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 11 Dec 2024 17:07:20 +0600 Subject: [PATCH 11/13] Fix table scroll and icon rotation --- .../list/bulk-all-domains.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx index 945faf093f2226..5706d8da31d2c2 100644 --- a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx +++ b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx @@ -230,6 +230,32 @@ export default function BulkAllDomains( props: BulkAllDomainsProps ) { } } + .domains-overview__list.a4a-layout-column, + .domains-overview__list .a4a-layout-column__container, + .a4a-layout-column.domains-overview__list.main .a4a-layout-column__container .main { + height: 100%; + } + + .a4a-layout-column.domains-overview__list.main .a4a-layout-column__container .main { + display: flex; + flex-direction: column; + + .domains-table { + flex-grow: 1; + margin-top: 0; + overflow: auto; + padding-bottom: 0; + + table { + max-height: unset; + } + } + } + + .domains-overview__list .gridicons-ellipsis { + rotate: 90deg; + } + @media only screen and ( min-width: 782px ) { .is-global-sidebar-visible { header.navigation-header { @@ -269,6 +295,7 @@ export default function BulkAllDomains( props: BulkAllDomainsProps ) { .domains-overview__list .domains-table { table { grid-template-columns: 4fr auto; + max-height: 100%; .domains-table__domain-name { overflow-wrap: anywhere; From e8a43bcad2e7504c4cbdf77fe7a595f9254727a5 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 11 Dec 2024 17:53:58 +0600 Subject: [PATCH 12/13] Rotate icon and make visible on hover --- .../domain-management/list/bulk-all-domains.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx index 5706d8da31d2c2..7b9677f4768da2 100644 --- a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx +++ b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx @@ -252,8 +252,19 @@ export default function BulkAllDomains( props: BulkAllDomainsProps ) { } } - .domains-overview__list .gridicons-ellipsis { - rotate: 90deg; + .domains-overview__list { + .domains-table__row { + .gridicons-ellipsis { + rotate: 90deg; + visibility: hidden; + } + + &:hover { + .gridicons-ellipsis { + visibility: visible; + } + } + } } @media only screen and ( min-width: 782px ) { From d5998ef3050396dbd84c7f70102d8e618e2ea9b8 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 11 Dec 2024 23:02:05 +0600 Subject: [PATCH 13/13] Fix extra spacing in smaller screensize --- .../my-sites/domains/domain-management/list/bulk-all-domains.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx index 7b9677f4768da2..ad523eda1ca2c2 100644 --- a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx +++ b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx @@ -239,6 +239,7 @@ export default function BulkAllDomains( props: BulkAllDomainsProps ) { .a4a-layout-column.domains-overview__list.main .a4a-layout-column__container .main { display: flex; flex-direction: column; + padding-bottom: 0; .domains-table { flex-grow: 1;