diff options
| -rw-r--r-- | pyblackbird_cc/static/images/placeholder.png | bin | 0 -> 3951 bytes | |||
| -rw-r--r-- | pyblackbird_cc/templates/resources/resource_list.html | 131 |
2 files changed, 91 insertions, 40 deletions
diff --git a/pyblackbird_cc/static/images/placeholder.png b/pyblackbird_cc/static/images/placeholder.png Binary files differnew file mode 100644 index 0000000..3d2e5d8 --- /dev/null +++ b/pyblackbird_cc/static/images/placeholder.png diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html index c978b31..e8f2a5c 100644 --- a/pyblackbird_cc/templates/resources/resource_list.html +++ b/pyblackbird_cc/templates/resources/resource_list.html @@ -1,12 +1,12 @@ {% extends "base.html" %} +{% load static %} + {% block title %} Joanna Lemon Resources - Resource List {% endblock title %} {% block content %} - <div class="container"> - <div class="row"> <div class="col"> <div class="d-flex flex-row justify-content-between"> @@ -14,9 +14,7 @@ <div> <a class="btn btn-primary" href="{% url 'resources:create_resource' %} ">Add a new resource</a> </div> - <div> - Logged in as {{ request.user.email }} - </div> + <div>Logged in as {{ request.user.email }}</div> <div> <form action="{% url 'account_logout' %}" method="post"> {% csrf_token %} @@ -27,44 +25,97 @@ </div> </div> </div> - - - <div class="row my-4"> - <div class="col"> - {% if resource_list %} - <div class="d-flex flex-row justify-content-between flex-wrap"> - {% for resource in resource_list %} - <div class="card mx-2 mt-2" style="width: 22rem;"> - <div class="card-header position-relative"> - <div class="text-success"> - Featured - <!-- <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">£5.99!</span> --> - </div> - </div> - <img class="card-img-top" src="{{ resource.thumbnail_urls|first }}" - alt="{{ resource.thumbnail_filename }}"> - <div class="card-body"> - <h5 class="card-title">{{ resource.name }}</h5> - <div class="d-flex flex-row justify-content-start align-content-center"> - <div> - <span class="badge text-bg-secondary me-2">{{ resource.main_resource_category_name }}</span> + <div class="row"> + <div class="col my-3 text-center rounded p-5"> + <h1 class="display-2">High quality educational resources</h1> + <div class="row"> + <div class="col my-5 text-center"> + <h2 class="display-5">Stuff and intro text</h2> + </div> + </div> + </div> + <div class="row"> + <div class="col mb-5"> + <div class="d-flex justify-content-between align-content-center"> + <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" /> + <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" /> + <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" /> + </div> + </div> + </div> + <div class="row"> + <div class="col-3 py-3 m-4 bg-body-tertiary border border-1 rounded"> + <h5>Welcome!</h5> + <p> + I love to make clear and colourful resources and can't resist using rainbow colours + which so often help make learning visually clearer. I'd love to know what you think of + what you download, don't hesitate to let me know if you have any suggestions or requests... + I am also available to tutor younger learners online via Sherpa! + </p> + </div> + <div class="col py-3 m-4 bg-body-tertiary border border-1 rounded"> + <h2 class="text-success">Subscriptions available now!</h2> + <p> + I love to make clear and colourful resources and can't resist using rainbow colours + which so often help make learning visually clearer. I'd love to know what you think of + what you download, don't hesitate to let me know if you have any suggestions or requests... + I am also available to tutor younger learners online via Sherpa! + </p> + <h4>What is available?</h4> + <ul class="list-group"> + <li class="list-group-item">Full access to all resources (over 250 resources)</li> + <li class="list-group-item">Customised resources upon request</li> + <li class="list-group-item">New resources coming online all the time</li> + </ul> + <a href="#" class="btn btn-primary my-3">Subscribe now</a> + </div> + </div> + <div class="row"> + <div class="col my-5 text-center"> + <h1 class="display-2">Featured resources</h1> + </div> + <div class="row"> + <div class="col my-5 text-center"> + <h2 class="display-5">These are my latest resources. They are great!</h2> + </div> + </div> + </div> + <div class="row my-4"> + <div class="col"> + {% if resource_list %} + <div class="d-flex flex-row justify-content-between flex-wrap"> + {% for resource in resource_list %} + <div class="card mx-2 mt-2" style="width: 22rem;"> + <div class="card-header position-relative"> + <div class="text-success"> + Featured + <!-- <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">£5.99!</span> --> </div> - <div> - <span class="badge text-bg-success me-2">{{ resource.age_range }}</span> + </div> + <img class="card-img-top" + src="{{ resource.thumbnail_urls|first }}" + alt="{{ resource.thumbnail_filename }}" /> + <div class="card-body"> + <h5 class="card-title">{{ resource.name }}</h5> + <div class="d-flex flex-row justify-content-start align-content-center"> + <div> + <span class="badge text-bg-secondary me-2">{{ resource.main_resource_category_name }}</span> + </div> + <div> + <span class="badge text-bg-success me-2">{{ resource.age_range }}</span> + </div> </div> + <p class="card-text my-3">{{ resource.description }}</p> + <a href="{% url 'resources:resource_detail' resource_id=resource.id %}" + class="btn btn-secondary">More...</a> </div> - <p class="card-text my-3">{{ resource.description }}</p> - <a href="{% url 'resources:resource_detail' resource_id=resource.id %}" - class="btn btn-secondary">More...</a> </div> - </div> - - {% endfor %} - </div> - {% else %} - <p>There are no resources</p> - {% endif %} + {% endfor %} + </div> + {% else %} + <p>There are no resources</p> + {% endif %} + </div> </div> </div> - </div> -{% endblock content %} + {% endblock content %} |
