Merge pull request #1874 from newamericafoundation/conference-style

Conference style

conference/migrations/0018_auto_20240715_1120.py

@@ -0,0 +1,25 @@
+# Generated by Django 3.2.18 on 2024-07-15 15:20
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0065_accordion_blocks'),
+        ('conference', '0017_add_alt_text_to_blocks'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='conference',
+            name='alternate_title_image',
+            field=models.ForeignKey(blank=True, help_text='This will replace the title in the introduction / cover image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='home.customimage'),
+        ),
+        migrations.AddField(
+            model_name='conference',
+            name='alternate_title_image_alt',
+            field=models.TextField(blank=True, default='', help_text='A concise description of the image for users of assistive technology.', verbose_name='Alternate title image alternative text'),
+        ),
+    ]

conference/models.py

@@ -78,6 +78,20 @@ class Conference(Page):
         verbose_name="Alternate logo alternative text",
         help_text="A concise description of the image for users of assistive technology.",
     )
+    alternate_title_image = models.ForeignKey(
+        "home.CustomImage",
+        help_text="This will replace the title in the introduction / cover image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+    )
+    alternate_title_image_alt = models.TextField(
+        default="",
+        blank=True,
+        verbose_name="Alternate title image alternative text",
+        help_text="A concise description of the image for users of assistive technology.",
+    )
 
     host_organization = models.TextField(default="New America", blank=True, null=True)
 
@@ -117,6 +131,8 @@ class Conference(Page):
             TitleFieldPanel("title"),
             FieldPanel("subheading"),
             FieldPanel("host_organization"),
+            FieldPanel("alternate_title_image"),
+            FieldPanel("alternate_title_image_alt"),
             FieldPanel("alternate_logo"),
             FieldPanel("alternate_logo_alt"),
             FieldRowPanel(

conference/templates/conference/conference.html

@@ -54,27 +54,21 @@
   <main class="container--1080">
     {% include 'conference/about.html' %}
 
+    {% if page.publish_speakers %}
     <section id="speakers" class="conference__section section-nav align-center">
-        <span class="line-icon section-icon line-icon-faces-users-04"></span>
-        <h1 class="centered">Speakers</h1>
-
-      {% if page.publish_speakers %}
-        {{ page.speakers }}
-      {% else %}
-        <h4><i>To be announced.</i></h4>
-      {% endif %}
+      <span class="line-icon section-icon line-icon-faces-users-04"></span>
+      <h1 class="centered">Speakers</h1>
+      {{ page.speakers }}
     </section>
+    {% endif %}
 
+    {% if page.publish_sessions %}
     <section id="schedule" class="conference__section section-nav schedule-section align-center">
-
       <span class="line-icon section-icon line-icon-office-21"></span>
       <h1 class="centered">Schedule</h1>
-      {% if page.publish_sessions %}
-        {% include_block page.sessions %}
-      {% else %}
-        <h4><i>To be announced.</i></h4>
-      {% endif %}
+      {% include_block page.sessions %}
     </section>
+    {% endif %}
 
     {% if page.partners|length > 0 %}
     <section id="sponsors" class="conference__section section-nav align-center">

conference/templates/conference/intro.html

@@ -2,7 +2,7 @@
 {% load wagtailimages_tags %}
 
 {% image page.story_image original as cover %}
-<section id="hero" class="conference__intro" style="background: url({{cover.url}}) no-repeat center/cover fixed">
+<section id="hero" class="conference__intro" style="background: black url({{cover.url}}) no-repeat center/cover fixed">
   <div class="heading-block centered-block align-center">
       <div class="conference__title">
         <div class="na-logo">
@@ -17,8 +17,8 @@
           {% endif %}
           </a>
       	</div>
-        <div class="conference__title__location-date row">
-          <h4 class="white margin-0 col-6" style="text-align:right">
+        <div class="conference__title__location-date">
+          <h4 class="white">
             <span>
               <span class="fa fa-calendar base-clr-txt" style="padding-right: 10px;"></span>
               {% if page.end_date %}
@@ -28,14 +28,19 @@ <h4 class="white margin-0 col-6" style="text-align:right">
               {% endif %}
             </span>
           </h4>
-          <h4 class="white margin-0 col-6">
+          <h4 class="white">
             <span>
               <span class="fa fa-location-dot base-clr-txt" style="padding-right: 10px;"></span>
               {{page.city}}, {{page.state}}
             </span>
           </h4>
         </div>
-        <h1 class="promo white centered margin-35">{{page.title}}</h1>
+        {% if page.alternate_title_image %}
+          {% image page.alternate_title_image original as alt_title_image %}
+          <img class="conference__title__image" src="{{alt_title_image.url}}" alt={{page.alternate_title_image_alt}} />
+        {% else %}
+          <h1 class="promo white centered margin-35">{{page.title}}</h1>
+        {% endif %}
         <h6 class="pullquote white centered">{{ page.subheading }}</h6>
         <p class="white centered">{{page.search_description}}</p>
         <div class="btns-container {%if page.invitation_only %}invite-only{% endif %}" style="text-align:center;">
@@ -44,7 +49,7 @@ <h6 class="pullquote white centered">{{ page.subheading }}</h6>
           {% elif page.rsvp_link %}
             <a href="{{page.rsvp_link}}" target="_blank" rel="noopener noreferrer" class="button white-outline" style="width:175px;">Register</a>
           {% endif %}
-            <a href="#about" class="button white-outline" style="width:175px;">About </a>
+            <a href="#about" class="button white-outline margin-10" style="width:175px;">About </a>
         </div>
       </div>
 

newamericadotorg/assets/scss/pages/conference/_intro.scss

@@ -18,10 +18,25 @@
     left: 50%;
     @include transform(translateX(-50%));
     position: absolute;
-    top: -45px;
+    top: 0;
 
     @media (min-width: 430px){
       max-width: 400px;
     }
   }
 }
+
+.conference__title__location-date {
+  text-align: center;
+  > h4 {
+    display: inline-block;
+    margin: 10px;
+  }
+}
+
+.conference__title__image {
+  display: block;
+  max-width: 60%;
+  max-height: calc(100vh - 500px);
+  margin: 30px auto;
+}