[#176] Update Messages

Add boilerplate Bootstrap Alerts to home.html and rota.html modified: string_rota/templates/string_rota/home.html modified: string_rota/templates/string_rota/rota.html Add Boostrap JS links to the bottom of base.html modified: templates/base.html Add testing of Update Messages to README modified: README.md new file: readme_assets/images/testing-issue176.png
mikerae · Oct 12, 2023 · 1e0e208 · 1e0e208
1 parent 850ed6b
commit 1e0e208
Show file tree

Hide file tree

Showing 5 changed files with 263 additions and 211 deletions.
diff --git a/README.md b/README.md
@@ -296,6 +296,8 @@ The following manual tests were made:
     - [see issue #179 here](https://github.com/mikerae/string-rota/issues/179)
 - [Fix Allocate Reserve Button for Admin and Rota Manager  #184 Testing](/readme_assets/images/testing-issue184.png)
     - [see issue #184 here](https://github.com/mikerae/string-rota/issues/184)
+- [Update messaging  #176 Testing](/readme_assets/images/testing-issue176.png)
+    - [see issue #176 here](https://github.com/mikerae/string-rota/issues/176)
 #### Human Testing
 No human testing was done for this MVP, but once office manager functionality, and the hiding of draft rotas is implemented, user feedback will be sort.
 

diff --git a/readme_assets/images/testing-issue176.png b/readme_assets/images/testing-issue176.png
diff --git a/string_rota/templates/string_rota/home.html b/string_rota/templates/string_rota/home.html
@@ -34,47 +34,65 @@ <h2 class="card-title">Select a Project {% if office %}and a Section{% endif %}
             </div>
           </div>
         </div>
-        <!-- Messages -->
-        <div class="row">
-          <div class="col-12">
-            {% if messages %}
-            <ul class="messages">
-              {% for message in messages %}
-              {% with message.level as level %}
-              <li>
-                {% if level == 40 %}
-                <span class="text-danger"><strong>{{ message }}</strong></span>
-                {% elif level == 30 %}
-                <span class="text-warning"><strong>{{ message }}</strong></span>
-                {% elif level == 25 %}
-                <span class="text-success"><strong>{{ message }}</strong></span>
-                {% else %}
-                <span class="text-info"><strong>{{ message }}</strong></span>
-                {% endif %}
-              </li>
-              {% endwith %}
-              {% endfor %}
-            </ul>
-            {% endif %}
-          </div>
-        </div>
-        <!-- Player Info -->
-        {% if rota_manager or office %}
+
+        <!-- <div class="row"> -->
         <div class="col-lg-7">
-          <div class="card">
-            <div class="card-body">
-              <h2 class="card-title">
-                Register a Player
-              </h2>
-              <p class="ps-3">To enable an existing member {% if not office %}the {{section}} section{% endif %} to
-                access this app, please choose
-                "Register a Player" from the side menu.</p>
+          <!-- Messages -->
+          {% if messages %}
+          {% for message in messages %}
+          {% with message.level as level %}
+          {% if level == 40 %}
+          <div class="alert alert-dismissible alert-danger" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+            {{ message | safe }}
+              </div>
+            {% elif level == 30 %}
+            <div class="alert alert-dismissible alert-warning" role="alert">
+              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+              {{ message | safe }}
+              </div>
+              {% elif level == 25 %}
+              <div class="alert alert-dismissible alert-success" role="alert">
+                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+                {{ message | safe }}
+                </div>
+                {% else %}
+                <div class="alert alert-dismissible alert-info" role="alert">
+                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                  {{ message | safe }}
+                  </div>
+                  {% endif %}
+                  {% endwith %}
+                  {% endfor %}
+                  {% endif %}
+                </div>
+              </div>
+              <!-- Player Info -->
+              {% if rota_manager or office %}
+              <div class="col-lg-7">
+                <div class="card">
+                  <div class="card-body">
+                    <h2 class="card-title">
+                      Register a Player
+                    </h2>
+                    <p class="ps-3">To enable an existing member {% if not office %}the {{section}} section{% endif %}
+                      to
+                      access this app, please choose
+                      "Register a Player" from the side menu.</p>
+                  </div>
+                </div>
+              </div>
+              {% endif %}
             </div>
           </div>
-        </div>
-        {% endif %}
-      </div>
-    </div>
   </section>
 </main>
 {% endblock %}