mirror
/
wagtail-bakerydemo
kopia lustrzana https://github.com/wagtail/bakerydemo
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Two col design for bread detail page. Workson #57

pull/71/head
Edd Baldry 2017-02-26 18:02:11 +00:00
rodzic dc561bedb3
commit 81cd0ebeb9
2 zmienionych plików z 170 dodań i 20 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

43
bakerydemo/static/css/main.css
Wyświetl plik

@ -757,6 +757,38 @@ span.outline {
width: 70px;
}
/* Bread detail page */
.bread-detail .introduction {
color: #777;
font-size: 1.4em;
margin-top: 40px;
}
.bread-detail figure {
margin: 35px auto 20px auto;
max-height: 300px;
overflow: hidden;
}
.bread-detail figure img {
width: auto;
}
.bread-detail ul.bread-meta {
list-style: none;
padding-left: 0;
}
.bread-detail ul.bread-meta li ul {
padding-left: 0;
}
.bread-detail ul.bread-meta li ul li {
border-bottom: 1px solid #ccc;
list-style: none;
max-width: 450px;
}
/* No gutters */
.row.no-gutters {
margin-right: 0;
@ -776,3 +808,14 @@ span.outline {
display: flex;
flex-wrap: wrap;
}
@media (min-width: 970px) {
.hidden-md-up {
display: none;
}
}
@media (max-width: 970px) {
.hidden-md-down {
display: none;
}
}

147
bakerydemo/templates/breads/bread_page.html
Wyświetl plik

@ -2,24 +2,131 @@
{% load wagtailimages_tags %}
{% block content %}
<h1>{{ page.title }}</h1>
<figure>
{% image self.image fill-600x600 %}
</figure>
<div class="container bread-detail">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="row">
<h1>{{ page.title }}</h1>
<figure class="hidden-md-up">
{% image self.image width-600 %}
</figure>
{% if page.introduction %}
<p class="introduction">
{{ page.introduction }}
</p>
{% endif %}
<p>{{ page.origin }}</p>
<p>{{ page.bread_type }}</p>
{% with ingredients=page.ingredients.all %}
{% if ingredients %}
<h3>Ingredients:</h3>
<ul>
{% for ingredient in ingredients %}
<li style="display: inline">
{{ ingredient.name }}
</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
{{ page.body }}
{% endblock content %}
{{ page.body }}
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="row">
<figure class="hidden-md-down">
{% image self.image width-600 %}
</figure>
<ul class="bread-meta">
{% if page.origin %}
<li>
<h4>Origin</h4>
<p>{{ page.origin }}</p>
</li>
{% endif %}
{% if page.bread_type %}
<li>
<h4>Type</h4>
<p>{{ page.bread_type }}</p>
</li>
{% endif %}
{% with ingredients=page.ingredients.all %}
{% if ingredients %}
<li>
<h4>Ingredients</h4>
<ul>
{% for ingredient in ingredients %}
<li>
{{ ingredient.name }}
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endwith %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% comment %}
{% block content %}
<div class="container bread-detail">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="row">
<h1>{{ page.title }}</h1>
{% if page.introduction %}
<p class="introduction">
{{ page.introduction }}
</p>
{% endif %}
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<figure>
{% image self.image width-600 %}
</figure>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="row">
{{ page.body }}
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<ul class="bread-meta">
{% if page.origin %}
<li>
<h4>Origin</h4>
<p>{{ page.origin }}</p>
</li>
{% endif %}
{% if page.bread_type %}
<li>
<h4>Type</h4>
<p>{{ page.bread_type }}</p>
</li>
{% endif %}
{% with ingredients=page.ingredients.all %}
{% if ingredients %}
<li>
<h4>Ingredients</h4>
<ul>
{% for ingredient in ingredients %}
<li>
{{ ingredient.name }}
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endwith %}
</ul>
</div>
</div>
</div>
</div>
{% endcomment %}
{% endblock content %}