mirror of https://github.com/quatalog/site.git
Handle search from both course pages and home pages
This commit is contained in:
3eef8a28f26fb2bcc514e6f1938929a1f931762
powe97
parent
572c19e698
commit
bfebc037e3
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<svg id="home-title"><use href="./images/quatalogVWordmark.svg#QuatalogVWordmark"></use></svg>
|
||||
<form onsubmit="search_helper(event)">
|
||||
<form onsubmit="search_helper(event,false)">
|
||||
<input type="text" class="home-search" id="search" placeholder="Search...">
|
||||
</form>
|
||||
<p id="home-footer">
|
||||
|
|
|
|||
|
|
@ -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(" ");
|
||||
|
|
@ -13,7 +13,7 @@ const search_helper = async function(event) {
|
|||
const arr = input.split(/(?:-| )+/);
|
||||
if(arr.length == 2) course_code = arr;
|
||||
}
|
||||
|
||||
|
||||
// only do this logic if the string might be a course code
|
||||
// avoid having to fetch the courses_list if it definitely isn't one
|
||||
if(course_code) {
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<body>
|
||||
<div id="qlog-header">
|
||||
<a id="qlog-wordmark" href="./"><svg><use href="./images/quatalogHWordmark.svg#QuatalogHWordmark"></use></svg></a>
|
||||
<form onsubmit="search_helper(event)">
|
||||
<form onsubmit="search_helper(event,false)">
|
||||
<input type="text" id="search" class="header-search" placeholder="Search...">
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue