tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: removes pseudo element from mobile doc tabs

Browse Source
This commit is contained in:
Jacob Fletcher
2023-10-04 16:47:13 -04:00
parent c3abaf5f1d
commit 10bd20904a
2 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.scss
View File

@@ -1,6 +1,8 @@
@import '../../../../scss/styles.scss';
.doc-tabs {
display: flex;
&__tabs {
display: flex;
gap: calc(var(--base) / 2);
@@ -18,20 +20,14 @@
&__tabs {
padding: 0;
margin-left: var(--gutter-h);
& > *:last-child {
// CSS hack, give the illusion of right margin within the overflowing container
// margin-right, padding-right, etc are tricky within overflowing flex-boxes
&::after {
content: '';
padding-right: var(--gutter-h);
height: 1px;
}
}
}
}
@include small-break {
&__tabs-container {
margin-right: var(--gutter-h);
}
&__tabs {
gap: var(--gutter-h);
}

26
packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.tsx
View File

@@ -17,20 +17,22 @@ export const DocumentTabs: React.FC<DocumentTabProps> = (props) => {
if ((collection && isEditing) || global) {
return (
<div className={baseClass}>
<ul className={`${baseClass}__tabs`}>
{tabs?.map((Tab, index) => {
return <DocumentTab {...props} {...Tab} key={`tab-${index}`} />
})}
{customViews?.map((CustomView, index) => {
const { Tab, path } = CustomView
<div className={`${baseClass}__tabs-container`}>
<ul className={`${baseClass}__tabs`}>
{tabs?.map((Tab, index) => {
return <DocumentTab {...props} {...Tab} key={`tab-${index}`} />
})}
{customViews?.map((CustomView, index) => {
const { Tab, path } = CustomView
if (typeof Tab === 'function') {
return <Tab path={path} {...props} key={`tab-custom-${index}`} />
}
if (typeof Tab === 'function') {
return <Tab path={path} {...props} key={`tab-custom-${index}`} />
}
return <DocumentTab {...props} {...Tab} key={`tab-custom-${index}`} />
})}
</ul>
return <DocumentTab {...props} {...Tab} key={`tab-custom-${index}`} />
})}
</ul>
</div>
</div>
)
}