Finish styling index page. Works on #57

bakerydemo/static/css/main.css

@@ -526,6 +526,12 @@ li.has-submenu a.allow-toggle {
   background-color: #fff;
 }
 
+/* Pagination navigation */
+nav[role=pagination] {
+  margin-top: 50px;
+  text-align: center;
+}
+
 /* Location list page */
 .location-list-item {
   text-align: center;
@@ -592,7 +598,6 @@ time.location-time {
 }
 
 /* Blog styles */
-
 .blog-byline {
     margin-top: -40px;
     margin-bottom: 20px;
@@ -698,6 +703,52 @@ span.outline {
   padding: 3px 6px;
   text-transform: uppercase;
 }
+
+/* Bread styles */
+/* Bread listview */
+.bread-list-item {
+  border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 3px;
+  margin: 12px;
+  overflow: hidden;
+  padding: 0;
+  /*text-align: center;*/
+}
+
+@media (min-width: 992px) {
+  .bread-list-item {
+    width: 47%;
+  }
+}
+
+.bread-list-item img {
+  margin: 0;
+  width: auto;
+}
+
+@media (max-width: 450px) {
+  .bread-list-item img {
+    height: auto;
+    margin: 20px 10px;
+    width: 100%;
+  }
+}
+
+.bread-list-item ul {
+  padding-left: 2px;
+}
+
+.bread-list-item li {
+  list-style: none;
+}
+
+.bread-list-item li span {
+  color: #777;
+  display: inline-block;
+  font-weight: 600;
+  width: 70px;
+}
+
 /* No gutters */
 .row.no-gutters {
   margin-right: 0;

bakerydemo/templates/breads/breads_index_page.html

@@ -12,20 +12,24 @@
 </div>
 
 <div class="container">
-    <div class="row">
+    <div class="row bread-list">
     {% for bread in breads %}
-            <div class="col-xs-12 col-md-6">
-            <a href="{% pageurl bread %}">
+            <div class="col-xs-12 col-md-6 bread-list-item">
+            
                 <div class="row">
-                    <div class="col-xs-4">
-                    {% image bread.image fill-180x180-c100 as image %}
-                                    <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" class="" />
-                    </div>
-                    <div class="col-xs-6">
-                        <h2>{{ bread.title }}</h2>
-                        <ul class="bread-meta list-inline">
-                            <li>{{ bread.origin }}</li>
-                            <li>{{ bread.bread_type }}</li>
+                    <div class="col-xs-4 col-sm-4">
+                    <a href="{% pageurl bread %}">
+                        {% image bread.image fill-180x180-c100 as image %}
+                                        <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" class="" />
+                        </div>
+                    </a>
+                    <div class="col-xs-6 col-sm-6">
+                        <a href="{% pageurl bread %}">
+                            <h2>{{ bread.title }}</h2>
+                        </a>
+                        <ul class="bread-meta">
+                            <li><span>Origin</span> {{ bread.origin }}</li>
+                            <li><span>Type</span> {{ bread.bread_type }}</li>
                         </ul>
                     </div>
                 </div>

bakerydemo/templates/includes/pagination.html

@@ -1,6 +1,6 @@
 {% load navigation_tags %}
 
-<nav role="navigation" aria-label="Pagination">
+<nav role="pagination" aria-label="Pagination">
     <ul class="pagination">
         {% if subpages.has_previous %}
             <li class="page-item">