From b4f0781b1ec3d16f323a1c1839814602ca682daa Mon Sep 17 00:00:00 2001
From: Bogdan <bogd@live.ru>
Date: Sun, 28 Aug 2022 13:37:13 +0200
Subject: [PATCH] some styles refactored

---
 HTML/adapters.html | 23 ++++++++---------------
 HTML/index.html    | 18 ++++++++----------
 HTML/services.html | 10 +++++-----
 HTML/styles.css    | 10 +++++-----
 HTML/system.html   | 14 +++++++-------
 5 files changed, 33 insertions(+), 42 deletions(-)

diff --git a/HTML/adapters.html b/HTML/adapters.html
index 83a0638..761db7b 100644
--- a/HTML/adapters.html
+++ b/HTML/adapters.html
@@ -14,10 +14,9 @@
         <!--========== CONTENTS ==========-->
         <main>
             <section>
-			<div class="masonry-layout">
-			  
-			  <div class="masonry-layout__panel">
-				<div class="masonry-layout__panel-content">
+			<div class="ml">			  
+			  <div class="mlp">
+				<div class="mlpc">
 				 <form name="eth" method="post">
 				<div class="mlhdr">ETHERNET</div>				  
 				<table class='cntr'><tr>
@@ -38,18 +37,14 @@
 				</div>
 			  </div>
 			  
-			  <div class="masonry-layout__panel">
-				<div class="masonry-layout__panel-content">
+			  <div class="mlp">
+				<div class="mlpc">
 				<form name="wifi" method="post">
 				<div class="mlhdr">WiFi</div>
 				<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 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>
-				
-				
 				<script>PrintTextInput('Имя WiFi сети(AP):','wfiap','~ssidap~',3,31);
 				PrintTextInput('Ключ WiFi сети(AP):','wfpap','~wkeyap~',8,31);
 				PrintIPInput('IP адрес(AP):','ipaap','~ipap~');
@@ -72,8 +67,8 @@
 				</div>
 			  </div>
 			  
-			  <div class="masonry-layout__panel">
-				<div class="masonry-layout__panel-content">
+			  <div class="mlp">
+				<div class="mlpc">
 				<div class="mlhdr">GPRS</div>
 				<form name="gprs" method="post">			
 				<table class='cntr'>
@@ -94,10 +89,8 @@
 				</form>
 				</div>
 			  </div>
-
 			</div>
-		</section>
-		
+		</section>		
 		</main>
 		<script>
 		showMenu('header-toggle','navbar');
diff --git a/HTML/index.html b/HTML/index.html
index e8c0a3a..23108de 100644
--- a/HTML/index.html
+++ b/HTML/index.html
@@ -16,24 +16,22 @@
             <section>
 						
 			
-			<div class="masonry-layout">
+			<div class="ml">
 			  
-			  <div class="masonry-layout__panel">
-				<div class="masonry-layout__panel-content">
-				
-				<div class="mlhdr">Application 1</div>				  
-			
+			  <div class="mlp">
+				<div class="mlpc">				
+				<div class="mlhdr">Application 1</div>				  			
 				</div>
 			  </div>
 			  
-			  <div class="masonry-layout__panel">
-				<div class="masonry-layout__panel-content">
+			  <div class="mlp">
+				<div class="mlpc">
 				<div class="mlhdr">Application 2</div>
 				</div>
 			  </div>
 			  
-			  <div class="masonry-layout__panel">
-				<div class="masonry-layout__panel-content">
+			  <div class="mlp">
+				<div class="mlpc">
 				<div class="mlhdr">Application 3</div>
 				</div>
 			  </div>
diff --git a/HTML/services.html b/HTML/services.html
index 9a488e1..6e92d52 100644
--- a/HTML/services.html
+++ b/HTML/services.html
@@ -14,10 +14,10 @@
         <!--========== CONTENTS ==========-->
         <main>
             <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">
 				 <form name="conf1" method="post">
 				<div class="mlhdr">SNTP</div>				  
 									
@@ -42,8 +42,8 @@
 				</div>
 			  </div>
 			  
-			  <div class="masonry-layout__panel">
-				<div class="masonry-layout__panel-content">
+			  <div class="mlp">
+				<div class="mlpc">
 				<form name="conf2" method="post">
 				<div class="mlhdr">MQTT</div>
 				<table class='cntr'>
diff --git a/HTML/styles.css b/HTML/styles.css
index 23a1874..4c4fed5 100644
--- a/HTML/styles.css
+++ b/HTML/styles.css
@@ -351,29 +351,29 @@ textarea {
 	margin: auto;
 }		   
 
-.masonry-layout__panel {
+.mlp {
   break-inside: avoid;
   padding:5px;
   
 }
-.masonry-layout__panel-content {
+.mlpc {
   margin: 10px 0;
   padding: 10px;
   border-radius: 10px;
   border:solid 1px #CCCCCC;
 }		   
 
-.masonry-layout {
+.ml {
   column-count: 1;
   column-gap: 0;
 }
 @media (min-width: 768px) {
-  .masonry-layout {
+  .ml {
     column-count: 2;
   }
 }
 @media (min-width: 1200px) {
-  .masonry-layout {
+  .ml {
     column-count: 3;
   }
 }
diff --git a/HTML/system.html b/HTML/system.html
index a0e8cf6..6696d62 100644
--- a/HTML/system.html
+++ b/HTML/system.html
@@ -14,10 +14,10 @@
         <!--========== CONTENTS ==========-->
         <main>
             <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">
 				 <form name="conf1" method="post">
 				<div class="mlhdr">SYSTEM</div>				  
 				<table class='cntr'><script>PrintTextInputNoReg('Имя устройства:','nam','~dname~', 3, 31 );
@@ -41,8 +41,8 @@
 				</div>
 			  </div>
 			  
-			  <div class="masonry-layout__panel">
-				<div class="masonry-layout__panel-content">
+			  <div class="mlp">
+				<div class="mlpc">
 				<form name="conf2" method="post">
 				<div class="mlhdr">STAT</div>
 				<table class='cntr'>
@@ -62,8 +62,8 @@
 				</div>
 			  </div>
 			  
-			  <div class="masonry-layout__panel">
-				<div class="masonry-layout__panel-content">
+			  <div class="mlp">
+				<div class="mlpc">
 				<form name="conf2" method="post">
 				<div class="mlhdr">CONTROL</div>
 				<div style='margin:auto;text-align:center'>