CB-448: Layout footer bottom links with flexbox

metabrainz · Nov 4, 2023 · bed4078 · bed4078
1 parent bb226c1
commit bed4078
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/critiquebrainz/frontend/static/styles/main.less b/critiquebrainz/frontend/static/styles/main.less
@@ -82,6 +82,56 @@ body {
     border-top: 1px solid #ddd;
     text-align: center;
   }
+
+  .footer-links {
+    margin-bottom: 20px;
+  }
+
+  .footer-credits {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+
+    .footer-source-link {
+      flex-basis: 30%;
+      text-align: start;
+      align-self: center;
+      padding-left: 15px;
+    }
+
+    .footer-foundation {
+      flex-basis: content;
+      align-self: center;
+      flex-grow: 100;
+    }
+
+    .footer-ticket-link {
+      flex-basis: 30%;
+      text-align: end;
+      align-self: center;
+      padding-right: 15px;
+    }
+
+    @media (max-width: @screen-sm-max) {
+      flex-wrap: wrap;
+
+      .footer-foundation {
+          order: 1;
+          flex-basis: 100%;
+        }
+
+      .footer-source-link {
+        order: 2;
+        flex-basis: 50%;
+      }
+
+      .footer-ticket-link {
+        order: 3;
+        flex-basis: 50%;
+      }
+    }
+  }
 }
 
 img.cover-art {

diff --git a/critiquebrainz/frontend/templates/footer.html b/critiquebrainz/frontend/templates/footer.html
@@ -11,7 +11,7 @@
 
 <section class="footer">
   <hr />
-  <div class="row">
+  <div class="row footer-links">
     <div class="col-sm-12 col-md-6">
       <h3>
         <img src="{{ url_for('static', filename='images/logo_text.svg') }}" alt="CritiqueBrainz" width="250">
@@ -100,13 +100,13 @@ <h3>{{ _("Developers") }}</h3>
       </ul>
     </div>
   </div>
-  <div class="row center-p">
-    <div class="col-md-3 d-none d-md-block hidden-xs section-line">
+  <div class="row center-p section-line footer-credits">
+    <div class="footer-source-link">
       <p>
         {{ _("OSS Geek? {url|Contribute Here}")|expand({'url': 'https://github.com/metabrainz/critiquebrainz'})|safe }}
       </p>
     </div>
-    <div class="col-md-6 section-line">
+    <div class="footer-foundation">
       <p>
         {% set expand={
         'metabrainz': '<img src="' + url_for('static', filename='images/metabrainz-icon-detail.svg') + '"
@@ -116,7 +116,7 @@ <h3>{{ _("Developers") }}</h3>
         {{ _("Brought to you by {metabrainz}")|expand(expand)|safe }}
       </p>
     </div>
-    <div class="col-md-3 d-none d-md-block hidden-xs section-line">
+    <div class="footer-ticket-link">
       <p>
         {{ _("Found an Issue? {url|Report Here}")|expand({'url': 'https://tickets.metabrainz.org/browse/CB'})|safe
         }}