Mobile adaptive CP panel

assets/cp.styles.css

@@ -293,10 +293,6 @@ body.cp .wrap .sidebar.sidebar-left ul.nav li.nav-item svg.sicon {
 }
 
 /* Admin data form */
-.data-form .hidden {
-	display: none;
-}
-
 .data-form label {
 	font-weight: bold;
 	margin-top: .45rem;
@@ -378,4 +374,37 @@ body.cp .wrap .sidebar.sidebar-left ul.nav li.nav-item svg.sicon {
 
 .checkbox-ios input[type=checkbox]:checked + label:after {
 	left: 32px;
+}
+
+/* Bootstrap fixes */
+#sys-modal-user-settings {
+	padding-right: 0px!important;
+}
+
+/* Mobile fixes */
+@media (max-width: 575px) {
+	/* Less then 576px */
+	body.cp {
+		height: auto;
+		overflow: scroll;
+	}
+
+	body.cp .wrap .sidebar {
+		width: auto;
+		box-shadow: none;
+	}
+
+	body.cp .wrap .content {
+		padding-top: 0.2rem;
+	}
+}
+
+@media (max-width: 767px) {
+	/* Less then 768px */
+	.navbar-expand-md .navbar-collapse {
+		padding: 1rem;
+		background: #417cb9;
+		box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, .3);
+		border-radius: .25rem;
+	}
 }

assets/tmpl.cp.base.html

@@ -58,21 +58,21 @@
 			</div>
 		</nav>
 		<div class="wrap">
-			<div class="sidebar sidebar-left">
+			<div class="sidebar sidebar-left d-block d-sm-table-cell">
 				<div class="scroll">
 					<div class="padd">
 						{{$.Data.SidebarLeft}}
 					</div>
 				</div>
 			</div>
-			<div class="content">
+			<div class="content d-block d-sm-table-cell">
 				<div class="scroll">
 					<div class="padd">
 						{{$.Data.Content}}
 					</div>
 				</div>
 			</div>
-			<div class="sidebar sidebar-right">
+			<div class="sidebar sidebar-right d-none d-lg-table-cell">
 				<div class="scroll">
 					<div class="padd">
 						{{$.Data.SidebarRight}}

engine/builder/data_form.go

@@ -53,7 +53,7 @@ func DataForm(wrap *wrapper.Wrapper, data []DataFormField) string {
 				}
 				result += `<div class="form-group">`
 				result += `<div class="row">`
-				result += `<div class="col-3">`
+				result += `<div class="col-md-3">`
 
 				if field.Kind != DFKCheckBox {
 					result += `<label for="lbl_` + field.Name + `">` + field.Caption + `</label>`
@@ -62,7 +62,7 @@ func DataForm(wrap *wrapper.Wrapper, data []DataFormField) string {
 				}
 
 				result += `</div>`
-				result += `<div class="col-9">`
+				result += `<div class="col-md-9">`
 				result += `<div>`
 				if field.Kind == DFKText {
 					result += `<input class="form-control" type="text" id="lbl_` + field.Name + `" name="` + field.Name + `" value="` + html.EscapeString(field.Value) + `" placeholder="` + field.Placeholder + `" autocomplete="off"` + required + `>`
@@ -98,9 +98,9 @@ func DataForm(wrap *wrapper.Wrapper, data []DataFormField) string {
 				result += field.CallBack(&field)
 			} else {
 				result += `<div class="row">`
-				result += `<div class="col-3">`
+				result += `<div class="col-md-3">`
 				result += `</div>`
-				result += `<div class="col-9">`
+				result += `<div class="col-md-9">`
 				result += `<div class="sys-messages"></div>`
 				result += `</div>`
 				result += `</div>`
@@ -113,11 +113,11 @@ func DataForm(wrap *wrapper.Wrapper, data []DataFormField) string {
 			if field.CallBack != nil {
 				result += field.CallBack(&field)
 			} else {
-				result += `<div class="row hidden">`
-				result += `<div class="col-3">`
+				result += `<div class="row d-lg-none">`
+				result += `<div class="col-md-3 d-none d-md-block">`
 				result += `&nbsp;`
 				result += `</div>`
-				result += `<div class="col-9">`
+				result += `<div class="col-md-9">`
 				result += `<button type="submit" class="btn btn-primary" data-target="` + field.Target + `">` + html.EscapeString(field.Value) + `</button>`
 				result += `</div>`
 				result += `</div>`