yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-22 23:09:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: responsive styles

Browse Source
This commit is contained in:
Josh 2022-11-14 15:57:33 +00:00
parent c13bf2513a
commit e26dbe6029
4 changed files with 87 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/admin/admin/src/content-manager/components/RelationInput/components/RelationItem.js
View File

@ -13,7 +13,7 @@ import Drag from '@strapi/icons/Drag';
import { composeRefs } from '../../../utils'; import { composeRefs } from '../../../utils';
import { RELATION_GUTTER } from '../constants'; import { RELATION_GUTTER } from '../constants';
const ChildrenWrapper = styled(Flex)` const StackWrapper = styled(Stack)`
width: 100%; width: 100%;
/* Used to prevent endAction to be pushed out of container */ /* Used to prevent endAction to be pushed out of container */
min-width: 0; min-width: 0;
@ -189,7 +189,7 @@ export const RelationItem = ({
data-handler-id={handlerId} data-handler-id={handlerId}
{...props} {...props}
> >
<Stack spacing={1} horizontal> <StackWrapper spacing={1} horizontal>
{canDrag ? ( {canDrag ? (
<IconButton <IconButton
forwardedAs="div" forwardedAs="div"
@ -202,8 +202,8 @@ export const RelationItem = ({
<Drag /> <Drag />
</IconButton> </IconButton>
) : null} ) : null}
<ChildrenWrapper justifyContent="space-between">{children}</ChildrenWrapper> {children}
</Stack> </StackWrapper>
{endAction && <Box paddingLeft={4}>{endAction}</Box>} {endAction && <Box paddingLeft={4}>{endAction}</Box>}
</Flex> </Flex>
)} )}

8
packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/__snapshots__/RelationItem.test.js.snap
View File

@ -86,14 +86,10 @@ exports[`Content-Manager || RelationInput || RelationItem should render and matc
data-handler-id="T0" data-handler-id="T0"
> >
<div <div
class="c3 c4" class="c3 c4 c5"
spacing="1" spacing="1"
> >
<div First relation
class="c2 c5"
>
First relation
</div>
</div> </div>
</div> </div>
</li> </li>

16
packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/__snapshots__/RelationList.test.js.snap
View File

@ -113,14 +113,10 @@ exports[`Content-Manager || RelationInput || RelationList should render and matc
data-handler-id="T0" data-handler-id="T0"
> >
<div <div
class="c4 c5" class="c4 c5 c6"
spacing="1" spacing="1"
> >
<div First relation
class="c3 c6"
>
First relation
</div>
</div> </div>
</div> </div>
</li> </li>
@ -134,14 +130,10 @@ exports[`Content-Manager || RelationInput || RelationList should render and matc
data-handler-id="T2" data-handler-id="T2"
> >
<div <div
class="c4 c5" class="c4 c5 c6"
spacing="1" spacing="1"
> >
<div Second relation
class="c3 c6"
>
Second relation
</div>
</div> </div>
</div> </div>
</li> </li>

166
packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
View File

@ -168,7 +168,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
padding-top: 8px; padding-top: 8px;
} }
.c23 { .c24 {
border: 0; border: 0;
-webkit-clip: rect(0 0 0 0); -webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
@ -180,7 +180,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
width: 1px; width: 1px;
} }
.c21 { .c22 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -194,21 +194,21 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
outline: none; outline: none;
} }
.c21 svg { .c22 svg {
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
.c21 svg > g, .c22 svg > g,
.c21 svg path { .c22 svg path {
fill: #ffffff; fill: #ffffff;
} }
.c21[aria-disabled='true'] { .c22[aria-disabled='true'] {
pointer-events: none; pointer-events: none;
} }
.c21:after { .c22:after {
-webkit-transition-property: all; -webkit-transition-property: all;
transition-property: all; transition-property: all;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
@ -223,11 +223,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid transparent; border: 2px solid transparent;
} }
.c21:focus-visible { .c22:focus-visible {
outline: none; outline: none;
} }
.c21:focus-visible:after { .c22:focus-visible:after {
border-radius: 8px; border-radius: 8px;
content: ''; content: '';
position: absolute; position: absolute;
@ -238,7 +238,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid #4945ff; border: 2px solid #4945ff;
} }
.c22 { .c23 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -256,26 +256,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: none; border: none;
} }
.c22 svg > g, .c23 svg > g,
.c22 svg path { .c23 svg path {
fill: #8e8ea9; fill: #8e8ea9;
} }
.c22:hover svg > g, .c23:hover svg > g,
.c22:hover svg path { .c23:hover svg path {
fill: #666687; fill: #666687;
} }
.c22:active svg > g, .c23:active svg > g,
.c22:active svg path { .c23:active svg path {
fill: #a5a5ba; fill: #a5a5ba;
} }
.c22[aria-disabled='true'] { .c23[aria-disabled='true'] {
background-color: #eaeaef; background-color: #eaeaef;
} }
.c22[aria-disabled='true'] svg path { .c23[aria-disabled='true'] svg path {
fill: #666687; fill: #666687;
} }
@ -543,7 +543,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid #4945ff; border: 2px solid #4945ff;
} }
.c24 { .c21 {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
} }
@ -757,18 +757,18 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
draggable="true" draggable="true"
> >
<div <div
class="c19 c20" class="c19 c20 c21"
spacing="1" spacing="1"
> >
<div <div
aria-disabled="false" aria-disabled="false"
class="c21 c22" class="c22 c23"
role="button" role="button"
tabindex="0" tabindex="0"
type="button" type="button"
> >
<span <span
class="c23" class="c24"
> >
Drag Drag
</span> </span>
@ -812,36 +812,32 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</svg> </svg>
</div> </div>
<div <div
class="c18 c24" class="c25 c26"
> >
<div <span>
class="c25 c26" <a
> aria-current="page"
<span> aria-describedby="tooltip-1"
<a class="c27 c28 active"
aria-current="page" href="/"
aria-describedby="tooltip-1" tabindex="0"
class="c27 c28 active"
href="/"
tabindex="0"
>
<span
class="c29 c30"
>
Relation 1
</span>
</a>
</span>
</div>
<div
class="c31 c32"
>
<span
class="c33"
> >
Draft <span
</span> class="c29 c30"
</div> >
Relation 1
</span>
</a>
</span>
</div>
<div
class="c31 c32"
>
<span
class="c33"
>
Draft
</span>
</div> </div>
</div> </div>
<div <div
@ -882,18 +878,18 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
draggable="true" draggable="true"
> >
<div <div
class="c19 c20" class="c19 c20 c21"
spacing="1" spacing="1"
> >
<div <div
aria-disabled="false" aria-disabled="false"
class="c21 c22" class="c22 c23"
role="button" role="button"
tabindex="0" tabindex="0"
type="button" type="button"
> >
<span <span
class="c23" class="c24"
> >
Drag Drag
</span> </span>
@ -937,30 +933,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</svg> </svg>
</div> </div>
<div <div
class="c18 c24" class="c25 c26"
> >
<div <span>
class="c25 c26"
>
<span>
<span
aria-describedby="tooltip-3"
class="c38"
tabindex="0"
>
Relation 2
</span>
</span>
</div>
<div
class="c39 c40"
>
<span <span
class="c41" aria-describedby="tooltip-3"
class="c38"
tabindex="0"
> >
Published Relation 2
</span> </span>
</div> </span>
</div>
<div
class="c39 c40"
>
<span
class="c41"
>
Published
</span>
</div> </div>
</div> </div>
<div <div
@ -1001,18 +993,18 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
draggable="true" draggable="true"
> >
<div <div
class="c19 c20" class="c19 c20 c21"
spacing="1" spacing="1"
> >
<div <div
aria-disabled="false" aria-disabled="false"
class="c21 c22" class="c22 c23"
role="button" role="button"
tabindex="0" tabindex="0"
type="button" type="button"
> >
<span <span
class="c23" class="c24"
> >
Drag Drag
</span> </span>
@ -1056,21 +1048,17 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</svg> </svg>
</div> </div>
<div <div
class="c18 c24" class="c25 c26"
> >
<div <span>
class="c25 c26" <span
> aria-describedby="tooltip-5"
<span> class="c38"
<span tabindex="0"
aria-describedby="tooltip-5" >
class="c38" Relation 3
tabindex="0"
>
Relation 3
</span>
</span> </span>
</div> </span>
</div> </div>
</div> </div>
<div <div