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:
|
||||
|
||||
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,284 +22,220 @@ 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"
|
||||
<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
|
||||
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}
|
||||
/>
|
||||
</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">
|
||||
<button
|
||||
aria-label="Close panel"
|
||||
className="text-blue-200 hover:text-white"
|
||||
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>
|
||||
</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">
|
||||
<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">
|
||||
<label
|
||||
htmlFor="issue_name"
|
||||
className="block text-sm font-medium leading-5 text-gray-900"
|
||||
>
|
||||
Name (Optional)
|
||||
</label>
|
||||
<div className="relative rounded-md shadow-sm">
|
||||
<input
|
||||
id="issue_name"
|
||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor="issue_email"
|
||||
className="block text-sm font-medium leading-5 text-gray-900"
|
||||
>
|
||||
Email (Optional)
|
||||
</label>
|
||||
<div className="relative rounded-md shadow-sm">
|
||||
<input
|
||||
id="issue_email"
|
||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor="issue_location"
|
||||
className="block text-sm font-medium leading-5 text-gray-900"
|
||||
>
|
||||
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>
|
||||
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 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">
|
||||
<label
|
||||
htmlFor="issue_name"
|
||||
className="block text-sm font-medium leading-5 text-gray-900"
|
||||
>
|
||||
Name (Optional)
|
||||
</label>
|
||||
<div className="relative rounded-md shadow-sm">
|
||||
<input
|
||||
id="issue_name"
|
||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor="issue_email"
|
||||
className="block text-sm font-medium leading-5 text-gray-900"
|
||||
>
|
||||
Email (Optional)
|
||||
</label>
|
||||
<div className="relative rounded-md shadow-sm">
|
||||
<input
|
||||
id="issue_email"
|
||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor="issue_location"
|
||||
className="block text-sm font-medium leading-5 text-gray-900"
|
||||
>
|
||||
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="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 className="pl-7 text-sm leading-5">
|
||||
<label
|
||||
htmlFor="type_typo"
|
||||
className="font-medium text-gray-900"
|
||||
>
|
||||
Typo
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</section>
|
||||
<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>
|
||||
</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,23 +98,23 @@ export function ResourceComponent(props) {
|
|||
)}
|
||||
</td>
|
||||
)}
|
||||
<td className="pl-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500 w-4">
|
||||
{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"
|
||||
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>
|
||||
</Tooltip>
|
||||
)}
|
||||
<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-6 text-blue-400 pr-2"
|
||||
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>
|
||||
</Tooltip>
|
||||
)}
|
||||
<a href={url}>{props.title}</a>
|
||||
</div>
|
||||
</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>
|
||||
</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