mirror of https://github.com/quatalog/site.git
Handle search from both course pages and home pages
This commit is contained in:
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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<svg id="home-title"><use href="./images/quatalogVWordmark.svg#QuatalogVWordmark"></use></svg>
|
<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...">
|
<input type="text" class="home-search" id="search" placeholder="Search...">
|
||||||
</form>
|
</form>
|
||||||
<p id="home-footer">
|
<p id="home-footer">
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
const search_helper = async function(event) {
|
const search_helper = async function(event,from_course_page = true) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
// "a b cde 12" => "a b cde 12"
|
// "a b cde 12" => "a b cde 12"
|
||||||
const input = document.getElementById("search").value.split(" ").join(" ");
|
const input = document.getElementById("search").value.split(" ").join(" ");
|
||||||
|
@ -13,7 +13,7 @@ const search_helper = async function(event) {
|
||||||
const arr = input.split(/(?:-| )+/);
|
const arr = input.split(/(?:-| )+/);
|
||||||
if(arr.length == 2) course_code = arr;
|
if(arr.length == 2) course_code = arr;
|
||||||
}
|
}
|
||||||
|
|
||||||
// only do this logic if the string might be a course code
|
// 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
|
// avoid having to fetch the courses_list if it definitely isn't one
|
||||||
if(course_code) {
|
if(course_code) {
|
||||||
|
@ -22,21 +22,26 @@ const search_helper = async function(event) {
|
||||||
const code_str = course_code.join("-");
|
const code_str = course_code.join("-");
|
||||||
|
|
||||||
// check if "ABCD-1345" is a real course code
|
// 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.json())
|
||||||
.then(list => list.includes(code_str));
|
.then(list => list.includes(code_str));
|
||||||
|
|
||||||
// if it is, redirect to it
|
// if it is, redirect to it
|
||||||
if(course_exists) {
|
if(course_exists) {
|
||||||
// handle both homepage and courses pages (which are in a directory)
|
if(from_course_page) {
|
||||||
if(window.location.pathname.split("/").slice(-2,-1)[0] != "courses") {
|
location.href = code_str;
|
||||||
location.href = "courses/"+code_str + ".html";
|
|
||||||
} else {
|
} else {
|
||||||
location.href = code_str + ".html";
|
location.href = "courses/" + code_str;
|
||||||
}
|
}
|
||||||
return;
|
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>
|
<body>
|
||||||
<div id="qlog-header">
|
<div id="qlog-header">
|
||||||
<a id="qlog-wordmark" href="./"><svg><use href="./images/quatalogHWordmark.svg#QuatalogHWordmark"></use></svg></a>
|
<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...">
|
<input type="text" id="search" class="header-search" placeholder="Search...">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue