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>
)} )}

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

@ -86,16 +86,12 @@ 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
class="c2 c5"
> >
First relation First relation
</div> </div>
</div> </div>
</div>
</li> </li>
<div <div
class="c6" class="c6"

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

@ -113,16 +113,12 @@ 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
class="c3 c6"
> >
First relation First relation
</div> </div>
</div> </div>
</div>
</li> </li>
<li <li
aria-describedby="test" aria-describedby="test"
@ -134,16 +130,12 @@ 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
class="c3 c6"
> >
Second relation Second relation
</div> </div>
</div> </div>
</div>
</li> </li>
</div> </div>
<div <div

68
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>
@ -811,9 +811,6 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
/> />
</svg> </svg>
</div> </div>
<div
class="c18 c24"
>
<div <div
class="c25 c26" class="c25 c26"
> >
@ -843,7 +840,6 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</span> </span>
</div> </div>
</div> </div>
</div>
<div <div
class="c34" class="c34"
> >
@ -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>
@ -936,9 +932,6 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
/> />
</svg> </svg>
</div> </div>
<div
class="c18 c24"
>
<div <div
class="c25 c26" class="c25 c26"
> >
@ -962,7 +955,6 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</span> </span>
</div> </div>
</div> </div>
</div>
<div <div
class="c34" class="c34"
> >
@ -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>
@ -1055,9 +1047,6 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
/> />
</svg> </svg>
</div> </div>
<div
class="c18 c24"
>
<div <div
class="c25 c26" class="c25 c26"
> >
@ -1072,7 +1061,6 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</span> </span>
</div> </div>
</div> </div>
</div>
<div <div
class="c34" class="c34"
> >