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 { RELATION_GUTTER } from '../constants';
const ChildrenWrapper = styled(Flex)`
const StackWrapper = styled(Stack)`
width: 100%;
/* Used to prevent endAction to be pushed out of container */
min-width: 0;
@ -189,7 +189,7 @@ export const RelationItem = ({
data-handler-id={handlerId}
{...props}
>
<Stack spacing={1} horizontal>
<StackWrapper spacing={1} horizontal>
{canDrag ? (
<IconButton
forwardedAs="div"
@ -202,8 +202,8 @@ export const RelationItem = ({
<Drag />
</IconButton>
) : null}
<ChildrenWrapper justifyContent="space-between">{children}</ChildrenWrapper>
</Stack>
{children}
</StackWrapper>
{endAction && <Box paddingLeft={4}>{endAction}</Box>}
</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"
>
<div
class="c3 c4"
class="c3 c4 c5"
spacing="1"
>
<div
class="c2 c5"
>
First relation
</div>
First relation
</div>
</div>
</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"
>
<div
class="c4 c5"
class="c4 c5 c6"
spacing="1"
>
<div
class="c3 c6"
>
First relation
</div>
First relation
</div>
</div>
</li>
@ -134,14 +130,10 @@ exports[`Content-Manager || RelationInput || RelationList should render and matc
data-handler-id="T2"
>
<div
class="c4 c5"
class="c4 c5 c6"
spacing="1"
>
<div
class="c3 c6"
>
Second relation
</div>
Second relation
</div>
</div>
</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;
}
.c23 {
.c24 {
border: 0;
-webkit-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;
}
.c21 {
.c22 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -194,21 +194,21 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
outline: none;
}
.c21 svg {
.c22 svg {
height: 12px;
width: 12px;
}
.c21 svg > g,
.c21 svg path {
.c22 svg > g,
.c22 svg path {
fill: #ffffff;
}
.c21[aria-disabled='true'] {
.c22[aria-disabled='true'] {
pointer-events: none;
}
.c21:after {
.c22:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
@ -223,11 +223,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid transparent;
}
.c21:focus-visible {
.c22:focus-visible {
outline: none;
}
.c21:focus-visible:after {
.c22:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
@ -238,7 +238,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid #4945ff;
}
.c22 {
.c23 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -256,26 +256,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: none;
}
.c22 svg > g,
.c22 svg path {
.c23 svg > g,
.c23 svg path {
fill: #8e8ea9;
}
.c22:hover svg > g,
.c22:hover svg path {
.c23:hover svg > g,
.c23:hover svg path {
fill: #666687;
}
.c22:active svg > g,
.c22:active svg path {
.c23:active svg > g,
.c23:active svg path {
fill: #a5a5ba;
}
.c22[aria-disabled='true'] {
.c23[aria-disabled='true'] {
background-color: #eaeaef;
}
.c22[aria-disabled='true'] svg path {
.c23[aria-disabled='true'] svg path {
fill: #666687;
}
@ -543,7 +543,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid #4945ff;
}
.c24 {
.c21 {
width: 100%;
min-width: 0;
}
@ -757,18 +757,18 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
draggable="true"
>
<div
class="c19 c20"
class="c19 c20 c21"
spacing="1"
>
<div
aria-disabled="false"
class="c21 c22"
class="c22 c23"
role="button"
tabindex="0"
type="button"
>
<span
class="c23"
class="c24"
>
Drag
</span>
@ -812,36 +812,32 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</svg>
</div>
<div
class="c18 c24"
class="c25 c26"
>
<div
class="c25 c26"
>
<span>
<a
aria-current="page"
aria-describedby="tooltip-1"
class="c27 c28 active"
href="/"
tabindex="0"
>
<span
class="c29 c30"
>
Relation 1
</span>
</a>
</span>
</div>
<div
class="c31 c32"
>
<span
class="c33"
<span>
<a
aria-current="page"
aria-describedby="tooltip-1"
class="c27 c28 active"
href="/"
tabindex="0"
>
Draft
</span>
</div>
<span
class="c29 c30"
>
Relation 1
</span>
</a>
</span>
</div>
<div
class="c31 c32"
>
<span
class="c33"
>
Draft
</span>
</div>
</div>
<div
@ -882,18 +878,18 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
draggable="true"
>
<div
class="c19 c20"
class="c19 c20 c21"
spacing="1"
>
<div
aria-disabled="false"
class="c21 c22"
class="c22 c23"
role="button"
tabindex="0"
type="button"
>
<span
class="c23"
class="c24"
>
Drag
</span>
@ -937,30 +933,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</svg>
</div>
<div
class="c18 c24"
class="c25 c26"
>
<div
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>
</div>
</span>
</div>
<div
class="c39 c40"
>
<span
class="c41"
>
Published
</span>
</div>
</div>
<div
@ -1001,18 +993,18 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
draggable="true"
>
<div
class="c19 c20"
class="c19 c20 c21"
spacing="1"
>
<div
aria-disabled="false"
class="c21 c22"
class="c22 c23"
role="button"
tabindex="0"
type="button"
>
<span
class="c23"
class="c24"
>
Drag
</span>
@ -1056,21 +1048,17 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</svg>
</div>
<div
class="c18 c24"
class="c25 c26"
>
<div
class="c25 c26"
>
<span>
<span
aria-describedby="tooltip-5"
class="c38"
tabindex="0"
>
Relation 3
</span>
<span>
<span
aria-describedby="tooltip-5"
class="c38"
tabindex="0"
>
Relation 3
</span>
</div>
</span>
</div>
</div>
<div