Improved mobile UI

nodejs/views/dns.ejs

@@ -26,7 +26,7 @@
 
 <script type="text/javascript">
 
-	function providerGet(cb){
+	function providerGet(){
 		app.api.options('dns', function(error, res){
 			for(let provider of res.results){
 				$.scope.providerSelect.push(provider);
@@ -99,9 +99,9 @@
 	});
 
 </script>
-<div class="row" style="display:none">
+<div class="row mb-3" style="display:none">
-	<div class="col-md-4">
+	<div class="col-md-3">
-		<div class="card shadow-lg">
+		<div class="card shadow-lg mb-3">
 
 			<div class="card-header text-center">
 				<span class="card-icon float-start">
@@ -116,7 +116,7 @@
 			</div>
 
 			<div class="card-header actionMessage" style="display:none"></div>
-			<div class="card-body">
+			<div class="card-body d-none d-md-block">
 				<form action="dns/" onsubmit="formAJAX(this)">
 					<div class="form-group">
 						<label for="name" class="form-label">
@@ -155,7 +155,10 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-md-8">
+	<div class="col-md-9">
+		<div class="row row-cols-1 row-cols-md-2 g-4">
+			
+			<div jq-repeat="DnsProvider" jq-repeat-index="id" style="display:none" class="col">
 				<div class="card shadow-lg">
 
 					<div class="card-header text-center">
@@ -163,7 +166,7 @@
 							<i class="fa-solid fa-record-vinyl"></i>
 						</span>
 						<span class="card-title">
-					DNS list
+							 {{ dnsProvider }} DNS
 						</span>
 						<span class="float-end">
 							<i class="fa-solid fa-circle-minus"></i>
@@ -171,25 +174,12 @@
 					</div>
 
 					<div class="card-header actionMessage" style="display:none"></div>
-			<ul class="card-body list-group list-group-flush" style="padding:0;">
+					<div class="card-body">
-				<li jq-repeat="DnsProvider" jq-repeat-index="id" style="display:none" class="list-group-item" onload="provider">
 						<div class="row">
-						<div class="col-6">
+								<h3><img height="32px" src="{{ displayIconHtml }}"/> {{name}} </h3>
-							<h3><img height="32px" src="{{ displayIconHtml }}"/> {{ dnsProvider }}</h3>
-							<h4>{{ name }}</h4>
 						</div>
-						<div class="col-6 text-end">
+						<div>
-							<b class="momentFromNow" data-date="{{ updated_on }}">{{ created_on_text }}</b> by <b>{{ created_by }}</b>
+							<b jq-repeat='Domain_{{id}}' jq-repeat-index="domain" class="me-2 my-1 badge text-bg-info rounded-pill fs-6">
-							<button type="button" class="btn btn-warning" method="POST" action="/dns/domain/refresh/{{id}}" onclick="formAJAX()">
-								<i class="fa-solid fa-rotate"></i>
-							</button>
-							<button type="button" class="btn btn-danger" method="DELETE" action="dns/{{id}}" onclick="formAJAX()">
-								<i class="fa-solid fa-trash-can"></i>
-							</button>
-						</div>
-					</div>
-					<div class="mb-3">
-						<b jq-repeat='Domain_{{id}}' jq-repeat-index="domain" class="m-1 badge text-bg-info rounded-pill">
 								{{domain}}
 							</b>
 							<script type="text/javascript">
@@ -198,9 +188,25 @@
 								}catch{}
 							</script>
 						</div>
-				</li>
-			</ul>
 					</div>
+					<div class="card-footer">
+						Added <b class="momentFromNow" data-date="{{ updated_on }}">{{ created_on_text }}</b> by <b>{{ created_by }}</b>
+						<span class="float-end text-end">
+							<button type="button" class="btn btn-warning" method="POST" action="/dns/domain/refresh/{{id}}" onclick="formAJAX()">
+								<i class="fa-solid fa-rotate"></i>
+							</button>
+							<button type="button" class="btn btn-danger" method="DELETE" action="dns/{{id}}" onclick="formAJAX()">
+								<i class="fa-solid fa-trash-can"></i>
+							</button>
+						</span>
+					</div>
+
+					
+				</div>
+
+			</div>
+		</div>
+
 	</div>
 </div>
 <%- include('bottom') %>

nodejs/views/hosts.ejs

@@ -10,13 +10,6 @@
 		margin-bottom: 1px;
 	}
 
-	.card-title{
-		font-weight: bold;
-	}
-
-	div.hostEditPanel{
-		margin-bottom: 1em;
-	}
 	div.form-group{
 		margin-bottom: 1em;
 	}
@@ -89,14 +82,21 @@
 		hostEditCancle();
 		host = $.scope.hosts.getByKey(host);
 		host.__jq_$el.addClass('table-warning');
+		$editHostForm.find('[name=is_wildcard').attr('disabled', true);
 		$.scope.editHost.update({...host, form: $editHostForm.html()});
 
+		if(host.is_wildcard){
+			$('.hostEditPanel [name="host"]').attr('disabled', true);
+		}
+
 		$.each(host, function( key, value ) {			if(typeof value == "boolean"){
 				$(".hostEditPanel #"+ key +"-"+ value).prop('checked', true)
 			}else{
 				$(".hostEditPanel input[name='" + key + "']").val(value);
 			}
 		});
+
+		$('.hostEditPanel').scrollTo();
 	};
 
 	function hostDownloadCert(host, type){
@@ -127,7 +127,6 @@
 		$editHostForm = $('#addHost').clone();
 		$editHostForm.find('hr.buttonBreak').nextAll().remove();
 		// $editHostForm.find('.autoSll').addClass('bg-secondary');
-		$editHostForm.find('[name=is_wildcard').attr('disabled', true);
 		hostPopulate(); //populate the table
 
 		$.scope.hosts.take = function($el, item, list){
@@ -137,7 +136,7 @@
 			});
 		};
 
