Skip to content

Commit 5b3a35b

Browse files
budulinekbudulinek
committed
Improve CSS
1 parent 970d9b1 commit 5b3a35b

File tree

2 files changed

+39
-24
lines changed

2 files changed

+39
-24
lines changed

‎arduino-modbus-rtu-tcp-gateway/05-pages.ino

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -66,31 +66,36 @@ void sendPage(EthernetClient &client, byte reqPage) {
6666
CSS Classes
6767
w - wrapper (includes m + c)
6868
m - navigation menu (left)
69-
c - content of a page
70-
r - row inside a content
69+
c - wrapper for the content of a page (incl. smaller header)
70+
d - content of the page
71+
q - row inside a content (top aligned)
72+
r - row inside a content (center-aligned)
7173
i - short input (byte or IP address octet)
7274
n - input type=number
7375
s - select input with numbers
7476
p - inputs disabled by id=o checkbox
7577
CSS Ids
7678
o - checkbox which disables other checkboxes and inputs
7779
*/
78-
"body,.m{padding:1px;margin:0;font-family:sans-serif}"
80+
"*{box-sizing:border-box}"
81+
"body{padding:1px;margin:0;font-family:sans-serif;height:100vh}"
82+
"body,.w,.c,.q{display:flex}"
83+
"body,.c{flex-flow:column}"
84+
".w{flex-grow:1;min-height:0}"
85+
".m{flex:0 0 20vw;padding:1px}"
86+
".c{flex:1}"
87+
".d{overflow:auto;padding:15px}"
88+
".q{padding:1px}"
89+
".r{align-items:center}"
7990
"h1,h4{padding:10px}"
8091
"h1,.m,h4{background:#0067AC;margin:1px}"
81-
".m,.c{height:calc(100vh - 71px)}"
82-
".m{min-width:20%}"
83-
".c{flex-grow:1;overflow-y:auto}"
84-
".w,.r{display:flex}"
8592
"a,h1,h4{color:white;text-decoration:none}"
86-
".c h4{padding-left:30%;margin-bottom:20px}"
87-
".r{margin:4px}"
93+
".c h4{padding-left:30%}"
8894
"label{width:30%;text-align:right;margin-right:2px}"
89-
"input,button,select{margin-top:-2px}" // improve vertical allignment of input, button and select
9095
".s{text-align:right}"
9196
".s>option{direction:rtl}"
92-
".i{text-align:center;width:3ch;color:black}"
93-
".n{width:8ch}"
97+
".i{text-align:center;width:4ch;color:black}"
98+
".n{width:10ch}"
9499
"</style>"
95100
"</head>"
96101
"<body"));
@@ -119,7 +124,7 @@ void sendPage(EthernetClient &client, byte reqPage) {
119124

120125
// Left Menu
121126
for (byte i = 1; i < PAGE_WAIT; i++) { // PAGE_WAIT is the last item in enum
122-
chunked.print(F("<h4 "));
127+
chunked.print(F("<h4"));
123128
if ((i) == reqPage) {
124129
chunked.print(F(" style=background-color:#FF6600"));
125130
}
@@ -134,6 +139,7 @@ void sendPage(EthernetClient &client, byte reqPage) {
134139
"<h4>"));
135140
stringPageName(chunked, reqPage);
136141
chunked.print(F("</h4>"
142+
"<div class=d>"
137143
"<form method=post>"));
138144

139145
// PLACE FUNCTIONS PROVIDING CONTENT HERE
@@ -164,9 +170,10 @@ void sendPage(EthernetClient &client, byte reqPage) {
164170
}
165171

166172
if (reqPage == PAGE_IP || reqPage == PAGE_TCP || reqPage == PAGE_RTU) {
167-
chunked.print(F("<p><div class=r><label><input type=submit value='Save & Apply'></label><input type=reset value=Cancel></div>"));
173+
chunked.print(F("<p><div class=q><label><input type=submit value='Save & Apply'></label><input type=reset value=Cancel></div>"));
168174
}
169-
chunked.print(F("</form>"));
175+
chunked.print(F("</form>"
176+
"</div>"));
170177
tagDivClose(chunked); // close tags <div class=c> <div class=w>
171178
chunked.end(); // closing tags not required </body></html>
172179
}
@@ -277,20 +284,22 @@ void contentStatus(ChunkedPrint &chunked) {
277284
tagLabelDiv(chunked, F("Modbus RTU Response"));
278285
tagSpan(chunked, JSON_RESPONSE);
279286
tagDivClose(chunked);
280-
tagLabelDiv(chunked, F("Requests Queue"));
287+
tagLabelDiv(chunked, F("Requests Queue"), true);
281288
tagSpan(chunked, JSON_QUEUE);
282289
tagDivClose(chunked);
283290
tagLabelDiv(chunked, F("Modbus Statistics"));
284291
tagButton(chunked, F("Reset Stats"), ACT_RESET_STATS);
285-
chunked.print(F("<br>"));
292+
tagDivClose(chunked);
293+
tagLabelDiv(chunked, 0);
286294
tagSpan(chunked, JSON_STATS);
287295
tagDivClose(chunked);
288-
tagLabelDiv(chunked, F("Modbus Masters"));
296+
tagLabelDiv(chunked, F("Modbus Masters"), true);
289297
tagSpan(chunked, JSON_TCP_UDP_MASTERS);
290298
tagDivClose(chunked);
291299
tagLabelDiv(chunked, F("Modbus Slaves"));
292300
tagButton(chunked, F("Scan Slaves"), ACT_SCAN);
293-
chunked.print(F("<br>"));
301+
tagDivClose(chunked);
302+
tagLabelDiv(chunked, 0);
294303
tagSpan(chunked, JSON_SLAVES);
295304
tagDivClose(chunked);
296305
}
@@ -605,11 +614,16 @@ void tagInputHex(ChunkedPrint &chunked, const byte name, const bool required, co
605614
606615
@param chunked Chunked buffer
607616
@param label Label string
617+
@param top Align to top
608618
*/
609619
/**************************************************************************/
610620
void tagLabelDiv(ChunkedPrint &chunked, const __FlashStringHelper *label) {
611-
chunked.print(F("<div class=r>"));
612-
chunked.print(F("<label> "));
621+
tagLabelDiv(chunked, label, false);
622+
}
623+
void tagLabelDiv(ChunkedPrint &chunked, const __FlashStringHelper *label, bool top) {
624+
chunked.print(F("<div class=\"q"));
625+
if (!top) chunked.print(F(" r"));
626+
chunked.print(F("\"><label> "));
613627
if (label) {
614628
chunked.print(label);
615629
chunked.print(F(":"));
@@ -645,7 +659,7 @@ void tagButton(ChunkedPrint &chunked, const __FlashStringHelper *flashString, by
645659
/**************************************************************************/
646660
void tagDivClose(ChunkedPrint &chunked) {
647661
chunked.print(F("</div>"
648-
"</div>")); // <div class=r>
662+
"</div>")); // <div class=q>
649663
}
650664

651665
/**************************************************************************/

‎arduino-modbus-rtu-tcp-gateway/arduino-modbus-rtu-tcp-gateway.ino

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,16 @@
2525
v7.2 2023-10-20 Disable DHCP renewal fallback, better advanced_settings.h layout
2626
ENABLE_EXTENDED_WEBUI and ENABLE_DHCP is set by default for Mega
2727
v7.3 2024-01-16 Bugfix Modbus RTU Request form, code comments
28+
v7.4 2024-XX-XX CSS improvement
2829
*/
2930

30-
const byte VERSION[] = { 7, 3 };
31+
const byte VERSION[] = { 7, 4 };
3132

3233
#include <SPI.h>
3334
#include <Ethernet.h>
3435
#include <EthernetUdp.h>
3536
#include <utility/w5100.h>
36-
#include <CircularBuffer.h> // CircularBuffer https://github.com/rlogiacco/CircularBuffer
37+
#include <CircularBuffer.hpp> // CircularBuffer https://github.com/rlogiacco/CircularBuffer
3738
#include <EEPROM.h>
3839
#include <StreamLib.h> // StreamLib https://github.com/jandrassy/StreamLib
3940

0 commit comments

Comments
 (0)