support small screens and avoid empty box on check ui

umputun · Dec 28, 2023 · 79066b2 · 79066b2
1 parent 5ce0206
commit 79066b2
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 21 deletions.
diff --git a/app/webapi/assets/components/check_results.html b/app/webapi/assets/components/check_results.html
@@ -1,8 +1,10 @@
-<div class="alert {{if .Spam}}alert-danger{{else}}alert-success{{end}}">
-    <strong>Result:</strong> {{if .Spam}}Spam detected{{else}}No spam detected{{end}}
-</div>
-{{range .Checks}}
-<div class="mb-2 {{if .Spam}}text-danger{{else}}text-success{{end}}">
-    <strong>{{.Name}}:</strong> {{.Details}}
-</div>
-{{end}}
+<div id="result" class="alert alert-light" role="alert">
+    <div class="alert {{if .Spam}}alert-danger{{else}}alert-success{{end}}">
+        <strong>Result:</strong> {{if .Spam}}Spam detected{{else}}No spam detected{{end}}
+    </div>
+    {{range .Checks}}
+    <div class="mb-2 {{if .Spam}}text-danger{{else}}text-success{{end}}">
+        <strong>{{.Name}}:</strong> {{.Details}}
+    </div>
+    {{end}}
+</div>
diff --git a/app/webapi/assets/components/navbar.html b/app/webapi/assets/components/navbar.html
@@ -4,7 +4,13 @@
         <a class="navbar-brand" href="/">
             <img src="/logo.png" alt="Logo" style="height: 30px;"> TG-Spam
         </a>
-        <div class="collapse navbar-collapse">
+
+        <!-- Navbar Toggler for small screens -->
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarContent">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item">
                     <a class="nav-link" href="/">Checker</a>
@@ -18,4 +24,4 @@
             </ul>
         </div>
     </div>
-</nav>
+</nav>
diff --git a/app/webapi/assets/manage_samples.html b/app/webapi/assets/manage_samples.html
@@ -15,7 +15,7 @@ <h2>Manage Samples</h2>
 
     <!-- Forms for Adding New Samples -->
     <div class="row mb-4">
-        <div class="col-md-6">
+        <div class="col-md-6 mb-3">
             <form hx-post="/update/spam" hx-target="#samples-list" hx-swap="innerHTML" hx-on::after-request="this.reset()">
                 <textarea name="msg" class="form-control mb-2" placeholder="Enter spam sample"></textarea>
                 <button type="submit" class="btn btn-danger">Add Spam</button>

diff --git a/app/webapi/assets/manage_users.html b/app/webapi/assets/manage_users.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-
+<html>
 <head>
     <title>Manage Users - TG-Spam</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -15,11 +15,11 @@ <h2>Manage Approved Users</h2>
 
     <!-- Form for Adding a New Approved User -->
     <div class="row mb-4">
-        <div class="col-md-12">
+        <div class="col-12">
             <form hx-post="/users/add" hx-target="#users-list" hx-swap="outerHTML" hx-error="#error-message" hx-on::after-request="this.reset()">
-                <div class="input-group mb-3">
-                    <input type="text" name="user_id" class="form-control me-2" placeholder="User ID">
-                    <input type="text" name="user_name" class="form-control me-3" placeholder="User Name">
+                <div class="input-group mb-3 flex-wrap">
+                    <input type="text" name="user_id" class="form-control me-2 mb-2 mb-md-0" placeholder="User ID">
+                    <input type="text" name="user_name" class="form-control me-3 mb-2 mb-md-0" placeholder="User Name">
                     <button type="submit" class="btn btn-primary">
                         <i class="bi bi-plus-circle"></i> Add to Approved Users
                     </button>

diff --git a/app/webapi/assets/spam_check.html b/app/webapi/assets/spam_check.html
@@ -12,11 +12,11 @@
 {{template "navbar.html"}}
 
 <div class="container mt-4">
-    <h1 class="text-center mb-4">Message Checker</h1>
-    <p class="text-center">Version: {{.Version}}</p>
+    <h2 class="text-center mb-4">Message Checker</h2>
+    <p class="text-center mb-4">Version: {{.Version}}</p>
     <div class="row justify-content-center">
-        <div class="col-md-6">
-            <form hx-post="/check" hx-target="#result" hx-encoding="json" hx-swap="innerHTML" class="mb-4">
+        <div class="col-12 col-md-6">
+            <form hx-post="/check" hx-target="#result" hx-encoding="json" hx-swap="outerHTML" class="mb-4">
                 <div class="mb-3">
                     <label for="userId" class="form-label">User ID</label>
                     <input type="text" class="form-control" id="userId" name="user_id" placeholder="Enter User ID">
@@ -27,7 +27,7 @@ <h1 class="text-center mb-4">Message Checker</h1>
                 </div>
                 <button type="submit" class="btn btn-primary w-100">Check</button>
             </form>
-            <div id="result" class="alert alert-light" role="alert"></div>
+            <div id="result" class="alert alert-light" role="alert" style="display: none;"></div>
         </div>
     </div>
 </div>