-		$.scope.hosts.update = function($el, $render, item, list){
+		$.scope.hosts.putUpdate = function($el, $render, item, list){
 			$render.show()
 			$el.replaceWith($render);
 		};
@@ -187,7 +186,7 @@
 	<!-- 
 		left column 
 	-->
-		<div jq-repeat="editHost" class="card shadow-lg border-warning hostEditPanel" style="display:none">
+		<div jq-repeat="editHost" class="card shadow-lg border-warning hostEditPanel mb-3" style="display:none">
 			<!--
 				Edit host card
 			-->
@@ -220,7 +219,7 @@
 			</div>
 		</div>
 
-		<div class="card shadow-lg hostAddPanel">
+		<div class="card shadow-lg mb-3 hostAddPanel">
 			<!--
 				Add new host card
 			-->
@@ -238,7 +237,7 @@
 
 			<div class="card-header actionMessage" style="display:none"></div>
 
-			<div class="card-body">
+			<div class="card-body d-none d-md-block">
 				<form class="addHost" id="addHost" method="POST" action="host" onsubmit="formAJAX(this)">
 
 					<div class="form-group">
@@ -357,9 +356,10 @@
 				<label class="form-label" for="search" style="margin-left: -5px;">
 					Search Hosts:
 				</label>
-				<input type="search" oninput="hostSearchInput()">
+				<input type="search" oninput="hostSearchInput()" />
 			</div>
-			<table class="m-0 card-body table table-striped table-sm overflow-x-scroll">
+			<div class='table-responsive'>
+				<table class="m-0 card-body table table-striped overflow-x-scroll">
 		
 					<thead>
 						<th>
@@ -393,7 +393,7 @@
 								</a>
 								{{#domain.provider}}
 									<br />
-								<img width="24px" src="{{displayIconHtml}}" /> {{displayName}}
+									<img width="24px" src="{{displayIconHtml}}" /> {{displayName}} - {{name}}
 								{{/domain.provider}}
 							</td>
 							<td>
@@ -448,7 +448,7 @@
 						</tr>
 					</tbody>
 				</table>
-
+			</div>
 		</div>
 	</div>
 </div>