Merge branch 'master' of https://github.com/thecodingwizard/usaco-guide
This commit is contained in:
Benjamin Qi
commit
e61d85e169
|
|
@ -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:
|
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!
|
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.
|
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" />
|
<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
Report an Issue
|
Complain
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 border-t border-gray-200 flex">
|
<div className="flex-shrink-0 border-t border-gray-200 flex">
|
||||||
|
|
@ -470,8 +470,14 @@ export default function ModuleLayout({
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<SidebarBottomButtons
|
<SidebarBottomButtons
|
||||||
onReportIssue={() => setIsReportIssueActive(true)}
|
onReportIssue={() => {
|
||||||
onGetHelp={() => setIsGetHelpActive(true)}
|
setIsMobileNavOpen(false);
|
||||||
|
setIsReportIssueActive(true);
|
||||||
|
}}
|
||||||
|
onGetHelp={() => {
|
||||||
|
setIsMobileNavOpen(false);
|
||||||
|
setIsGetHelpActive(true);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import * as React from 'react';
|
||||||
import Transition from './Transition';
|
import Transition from './Transition';
|
||||||
import { ModuleInfo } from '../module';
|
import { ModuleInfo } from '../module';
|
||||||
import { divisionLabels } from '../../content/ordering';
|
import { divisionLabels } from '../../content/ordering';
|
||||||
|
import Slideover from './Slideover/Slideover';
|
||||||
|
|
||||||
export default function ReportIssueSlideover({
|
export default function ReportIssueSlideover({
|
||||||
isOpen,
|
isOpen,
|
||||||
|
|
@ -21,284 +22,220 @@ export default function ReportIssueSlideover({
|
||||||
else setIssueLocation('');
|
else setIssueLocation('');
|
||||||
}, [activeModule]);
|
}, [activeModule]);
|
||||||
return (
|
return (
|
||||||
<Transition show={isOpen} timeout={700}>
|
<Slideover
|
||||||
<div className="fixed inset-0 overflow-hidden">
|
isOpen={isOpen}
|
||||||
<div className="absolute inset-0 overflow-hidden">
|
onClose={onClose}
|
||||||
<Transition
|
title="Complaint Form"
|
||||||
enter="ease-in-out duration-500"
|
subtitle="If you encounter an error while using the website, please fill out the form below. Thank you!"
|
||||||
enterFrom="opacity-0"
|
footerButtons={
|
||||||
enterTo="opacity-100"
|
<>
|
||||||
leave="ease-in-out duration-500"
|
<span className="inline-flex rounded-md shadow-sm">
|
||||||
leaveFrom="opacity-100"
|
<button
|
||||||
leaveTo="opacity-0"
|
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"
|
||||||
<div
|
|
||||||
className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
|
||||||
onClick={onClose}
|
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">
|
Cancel
|
||||||
<div className="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
|
</button>
|
||||||
<div className="flex-1 h-0 overflow-y-auto">
|
</span>
|
||||||
<header className="space-y-1 py-6 px-4 bg-blue-700 sm:px-6">
|
<span className="inline-flex rounded-md shadow-sm">
|
||||||
<div className="flex items-center justify-between space-x-3">
|
<button
|
||||||
<h2 className="text-lg leading-7 font-medium text-white">
|
type="submit"
|
||||||
Report an Issue
|
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"
|
||||||
</h2>
|
>
|
||||||
<div className="h-7 flex items-center">
|
Submit Complaint
|
||||||
<button
|
</button>
|
||||||
aria-label="Close panel"
|
</span>
|
||||||
className="text-blue-200 hover:text-white"
|
</>
|
||||||
onClick={onClose}
|
}
|
||||||
>
|
>
|
||||||
<svg
|
<div className="px-4 divide-y divide-gray-200 sm:px-6">
|
||||||
className="h-6 w-6"
|
<div className="space-y-6 pt-6 pb-5">
|
||||||
fill="none"
|
<div className="space-y-1">
|
||||||
viewBox="0 0 24 24"
|
<label
|
||||||
stroke="currentColor"
|
htmlFor="issue_name"
|
||||||
>
|
className="block text-sm font-medium leading-5 text-gray-900"
|
||||||
<path
|
>
|
||||||
strokeLinecap="round"
|
Name (Optional)
|
||||||
strokeLinejoin="round"
|
</label>
|
||||||
strokeWidth="2"
|
<div className="relative rounded-md shadow-sm">
|
||||||
d="M6 18L18 6M6 6l12 12"
|
<input
|
||||||
/>
|
id="issue_name"
|
||||||
</svg>
|
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||||
</button>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="space-y-1">
|
||||||
<p className="text-sm leading-5 text-blue-300">
|
<label
|
||||||
If you encounter an error while using the website,
|
htmlFor="issue_email"
|
||||||
please fill out the form below. Thank you!
|
className="block text-sm font-medium leading-5 text-gray-900"
|
||||||
</p>
|
>
|
||||||
</div>
|
Email (Optional)
|
||||||
</header>
|
</label>
|
||||||
<div className="flex-1 flex flex-col justify-between">
|
<div className="relative rounded-md shadow-sm">
|
||||||
<div className="px-4 divide-y divide-gray-200 sm:px-6">
|
<input
|
||||||
<div className="space-y-6 pt-6 pb-5">
|
id="issue_email"
|
||||||
<div className="space-y-1">
|
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||||
<label
|
type="email"
|
||||||
htmlFor="issue_name"
|
/>
|
||||||
className="block text-sm font-medium leading-5 text-gray-900"
|
</div>
|
||||||
>
|
</div>
|
||||||
Name (Optional)
|
<div className="space-y-1">
|
||||||
</label>
|
<label
|
||||||
<div className="relative rounded-md shadow-sm">
|
htmlFor="issue_location"
|
||||||
<input
|
className="block text-sm font-medium leading-5 text-gray-900"
|
||||||
id="issue_name"
|
>
|
||||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
Issue Location
|
||||||
/>
|
</label>
|
||||||
</div>
|
<div className="relative rounded-md shadow-sm">
|
||||||
</div>
|
<input
|
||||||
<div className="space-y-1">
|
id="issue_location"
|
||||||
<label
|
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||||
htmlFor="issue_email"
|
value={issueLocation}
|
||||||
className="block text-sm font-medium leading-5 text-gray-900"
|
onChange={e => setIssueLocation(e.target.value)}
|
||||||
>
|
/>
|
||||||
Email (Optional)
|
</div>
|
||||||
</label>
|
</div>
|
||||||
<div className="relative rounded-md shadow-sm">
|
<fieldset className="space-y-2">
|
||||||
<input
|
<legend className="text-sm leading-5 font-medium text-gray-900">
|
||||||
id="issue_email"
|
Issue Type
|
||||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
</legend>
|
||||||
type="email"
|
<div className="space-y-3">
|
||||||
/>
|
<div>
|
||||||
</div>
|
<div className="relative flex items-start">
|
||||||
</div>
|
<div className="absolute flex items-center h-5">
|
||||||
<div className="space-y-1">
|
<input
|
||||||
<label
|
id="type_typo"
|
||||||
htmlFor="issue_location"
|
type="radio"
|
||||||
className="block text-sm font-medium leading-5 text-gray-900"
|
name="type"
|
||||||
>
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
Issue Location
|
/>
|
||||||
</label>
|
|
||||||
<div className="relative rounded-md shadow-sm">
|
|
||||||
<input
|
|
||||||
id="issue_location"
|
|
||||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
|
||||||
value={issueLocation}
|
|
||||||
onChange={e => setIssueLocation(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<fieldset className="space-y-2">
|
|
||||||
<legend className="text-sm leading-5 font-medium text-gray-900">
|
|
||||||
Issue Type
|
|
||||||
</legend>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="type_typo"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="type_typo"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Typo
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="issue_broken-link"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="issue_broken-link"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Broken Link
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="issue_unclear-explanation"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="issue_unclear-explanation"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Unclear Explanation
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="issue_suggestion"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="issue_suggestion"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Suggestion
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="issue_website"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="issue_website"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Website Bug
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="issue_other"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="issue_other"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Other
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label
|
|
||||||
htmlFor="description"
|
|
||||||
className="block text-sm font-medium leading-5 text-gray-900"
|
|
||||||
>
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<div className="relative rounded-md shadow-sm">
|
|
||||||
<textarea
|
|
||||||
id="description"
|
|
||||||
rows={4}
|
|
||||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
|
<div className="pl-7 text-sm leading-5">
|
||||||
<span className="inline-flex rounded-md shadow-sm">
|
<label
|
||||||
<button
|
htmlFor="type_typo"
|
||||||
type="button"
|
className="font-medium text-gray-900"
|
||||||
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}
|
Typo
|
||||||
>
|
</label>
|
||||||
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
<div>
|
||||||
</section>
|
<div className="relative flex items-start">
|
||||||
|
<div className="absolute flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="issue_broken-link"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-sm leading-5">
|
||||||
|
<label
|
||||||
|
htmlFor="issue_broken-link"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
Broken Link
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="relative flex items-start">
|
||||||
|
<div className="absolute flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="issue_unclear-explanation"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-sm leading-5">
|
||||||
|
<label
|
||||||
|
htmlFor="issue_unclear-explanation"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
Unclear Explanation
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="relative flex items-start">
|
||||||
|
<div className="absolute flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="issue_suggestion"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-sm leading-5">
|
||||||
|
<label
|
||||||
|
htmlFor="issue_suggestion"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
Suggestion
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative flex items-start">
|
||||||
|
<div className="absolute flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="issue_website"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-sm leading-5">
|
||||||
|
<label
|
||||||
|
htmlFor="issue_website"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
Website Bug
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative flex items-start">
|
||||||
|
<div className="absolute flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="issue_other"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-sm leading-5">
|
||||||
|
<label
|
||||||
|
htmlFor="issue_other"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
Other
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label
|
||||||
|
htmlFor="description"
|
||||||
|
className="block text-sm font-medium leading-5 text-gray-900"
|
||||||
|
>
|
||||||
|
Description
|
||||||
|
</label>
|
||||||
|
<div className="relative rounded-md shadow-sm">
|
||||||
|
<textarea
|
||||||
|
id="description"
|
||||||
|
rows={4}
|
||||||
|
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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" />,
|
p: props => <p {...props} className="mb-4" />,
|
||||||
|
'ol.li': ({ children, ...props }) => (
|
||||||
|
<li {...props}>
|
||||||
|
<div>{children}</div>
|
||||||
|
</li>
|
||||||
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function ({ children }) {
|
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}`;
|
throw `URL ${url} is not valid. Did you make a typo in the source (${source}), or in the URL? Resource name: ${props.title}`;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<tr>
|
<tr className="block sm:table-row">
|
||||||
{props.source && (
|
{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) ? (
|
{sourceTooltip.hasOwnProperty(props.source) ? (
|
||||||
<TextTooltip content={sourceTooltip[props.source]}>
|
<TextTooltip content={sourceTooltip[props.source]}>
|
||||||
{props.source}
|
{props.source}
|
||||||
|
|
@ -98,23 +98,23 @@ export function ResourceComponent(props) {
|
||||||
)}
|
)}
|
||||||
</td>
|
</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">
|
||||||
{props.starred && (
|
<div className="flex items-center">
|
||||||
<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!">
|
{props.starred && (
|
||||||
<svg
|
<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!">
|
||||||
className="h-4 w-4 text-blue-400"
|
<svg
|
||||||
fill="currentColor"
|
className="h-4 w-6 text-blue-400 pr-2"
|
||||||
viewBox="0 0 20 20"
|
fill="currentColor"
|
||||||
>
|
viewBox="0 0 20 20"
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
>
|
||||||
</svg>
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||||
</Tooltip>
|
</svg>
|
||||||
)}
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
<a href={url}>{props.title}</a>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="pl-2 pr-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
|
<td className="block sm:table-cell px-6 sm:pt-4 pb-4 text-sm leading-5 text-gray-500">
|
||||||
<a href={url}>{props.title}</a>
|
|
||||||
</td>
|
|
||||||
<td className="w-100 px-6 py-4 text-sm leading-5 text-gray-500">
|
|
||||||
{props.children}
|
{props.children}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
||||||
|
|
@ -396,8 +396,8 @@ export default function IndexPage(props: PageProps) {
|
||||||
<p className="text-base leading-6 text-gray-500">
|
<p className="text-base leading-6 text-gray-500">
|
||||||
If you encounter an issue while using the guide (website
|
If you encounter an issue while using the guide (website
|
||||||
bug, typo, broken link, unclear explanation, etc), use the
|
bug, typo, broken link, unclear explanation, etc), use the
|
||||||
"Report an Issue" button on the bottom left of the screen,
|
"Complain" button on the bottom left of the screen, or
|
||||||
or contact the guide coordinator directly.
|
contact the guide coordinator directly.
|
||||||
</p>
|
</p>
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Reference in a new issue