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

feat: mobile terminal adaptation (#78)

Browse Source
This commit is contained in:
Fine0830 2022-05-09 14:54:08 +08:00 committed by GitHub
parent 2a2500a28d
commit d93a7cead2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 56 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

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

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

@ -109,14 +109,21 @@ import { ref } from "vue";
import { useRouter, RouteRecordRaw } from "vue-router";
import { useI18n } from "vue-i18n";
import Icon from "@/components/Icon.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
const appStore = useAppStoreWithOut();
const { t } = useI18n();
const name = ref<any>(String(useRouter().currentRoute.value.name));
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
? ref("light")
: ref("black");
const routes = ref<any>(useRouter().options.routes);
const isCollapse = ref(false);
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
appStore.setIsMobile(true);
} else {
appStore.setIsMobile(false);
}
const isCollapse = ref(appStore.isMobile ? true : false);
const controlMenu = () => {
isCollapse.value = !isCollapse.value;
};

5
src/store/modules/app.ts
View File

@ -33,6 +33,7 @@ interface AppState {
autoRefresh: boolean;
pageTitle: string;
version: string;
isMobile: boolean;
}
export const appStore = defineStore({
@ -51,6 +52,7 @@ export const appStore = defineStore({
autoRefresh: false,
pageTitle: "",
version: "",
isMobile: false,
}),
getters: {
duration(): Duration {
@ -121,6 +123,9 @@ export const appStore = defineStore({
this.utcHour = utcHour;
this.utc = `${utcHour}:${utcMin}`;
},
setIsMobile(mode: boolean) {
this.isMobile = mode;
},
setEventStack(funcs: (() => void)[]): void {
this.eventStack = funcs;
},

418
src/styles/grid.scss
View File

@ -15,10 +15,7 @@
* limitations under the License.
*/
.show-xs,
.show-sm,
.show-md,
.show-lg {
.show-xs {
display: none !important;
}
@media (max-width: 767px) {
@ -30,145 +27,6 @@
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.show-sm {
display: block !important;
}
.hide-sm {
display: none !important;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.show-md {
display: block !important;
}
.hide-md {
display: none !important;
}
}
@media (min-width: 1280px) {
.show-lg {
display: block !important;
}
.hide-lg {
display: none !important;
}
}
.g-xs-1,
.g-xs-2,
.g-xs-3,
.g-xs-4,
.g-xs-5,
.g-xs-6,
.g-xs-7,
.g-xs-8,
.g-xs-9,
.g-xs-10,
.g-xs-11,
.g-xs-12 {
float: left;
min-height: 1px;
}
.g-xs-12 {
width: 100%;
}
.g-xs-11 {
width: 91.666%;
}
.g-xs-10 {
width: 83.333%;
}
.g-xs-9 {
width: 75%;
}
.g-xs-8 {
width: 66.666%;
}
.g-xs-7 {
width: 58.333%;
}
.g-xs-6 {
width: 50%;
}
.g-xs-5 {
width: 41.666%;
}
.g-xs-4 {
width: 33.333%;
}
.g-xs-3 {
width: 25%;
}
.g-xs-2 {
width: 16.666%;
}
.g-xs-1 {
width: 8.333%;
}
.g-xs-space-12 {
margin-left: 100%;
}
.g-xs-space-11 {
margin-left: 91.666%;
}
.g-xs-space-10 {
margin-left: 83.333%;
}
.g-xs-space-9 {
margin-left: 75%;
}
.g-xs-space-8 {
margin-left: 66.666%;
}
.g-xs-space-7 {
margin-left: 58.333%;
}
.g-xs-space-6 {
margin-left: 50%;
}
.g-xs-space-5 {
margin-left: 41.666%;
}
.g-xs-space-4 {
margin-left: 33.333%;
}
.g-xs-space-3 {
margin-left: 25%;
}
.g-xs-space-2 {
margin-left: 16.666%;
}
.g-xs-space-1 {
margin-left: 8.333%;
}
@media (min-width: 768px) {
.g-sm-1,
.g-sm-2,
@ -233,278 +91,4 @@
.g-sm-1 {
width: 8.333%;
}
.g-sm-space-12 {
margin-left: 100%;
}
.g-sm-space-11 {
margin-left: 91.666%;
}
.g-sm-space-10 {
margin-left: 83.333%;
}
.g-sm-space-9 {
margin-left: 75%;
}
.g-sm-space-8 {
margin-left: 66.666%;
}
.g-sm-space-7 {
margin-left: 58.333%;
}
.g-sm-space-6 {
margin-left: 50%;
}
.g-sm-space-5 {
margin-left: 41.666%;
}
.g-sm-space-4 {
margin-left: 33.333%;
}
.g-sm-space-3 {
margin-left: 25%;
}
.g-sm-space-2 {
margin-left: 16.666%;
}
.g-sm-space-1 {
margin-left: 8.333%;
}
}
@media (min-width: 1024px) {
.g-md-1,
.g-md-2,
.g-md-3,
.g-md-4,
.g-md-5,
.g-md-6,
.g-md-7,
.g-md-8,
.g-md-9,
.g-md-10,
.g-md-11,
.g-md-12 {
float: left;
min-height: 1px;
}
.g-md-12 {
width: 100%;
}
.g-md-11 {
width: 91.666%;
}
.g-md-10 {
width: 83.333%;
}
.g-md-9 {
width: 75%;
}
.g-md-8 {
width: 66.666%;
}
.g-md-7 {
width: 58.333%;
}
.g-md-6 {
width: 50%;
}
.g-md-5 {
width: 41.666%;
}
.g-md-4 {
width: 33.333%;
}
.g-md-3 {
width: 25%;
}
.g-md-2 {
width: 16.666%;
}
.g-md-1 {
width: 8.333%;
}
.g-md-space-12 {
margin-left: 100%;
}
.g-md-space-11 {
margin-left: 91.666%;
}
.g-md-space-10 {
margin-left: 83.333%;
}
.g-md-space-9 {
margin-left: 75%;
}
.g-md-space-8 {
margin-left: 66.666%;
}
.g-md-space-7 {
margin-left: 58.333%;
}
.g-md-space-6 {
margin-left: 50%;
}
.g-md-space-5 {
margin-left: 41.666%;
}
.g-md-space-4 {
margin-left: 33.333%;
}
.g-md-space-3 {
margin-left: 25%;
}
.g-md-space-2 {
margin-left: 16.666%;
}
.g-md-space-1 {
margin-left: 8.333%;
}
}
@media (min-width: 1280px) {
.g-lg-1,
.g-lg-2,
.g-lg-3,
.g-lg-4,
.g-lg-5,
.g-lg-6,
.g-lg-7,
.g-lg-8,
.g-lg-9,
.g-lg-10,
.g-lg-11,
.g-lg-12 {
float: left;
min-height: 1px;
}
.g-lg-12 {
width: 100%;
}
.g-lg-11 {
width: 91.666%;
}
.g-lg-10 {
width: 83.333%;
}
.g-lg-9 {
width: 75%;
}
.g-lg-8 {
width: 66.666%;
}
.g-lg-7 {
width: 58.333%;
}
.g-lg-6 {
width: 50%;
}
.g-lg-5 {
width: 41.666%;
}
.g-lg-4 {
width: 33.333%;
}
.g-lg-3 {
width: 25%;
}
.g-lg-2 {
width: 16.666%;
}
.g-lg-1 {
width: 8.333%;
}
.g-lg-space-12 {
margin-left: 100%;
}
.g-lg-space-11 {
margin-left: 91.666%;
}
.g-lg-space-10 {
margin-left: 83.333%;
}
.g-lg-space-9 {
margin-left: 75%;
}
.g-lg-space-8 {
margin-left: 66.666%;
}
.g-lg-space-7 {
margin-left: 58.333%;
}
.g-lg-space-6 {
margin-left: 50%;
}
.g-lg-space-5 {
margin-left: 41.666%;
}
.g-lg-space-4 {
margin-left: 33.333%;
}
.g-lg-space-3 {
margin-left: 25%;
}
.g-lg-space-2 {
margin-left: 16.666%;
}
.g-lg-space-1 {
margin-left: 8.333%;
}
}

18
src/styles/lib.scss
View File

@ -171,3 +171,21 @@
color: #ddd;
}
}
.scroll_bar_style::-webkit-scrollbar {
width: 9px;
height: 4px;
background-color: #eee;
}
.scroll_bar_style::-webkit-scrollbar-track {
background-color: #eee;
border-radius: 3px;
box-shadow: inset 0 0 6px #ccc;
}
.scroll_bar_style::-webkit-scrollbar-thumb {
border-radius: 3px;
box-shadow: inset 0 0 6px #ccc;
background-color: #aaa;
}

1
src/styles/reset.scss
View File

@ -29,6 +29,7 @@ body {
html,
body {
height: 100%;
overflow-y: hidden;
}
div,

3
src/views/dashboard/controls/Log.vue
View File

@ -64,6 +64,7 @@ function removeWidget() {
height: 100%;
font-size: 12px;
position: relative;
overflow: auto;
}
.delete {
@ -76,6 +77,7 @@ function removeWidget() {
padding: 10px;
font-size: 12px;
border-bottom: 1px solid #dcdfe6;
min-width: 1024px;
}
.tools {
@ -93,6 +95,5 @@ function removeWidget() {
.log {
width: 100%;
overflow: auto;
}
</style>

11
src/views/dashboard/controls/Tab.vue
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="flex-h tab-header">
<div class="tabs">
<div class="tabs scroll_bar_style">
<span
v-for="(child, idx) in data.children || []"
:key="idx"
@ -259,6 +259,10 @@ export default defineComponent({
.tabs {
height: 40px;
color: #ccc;
width: 100%;
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
span {
display: inline-block;
@ -297,7 +301,10 @@ export default defineComponent({
span.active {
border-bottom: 1px solid #409eff;
color: #409eff;
.tab-name {
color: #409eff;
}
}
}

3
src/views/dashboard/controls/Trace.vue
View File

@ -66,6 +66,7 @@ function removeWidget() {
height: 100%;
font-size: 12px;
position: relative;
overflow: auto;
}
.delete {
@ -78,6 +79,7 @@ function removeWidget() {
padding: 10px;
font-size: 12px;
border-bottom: 1px solid #dcdfe6;
min-width: 1200px;
}
.tools {
@ -96,5 +98,6 @@ function removeWidget() {
.trace {
width: 100%;
overflow: auto;
min-width: 1200px;
}
</style>

2
src/views/dashboard/panel/Tool.vue
View File

@ -78,7 +78,7 @@ limitations under the License. -->
/>
</div>
</div>
<div class="flex-h tools" v-loading="loading">
<div class="flex-h tools" v-loading="loading" v-if="!appStore.isMobile">
<div class="tool-icons flex-h" v-if="dashboardStore.editMode">
<el-dropdown content="Controls" placement="bottom">
<i>

2
src/views/dashboard/related/components/LogTable/Index.vue
View File

@ -93,7 +93,7 @@ function setCurrentLog(log: any) {
.log {
font-size: 12px;
height: 100%;
overflow: auto;
border-bottom: 1px solid #eee;
}
.log-header {

2
src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
View File

@ -220,6 +220,8 @@ watch(
<style lang="scss" scoped>
.filters {
margin: 5px 0;
width: 100%;
min-width: 560px;
}
.schedules {

1
src/views/dashboard/related/profile/Content.vue
View File

@ -57,6 +57,7 @@ function loadTrees(l: boolean) {
.item {
height: 100%;
width: calc(100% - 300px);
overflow: auto;
}
.list {

2
src/views/dashboard/related/profile/components/SpanTree.vue
View File

@ -161,6 +161,7 @@ function updateTimeRange() {
flex-shrink: 0;
height: 50%;
width: 100%;
min-width: 800px;
}
.profile-table {
@ -171,6 +172,7 @@ function updateTimeRange() {
.profile-trace-detail-wrapper {
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
}
.profile-trace-detail-ids {

9
src/views/dashboard/related/trace/Filter.vue
View File

@ -62,15 +62,6 @@ limitations under the License. -->
</div>
</div>
<div class="flex-h">
<!-- <div class="mr-5">
<span class="grey mr-5">{{ t("timeRange") }}:</span>
<TimePicker
:value="dateTime"
position="bottom"
format="YYYY-MM-DD HH:mm"
@input="changeTimeRange"
/>
</div> -->
<div class="mr-5">
<span class="sm b grey mr-5">{{ t("duration") }}:</span>
<el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />