tweek feed and episode cards layout

This commit is contained in:
Trent Palmer 2021-03-03 18:35:06 -08:00
parent 57a8a5f1a4
commit 843f7b8a3c
2 changed files with 34 additions and 35 deletions

View File

@ -9,46 +9,44 @@
<div class="col-0 col-sm-3"> <div class="col-0 col-sm-3">
</div> </div>
<div class="col-12 col-sm-6 px-0 mx-0"> <div class="col-12 col-sm-6 px-0 mx-0">
{% for i in feeds %} {% for i in feeds %}
<div class="card mx-1 mb-3"> <div class="card mx-1 mb-3">
<h3 class="text-center mt-2"> <h3 class="text-center mt-2">
{{ i.title }} {{ i.title }}
</h3> </h3>
<div class="container w-100 mb-2"> <div class="container w-100 mb-2">
<div class="row"> <div class="row">
<div class="col-3 d-flex flex-column justify-content-center"> <div class="col-3 d-flex flex-column justify-content-center">
<img src="{{ IMAGES_URL }}{{ i.image }}"> <img src="{{ IMAGES_URL }}{{ i.image }}">
</div> </div>
<div class="col-9 d-flex flex-row justify-content-center"> <div class="col-9 d-flex flex-column justify-content-center">
<div class="d-flex flex-column justify-content-center"> <p class="text-center mb-2 mt-3">{{ i.created_on }}</p>
<p>{{ i.created_on }}</p> <div class="d-flex flex-row justify-content-around mt-3">
<p><a href="{% url 'audio:feed' pk=i.pk slug=i.slug %}">{{ i.title }}</a></p> <p><a href="{% url 'audio:feed' pk=i.pk slug=i.slug %}">Items</a></p>
<p><a href="{% url 'audio:rss' slug=i.slug %}">RSS</a></p> <p><a href="{% url 'audio:rss' slug=i.slug %}">RSS</a></p>
<p>{{ i.description }}</p> </div>
</div> </div>
</div> </div>
<p class="text-justify mt-2 mb-0">{{ i.description }}</p>
</div> </div>
</div> </div>
{% if user.is_authenticated %} {% if user.is_authenticated %}
{% if user == i.user %} {% if user == i.user %}
<div class="container w-100 d-flex justify-content-around my-1"> <div class="container w-100 d-flex justify-content-around my-1">
<div> <div>
<a href="{% url 'audio:edit_feed' pk=i.pk title_slug=i.slug %}">Edit Feed?</a> <a href="{% url 'audio:edit_feed' pk=i.pk title_slug=i.slug %}">Edit Feed?</a>
</div>
<div>
<a href="{% url 'audio:new_episode' feed_pk=i.pk feed_title_slug=i.slug %}">New Episode?</a>
</div>
</div> </div>
<div> {% endif %}
<a href="{% url 'audio:new_episode' feed_pk=i.pk feed_title_slug=i.slug %}">New Episode?</a>
</div>
</div>
{% endif %} {% endif %}
{% endif %} {% endfor %}
</div>
{% endfor %}
</div> </div>
<div class="col-0 col-sm-3"> <div class="col-0 col-sm-3">
</div> </div>
</div> </div>
</div>
{% endblock %} {% endblock %}

View File

@ -24,6 +24,7 @@
</div> </div>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% for j in episodes %} {% for j in episodes %}
<div class="card mx-1 mb-3"> <div class="card mx-1 mb-3">
<h3 class="text-center mt-2"> <h3 class="text-center mt-2">
@ -34,17 +35,17 @@
<div class="col-3 d-flex flex-column justify-content-center"> <div class="col-3 d-flex flex-column justify-content-center">
<img src="{{ IMAGES_URL }}{{ j.image }}"> <img src="{{ IMAGES_URL }}{{ j.image }}">
</div> </div>
<div class="col-9 d-flex flex-row justify-content-center"> <div class="col-9 d-flex flex-column justify-content-center">
<div class="d-flex flex-column justify-content-center"> <p class="text-center mb-2 mt-3">{{ j.pub_date }}</p>
<p>{{ j.pub_date }}</p> <div class="d-flex flex-row justify-content-around mt-3">
<p><a href="{% url 'audio:episode' pk=j.pk slug=j.slug %}">{{ j.title }}</a></p> <p><a href="{% url 'audio:episode' pk=j.pk slug=j.slug %}">Link</a></p>
<p><a href="{% url 'audio:rss' slug=j.feed.slug %}">RSS</a></p> <p><a href="{% url 'audio:rss' slug=j.feed.slug %}">RSS</a></p>
<p>{{ j.description }}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="container w-100 mb-2 text-center"> <div class="container w-100 mb-2 text-center">
<p class="text-justify">{{ j.description }}</p>
<audio controls class="btn btn-dark w-100"> <audio controls class="btn btn-dark w-100">
<source src="{{ MP3_URL }}{{ j.mp3 }}" type="audio/mpeg"> <source src="{{ MP3_URL }}{{ j.mp3 }}" type="audio/mpeg">
Your browser does not support the audio tag. Your browser does not support the audio tag.