Skip to content

Commit 26d1bd2

Browse files
committed
[client] homepage mobile support
1 parent b77d53f commit 26d1bd2

File tree

15 files changed

+41
-37
lines changed

15 files changed

+41
-37
lines changed

client/VERSION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1.0.21
1+
1.1.0

client/packages/openblocks-core/package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,5 @@
3131
"lib/index.js",
3232
"lib/index.d.ts"
3333
],
34-
"author": "ioc",
35-
"license": "MIT"
34+
"author": "ioc"
3635
}

client/packages/openblocks-dev-utils/package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@
22
"name": "openblocks-dev-utils",
33
"version": "0.0.1",
44
"type": "module",
5-
"description": "Openblocks dev utils for openblocks build process and openblocks-cli",
6-
"license": "MIT"
5+
"description": "Openblocks dev utils for openblocks build process and openblocks-cli"
76
}
Binary file not shown.

client/packages/openblocks/src/comps/comps/tableComp/column/tableColumnComp.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,12 +133,13 @@ export function newCustomColumn(): ConstructorToDataType<typeof ColumnComp> {
133133
*/
134134
export function newPrimaryColumn(
135135
key: string,
136-
title?: string
136+
title?: string,
137+
isTag?: boolean
137138
): ConstructorToDataType<typeof ColumnComp> {
138139
return {
139140
title: title ?? key,
140141
dataIndex: key,
141142
isCustom: false,
142-
render: { compType: "text", comp: { text: "{{currentCell}}" } },
143+
render: { compType: isTag ? "tag" : "text", comp: { text: "{{currentCell}}" } },
143144
};
144145
}

client/packages/openblocks/src/comps/comps/tableComp/mockTableComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const tableInitValue = {
5151
const tableData = {
5252
...tableInitValue,
5353
data: JSON.stringify(i18nObjs.table.defaultData, null, " "),
54-
columns: i18nObjs.table.columns.map(({ key, title }) => newPrimaryColumn(key, title)),
54+
columns: i18nObjs.table.columns.map((t) => newPrimaryColumn(t.key, t.title, t.isTag)),
5555
};
5656
export const MockTableComp = withDefault(TableComp, tableData);
5757

client/packages/openblocks/src/i18n/locales/enObj.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const enObj: I18nObjects = {
4646
{ key: "id", title: "ID" },
4747
{ key: "name", title: "Name" },
4848
{ key: "date", title: "Date" },
49-
{ key: "department", title: "Department" },
49+
{ key: "department", title: "Department", isTag: true },
5050
],
5151
defaultData: [
5252
{

client/packages/openblocks/src/i18n/locales/types.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export type I18nObjects = {
77
defaultFormData: JSONObject;
88
};
99
table: {
10-
columns: { key: string; title: string }[];
10+
columns: { key: string; title: string; isTag?: boolean }[];
1111
defaultData: JSONObject[];
1212
};
1313
editorTutorials: {

client/packages/openblocks/src/pages/ApplicationV2/HomeCardView.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ const ApplicationCardsWrapper = styled.div`
1111
grid-column-gap: 112px;
1212
margin: 48px 26px 80px;
1313
overflow: hidden;
14-
@media screen and (max-width: 500px), (max-height: 500px) {
14+
@media screen and (max-width: 500px) {
1515
display: block;
16+
margin: 48px 18px 80px;
1617
}
1718
`;
1819

client/packages/openblocks/src/pages/ApplicationV2/HomeLayout.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { Layers } from "../../constants/Layers";
2929
import { CreateDropdown } from "./CreateDropdown";
3030
import { trans } from "../../i18n";
3131
import { isFetchingFolderElements } from "../../redux/selectors/folderSelector";
32-
import { isSmallScreen } from "util/commonUtils";
32+
import { checkIsMobile } from "util/commonUtils";
3333

3434
const Wrapper = styled.div`
3535
display: flex;
@@ -45,6 +45,9 @@ const HeaderWrapper = styled.div`
4545
padding: 0 36px;
4646
align-items: center;
4747
flex-shrink: 0;
48+
@media screen and (max-width: 500px) {
49+
padding: 0 24px;
50+
}
4851
`;
4952

5053
const OperationWrapper = styled.div`
@@ -55,6 +58,9 @@ const OperationWrapper = styled.div`
5558
height: 32px;
5659
padding: 0 36px;
5760
margin: 8px 0 0;
61+
@media screen and (max-width: 500px) {
62+
padding: 0 24px;
63+
}
5864
`;
5965

6066
const ContentWrapper = styled.div`
@@ -79,7 +85,7 @@ const OperationRightWrapper = styled.div`
7985
align-items: center;
8086
flex-shrink: 0;
8187
margin-left: auto;
82-
@media screen and (max-width: 500px), (max-height: 500px) {
88+
@media screen and (max-width: 500px) {
8389
> Button {
8490
display: none;
8591
}
@@ -157,7 +163,7 @@ const SkeletonStyle = styled(Skeleton)`
157163
margin-right: 120px;
158164
}
159165
}
160-
@media screen and (max-width: 500px), (max-height: 500px) {
166+
@media screen and (max-width: 500px) {
161167
.ant-skeleton-content .ant-skeleton-paragraph > li {
162168
max-width: calc(100vw - 72px);
163169
min-width: calc(100vw - 72px);
@@ -174,7 +180,7 @@ const EmptyView = styled.div`
174180
align-items: center;
175181
flex-grow: 1;
176182
padding-top: 120px;
177-
@media screen and (max-width: 500px), (max-height: 500px) {
183+
@media screen and (max-width: 500px) {
178184
> div,
179185
> button {
180186
display: none;
@@ -199,7 +205,7 @@ const LayoutSwitcher = styled.div`
199205
background-color: #f5f5f6;
200206
}
201207
202-
@media screen and (max-width: 500px), (max-height: 500px) {
208+
@media screen and (max-width: 500px) {
203209
display: none;
204210
}
205211
`;
@@ -243,7 +249,7 @@ export function HomeLayout(props: HomeLayoutProps) {
243249
const [filterBy, setFilterBy] = useState<HomeResKey>("All");
244250
const [searchValue, setSearchValue] = useState("");
245251
const [layout, setLayout] = useState<HomeLayoutType>(
246-
isSmallScreen ? "card" : getHomeLayout()
252+
checkIsMobile(window.innerWidth) ? "card" : getHomeLayout()
247253
);
248254

249255
useEffect(() => saveHomeLayout(layout), [layout]);

0 commit comments

Comments
 (0)