diff options
| author | Étienne Loks <etienne@peacefrogs.net> | 2019-08-22 08:34:48 +0200 |
|---|---|---|
| committer | Étienne Loks <etienne@peacefrogs.net> | 2019-08-22 08:34:48 +0200 |
| commit | c989b2480b48700d709ea6ea6dcb128b06ddf797 (patch) | |
| tree | 2813c9afaef15d60e902ac410de5b53c22e3dbbe | |
| parent | fd62ff3d64bc529e763022258e18baadeb6e6542 (diff) | |
| download | ishtar-pergamon-c989b2480b48700d709ea6ea6dcb128b06ddf797.tar.bz2 ishtar-pergamon-c989b2480b48700d709ea6ea6dcb128b06ddf797.zip | |
Card layout for showcases
| -rw-r--r-- | scss/ishtar_public.scss | 5 | ||||
| -rw-r--r-- | showcase/templates/showcase/show_case.html | 50 |
2 files changed, 43 insertions, 12 deletions
diff --git a/scss/ishtar_public.scss b/scss/ishtar_public.scss index 62cf259..22f482c 100644 --- a/scss/ishtar_public.scss +++ b/scss/ishtar_public.scss @@ -25,6 +25,7 @@ position: relative; overflow: hidden; min-height: 250px; + margin-bottom: 0; } .jumbotron h2{ @@ -51,4 +52,8 @@ opacity: 0.9; } +main.container{ + margin-top: 2rem; +} + @import "custom_post";
\ No newline at end of file diff --git a/showcase/templates/showcase/show_case.html b/showcase/templates/showcase/show_case.html index b6a4afa..6a2f13b 100644 --- a/showcase/templates/showcase/show_case.html +++ b/showcase/templates/showcase/show_case.html @@ -4,17 +4,43 @@ {% block body_class %}template-showcase{% endblock %} {% block content %} -{% image page.image width-500 %} -{{ page.body|richtext }} -{% if page.data %}<ul> -{% for item in page.data %} - <li> - <a href="{% url 'display-item' page.slug forloop.counter0 %}"> - {{item.denomination}} - <img src="{{item.images.0.thumbnail}}"> - </a> - </li> -{% endfor %} -</ul>{% endif %} + +<div class="row justify-content-md-center"> +<div class="card" style="max-width: 1024px;"> + <div class="row no-gutters"> + <div class="col-md-6"> + {% image page.image original as head_image %} + <img src="{{ head_image.url }}" alt="{{ head_image.alt }}" class="card-img" /> + </div> + <div class="col-md-6"> + <div class="card-body"> + <h5 class="card-title">{{page.title}}</h5> + {{ page.body|richtext }} + </div> + </div> + </div> +</div> +</div> + +<hr> + +{% if page.data %} +<div class="row justify-content-md-center"> + {% for item in page.data %} + <div class="col-md-auto m-1" style="width: 12rem;"> + <div class="card"> + {% if item.images.0.thumbnail %} + <img src="{{item.images.0.thumbnail}}" class="card-img-top"> + {% endif %} + <div class="card-body"> + <a href="{% url 'display-item' page.slug forloop.counter0 %}"> + {{item.denomination}} + </a> + </div> + </div> + </div> + {% endfor %} +</div> +{% endif %} {% endblock %} |