Merge pull request #778 from LibraryOfCongress/campaign-ui-updates

Campaign UI updates
LibraryOfCongress · Jan 28, 2019 · d1c8b7b · d1c8b7b
2 parents 2646340 + 7f13721
commit d1c8b7b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 22 deletions.
diff --git a/concordia/static/css/base.css b/concordia/static/css/base.css
@@ -60,7 +60,8 @@ main {
     min-height: var(--height-main);
 }
 
-h1 {
+h1,
+.h1 {
     font-family: 'Roboto Slab', serif;
     font-weight: bold;
     color: var(--text-color-primary);

diff --git a/concordia/templates/base.html b/concordia/templates/base.html
@@ -9,7 +9,7 @@
     <title>Crowd: {% block title %}{% if title %}{{ title }}{% else %}Untitled{% endif %}{% endblock title %}</title>
     <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Roboto+Slab" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Roboto+Slab:400,700" rel="stylesheet">
     <link rel="stylesheet" href="{% static 'css/base.css' %}">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
     {% block prefetch %}

diff --git a/concordia/templates/transcriptions/campaign_list.html b/concordia/templates/transcriptions/campaign_list.html
@@ -13,28 +13,24 @@
 {% endblock breadcrumbs %}
 
 {% block main_content %}
-<div class="container-fluid py-3">
-    <div class="row">
-        <div class="d-flex flex-wrap col-12 mb-3 justify-content-around">
-            {% for campaign in campaigns %}
-                <div class="bg-lightest-gray w-100 mb-3">
-                    <div class="row">
-                        <div class="col-12 col-md-8 px-3">
-                            <a href="{% url 'transcriptions:campaign-detail' campaign.slug %}">
-                                <h1 class="campaign-title">{{ campaign.title }}</h1>
-                            </a>
-                            {{ campaign.short_description|linebreaksbr }}
-                        </div>
-                        <div class="col-12 col-md-4">
-                            <a href="{% url 'transcriptions:campaign-detail' campaign.slug %}">
-                            <img src="{{ MEDIA_URL }}{{ campaign.thumbnail_image }}" class="img-fluid" alt="{{ campaign.title }} image">
-                            </a>
-                        </div>
+<div class="container py-3">
+    <h1 class="sr-only">Campaigns</h1>
+    <ul class="list-unstyled">
+        {% for campaign in campaigns %}
+            <li class="p-4 mb-1 bg-footer">
+                <h2 class="h1 mb-3">{{ campaign.title }}</h2>
+                <div class="row">
+                    <a class="col-md-5 order-md-2" href="{% url 'transcriptions:campaign-detail' campaign.slug %}">
+                        <p class="mb-2 text-center"><img src="{{ MEDIA_URL }}{{ campaign.thumbnail_image }}" class="img-fluid" alt="{{ campaign.title }} image"></p>
+                    </a>
+                    <div class="col-md">
+                        <p>{{ campaign.short_description|linebreaksbr }}</p>
+                        <a class="btn btn-primary" href="{% url 'transcriptions:campaign-detail' campaign.slug %}">View Projects</a>
                     </div>
                 </div>
-            {% endfor %}
-        </div>
-    </div>
+            </li>
+        {% endfor %}
+    </ul>
     <div class="row">
         {% include "fragments/standard-pagination.html" %}
     </div>