sergeysav/telemetry_visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup css

Browse Source
This commit is contained in:
Sergey Savelyev
2025-03-16 14:57:49 -07:00
parent e9751c2489
commit 94ed7e05e2
10 changed files with 108 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
frontend/src/assets/icons.scss
View File

50
frontend/src/assets/layout.scss
View File

@@ -28,29 +28,51 @@
} }
.screen { .screen {
min-height: 100vh;
flex-grow: 1;
}
.screen.limited {
max-height: 100vh; max-height: 100vh;
width: 100%;
} }
.content { .content {
margin: 20vh 10vw; padding: 20vh 10vw;
}
.content.page {
max-width: 1200px; max-width: 1200px;
} }
.content.full { .content.wide {
margin: 5vh 5vw; padding-left: 5vw;
max-width: none; padding-right: 5vw;
} }
.screen.content { .content.tall {
width: calc(100% - 20vw); padding-top: 5vw;
height: calc(100vh - 40vh); padding-bottom: 5vw;
} }
.screen.content.full { //.content {
width: calc(100% - 10vw); // margin: 20vh 10vw;
height: calc(100vh - 10vh); // max-width: 1200px;
} //}
//
//.content.full {
// margin: 5vh 5vw;
// max-width: none;
//}
//.screen.content {
// width: calc(100% - 20vw);
// height: calc(100vh - 40vh);
//}
//.screen.content.full {
// width: calc(100% - 10vw);
// height: calc(100vh - 10vh);
//}
.stretch { .stretch {
align-items: stretch; align-items: stretch;
@@ -76,6 +98,10 @@
min-height: 0; min-height: 0;
} }
.no-min-width {
min-width: 0;
}
.scroll { .scroll {
overflow: auto; overflow: auto;
} }

16
frontend/src/assets/main.scss
View File

