FINALLY! Add show/hide all button on events page. Denote hyperlinks w…

…ith underline on special article-like page
ubyssey · Jan 11, 2025 · a833ad5 · a833ad5
1 parent 57077d6
commit a833ad5
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 28 deletions.
diff --git a/ubyssey/static_src/src/js/components/Events/calendar.jsx b/ubyssey/static_src/src/js/components/Events/calendar.jsx
@@ -635,22 +635,28 @@ function EventsCalendar({events, start, setStart, numberOfWeeks, setNumberOfWeek
 
     function toggleCategory(that, searchParams, setSearchParams) {
 
-        var hidden = [];
-        if (searchParams.has("hidden")) {
-            hidden = searchParams.get("hidden").split(" ");
+        var selected = [];
+        var selectType = "hidden";
+
+        if (searchParams.has("include")) {
+            selectType = "include";
+        }
+
+        if (searchParams.has(selectType)) {
+            selected = searchParams.get(selectType).split(" ");
         }
-        hidden = hidden.filter((i) => i!="");
+        selected = selected.filter((i) => i!="");
 
-        if (hidden.includes(that.id)) {
-            hidden.splice(hidden.indexOf(that.id), 1);
+        if (selected.includes(that.id)) {
+            selected.splice(selected.indexOf(that.id), 1);
         } else {
-            hidden.push(that.id);
+            selected.push(that.id);
         }
 
-        if (hidden.length == 0) {
-            searchParams.delete("hidden");
+        if (selected.length == 0) {
+            searchParams.delete(selectType);
         } else {
-            searchParams.set("hidden", hidden.join(" "));
+            searchParams.set(selectType, selected.join(" "));
         }
         setSearchParams(searchParams);
     }
@@ -683,17 +689,21 @@ function EventsCalendar({events, start, setStart, numberOfWeeks, setNumberOfWeek
 
     let [searchParams, setSearchParams] = useSearchParams();
 
-    var hidden = [];
-    if (searchParams.has("hidden")) {
-        hidden = searchParams.get("hidden").split(" ");
-    }
-
     var displayedEvents = events.filter((e) => (e.category===category || category==="all"));
     var legend = ["Sports", "Entertainment", "Community", "Seminar"];
     if (category != "all") {
         legend = displayedEvents.reduce(getHosts, []);
     }
-    displayedEvents = displayedEvents.filter((e) => !hidden.includes(slugify(e[highlight])));
+
+    var selected = [];
+    if (searchParams.has("hidden")) {
+        selected = searchParams.get("hidden").split(" ");
+        displayedEvents = displayedEvents.filter((e) => !selected.includes(slugify(e[highlight])));
+    } else if (searchParams.has("include")) {
+        selected = searchParams.get("include").split(" ");
+        displayedEvents = displayedEvents.filter((e) => selected.includes(slugify(e[highlight])));
+    }
+
     var calendar = arrangeCalendar(displayedEvents);
     React.useEffect(()=>{
         colourIn(legend);
@@ -835,9 +845,25 @@ function EventsCalendar({events, start, setStart, numberOfWeeks, setNumberOfWeek
         )}</div>
 
         <div class="legend">
-            <ul>{legend.map((key, i) =>
-                <li key={i} className={slugify(key)}>
-                    <button id={slugify(key)} className={"legend-button" + (hidden.includes(slugify(key)) ? " inactive" : "")}
+            <ul>
+                <li class="selection-toggle">
+                    <button
+                        onClick={(e) => {
+                            e.preventDefault();
+                            if (!searchParams.has("include")) {
+                                searchParams.delete("hidden");
+                                searchParams.append("include", "");
+                            } else {
+                                searchParams.delete("include");
+                            }
+                            setSearchParams(searchParams);
+                        }}>
+                        {searchParams.has("include") ? "Show all" : "Hide all"}
+                    </button>
+                </li>
+                {legend.map((key, i) =>
+                <li key={i} className={"legend-item " + slugify(key)}>
+                    <button id={slugify(key)} className={"legend-button" + (selected.includes(slugify(key)) == !searchParams.has("include") ? " inactive" : "")}
                     onClick={(e) => {console.log(e); toggleCategory(e.target, searchParams, setSearchParams);}} title={key}
                     dangerouslySetInnerHTML={
                         {__html: key}
@@ -850,7 +876,7 @@ function EventsCalendar({events, start, setStart, numberOfWeeks, setNumberOfWeek
 }
 
 function EventInfo({events}) {
-    const [widthMode, setWidthMode] = React.useState(window.innerWidth <= 759);
+    const [widthMode, setWidthMode] = React.useState(window.innerWidth <= 1199);
     let [searchParams, setSearchParams] = useSearchParams();
     let query = useQuery();
     var event = false;
@@ -871,7 +897,7 @@ function EventInfo({events}) {
     React.useLayoutEffect(()=> {
 
         window.addEventListener('resize', ()=> {
-            setWidthMode(window.innerWidth <= 759);
+            setWidthMode(window.innerWidth <= 1199);
         });
     }, []);
 

diff --git a/ubyssey/static_src/src/styles/components/events/_base.scss b/ubyssey/static_src/src/styles/components/events/_base.scss
@@ -531,22 +531,43 @@ header.events{
 .legend {
     margin-bottom: 5em;
     width: 75%;
-    @media($bp-smaller-than-phablet) {
-        margin: 0.5em 0 1em 0;
+    li.selection-toggle {
+        margin: 0;
+        button {
+            display: inline-block;
+            padding: 0.25em 0.5em;
+            margin: 0;
+            border-radius: 0.25em;
+            background-color: #0071c9;
+            color: white;
+        }
     }
     ul {
         display: flex;
         padding: 0;
-        margin: 0;
+        margin: 0.5em 0;
+        list-style: none;
         flex-wrap: wrap;
 
-        li {
-            margin-left: 3em;
+        li.legend-item {
+            position: relative;
+            margin-left: 2em;
+            margin-block: 0.2em;
+            padding-left: 1em;
             font-family: noto-sans;
         }
-        li::marker {
-            color: var(--highlight);
+        li.legend-item::before {
+            display: block;
+            position: absolute;
+            left: 0;
+            top: 0.45em;
+            width: 0.3em;
+            height: 0.3em;
+
+            background-color: var(--highlight);
+            border-radius: 100%;
             font-size: 1.5em;
+            content: "";
         }
     }
 
@@ -571,6 +592,16 @@ header.events{
         font-size: inherit;
         line-height: unset;
     }
+
+    @media($bp-smaller-than-phablet) {
+        margin: 0.5em 1em 1em 1em;
+        li.legend-item {
+            margin-left: 1em;
+        }
+        li.selection-toggle {
+            margin: 1em;
+        }
+    }
 }
 .events-calendar--navigation {
     max-height: 1.5em;

diff --git a/ubyssey/static_src/src/styles/modules/article/_special_page.scss b/ubyssey/static_src/src/styles/modules/article/_special_page.scss
@@ -35,6 +35,10 @@
         margin-top: 5px;
       }  
     }
+
+    a {
+      text-decoration: underline;
+    }
   }
 
   .image-attachment a.open-modal {
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,10 @@ @@
             margin-top: 5px;
           }
         }
+        a {
+          text-decoration: underline;
+        }
       }
       .image-attachment a.open-modal {
@@ Expand Down @@