✨ (src/): add docs tab (#31)

* ♻️ (src/templates/home): fix code indentation & missing div Improved code indentation and added a missing closing div. * 💄 (src/templates/home): add docs tab * 💄 (src/templates/docs): add docs page Added docs page with a Bootstrap Card named "Documentation". Here there will be all link for the User Documentation docs. In future could be added more Cards. * ✨ (src/routes): add docs route
UniNuvola · Oct 22, 2024 · 17f4486 · 17f4486
1 parent 7feeaff
commit 17f4486
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 16 deletions.
diff --git a/src/routes.py b/src/routes.py
@@ -97,3 +97,7 @@ def logout():
 @app.route('/info')
 def info():
     return render_template('info.html')
+
+@app.route('/docs')
+def docs():
+    return render_template('docs.html')
diff --git a/src/templates/docs.html b/src/templates/docs.html
@@ -0,0 +1,29 @@
+{% extends 'home.html' %}
+
+{% block script %}
+{% endblock%}
+
+{% block disclaimer %}
+{% endblock%}
+
+{% block body %}
+<!-- Description and Login -->
+<div class="row mx-auto py-md-2">
+  <div class="card" style="width: 18rem;">
+    <!-- <img src="..." class="card-img-top" alt="..."> -->
+    <div class="card-body">
+      <h2 class="card-title">Documentation</h2>
+      <p class="card-text">Here you can find all the user documentation about the UniNuvola project.</p>
+
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">
+          <a class="btn btn-link" href="https://github.com/UniNuvola/quickstart/releases/latest/download/main.pdf" about="_blank">
+            <i class="bi bi-file-pdf" style="color:red"></i> Quickstart guide
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+</div>
+{% endblock%}
diff --git a/src/templates/home.html b/src/templates/home.html
@@ -16,31 +16,38 @@
 
   </head>
   <body>
+    <!-- NAVBAR -->
     <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #4c7bb4;">
       <div class="container-fluid">
         <a class="navbar-brand" href="/">
           <img src="static/icon.png" alt=""  style="width: 40px; height: 40px;">
           UniNuvola
         </a>
-<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNav">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link" aria-current="page" href="/"><i class="bi bi-house-door-fill"></i> Home</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="/info"><i class="bi bi-info-circle-fill"></i> About</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="https://github.com/UniNuvola" target="_blank"><i class="bi bi-github"></i> GitHub</a>
-        </li>
-      </ul>
-    </div>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
+
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link" aria-current="page" href="/"><i class="bi bi-house-door-fill"></i> Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/docs"><i class="bi bi-file-earmark-text-fill"></i> Docs</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/info"><i class="bi bi-info-circle-fill"></i> About</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://github.com/UniNuvola" target="_blank"><i class="bi bi-github"></i> GitHub</a>
+            </li>
+          </ul>
+        </div>
+
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
         <div class="d-flex">
           {% if user %}
           <a href="/logout">
@@ -50,8 +57,10 @@
           </a>
           {% endif %}
         </div>
+      </div>
     </nav>
 
+    <!-- MAIN CONTENT -->
     <div class="col-md-6 mx-auto p-4 py-md-5">
       <main>
         {% block disclaimer %}