display club links on club main page

club/static/club/detail.scss

@@ -0,0 +1,66 @@
+#club-detail {
+  img.club-logo {
+    display: block;
+    max-height: 200px;
+    max-width: 200px;
+  }
+  #club-attributes {
+    ul {
+      list-style: none;
+      margin-left: 0;
+      display: flex;
+      flex-direction: column;
+      gap: .75rem;
+
+      li i {
+        margin-right: .5rem;
+      }
+    }
+  }
+
+  &:not(.has-links) {
+    #club-attributes {
+      float: right;
+      margin: 1em 0 1em 2em;
+
+      @media screen and (max-width: 650px) {
+        margin-left: 1em;
+      }
+      @media screen and (max-width: 400px) {
+        float: unset;
+        img.club-logo {
+          margin: auto;
+        }
+      }
+    }
+  }
+
+  &.has-links {
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 2em;
+
+    @media screen and (max-width: 650px) {
+      flex-direction: column;
+      gap: 1em;
+    }
+
+    #club-attributes {
+      display: flex;
+      flex-direction: column;
+      gap: 1em;
+      min-width: 200px;
+      @media screen and (max-width: 650px) {
+        margin-top: 1em;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        h4 {
+          margin: 0;
+        }
+        img.club-logo {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}

club/templates/club/club_detail.jinja

@@ -21,15 +21,43 @@
   {% endif %}
 {% endblock %}
 
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static("club/detail.scss") }}">
+{% endblock %}
+
 {% block content %}
-  <div id="club_detail">
-    {% if club.logo %}
-      <div class="club_logo"><img src="{{ club.logo.url }}" alt="{{ club.name }}"></div>
-    {% endif %}
-    <h3>{{ club.name }}</h3>
-    {% if page_revision %}
-      {{ page_revision|markdown }}
-    {% endif %}
+  <h3>{{ club.name }}</h3>
+  <div id="club-detail" {% if links %}class="has-links"{% endif %}>
+    <div id="club-attributes">
+      {% if club.logo %}
+        <img
+          class="club-logo"
+          src="{{ club.logo.url }}"
+          alt="{{ club.name }}"
+          width="{{ club.logo.width }}"
+          height="{{ club.logo.height }}"
+        >
+      {% endif %}
+      {% if links %}
+        <div id="club-links">
+          <h4>{% trans %}Links{% endtrans %}</h4>
+          <ul>
+            {% for link in links %}
+              <li>
+                <a href="{{ link.url }}" rel="noopener" target="_blank">
+                  <i class="{{ link.link_type.icon }} fa-xl"></i>{{ link.name }}
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endif %}
+    </div>
+    <div id="club-page">
+      {% if page_revision %}
+        {{ page_revision|markdown }}
+      {% endif %}
+    </div>
   </div>
 {% endblock %}
 

club/tests/test_page.py

@@ -21,7 +21,7 @@ def test_page_display_on_club_main_page(client: Client):
 
     assert res.status_code == 200
     soup = BeautifulSoup(res.text, "lxml")
-    detail_html = soup.find(id="club_detail").find(class_="markdown")
+    detail_html = soup.find(id="club-page").find(class_="markdown")
     assertHTMLEqual(detail_html.decode_contents(), markdown(content))
 
 
@@ -34,7 +34,7 @@ def test_club_main_page_without_content(client: Client):
 
     assert res.status_code == 200
     soup = BeautifulSoup(res.text, "lxml")
-    detail_html = soup.find(id="club_detail")
+    detail_html = soup.find(id="club-page")
     assert detail_html.find_all("markdown") == []
 
 

club/views.py

@@ -244,6 +244,7 @@ class ClubView(ClubTabsMixin, DetailView):
             .values_list("content", flat=True)
             .first()
         )
+        kwargs["links"] = list(self.object.links.select_related("link_type").all())
         return kwargs
 
 

core/static/core/style.scss

@@ -398,6 +398,28 @@ body {
     }
   }
 
+  /* Fontawesome icons */
+  .fa-brands, .fa-link {
+    color: black;
+  }
+
+  .fa-facebook {
+    color: $faceblue;
+  }
+
+  .fa-discord {
+    color: $discordblurple;
+  }
+
+  .fa-square-instagram::before, .fa-instagram::before {
+    background: $instagradient;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .fa-bluesky, .fa-square-bluesky {
+    color: #0f73ff;
+  }
 }
 
 @media screen and (max-width: $small-devices) {
@@ -749,16 +771,3 @@ textarea {
     vertical-align: middle;
   }
 }
-
-/*--------------------------------JQuery-------------------------------*/
-#club_detail {
-  .club_logo {
-    float: right;
-
-    img {
-      display: block;
-      max-height: 10em;
-      max-width: 10em;
-    }
-  }
-}