github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-02 23:23:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update styles for an adaptive height (#157)

Browse Source
This commit is contained in:
Fine0830 2022-09-13 16:31:30 +08:00 committed by GitHub
parent 0d63d538c3
commit 9ed0121fd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -19,7 +19,7 @@ limitations under the License. -->
#app { #app {
color: #2c3e50; color: #2c3e50;
height: 100%; height: 100%;
overflow: auto; overflow: hidden;
min-width: 1024px; min-width: 1024px;
} }
</style> </style>

5
src/layout/components/SideBar.vue
View File

@ -141,13 +141,14 @@ const filterMenus = (menus: any[]) => {
.side-bar { .side-bar {
background: #252a2f; background: #252a2f;
height: 100%; height: 100%;
min-height: 700px;
position: relative; position: relative;
margin-bottom: 100px; margin-bottom: 100px;
overflow-y: auto;
overflow-x: hidden;
} }
.el-menu-vertical:not(.el-menu--collapse) { .el-menu-vertical:not(.el-menu--collapse) {
width: 200px; width: 220px;
font-size: 16px; font-size: 16px;
} }

9
src/views/dashboard/List.vue
View File

@ -46,7 +46,7 @@ limitations under the License. -->
ref="multipleTableRef" ref="multipleTableRef"
:default-sort="{ prop: 'name', order: 'ascending' }" :default-sort="{ prop: 'name', order: 'ascending' }"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
height="637px" height="calc(100% - 60px)"
size="small" size="small"
> >
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
@ -156,7 +156,7 @@ import { isEmptyObject } from "@/utils/is";
const { t } = useI18n(); const { t } = useI18n();
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const pageSize = 18; const pageSize = 20;
const dashboards = ref<DashboardItem[]>([]); const dashboards = ref<DashboardItem[]>([]);
const searchText = ref<string>(""); const searchText = ref<string>("");
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
@ -500,12 +500,13 @@ function changePage(pageIndex: number) {
} }
.table { .table {
padding: 20px; padding: 20px 10px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 1px 4px 0px #00000029; box-shadow: 0px 1px 4px 0px #00000029;
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
overflow: hidden; height: 100%;
overflow: auto;
} }
.toggle-selection { .toggle-selection {