Implement separators, and grouped controls

This adds separator elements, and allows arbitrary grouping of controls. For details
see the updates to README.md

README.md

@@ -33,6 +33,8 @@ The Library runs fine on any kind of **ESP8266** and **ESP32** (NodeMCU Boards,
 - Public Access to ESPAsyncServer
 - Graph Widget (Persist save graph in local storage #10)
 - Inline CSS styles by @iangray001
+- Separators by @iangray001
+- Grouped controls by @iangray001
 
 ## Further Roadmap
 
@@ -304,6 +306,18 @@ Then all widgets for the tab need to be added to it by specifying the tab as the
 
 `ESPUI.addControl( ControlType::Text, "Text Title:", "a Text Field", ControlColor::Alizarin, tab1, &textCall );`
 
+### Separators
+
+![separators](docs/ui_separators.png)
+
+You can use separators to break up the UI and better organise your controls. Adding a separator will force any following controls onto the subsequent line. Add separators as follows:
+
+```
+ESPUI.separator("Separator name");
+//or
+ESPUI.addControl(ControlType::Separator, "Separator name", "", ControlColor::None, maintab);
+```
+
 ### Initialisation of the UI
 
 After all the elements are configured you can use `ESPUI.begin("Some Title");`
@@ -389,6 +403,33 @@ Note: The images in this example are formed by setting a Label to contain an `<i
  ESPUI.addControl(ControlType::Label, "Label", "<img src='path/to/image'>", ControlColor::Peterriver);
 ```
 
+### Grouped controls
+
+Normally, whenever a control is added to the UI, an new panel is generated. However, when addings the control you can 
+set the "parent" of the control to an existing other control. This allows you to add multiple widgets into the same 
+panel. For example:
+
+```
+ panel1 = ESPUI.addControl(ControlType::Button, "Button Set", "Button A", ControlColor::Turquoise, Control::noParent, btncallback);
+ ESPUI.addControl(ControlType::Button, "", "Button B", ControlColor::None, panel1, btncallback);
+ ESPUI.addControl(ControlType::Button, "", "Button C", ControlColor::None, panel1, btncallback);
+```
+
+The first call to `addControl` has no parent (or it could be set to a tab), so therefore a new panel is added containing one button
+with the value `Button A`. The two subsequent calls have their parent set to the control we added in the first so instead of adding
+a new panel, buttons are added to the existing panel from `Button A`. The result is the following:
+
+![Grouped buttons](docs/ui_groupedbuttons.png)
+
+The grouped controls operate entirely independently, and can be assigned different callbacks, or updated separately. The grouping 
+is purely visual.
+
+Most controls can be grouped this way, but the result is not always visually pleasant. This works best with labels, sliders, switchers,
+and buttons.
+
+![Other grouped elements](docs/ui_groupedbuttons2.png)
+
+If you group too many elements it might throw the layout of the rest of the UI out of line. Consider adding separators to correct this.
 
 # Notes for Development
 

data/css/style.css

@@ -13,22 +13,44 @@
 
 .card {
   min-height: 100px;
-  margin-top: 2%;
   border-radius: 6px;
   box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5);
   padding-left: 20px;
   padding-right: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 40px;
   min-width: 500px;
   color: #fff;
 }
 
+
+@media (min-width: 1205px) {
+	.wide.card {
+		min-width: 1075px;
+	}
+}
+
+@media (min-width: 1790px) {
+	.wide.card {
+		min-width: 1650px;
+	}
+}
+
 @media (max-width: 630px) {
   .card {
     min-width: 98%;
   }
 }
 
+.sectionbreak.columns {
+	color: black;
+}
+
+.sectionbreak.columns hr {
+	border: none;
+    height: 2px;
+    background-color: #666
+}
+
 .card-slider {}
 
 .turquoise {
@@ -137,7 +159,7 @@
 
   .column,
   .columns {
-    margin-right: 2%;
+    margin-right: 35px;
   }
 
   .column:first-child,
@@ -423,6 +445,8 @@ button:active {
 button,
 .button {
   margin-bottom: 1rem;
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
 }
 
 /* Utilities
@@ -576,7 +600,8 @@ hr {
   display: block;
   font-size: 14px;
   height: 26px;
-  margin-bottom: 12px;
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
   position: relative;
   width: 60px;
   -webkit-transition: background-color 0.2s ease-in-out;
@@ -933,6 +958,7 @@ input[id^="num"] {
 
 body div>ul.navigation {
   margin: 0;
+  margin-bottom: 30px;
   padding: 0;
   border-bottom: 3px solid #666;
   overflow: hidden;