mirrors
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #230 from chakflying/patch-3 

Fix: Improve chart styling on mobile
This commit is contained in:
Louis Lam 2021-08-18 23:21:18 +08:00 committed by GitHub
parent f1e5e53e8f d8bcfcaaa2
commit de4515ea6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/PingChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<LineChart :chart-data="chartData" :height="100" :options="chartOptions" /> <LineChart :chart-data="chartData" :options="chartOptions" />
</template> </template>
<script> <script>
@ -31,6 +31,19 @@ export default {
chartOptions() { chartOptions() {
return { return {
responsive: true, responsive: true,
maintainAspectRatio: false,
onResize: (chart) => {
chart.canvas.parentNode.style.position = "relative";
if (screen.width < 576) {
chart.canvas.parentNode.style.height = "275px";
} else if (screen.width < 768) {
chart.canvas.parentNode.style.height = "320px";
} else if (screen.width < 992) {
chart.canvas.parentNode.style.height = "300px";
} else {
chart.canvas.parentNode.style.height = "250px";
}
},
layout: { layout: {
padding: { padding: {
left: 10, left: 10,

12
src/pages/Details.vue
View File

@ -74,7 +74,7 @@
</div> </div>
</div> </div>
<div v-if="showPingChartBox" class="shadow-box big-padding text-center"> <div v-if="showPingChartBox" class="shadow-box big-padding text-center ping-chart-wrapper">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<PingChart :monitor-id="monitor.id" /> <PingChart :monitor-id="monitor.id" />
@ -322,13 +322,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../assets/vars.scss"; @import "../assets/vars.scss";
@media (max-width: 767px) { @media (max-width: 767px) {
.badge { .badge {
margin-top: 14px; margin-top: 14px;
} }
} }
@media (max-width: 550px) { @media (max-width: 550px) {
.functions { .functions {
text-align: center; text-align: center;
} }
@ -337,9 +337,13 @@ export default {
margin-left: 10px !important; margin-left: 10px !important;
margin-right: 10px !important; margin-right: 10px !important;
} }
.ping-chart-wrapper {
padding: 10px !important;
}
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.btn { .btn {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;