mirror of
https://github.com/quatalog/site.git
synced 2024-11-17 20:32:54 +00:00
Handle search from both course pages and home pages/
This commit is contained in:
3eef8a28f26fb2bcc514e6f1938929a1f931762
parent
db9cfe2d1b
commit
3c74143291
169
css/search.css
Normal file
169
css/search.css
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
#searchTitle {
|
||||
font-size: 2rem;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: fit-content;
|
||||
left: 0vw;
|
||||
text-align: center;
|
||||
margin-top: 2.5vmin;
|
||||
color: var(--quacs-yellow);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#searchTerm {
|
||||
color: var(--quacs-midtone);
|
||||
}
|
||||
|
||||
#searchResultsContainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 2vmin;
|
||||
}
|
||||
|
||||
:root {
|
||||
--entry-width: 70vw;
|
||||
--hover-expand-width: 0.5vw;
|
||||
--transition-time: 0.1s;
|
||||
}
|
||||
|
||||
#searchResultsContainer tr {
|
||||
width: var(--entry-width);
|
||||
background: var(--mid-dark-purple);
|
||||
margin-bottom: 2vmin;
|
||||
margin-left: var(--hover-expand-width);
|
||||
margin-right: var(--hover-expand-width);
|
||||
color: var(--quacs-white);
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition-property: all;
|
||||
transition-duration: var(--transition-time);
|
||||
/* border-bottom: solid 1vmin var(--mid-purple); /* */
|
||||
}
|
||||
|
||||
#searchResultsContainer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#searchResultsContainer tr:hover {
|
||||
background: var(--mid-purple);
|
||||
/* border-bottom: solid 1vmin var(--mid-light-purple); */
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: calc(var(--entry-width) + 2*var(--hover-expand-width));
|
||||
border-radius: calc(2vmin + 0.5vw);
|
||||
}
|
||||
|
||||
#searchResultsContainer tr:hover p,
|
||||
#searchResultsContainer tr:hover div {
|
||||
margin-left: var(--hover-expand-width);
|
||||
margin-right: var(--hover-expand-width);
|
||||
}
|
||||
|
||||
#searchResultsContainer tr p,
|
||||
#searchResultsContainer tr div {
|
||||
transition-property: all;
|
||||
transition-duration: var(--transition-time);
|
||||
}
|
||||
|
||||
#searchResultsContainer h3 {
|
||||
margin: 0;
|
||||
padding: 1vmin;
|
||||
padding-left: 1.5vmin;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
/* width: 100%; */
|
||||
font-size: 1.25rem;
|
||||
color: var(--quacs-midtone);
|
||||
border-bottom: solid;
|
||||
border-bottom-width: 0.2vmin;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sattr {
|
||||
margin-right: 1vmin;
|
||||
display: flex;
|
||||
margin-bottom: 0.25vmin;
|
||||
margin-top: 0.25vmin;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.sattr-pill {
|
||||
background: var(--quacs-yellow);
|
||||
color: var(--deep-purple);
|
||||
padding-left: 1.5vmin;
|
||||
padding-right: 1.5vmin;
|
||||
border-radius: 3vmin;
|
||||
}
|
||||
|
||||
.sattr svg {
|
||||
/* display: inline-block; */
|
||||
/* vertical-align:-webkit-baseline-middle; */
|
||||
align-self: center;
|
||||
width: 1rem;
|
||||
max-height: 1rem;
|
||||
padding-left: 0.5vmin;
|
||||
fill: var(--deep-purple);
|
||||
}
|
||||
|
||||
.CI-pill {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.WI-pill {
|
||||
background: var(--quacs-yellow);
|
||||
}
|
||||
|
||||
.PD-pill {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.HI-pill {
|
||||
background: var(--pink);
|
||||
color: var(--deep-purple);
|
||||
}
|
||||
|
||||
.HI-pill svg {
|
||||
fill: var(--deep-purple);
|
||||
}
|
||||
|
||||
.courseName {
|
||||
color: var(--quacs-yellow);
|
||||
font-size: 1.45rem;
|
||||
margin-left: 0.5vmin;
|
||||
}
|
||||
|
||||
.courseCode {
|
||||
color: var(--quacs-midtone);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#searchResultsContainer p {
|
||||
padding: 1.5vmin;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#searchResultsContainer h3 span {
|
||||
margin-right: 1vmin;
|
||||
}
|
||||
|
||||
#searchResultsContainer h3:hover p {
|
||||
padding-left: calc(1.5vmin + var(--hover-expand-width));
|
||||
padding-right: calc(1.5vmin + var(--hover-expand-width));
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
#searchResultsContainer tr {
|
||||
width: 90vw;
|
||||
}
|
||||
#searchResultsContainer tr:hover {
|
||||
width: 91vw;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
"use strict";
|
||||
const search_helper = async function(event) {
|
||||
const search_helper = async function(event,from_course_page = true) {
|
||||
event.preventDefault();
|
||||
// "a b cde 12" => "a b cde 12"
|
||||
const input = document.getElementById("search").value.split(" ").join(" ");
|
||||
|
|
@ -22,21 +22,26 @@ const search_helper = async function(event) {
|
|||
const code_str = course_code.join("-");
|
||||
|
||||
// check if "ABCD-1345" is a real course code
|
||||
const course_exists = await fetch("../courses_list.json")
|
||||
const course_exists = await fetch(
|
||||
from_course_page ? "../courses_list.json" : "courses_list.json"
|
||||
)
|
||||
.then(list => list.json())
|
||||
.then(list => list.includes(code_str));
|
||||
|
||||
// if it is, redirect to it
|
||||
if(course_exists) {
|
||||
// handle both homepage and courses pages (which are in a directory)
|
||||
if(window.location.pathname.split("/").slice(-2,-1)[0] != "courses") {
|
||||
location.href = "courses/"+code_str + ".html";
|
||||
if(from_course_page) {
|
||||
location.href = code_str;
|
||||
} else {
|
||||
location.href = code_str + ".html";
|
||||
location.href = "courses/" + code_str;
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
location.href = "../search" + ".html" + "?search=" + encodeURIComponent(input);
|
||||
if(from_course_page) {
|
||||
location.href = "../search?search=" + encodeURIComponent(input);
|
||||
} else {
|
||||
location.href = "search?search=" + encodeURIComponent(input);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue