DmitrMakeev commited on
Commit
5a8a266
·
verified ·
1 Parent(s): 5a822a6

Update plot_week.html

Browse files
Files changed (1) hide show
  1. plot_week.html +30 -2
plot_week.html CHANGED
@@ -9,7 +9,7 @@
9
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
10
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
11
 
12
- <style>
13
  body {
14
  display: flex;
15
  flex-direction: column;
@@ -40,16 +40,20 @@ body {
40
  margin: 0; /* Полностью убраны отступы */
41
  }
42
 
 
43
  .graph-container {
44
  width: 100%;
45
  margin-bottom: 30px;
46
  }
47
 
 
48
  .graph {
49
  width: 100%;
50
  height: 500px;
 
51
  }
52
 
 
53
  .no-data-message {
54
  font-size: 18px;
55
  color: red;
@@ -64,8 +68,32 @@ body {
64
  margin: 20px 0;
65
  }
66
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
 
68
- </style>
 
 
 
 
 
 
69
  </head>
70
  <body>
71
 
 
9
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
10
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
11
 
12
+ <style>
13
  body {
14
  display: flex;
15
  flex-direction: column;
 
40
  margin: 0; /* Полностью убраны отступы */
41
  }
42
 
43
+ /* Контейнер графика */
44
  .graph-container {
45
  width: 100%;
46
  margin-bottom: 30px;
47
  }
48
 
49
+ /* График */
50
  .graph {
51
  width: 100%;
52
  height: 500px;
53
+ max-width: 100%;
54
  }
55
 
56
+ /* Сообщение "нет данных" */
57
  .no-data-message {
58
  font-size: 18px;
59
  color: red;
 
68
  margin: 20px 0;
69
  }
70
 
71
+ /* Адаптивность для планшетов (до 1024px) */
72
+ @media (max-width: 1024px) {
73
+ .graph {
74
+ height: 400px; /* Уменьшаем высоту графика */
75
+ }
76
+ }
77
+
78
+ /* Адаптивность для телефонов (до 768px) */
79
+ @media (max-width: 768px) {
80
+ .header {
81
+ flex-direction: column; /* Кнопки и лейбл станут в колонку */
82
+ align-items: center;
83
+ }
84
+
85
+ .graph {
86
+ height: 300px; /* Ещё уменьшаем высоту графика */
87
+ }
88
+ }
89
 
90
+ /* Адаптивность для маленьких телефонов (до 480px) */
91
+ @media (max-width: 480px) {
92
+ .graph {
93
+ height: 250px; /* Ещё меньше для маленьких экранов */
94
+ }
95
+ }
96
+ </style>
97
  </head>
98
  <body>
99