some styles refactored

This commit is contained in:
Bogdan Pilyugin 2022-08-28 13:37:13 +02:00
parent 2a8e2ae715
commit b4f0781b1e
5 changed files with 33 additions and 42 deletions

View File

@ -14,10 +14,9 @@
<!--========== CONTENTS ==========--> <!--========== CONTENTS ==========-->
<main> <main>
<section> <section>
<div class="masonry-layout"> <div class="ml">
<div class="mlp">
<div class="masonry-layout__panel"> <div class="mlpc">
<div class="masonry-layout__panel-content">
<form name="eth" method="post"> <form name="eth" method="post">
<div class="mlhdr">ETHERNET</div> <div class="mlhdr">ETHERNET</div>
<table class='cntr'><tr> <table class='cntr'><tr>
@ -38,18 +37,14 @@
</div> </div>
</div> </div>
<div class="masonry-layout__panel"> <div class="mlp">
<div class="masonry-layout__panel-content"> <div class="mlpc">
<form name="wifi" method="post"> <form name="wifi" method="post">
<div class="mlhdr">WiFi</div> <div class="mlhdr">WiFi</div>
<table class='cntr'> <table class='cntr'>
<tr><td class='rl'>Включить WiFi</td><td><input type="checkbox" name="wifien" value="1" ~wfen~/></td></tr> <tr><td class='rl'>Включить WiFi</td><td><input type="checkbox" name="wifien" value="1" ~wfen~/></td></tr>
<tr><td class='rl'>Режим WiFi:</td><td><input name="netm" type="radio" value="2" onclick="configIPBoxes()" ~cln~>Клиент(CLN)</input></br> <tr><td class='rl'>Режим WiFi:</td><td><input name="netm" type="radio" value="2" onclick="configIPBoxes()" ~cln~>Клиент(CLN)</input></br>
<input name="netm" type="radio" value="1" onclick="configIPBoxes()" ~apn~>Точка доступа(AP)</input></td></tr> <input name="netm" type="radio" value="1" onclick="configIPBoxes()" ~apn~>Точка доступа(AP)</input></td></tr>
<script>PrintTextInput('Имя WiFi сети(AP):','wfiap','~ssidap~',3,31); <script>PrintTextInput('Имя WiFi сети(AP):','wfiap','~ssidap~',3,31);
PrintTextInput('Ключ WiFi сети(AP):','wfpap','~wkeyap~',8,31); PrintTextInput('Ключ WiFi сети(AP):','wfpap','~wkeyap~',8,31);
PrintIPInput('IP адрес(AP):','ipaap','~ipap~'); PrintIPInput('IP адрес(AP):','ipaap','~ipap~');
@ -72,8 +67,8 @@
</div> </div>
</div> </div>
<div class="masonry-layout__panel"> <div class="mlp">
<div class="masonry-layout__panel-content"> <div class="mlpc">
<div class="mlhdr">GPRS</div> <div class="mlhdr">GPRS</div>
<form name="gprs" method="post"> <form name="gprs" method="post">
<table class='cntr'> <table class='cntr'>
@ -94,10 +89,8 @@
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</main> </main>
<script> <script>
showMenu('header-toggle','navbar'); showMenu('header-toggle','navbar');

View File

@ -16,24 +16,22 @@
<section> <section>
<div class="masonry-layout"> <div class="ml">
<div class="masonry-layout__panel">
<div class="masonry-layout__panel-content">
<div class="mlp">
<div class="mlpc">
<div class="mlhdr">Application 1</div> <div class="mlhdr">Application 1</div>
</div> </div>
</div> </div>
<div class="masonry-layout__panel"> <div class="mlp">
<div class="masonry-layout__panel-content"> <div class="mlpc">
<div class="mlhdr">Application 2</div> <div class="mlhdr">Application 2</div>
</div> </div>
</div> </div>
<div class="masonry-layout__panel"> <div class="mlp">
<div class="masonry-layout__panel-content"> <div class="mlpc">
<div class="mlhdr">Application 3</div> <div class="mlhdr">Application 3</div>
</div> </div>
</div> </div>

View File

@ -14,10 +14,10 @@
<!--========== CONTENTS ==========--> <!--========== CONTENTS ==========-->
<main> <main>
<section> <section>
<div class="masonry-layout"> <div class="ml">
<div class="masonry-layout__panel"> <div class="mlp">
<div class="masonry-layout__panel-content"> <div class="mlpc">
<form name="conf1" method="post"> <form name="conf1" method="post">
<div class="mlhdr">SNTP</div> <div class="mlhdr">SNTP</div>
@ -42,8 +42,8 @@
</div> </div>
</div> </div>
<div class="masonry-layout__panel"> <div class="mlp">
<div class="masonry-layout__panel-content"> <div class="mlpc">
<form name="conf2" method="post"> <form name="conf2" method="post">
<div class="mlhdr">MQTT</div> <div class="mlhdr">MQTT</div>
<table class='cntr'> <table class='cntr'>

View File

@ -351,29 +351,29 @@ textarea {
margin: auto; margin: auto;
} }
.masonry-layout__panel { .mlp {
break-inside: avoid; break-inside: avoid;
padding:5px; padding:5px;
} }
.masonry-layout__panel-content { .mlpc {
margin: 10px 0; margin: 10px 0;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
border:solid 1px #CCCCCC; border:solid 1px #CCCCCC;
} }
.masonry-layout { .ml {
column-count: 1; column-count: 1;
column-gap: 0; column-gap: 0;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.masonry-layout { .ml {
column-count: 2; column-count: 2;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.masonry-layout { .ml {
column-count: 3; column-count: 3;
} }
} }

View File

@ -14,10 +14,10 @@
<!--========== CONTENTS ==========--> <!--========== CONTENTS ==========-->
<main> <main>
<section> <section>
<div class="masonry-layout"> <div class="ml">
<div class="masonry-layout__panel"> <div class="mlp">
<div class="masonry-layout__panel-content"> <div class="mlpc">
<form name="conf1" method="post"> <form name="conf1" method="post">
<div class="mlhdr">SYSTEM</div> <div class="mlhdr">SYSTEM</div>
<table class='cntr'><script>PrintTextInputNoReg('Имя устройства:','nam','~dname~', 3, 31 ); <table class='cntr'><script>PrintTextInputNoReg('Имя устройства:','nam','~dname~', 3, 31 );
@ -41,8 +41,8 @@
</div> </div>
</div> </div>
<div class="masonry-layout__panel"> <div class="mlp">
<div class="masonry-layout__panel-content"> <div class="mlpc">
<form name="conf2" method="post"> <form name="conf2" method="post">
<div class="mlhdr">STAT</div> <div class="mlhdr">STAT</div>
<table class='cntr'> <table class='cntr'>
@ -62,8 +62,8 @@
</div> </div>
</div> </div>
<div class="masonry-layout__panel"> <div class="mlp">
<div class="masonry-layout__panel-content"> <div class="mlpc">
<form name="conf2" method="post"> <form name="conf2" method="post">
<div class="mlhdr">CONTROL</div> <div class="mlhdr">CONTROL</div>
<div style='margin:auto;text-align:center'> <div style='margin:auto;text-align:center'>