Merge branch 'master' of https://github.com/thecodingwizard/usaco-guide
This commit is contained in:
commit
e61d85e169
7 changed files with 335 additions and 295 deletions
|
@ -20,7 +20,7 @@ The following _section_ (not module!) "General" will contain a list of modules n
|
|||
As you use this guide, here are some features that you may find helpful:
|
||||
|
||||
1. Use the "Module Progress" dropdowns to track your progress through this guide!
|
||||
2. Use the "Report an Issue<Asterisk>Suggestions can be reported here, too!</Asterisk>" or "Get Help" buttons on the bottom left corner of the screen as needed.
|
||||
2. Use the "Complain<Asterisk>Suggestions can be reported here, too!</Asterisk>" or "Get Help" buttons on the bottom left corner of the screen as needed.
|
||||
3. If you're not sure which problems/resources to do, try doing the starred ones first.
|
||||
|
||||
|
||||
|
|
|
@ -124,7 +124,7 @@ const SidebarBottomButtons = ({ onReportIssue, onGetHelp }) => (
|
|||
>
|
||||
<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Report an Issue
|
||||
Complain
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-shrink-0 border-t border-gray-200 flex">
|
||||
|
@ -470,8 +470,14 @@ export default function ModuleLayout({
|
|||
</nav>
|
||||
</div>
|
||||
<SidebarBottomButtons
|
||||
onReportIssue={() => setIsReportIssueActive(true)}
|
||||
onGetHelp={() => setIsGetHelpActive(true)}
|
||||
onReportIssue={() => {
|
||||
setIsMobileNavOpen(false);
|
||||
setIsReportIssueActive(true);
|
||||
}}
|
||||
onGetHelp={() => {
|
||||
setIsMobileNavOpen(false);
|
||||
setIsGetHelpActive(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Transition>
|
||||
|
|
|
@ -2,6 +2,7 @@ import * as React from 'react';
|
|||
import Transition from './Transition';
|
||||
import { ModuleInfo } from '../module';
|
||||
import { divisionLabels } from '../../content/ordering';
|
||||
import Slideover from './Slideover/Slideover';
|
||||
|
||||
export default function ReportIssueSlideover({
|
||||
isOpen,
|
||||
|
@ -21,70 +22,33 @@ export default function ReportIssueSlideover({
|
|||
else setIssueLocation('');
|
||||
}, [activeModule]);
|
||||
return (
|
||||
<Transition show={isOpen} timeout={700}>
|
||||
<div className="fixed inset-0 overflow-hidden">
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Transition
|
||||
enter="ease-in-out duration-500"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in-out duration-500"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
||||
onClick={onClose}
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
<section className="absolute inset-y-0 pl-16 max-w-full right-0 flex">
|
||||
<Transition
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
enterFrom="translate-x-full"
|
||||
enterTo="translate-x-0"
|
||||
leave="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<div className="w-screen max-w-md">
|
||||
<div className="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
|
||||
<div className="flex-1 h-0 overflow-y-auto">
|
||||
<header className="space-y-1 py-6 px-4 bg-blue-700 sm:px-6">
|
||||
<div className="flex items-center justify-between space-x-3">
|
||||
<h2 className="text-lg leading-7 font-medium text-white">
|
||||
Report an Issue
|
||||
</h2>
|
||||
<div className="h-7 flex items-center">
|
||||
<Slideover
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title="Complaint Form"
|
||||
subtitle="If you encounter an error while using the website, please fill out the form below. Thank you!"
|
||||
footerButtons={
|
||||
<>
|
||||
<span className="inline-flex rounded-md shadow-sm">
|
||||
<button
|
||||
aria-label="Close panel"
|
||||
className="text-blue-200 hover:text-white"
|
||||
type="button"
|
||||
className="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out"
|
||||
onClick={onClose}
|
||||
>
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm leading-5 text-blue-300">
|
||||
If you encounter an error while using the website,
|
||||
please fill out the form below. Thank you!
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<div className="flex-1 flex flex-col justify-between">
|
||||
</span>
|
||||
<span className="inline-flex rounded-md shadow-sm">
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition duration-150 ease-in-out"
|
||||
>
|
||||
Submit Complaint
|
||||
</button>
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="px-4 divide-y divide-gray-200 sm:px-6">
|
||||
<div className="space-y-6 pt-6 pb-5">
|
||||
<div className="space-y-1">
|
||||
|
@ -272,33 +236,6 @@ export default function ReportIssueSlideover({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
|
||||
<span className="inline-flex rounded-md shadow-sm">
|
||||
<button
|
||||
type="button"
|
||||
className="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</span>
|
||||
<span className="inline-flex rounded-md shadow-sm">
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition duration-150 ease-in-out"
|
||||
>
|
||||
Submit Report
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Slideover>
|
||||
);
|
||||
}
|
||||
|
|
92
src/components/Slideover/Slideover.tsx
Normal file
92
src/components/Slideover/Slideover.tsx
Normal file
|
@ -0,0 +1,92 @@
|
|||
import * as React from 'react';
|
||||
import Transition from '../Transition';
|
||||
|
||||
type SlideoverProps = {
|
||||
isOpen: boolean;
|
||||
onClose: Function;
|
||||
title: React.ReactNode;
|
||||
subtitle: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
footerButtons: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function Slideover(props: SlideoverProps) {
|
||||
return (
|
||||
<Transition show={props.isOpen} timeout={700}>
|
||||
<div className="fixed inset-0 overflow-hidden">
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Transition
|
||||
enter="ease-in-out duration-500"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in-out duration-500"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
||||
onClick={() => props.onClose()}
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
<section className="absolute inset-y-0 max-w-full right-0 flex">
|
||||
<Transition
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
enterFrom="translate-x-full"
|
||||
enterTo="translate-x-0"
|
||||
leave="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<div className="w-screen max-w-md">
|
||||
<div className="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
|
||||
<div className="flex-1 h-0 overflow-y-auto">
|
||||
<header className="space-y-1 py-6 px-4 bg-blue-700 sm:px-6">
|
||||
<div className="flex items-center justify-between space-x-3">
|
||||
<h2 className="text-lg leading-7 font-medium text-white">
|
||||
{props.title}
|
||||
</h2>
|
||||
<div className="h-7 flex items-center">
|
||||
<button
|
||||
aria-label="Close panel"
|
||||
className="text-blue-200 hover:text-white"
|
||||
onClick={() => props.onClose()}
|
||||
>
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm leading-5 text-blue-300">
|
||||
{props.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<div className="flex-1 flex flex-col justify-between">
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
|
||||
{props.footerButtons}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
);
|
||||
}
|
|
@ -135,6 +135,11 @@ const components = {
|
|||
),
|
||||
|
||||
p: props => <p {...props} className="mb-4" />,
|
||||
'ol.li': ({ children, ...props }) => (
|
||||
<li {...props}>
|
||||
<div>{children}</div>
|
||||
</li>
|
||||
),
|
||||
};
|
||||
|
||||
export default function ({ children }) {
|
||||
|
|
|
@ -86,9 +86,9 @@ export function ResourceComponent(props) {
|
|||
throw `URL ${url} is not valid. Did you make a typo in the source (${source}), or in the URL? Resource name: ${props.title}`;
|
||||
}
|
||||
return (
|
||||
<tr>
|
||||
<tr className="block sm:table-row">
|
||||
{props.source && (
|
||||
<td className="pl-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
|
||||
<td className="pl-6 pt-4 pb-1 sm:pb-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
|
||||
{sourceTooltip.hasOwnProperty(props.source) ? (
|
||||
<TextTooltip content={sourceTooltip[props.source]}>
|
||||
{props.source}
|
||||
|
@ -98,11 +98,12 @@ export function ResourceComponent(props) {
|
|||
)}
|
||||
</td>
|
||||
)}
|
||||
<td className="pl-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500 w-4">
|
||||
<td className="px-6 pt-4 pb-1 sm:pb-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
|
||||
<div className="flex items-center">
|
||||
{props.starred && (
|
||||
<Tooltip content="Starred resources are ones we think are worth the read. Use starred resources first, and if you're still stuck, try reading some of the unstarred ones!">
|
||||
<svg
|
||||
className="h-4 w-4 text-blue-400"
|
||||
className="h-4 w-6 text-blue-400 pr-2"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
|
@ -110,11 +111,10 @@ export function ResourceComponent(props) {
|
|||
</svg>
|
||||
</Tooltip>
|
||||
)}
|
||||
</td>
|
||||
<td className="pl-2 pr-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
|
||||
<a href={url}>{props.title}</a>
|
||||
</div>
|
||||
</td>
|
||||
<td className="w-100 px-6 py-4 text-sm leading-5 text-gray-500">
|
||||
<td className="block sm:table-cell px-6 sm:pt-4 pb-4 text-sm leading-5 text-gray-500">
|
||||
{props.children}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
@ -396,8 +396,8 @@ export default function IndexPage(props: PageProps) {
|
|||
<p className="text-base leading-6 text-gray-500">
|
||||
If you encounter an issue while using the guide (website
|
||||
bug, typo, broken link, unclear explanation, etc), use the
|
||||
"Report an Issue" button on the bottom left of the screen,
|
||||
or contact the guide coordinator directly.
|
||||
"Complain" button on the bottom left of the screen, or
|
||||
contact the guide coordinator directly.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
|
Reference in a new issue