Available Clubs Page

[IkeHunter]

Info

If users signup for the app, they should be able to find a club to join from a list of available clubs. Clicking a link/button next to a specific club (whether a list item, table row, or card) should add a user to that club. This can be in the form of an <a> tag linking to the join url, examples:

<!-- For a club with id 1, link should look like: -->
<a href="/clubs/club/1/join/">Join</a>

<!-- Using Django templating and dynamic urls, create link for each club -->
{% for club in clubs %}
<!-- other club info... -->
<a href="{% url 'clubs:join' club.id %}">Join</a>
{% endfor %}

Any ideas/suggestions on design or layout are welcomed. If you are comfortable in Django, you can edit the functional view clubs.views.available_clubs_view() to add any necessary context for dynamic data. Otherwise, just mock up a solution using plain html and css, and you can use example data in lieu of dynamic context data (ie using static value "Open Source Club" instead of {{ club.name }} for a clubs's name)

Task

• Design available clubs page
• Build out page in html/css/js

Files

• Put html in app/clubs/templates/clubs/available-clubs.html
• Put global CSS in app/static/css/style.css
• Put scoped CSS (specific to that page) in a new file: app/clubs/static/clubs/available-clubs.css and add link to available-clubs.html (see example in club-home.html)
• Put JS in app/static/js/script.js
• If need scoped JS, create new file: app/clubs/static/clubs/available-clubs.js and add link to available-clubs.html