Update Citizen engagement page to show missing message (#4056)

* fix the first set of steps in the getting started webpage * swapped Step 3 and Step 4 images and class values * Add if else block to show missing message * remove extra spaces after <img> tags * Changed Alt of Join Us image #3851 * image-alt-property-change-3851 * need to change this * Deleted image alt of header-hero * Add html for dynamic message and scss layout * remove swap file --------- Co-authored-by: Danny Perez <[email protected]> Co-authored-by: Danny Perez <[email protected]> Co-authored-by: Daniel Perez <[email protected]> Co-authored-by: Angelina Hayrapetyan <[email protected]>
hackforla · Mar 5, 2023 · 9390615 · 9390615
1 parent a9b9119
commit 9390615
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 13 deletions.
diff --git a/_includes/citizen-engagement-cards.html b/_includes/citizen-engagement-cards.html
@@ -1,6 +1,14 @@
 {% assign visible_projects = site.projects | where: "program-area", "Citizen Engagement" | where: "visible", "true" %}
              {% for item in visible_projects %}
-                   <div class="page-card card-primary page-card-lg program-area" data-dropdown>
+             {%- if 
+                item.problem.size > 0 and
+                item.solution.size > 0 and
+                item.impact.size > 0 and
+                item.sdg.size > 0 and
+                item.card-image-src.size > 0 and
+                item.sdg-image-src.size > 0
+                -%}
+                  <div class="page-card card-primary page-card-lg program-area" data-dropdown>
                         <img class="card-image" src="{{ item.card-image-src }}" alt="{{ item.card-image-alt }}"/>
                            <div class="mobile-card-info-container">
                                <div class="mobile-card-nav">
@@ -21,14 +29,23 @@ <h4>Solution</h4>
                                         <h4>Impact</h4>
                                         <p>{{ item.impact }}</p>
                                     </div>
-                               </div>
-                           </div>
-                       <div class="sustainable-dev-goal">
-                           <h4>Sustainable Development Goal</h4>
-                           <div class="card-bottom-info">
-                               <img class="sdg-image" src="{{ item.sdg-image-src }}" alt="{{ item.sdg-image-alt }}" />
-                                       <p>{{ item.sdg }}</p>
-                           </div>
-                       </div>
+                            </div>
+                        </div>
+                    <div class="sustainable-dev-goal">
+                        <h4>Sustainable Development Goal</h4>
+                        <div class="card-bottom-info">
+                            <img class="sdg-image" src="{{ item.sdg-image-src }}" alt="{{ item.sdg-image-alt }}" />
+                                    <p>{{ item.sdg }}</p>
+                        </div>
+                    </div>
+                </div>
+                {%- else -%}  
+                     <div class="page-card card-primary page-card-lg missing-area" data-dropdown>
+                        <div class="mobile-card-info-container">
+                            {% assign project_relative_path = item.slug | prepend: "../projects/" %}
+                            <h3><a class="project-card-mini-title" href="{{ project_relative_path }}">{{ item.title }}</a></h3>
+                            <p>We are currently drafting the Problem, Solution and Impact statements for this project.</p>
+                        </div>
                    </div>
-            {% endfor %}
+                {%- endif -%}   
+            {% endfor %}
diff --git a/_sass/components/_citizen_engagement.scss b/_sass/components/_citizen_engagement.scss
@@ -28,7 +28,9 @@
 
 //This is the default styling for the cards when they are in mobile view.
 //project-dropdown and sustainable-dev-goal are defaulted to display:none until given the "activated" class attribute
-.program-area {
+
+.program-area,
+.missing-area {
     .mobile-card-info-container {
         display: flex;
         flex-direction: column;
@@ -58,6 +60,20 @@
     }
 }
 
+.missing-area {
+    .mobile-card-info-container {
+        align-items: center;
+
+        h3 {
+            margin-bottom: 10px;
+            color: $color-red;
+        }
+        p {
+            text-align: center;
+        }
+    }
+}
+
 .organizations {
     padding: 44px;
     display: flex;
@@ -145,7 +161,8 @@
 //The styling for the card is column based until we reach desktop width
 @media #{$bp-mobile-up} {
 
-    .program-area {
+    .program-area, 
+    .missing-area {
         display: flex;
         padding: 44px;
         flex-direction: column;
@@ -215,6 +232,14 @@
         max-width: 1080px !important; 
     }
 
+    .missing-area {
+        padding: 44px;
+        max-width: 1080px;
+        .mobile-card-info-container {
+            padding: 0px;
+        }
+    }
+
     .program-area {
         display: grid;
         grid-template-columns: 1fr 1fr;