Add bread index page template styling conditionals for optional fields. Workson #57

bakerydemo/static/css/main.css

@@ -711,8 +711,10 @@ span.outline {
   border-radius: 3px;
   margin: 12px;
   overflow: hidden;
-  padding: 0;
-  /*text-align: center;*/
+}
+
+.bread-list-item h2 {
+  font-weight: 300;
 }
 
 @media (min-width: 992px) {
@@ -721,17 +723,23 @@ span.outline {
   }
 }
 
-.bread-list-item img {
+.bread-list-item .image {
+  background-color: #eb7400;
   margin: 0;
-  width: auto;
+  max-width: 180px;
+  max-height: 180px;
+  min-width: 180px;
+  min-height: 180px;
+  padding: 0;
 }
 
-@media (max-width: 450px) {
-  .bread-list-item img {
-    height: auto;
-    margin: 20px 10px;
-    width: 100%;
-  }
+.bread-list-item .image:hover img {
+  opacity: 0.3;
+}
+
+.bread-list-item img {
+  margin: 0;
+  width: auto;
 }
 
 .bread-list-item ul {

bakerydemo/templates/breads/breads_index_page.html

@@ -17,19 +17,23 @@
             <div class="col-xs-12 col-md-6 bread-list-item">
             
                 <div class="row">
-                    <div class="col-xs-4 col-sm-4">
+                    <div class="col-xs-4 col-sm-4 image">
                     <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">
+                    <div class="col-xs-6 col-sm-7">
                         <a href="{% pageurl bread %}">
                             <h2>{{ bread.title }}</h2>
                         </a>
                         <ul class="bread-meta">
+                        {% if bread.origin %}
                             <li><span>Origin</span> {{ bread.origin }}</li>
-                            <li><span>Type</span> {{ bread.bread_type }}</li>
+                        {% endif %}
+                        {% if bread.bread_type %}
+                            <li><span>Type</span> {{ bread.bread_type }}</li>        
+                        {% endif %}
                         </ul>
                     </div>
                 </div>