Skip to content

Commit 2a13103

Browse files
0xJacky0xJacky
committed
[frontend-next] Optimized styles
1 parent 4512fc0 commit 2a13103

File tree

6 files changed

+85
-72
lines changed

6 files changed

+85
-72
lines changed

‎frontend/src/components/StdDataDisplay/StdTable.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,9 @@ const reset_search = async () => {
176176
layout="inline"
177177
>
178178
<template #action>
179-
<a-button @click="reset_search">重置</a-button>
179+
<div class="reset-btn">
180+
<a-button @click="reset_search">重置</a-button>
181+
</div>
180182
</template>
181183
</std-data-entry>
182184
<a-table
@@ -238,4 +240,11 @@ const reset_search = async () => {
238240
// overflow-x: scroll;
239241
}
240242
}
243+
244+
.reset-btn {
245+
// min-height: 50px;
246+
height: 100%;
247+
display: flex;
248+
align-items: flex-end;
249+
}
241250
</style>

‎frontend/src/components/StdDataEntry/StdDataEntry.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {defineComponent} from 'vue'
22
import {Form, FormItem} from 'ant-design-vue'
3+
import './style.less'
34

45
export default defineComponent({
56
props: ['dataList', 'dataSource', 'error', 'layout'],
@@ -18,7 +19,7 @@ export default defineComponent({
1819
})
1920

2021
if (slots.action) {
21-
template.push(<div>{slots.action()}</div>)
22+
template.push(<div class={'std-data-entry-action'}>{slots.action()}</div>)
2223
}
2324

2425
return <Form layout={props.layout || 'vertical'}>{template}</Form>

‎frontend/src/components/StdDataEntry/style.less‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.std-data-entry-action {
2+
@media (max-width: 350px) {
3+
display: block;
4+
width: 100%;
5+
margin: 10px 0;
6+
}
7+
}

‎frontend/src/layouts/BaseLayout.vue‎

Lines changed: 59 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,60 @@
1+
<script setup lang="ts">
2+
import HeaderLayout from './HeaderLayout.vue'
3+
import SideBar from './SideBar.vue'
4+
import FooterLayout from './FooterLayout.vue'
5+
import PageHeader from '@/components/PageHeader/PageHeader.vue'
6+
import zh_CN from 'ant-design-vue/es/locale/zh_CN'
7+
import zh_TW from 'ant-design-vue/es/locale/zh_TW'
8+
import en_US from 'ant-design-vue/es/locale/en_US'
9+
import {computed, ref} from 'vue'
10+
import _ from 'lodash'
11+
12+
import gettext from '@/gettext'
13+
14+
const drawer_visible = ref(false)
15+
const collapsed = ref(collapse())
16+
const clientWidth = ref(getClientWidth())
17+
18+
addEventListener('resize', _.throttle(() => {
19+
collapsed.value = collapse()
20+
}, 50))
21+
22+
function getClientWidth() {
23+
return document.body.clientWidth
24+
}
25+
26+
function collapse() {
27+
return getClientWidth() < 768
28+
}
29+
30+
const lang = computed(() => {
31+
switch (gettext.current) {
32+
case 'zh_CN':
33+
return zh_CN
34+
case 'zh_TW':
35+
return zh_TW
36+
default:
37+
return en_US
38+
}
39+
})
40+
41+
</script>
142
<template>
243
<a-config-provider :locale="lang">
344
<a-layout style="min-height: 100%;">
4-
<a-drawer
5-
v-show="clientWidth<512"
6-
:closable="false"
7-
:visible="collapsed"
8-
placement="left"
9-
@close="collapsed=false"
10-
>
11-
<side-bar/>
12-
</a-drawer>
45+
<template v-show="clientWidth.value<512">
46+
<a-drawer
47+
:closable="false"
48+
v-model:visible="drawer_visible"
49+
placement="left"
50+
@close="drawer_visible=false"
51+
>
52+
<side-bar/>
53+
</a-drawer>
54+
</template>
1355

1456
<a-layout-sider
15-
v-show="clientWidth>=512"
16-
v-model="collapsed"
57+
v-model:collapsed="collapsed"
1758
:collapsible="true"
1859
:style="{zIndex: 11}"
1960
theme="light"
@@ -24,7 +65,7 @@
2465

2566
<a-layout>
2667
<a-layout-header :style="{position: 'fixed', zIndex: 10, width:'100%'}">
27-
<header-layout @clickUnFold="collapsed=true"/>
68+
<header-layout @clickUnFold="drawer_visible=true"/>
2869
</a-layout-header>
2970

3071
<a-layout-content>
@@ -43,59 +84,14 @@
4384
</a-config-provider>
4485
</template>
4586

46-
<script>
47-
import HeaderLayout from './HeaderLayout.vue'
48-
import SideBar from './SideBar.vue'
49-
import FooterLayout from './FooterLayout.vue'
50-
import PageHeader from '@/components/PageHeader/PageHeader.vue'
51-
import zh_CN from 'ant-design-vue/es/locale/zh_CN'
52-
import zh_TW from 'ant-design-vue/es/locale/zh_TW'
53-
import en_US from 'ant-design-vue/es/locale/en_US'
54-
55-
export default {
56-
name: 'BaseLayout',
57-
data() {
58-
return {
59-
collapsed: this.collapse(),
60-
clientWidth: document.body.clientWidth,
61-
}
62-
},
63-
mounted() {
64-
window.onresize = () => {
65-
this.collapsed = this.collapse()
66-
this.clientWidth = this.getClientWidth()
67-
}
68-
},
69-
components: {
70-
SideBar,
71-
PageHeader,
72-
HeaderLayout,
73-
FooterLayout
74-
},
75-
methods: {
76-
getClientWidth() {
77-
return document.body.clientWidth
78-
},
79-
collapse() {
80-
return !(this.getClientWidth() > 768 || this.getClientWidth() < 512)
81-
}
82-
},
83-
computed: {
84-
lang: {
85-
get() {
86-
switch (this.$language.current) {
87-
case 'zh_CN':
88-
return zh_CN
89-
case 'zh_TW':
90-
return zh_TW
91-
default:
92-
return en_US
93-
}
94-
}
95-
}
87+
<style lang="less" scoped>
88+
.layout-sider {
89+
@media (max-width: 600px) {
90+
display: none;
9691
}
9792
}
98-
</script>
93+
</style>
94+
9995
<style lang="less">
10096
.layout-sider .sidebar {
10197
//position: fixed;

‎frontend/src/layouts/HeaderLayout.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ function logout() {
6868
.tool {
6969
position: fixed;
7070
left: 20px;
71-
@media (min-width: 512px) {
71+
@media (min-width: 600px) {
7272
display: none;
7373
}
7474
}

‎frontend/src/views/dashboard/DashBoard.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ function wsOnMessage(m: { data: any }) {
131131
<template>
132132
<div>
133133
<a-row :gutter="[16,16]" class="first-row">
134-
<a-col :xl="7" :lg="24" :md="24">
134+
<a-col :xl="7" :lg="24" :md="24" :xs="24">
135135
<a-card :title="$gettext('Server Info')" :bordered="false">
136136
<p>
137137
<translate>Uptime:</translate>
@@ -155,7 +155,7 @@ function wsOnMessage(m: { data: any }) {
155155
</p>
156156
</a-card>
157157
</a-col>
158-
<a-col :xl="10" :lg="16" :md="24" class="chart_dashboard">
158+
<a-col :xl="10" :lg="16" :md="24" :xs="24" class="chart_dashboard">
159159
<a-card :title="$gettext('Memory and Storage')" :bordered="false">
160160
<a-row :gutter="[0,16]">
161161
<a-col :xs="24" :sm="24" :md="8">
@@ -174,7 +174,7 @@ function wsOnMessage(m: { data: any }) {
174174
</a-row>
175175
</a-card>
176176
</a-col>
177-
<a-col :xl="7" :lg="8" :sm="24" class="chart_dashboard">
177+
<a-col :xl="7" :lg="8" :sm="24" :xs="24" class="chart_dashboard">
178178
<a-card :title="$gettext('Network Statistics')" :bordered="false">
179179
<a-row :gutter="16">
180180
<a-col :span="12">
@@ -190,7 +190,7 @@ function wsOnMessage(m: { data: any }) {
190190
</a-col>
191191
</a-row>
192192
<a-row class="row-two" :gutter="[16,32]">
193-
<a-col :xl="8" :lg="24" :md="24" :sm="24">
193+
<a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
194194
<a-card :title="$gettext('CPU Status')" :bordered="false">
195195
<a-statistic :value="cpu" title="CPU">
196196
<template v-slot:suffix>
@@ -200,7 +200,7 @@ function wsOnMessage(m: { data: any }) {
200200
<area-chart :series="cpu_analytic_series" :max="100"/>
201201
</a-card>
202202
</a-col>
203-
<a-col :xl="8" :lg="12" :md="24" :sm="24">
203+
<a-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
204204
<a-card :title="$gettext('Network')">
205205
<a-row :gutter="16">
206206
<a-col :span="12">
@@ -222,7 +222,7 @@ function wsOnMessage(m: { data: any }) {
222222
<area-chart :series="net_analytic" :y_formatter="net_formatter"/>
223223
</a-card>
224224
</a-col>
225-
<a-col :xl="8" :lg="12" :md="24" :sm="24">
225+
<a-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
226226
<a-card :title="$gettext('Disk IO')">
227227
<a-row :gutter="16">
228228
<a-col :span="12">

0 commit comments

Comments
 (0)