Skip to content

Commit

Permalink
fix: more css improvements, and tailwindify about modal (rocicorp#117)
Browse files Browse the repository at this point in the history
  • Loading branch information
@grgbkr
grgbkr authored May 7, 2022
1 parent 6ccba2f commit b218d5c
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 104 deletions.
53 changes: 23 additions & 30 deletions frontend/about-modal.tsx
View file
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
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
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
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
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

0 comments on commit b218d5c

Please sign in to comment.