Design organization list page and add organization search (#119)

resources/base.scss

@@ -791,6 +791,10 @@ noscript #noscript {
     background-color: bisque;
 }
 
+.background-royalblue {
+    background-color: royalblue !important;
+}
+
 .background-footer {
     color: #808080;
 }

resources/blog.scss

@@ -134,7 +134,6 @@
     border-bottom: 1.4px solid lightgray;
     border-top: 1.4px solid lightgray;
     margin-bottom: 1.5em;
-    width: 90%;
     padding: 1em 1.25em 0.5em 1.25em;
     background-color: white;
     margin-left: auto;
@@ -275,6 +274,7 @@
     .right-sidebar {
         width: 100%;
         margin-left: auto;
+        margin-top: 2em;
     }
 
     .actionbar-box {
@@ -342,6 +342,7 @@
     .blog-sidebar,
     .right-sidebar {
         flex: 25%;
+        max-width: 25%;
     }
 
     .middle-content {

resources/common.js

@@ -385,6 +385,47 @@ function activateBlogBoxOnClick() {
     });
 }
 
+function changeTabParameter(newTab) {
+  const url = new URL(window.location);
+  const searchParams = new URLSearchParams(url.search);
+  searchParams.set('tab', newTab);
+  searchParams.delete('page');
+  url.search = searchParams.toString();
+  return url.href;
+}
+
+function submitFormWithParams($form, method) {
+  const currentUrl = new URL(window.location.href);
+  const searchParams = new URLSearchParams(currentUrl.search);
+  const formData = $form.serialize();
+
+  const params = new URLSearchParams(formData);
+
+  if (searchParams.has('tab')) {
+    params.set('tab', searchParams.get('tab'));
+  }
+
+  const fullUrl = currentUrl.pathname + '?' + params.toString();
+
+  if (method === "GET") {
+    window.location.href = fullUrl;
+  }
+  else {
+    var $formToSubmit = $('<form>')
+      .attr('action', fullUrl)
+      .attr('method', 'POST')
+      .appendTo('body');
+
+    $formToSubmit.append($('<input>').attr({
+      type: 'hidden',
+      name: 'csrfmiddlewaretoken',
+      value: $.cookie('csrftoken')
+    }));
+
+    $formToSubmit.submit();
+  }
+}
+
 function onWindowReady() {
     // http://stackoverflow.com/a/1060034/1090657
     var hidden = 'hidden';

resources/darkmode.css

@@ -1766,6 +1766,9 @@ noscript #noscript {
 .background-bisque {
     background-color: rgb(86, 47, 0);
 }
+.background-royalblue {
+    background-color: rgb(25, 58, 158) !important;
+}
 .background-footer {
     color: rgb(152, 143, 129);
 }
@@ -2769,6 +2772,10 @@ ul.errorlist {
     color: rgb(209, 205, 199);
     text-decoration-color: initial;
 }
+.link-row a {
+    color: inherit;
+    text-decoration-color: initial;
+}
 .link-row:hover {
     background-color: rgb(31, 31, 17);
     color: rgb(249, 146, 97);
@@ -3171,6 +3178,19 @@ a.voted {
     background-image: initial;
     color: rgb(232, 230, 227);
 }
+.organization-card {
+    background-color: rgb(24, 26, 27);
+    border-color: rgb(58, 62, 65);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
+    color: inherit;
+    text-decoration-color: initial;
+}
+.organization-card:hover {
+    color: rgb(249, 146, 97);
+}
+.organization-card img.org-logo {
+    background-color: rgb(32, 35, 37);
+}
 .organization-row {
     border-bottom-color: rgb(62, 68, 70);
     border-top: none;
@@ -3179,16 +3199,13 @@ a.voted {
 .organization-row:hover {
     background-color: rgb(31, 33, 35);
 }
-.organization-container {
-    border-color: rgb(62, 68, 70);
-}
 .org-help-text {
     color: rgb(152, 143, 129);
 }
 .ticket-container #content > h2:first-child small {
     color: rgb(168, 160, 149);
 }
-.ticket-container #content > h2:first-child .fa-check-circle-o {
+.ticket-container #content > h2:first-child .fa-check-circle {
     color: rgb(86, 255, 86);
 }
 .ticket-container #content > h2:first-child .fa-exclamation-circle {

resources/organization.scss

@@ -1,3 +1,5 @@
+@import "vars";
+
 .leave-organization, .leave-organization:hover {
     color: red;
 }
@@ -28,6 +30,79 @@
     display: contents;
 }
 
+.organization-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
+    justify-content: flex-start;
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 1em;
+}
+
+.organization-card {
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    padding: 1em;
+    transition: transform 0.3s;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 300px;
+    margin-bottom: 1em;
+    text-decoration: none;
+    color: inherit;
+
+    &:hover {
+        transform: translateY(-5px);
+        color: $theme_color;
+    }
+
+    img.org-logo {
+        width: 100%;
+        border-radius: 8px 8px 0 0;
+        object-fit: contain;
+        object-position: center;
+        flex-shrink: 0;
+        background-color: #f0f0f0;
+    }
+
+    .org-details {
+        padding: 1em 0;
+
+        span {
+            display: block;
+            margin-bottom: 0.5em;
+        }
+    }
+}
+
+@media(min-width: 800px) {
+    .organization-card {
+        flex: 1 1 calc(33.33% - 1em);
+        max-width: calc(33.33% - 1em);
+
+        img.org-logo {
+            height: 150px;
+        }
+    }
+}
+
+@media(max-width: 799px) {
+    .organization-card {
+        flex: 1 1 calc(50% - 1em);
+        max-width: calc(50% - 1em);
+
+        img.org-logo {
+            height: 120px;
+        }
+    }
+}
+
 .organization-row {
     display: block;
     padding: 0.5em;
@@ -37,19 +112,18 @@
     font-weight: 500;
     display: flex;
     align-items: center;
-}
 
-.organization-row:hover {
-    background-color: #f3f3f3;
-}
-
-.organization-container {
-    border: 1px #ccc solid;
-    margin-bottom: 3em;
-    border-radius: 5px;
+    &:hover {
+        background-color: #f3f3f3;
+    }
 }
 
 .org-help-text {
     display: block;
     color: gray;
 }
+
+#search-organization {
+    width: 100%;
+    height: 2.3em;
+}

resources/ticket.scss

@@ -10,7 +10,7 @@
         display: inline;
     }
 
-    #content > h2:first-child .fa-check-circle-o {
+    #content > h2:first-child .fa-check-circle {
         color: #00a900;
     }