Merge pull request #11 from Astylodon/responsive

Responsive improvements
Astylodon · May 30, 2024 · be0553b · be0553b
2 parents 17e3556 + 481cde0
commit be0553b
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 5 deletions.
diff --git a/assets/css/_login.scss b/assets/css/_login.scss
@@ -2,8 +2,16 @@
     height: 90vh;
 }
 
-.login .form-group {
-    width: 25vh;
+@media (min-width: 540px) {
+    .login .form-group {
+        width: 250px;
+    }
+}
+
+@media (max-width: 540px) {
+    .login .form-group {
+        width: 100%;
+    }
 }
 
 .login input[type=submit] {

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -0,0 +1 @@
+import "bootstrap/dist/js/bootstrap.bundle"
diff --git a/views/base.html.twig b/views/base.html.twig
@@ -13,5 +13,7 @@
     <body>
         {% block body %}{% endblock %}
         {% block script %}{% endblock %}
+
+        <script src="{{ "js/main.js" | vite }}"></script>
     </body>
 </html>
diff --git a/views/dashboard/index.html.twig b/views/dashboard/index.html.twig
@@ -25,7 +25,7 @@
     </div>
 
     <div class="row mt-2">
-        <div class="col-6">
+        <div class="col-lg-6 mb-2">
             <div class="card">
                 <div class="card-body">
                     <h5 class="card-title">Pages</h5>
@@ -35,7 +35,7 @@
             </div>
         </div>
 
-        <div class="col-6">
+        <div class="col-lg-6 mb-2">
             <div class="card">
                 <div class="card-body">
                     <h5 class="card-title">Referrers</h5>

diff --git a/views/login/login.html.twig b/views/login/login.html.twig
@@ -7,7 +7,7 @@
         <div class="top-alert">{{ error }}</div>
     {% endif %}
 
-    <form action="" method="post" class="d-flex justify-content-center align-items-center flex-column login">
+    <form action="" method="post" class="d-flex justify-content-center align-items-center flex-column login m-2">
         <div class="mb-2 form-group">
             <label for="usernameInput" class="form-label">Username</label>
             <input type="text" id="usernameInput" name="username" class="form-control" required autofocus value="{{ username|default }}" placeholder="Enter a username">

diff --git a/vite.config.js b/vite.config.js
@@ -12,6 +12,7 @@ export default defineConfig({
         rollupOptions: {
             input: {
                 css: "assets/css/app.scss",
+                main: "assets/js/main.js",
                 graphs: "assets/js/graphs.js"
             }
         }