@@ -8,8 +8,8 @@ body {
background-color: variables.$background-color; background-color: variables.$background-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: stretch;
align-items: center; align-items: stretch;
align-content: center; align-content: center;
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
@@ -17,15 +17,21 @@ body {
} }
main { main {
width: 100%; flex-grow: 1;
} }
#app { #app {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; justify-items: center;
align-content: center; align-content: center;
align-items: center;
}
#app > div {
margin-left: auto;
margin-right: auto;
} }
* { * {

5
frontend/src/components/SvgGraph.vue
View File

@@ -435,6 +435,7 @@ provide<GraphData>(GRAPH_DATA, {
div.full-size { div.full-size {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative;
} }
div.controls-header { div.controls-header {
@@ -446,4 +447,8 @@ div.controls-header {
gap: 0 1em; gap: 0 1em;
margin: 0 1em 0 1em; margin: 0 1em 0 1em;
} }
svg.graph {
position: absolute;
}
</style> </style>

2
frontend/src/views/ChartDefinitionView.vue
View File

@@ -302,7 +302,7 @@ function removeTelemetry(index: number) {
} }
.column.tiny_text { .column.tiny_text {
font-size: variables.$normal-text-size / 2; font-size: calc(variables.$normal-text-size / 2);
height: 100%; height: 100%;
justify-content: space-between; justify-content: space-between;
} }

30
frontend/src/views/ChartRenderView.vue
View File

@@ -18,22 +18,20 @@ defineProps<{
> >
<template v-for="y in charts[0].length" :key="y"> <template v-for="y in charts[0].length" :key="y">
<template v-for="x in charts.length" :key="x"> <template v-for="x in charts.length" :key="x">
<div class="no-min-height"> <SvgGraph
<SvgGraph right_axis
right_axis cursor
cursor :legend="GraphSide.Left"
:legend="GraphSide.Left" include_controls
include_controls >
> <GraphAxis>
<GraphAxis> <TelemetryLine
<TelemetryLine v-for="tlm in charts[x - 1][y - 1]"
v-for="tlm in charts[x - 1][y - 1]" :key="tlm.uuid"
:key="tlm.uuid" :data="tlm.name"
:data="tlm.name" ></TelemetryLine>
></TelemetryLine> </GraphAxis>
</GraphAxis> </SvgGraph>
</SvgGraph>
</div>
</template> </template>
</template> </template>
</div> </div>

6
frontend/src/views/ChartView.vue
View File

@@ -17,15 +17,15 @@ function closeSettings() {
</script> </script>
<template> <template>
<div class="column stretch screen content full center divider"> <div class="column stretch screen content tall wide">
<template v-if="!settingsOpen"> <template v-if="!settingsOpen">
<div class="settings column center" @click="openSettings"> <div class="settings column" @click="openSettings">
<InlineIcon icon="hamburger menu"></InlineIcon> <InlineIcon icon="hamburger menu"></InlineIcon>
</div> </div>
<ChartRenderView :charts="settings"></ChartRenderView> <ChartRenderView :charts="settings"></ChartRenderView>
</template> </template>
<template v-else> <template v-else>
<div class="settings column center" @click="closeSettings"> <div class="settings column" @click="closeSettings">
<InlineIcon icon="close"></InlineIcon> <InlineIcon icon="close"></InlineIcon>
</div> </div>
<ChartDefinitionView v-model="settings"></ChartDefinitionView> <ChartDefinitionView v-model="settings"></ChartDefinitionView>

4
frontend/src/views/EmptyPanelView.vue
View File

@@ -30,7 +30,7 @@ function onEnter() {
</script> </script>
<template> <template>
<div class="column stretch screen content center no-min-height"> <div class="column stretch screen limited content page">
<div class="row"> <div class="row">
<TextInput <TextInput
autofocus autofocus
@@ -41,7 +41,7 @@ function onEnter() {
></TextInput> ></TextInput>
</div> </div>
<div class="row grow stretch"> <div class="row grow stretch no-min-height">
<div class="column grow scroll no-min-height"> <div class="column grow scroll no-min-height">
<PanelHeirarchy <PanelHeirarchy
:heirarchy="filtered_heirarchy" :heirarchy="filtered_heirarchy"

59
frontend/src/views/GraphView.vue
View File

@@ -6,32 +6,39 @@ import SvgGraph from '@/components/SvgGraph.vue';
</script> </script>
<template> <template>
<div style="width: 100vw; height: 50vh"> <div class="column">
<SvgGraph :legend="GraphSide.Left" right_axis include_controls cursor> <div style="width: 100vw; height: 50vh">
<Axis> <SvgGraph
<Line data="simple_producer/time_offset"></Line> :legend="GraphSide.Left"
<Line data="simple_producer/publish_offset"></Line> right_axis
<Line data="simple_producer/await_offset"></Line> include_controls
</Axis> cursor
</SvgGraph> >
</div> <Axis>
<div style="width: 100vw; height: 50vh"> <Line data="simple_producer/time_offset"></Line>
<SvgGraph <Line data="simple_producer/publish_offset"></Line>
:initial_duration="60 * 1000 * 10" <Line data="simple_producer/await_offset"></Line>
:legend="GraphSide.Right" </Axis>
right_axis </SvgGraph>
> </div>
<Axis> <div style="width: 100vw; height: 50vh">
<Line data="simple_producer/sin"></Line> <SvgGraph
<Line data="simple_producer/cos4"></Line> :initial_duration="60 * 1000 * 10"
<Line data="simple_producer/sin2"></Line> :legend="GraphSide.Right"
<Line data="simple_producer/cos"></Line> right_axis
<Line data="simple_producer/sin3"></Line> >
<Line data="simple_producer/cos2"></Line> <Axis>
<Line data="simple_producer/sin4"></Line> <Line data="simple_producer/sin"></Line>
<Line data="simple_producer/cos3"></Line> <Line data="simple_producer/cos4"></Line>
</Axis> <Line data="simple_producer/sin2"></Line>
</SvgGraph> <Line data="simple_producer/cos"></Line>
<Line data="simple_producer/sin3"></Line>
<Line data="simple_producer/cos2"></Line>
<Line data="simple_producer/sin4"></Line>
<Line data="simple_producer/cos3"></Line>
</Axis>
</SvgGraph>
</div>
</div> </div>
</template> </template>

2
frontend/src/views/TelemetryListView.vue
View File

@@ -13,7 +13,7 @@ const mousedover = ref<TelemetryDefinition | null>(null);
</script> </script>
<template> <template>
<div class="row stretch screen content center divider"> <div class="row stretch screen limited content">
<div class="column grow2 stretch no-min-height no-basis"> <div class="column grow2 stretch no-min-height no-basis">
<div class="row"> <div class="row">
<TextInput <TextInput