Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: more css improvements, and tailwindify about modal #117

Merged
merged 1 commit into from
May 7, 2022
Merged

fix: more css improvements, and tailwindify about modal #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 23 additions & 30 deletions frontend/about-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ function P({
);
}

function Feature({ title, children }: { title: string; children: string }) {
return (
<li className="ml-3 mt-3">
<span className="font-semibold">{title}:</span> {children}
</li>
);
}

function A({ href, children }: { href: string; children: string }) {
return (
<span className="text-blue">
Expand Down Expand Up @@ -76,41 +84,26 @@ export default function AboutModal({ isOpen, onDismiss }: Props) {

<H1>Key Features</H1>
<ul
/* i was tired and needed to ship */
/* tailwind doesnt have circle option built in */
style={{
listStyleType: "circle",
padding: "1em",
}}
className="text-sm font-normal text-gray-1"
>
<li
style={{
marginBottom: "0.5em",
}}
>
<b>Dataset:</b> The entire React issue db as of April 2022. ~11k
issues, ~50 MB of data.
</li>
<li
style={{
marginBottom: "0.5em",
}}
>
<b>Spinner-free:</b> Everything in the UI responds instantly,
without progress bars.
</li>
<li
style={{
marginBottom: "0.5em",
}}
>
<b>Realtime sync:</b> Any change made by one user is seen ~instantly
by others. Open in two windows to test. Even works across views!
</li>
<li>
<b>Complex filters:</b> Use the filter picker in the top nav to
build complex filters.
</li>
<Feature title="Dataset">
The entire React issue db as of April 2022. ~11k issues, ~50 MB of
data.
</Feature>
<Feature title="Spinner-free">
Everything in the UI responds instantly, without progress bars.
</Feature>
<Feature title="Realtime sync">
Any change made by one user is seen ~instantly by others. Open in
two windows to test. Even works across views!
</Feature>
<Feature title="Complex filters">
Use the filter picker in the top nav to build complex filters.
</Feature>
</ul>

<H1>Learn More</H1>
Expand Down
51 changes: 20 additions & 31 deletions frontend/issue-detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,22 +250,20 @@ export default function IssueDetail({
</div>
</div>
</div>
<div className="flex flex-1j p-2 overflow-hidden">
<div className="flex flex-col flex-1 lg:p-3 border-gray-300 lg:border-r min-h-0 overflow-auto">
<div className="flex flex-1 p-2 overflow-hidden">
<div className="flex flex-col flex-[3_3_0%] items-center md:p-3 border-gray-300 md:border-r min-h-0 overflow-auto">
<div className="flex flex-col lg:max-w-4xl max-w-[90vw]">
<div className="flex border-solid border-b lg:px-3 justify-between px-2">
<div className="flex visible lg:invisible">
<div className="flex visible md:invisible">
<StatusMenu
onSelect={handleChangeStatus}
status={issue?.status || Status.BACKLOG}
labelVisible={true}
wideMode={false}
/>
<PriorityMenu
onSelect={handleChangePriority}
labelVisible={true}
priority={issue?.priority || Priority.NONE}
wideMode={false}
/>
</div>
{editMode ? (
Expand Down Expand Up @@ -337,39 +335,30 @@ export default function IssueDetail({
</div>
</div>
</div>
<div className="md:flex-row hidden md:block w-1/4 p-3">
<div className="hidden md:block flex flex-1 p-3">
<div className="max-w-4xl mx-auto">
<div className="flex border-solid border-b px-5">
{/* For consistent spacing with left col */}
<div className="text-sm invisible">
<EditIcon className="!w-4" />
</div>
</div>
<div className="flex flex-row">
<div className="flex flex-col">
<div className="flex-initial p-2">
<div className="w-1/2 text-md">Status</div>
</div>
<div className="flex-initial p-2">
<div className="text-md">Priority</div>
</div>
<div className="flex flex-col px-5 py-4 text-sm">
<div className="flex flex-row items-center my-1">
<div className="w-20">Status</div>
<StatusMenu
onSelect={handleChangeStatus}
status={issue?.status || Status.BACKLOG}
labelVisible={true}
/>
</div>
<div className="flex flex-col">
<div className="flex-initial p-2">
<StatusMenu
onSelect={handleChangeStatus}
status={issue?.status || Status.BACKLOG}
labelVisible={true}
wideMode={true}
/>
</div>
<div className="flex-initial p-2">
<PriorityMenu
onSelect={handleChangePriority}
labelVisible={true}
priority={issue?.priority || Priority.NONE}
wideMode={true}
/>
</div>
<div className="flex flex-row items-center my-1">
<div className="w-20">Priority</div>
<PriorityMenu
onSelect={handleChangePriority}
labelVisible={true}
priority={issue?.priority || Priority.NONE}
/>
</div>
</div>
</div>
Expand Down
26 changes: 7 additions & 19 deletions frontend/priority-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@ import NoPriorityIcon from "./assets/icons/dots.svg";
import UrgentPriorityIcon from "./assets/icons/rounded-claim.svg";
import { Priority, PriorityEnum } from "./issue";
import { useClickOutside } from "./hooks/useClickOutside";
import classnames from "classnames";

interface Props {
labelVisible?: boolean;
wideMode?: boolean;
onSelect: (priority: Priority) => void;
priority: Priority;
}
Expand All @@ -27,7 +25,6 @@ export const statusOpts = [

const PriorityMenu = ({
labelVisible,
wideMode,
onSelect,
priority = Priority.NONE,
}: Props) => {
Expand Down Expand Up @@ -71,16 +68,6 @@ const PriorityMenu = ({
}
});

const classes = classnames(
"inline-flex items-center h-6 px-2 border-none rounded focus:outline-none",
{
/* eslint-disable @typescript-eslint/naming-convention */
"text-gray-2 hover:bg-gray-400 hover:text-gray-2": !labelVisible,
"text-md hover:bg-gray-400 hover:text-gray-2": wideMode || labelVisible,
/* eslint-enable @typescript-eslint/naming-convention */
}
);

const options = statusOpts.map(([Icon, label, priority], idx) => {
return (
<div
Expand All @@ -101,15 +88,16 @@ const PriorityMenu = ({
return (
<div ref={ref}>
<button
className={classes}
className="inline-flex items-center h-6 px-2 border-none rounded focus:outline-none hover:bg-gray-400"
ref={setPriorityRef}
onClick={handleDropdownClick}
>
<PriorityIcon
priority={priority}
className={wideMode ? "mr-2" : "mr-0.5"}
/>
{labelVisible && <span>{getPriorityString(priority)}</span>}
<PriorityIcon priority={priority} />
{labelVisible && (
<div className="ml-2 whitespace-nowrap">
{getPriorityString(priority)}
</div>
)}
</button>
<div
ref={setPopperRef}
Expand Down
29 changes: 8 additions & 21 deletions frontend/status-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@ import DoneIcon from "./assets/icons/done.svg";
import InProgressIcon from "./assets/icons/half-circle.svg";
import { Status, StatusEnum } from "./issue";
import { useClickOutside } from "./hooks/useClickOutside";
import classnames from "classnames";

interface Props {
labelVisible?: boolean;
wideMode?: boolean;
onSelect: (status: Status) => void;
status: Status;
}
Expand Down Expand Up @@ -42,12 +40,7 @@ const getStatusString = (status: StatusEnum) => {
}
};

const StatusMenu = ({
labelVisible = false,
wideMode = false,
onSelect,
status,
}: Props) => {
const StatusMenu = ({ labelVisible = false, onSelect, status }: Props) => {
const [statusRef, setStatusRef] = useState<HTMLButtonElement | null>(null);
const [popperRef, setPopperRef] = useState<HTMLDivElement | null>(null);
const [statusDropDownVisible, setStatusDropDownVisible] = useState(false);
Expand All @@ -56,16 +49,6 @@ const StatusMenu = ({
placement: "bottom-start",
});

const classes = classnames(
"inline-flex items-center h-6 px-2 border-none rounded focus:outline-none",
{
/* eslint-disable @typescript-eslint/naming-convention */
"text-gray-2 hover:bg-gray-400 hover:text-gray-2": !labelVisible,
"text-md hover:bg-gray-400 hover:text-gray-2": wideMode || labelVisible,
/* eslint-enable @typescript-eslint/naming-convention */
}
);

const ref = useRef<HTMLDivElement>() as RefObject<HTMLDivElement>;

const handleDropdownClick = (e: MouseEvent) => {
Expand Down Expand Up @@ -100,12 +83,16 @@ const StatusMenu = ({
return (
<div ref={ref}>
<button
className={classes}
className="inline-flex items-center h-6 px-2 border-none rounded focus:outline-none hover:bg-gray-400"
ref={setStatusRef}
onClick={handleDropdownClick}
>
<StatusIcon status={status} className={wideMode ? "mr-2" : "mr-0.5"} />
{labelVisible && <span>{getStatusString(status)}</span>}
<StatusIcon status={status} />
{labelVisible && (
<div className="ml-2 whitespace-nowrap">
{getStatusString(status)}
</div>
)}
</button>
<div
ref={setPopperRef}
Expand Down
4 changes: 1 addition & 3 deletions frontend/top-filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,7 @@ const TopFilter = ({
>
<MenuIcon className="w-3.5 text-white hover:text-gray-2" />
</button>
<div className="p-1 font-semibold cursor-default hover:bg-gray-450">
{title}
</div>
<div className="p-1 font-semibold cursor-default">{title}</div>
{filteredIssuesCount ? (
<span>
{filteredIssuesCount} / {issuesCount}
Expand Down