fixed styling and img placeholder

Author: spark-c

chipy_org/apps/contact/views.py

@@ -22,5 +22,5 @@ def form_valid(self, form):
     def get_context_data(self, **kwargs):
         """ Used to access message_as_modal in template as context """
         context = super(ContactView, self).get_context_data(**kwargs)
-        context.update({'message_as_modal': self.message_as_modal})
+        context.update({"message_as_modal": self.message_as_modal})
         return context

chipy_org/apps/main/views.py

@@ -15,7 +15,6 @@
 
 class Home(TemplateView, InitialRSVPMixin):
     template_name = "main/homepage.html"
-    message_as_modal = True
 
     def get_meeting(self):
         return (
@@ -29,7 +28,6 @@ def get_context_data(self, **kwargs):
         context.update(kwargs)
         context["IS_HOMEPAGE"] = True
         context["featured_sponsor"] = Sponsor.featured_sponsor()
-        context["message_as_modal"] = self.message_as_modal
 
         context = self.add_extra_context(context)
         return context

chipy_org/static/css/shiny.css

@@ -249,6 +249,31 @@ ul.no-bullets {
     top: 0;
 }
 
+/*
+An id of "modal" refers only to modals created via
+the chipy_org/templates/_modal.html template.
+Using the #modal selector below, only the templated modals
+are affected.
+
+Currently, other modals have ids such as "rsvp-modal", etc.
+*/
+#modal .modal-header {
+    display: flex;
+    flex-direction: column;
+}
+
+#modal .modal-header > img {
+    padding-top: 5%;
+}
+
+#modal .modal-title {
+    padding-top: 1rem;
+}
+
+#modal .modal-body {
+    text-align: center;
+}
+
 /* Medium devices (tablets, less than 992px) */
 @media (max-width: 991.98px) { 
     .padding-left-med-5 {

chipy_org/templates/_messages.html

@@ -1,6 +1,8 @@
 {% if message_as_modal %}
     {% for message in messages %}
-        <div>{{ message|linebreaks }}</div>
+        <div class="modal-message">
+            {{ message|linebreaks }}
+        </div>
     {% endfor %}
 
 {% else %}

chipy_org/templates/_modal.html

@@ -1,10 +1,11 @@
+{% load static %}
 <div id="modal-show" style="display:none" data-bs-toggle="modal" data-bs-target="#modal"></div>
 
 <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
-                <img src="https://via.placeholder.com/150"></img>
+                <img src="{% static 'img/chipy-logo.png' %}"></img>
                 <h5 class="modal-title black-text" id="modalLabel">Thank You.</h5>
             </div>
             <div class="modal-body">