More styling changes
This commit is contained in:
parent
7b07f8a9dc
commit
2fabf06e94
|
@ -1,50 +1,22 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
const Chevron = () => (
|
|
||||||
<svg
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 12 12"
|
|
||||||
className="sc-hHftDr bphBpT"
|
|
||||||
rotate="0"
|
|
||||||
data-test="IconComponent"
|
|
||||||
width="16"
|
|
||||||
height="20"
|
|
||||||
>
|
|
||||||
<rect
|
|
||||||
rotate="0"
|
|
||||||
data-test="IconComponent"
|
|
||||||
className="sc-fKFyDc gYoavR"
|
|
||||||
fillOpacity="0"
|
|
||||||
fill="#000000"
|
|
||||||
/>
|
|
||||||
<polygon
|
|
||||||
transform="translate(5.949747, 4.949747) rotate(-45.000000) translate(-5.949747, -4.949747) "
|
|
||||||
points="4.44974747 6.44974747 4.44974747 1.44974747 2.44974747 1.44974747 2.44974747 8.44974747 9.44974747 8.44974747 9.44974747 6.44974747"
|
|
||||||
fill="#0A0B0D"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
interface AnalyticsProps {
|
interface AnalyticsProps {
|
||||||
clicks: number;
|
clicks: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Analytics: React.FC<AnalyticsProps> = ({ clicks }) => {
|
const Analytics: React.FC<AnalyticsProps> = ({ clicks }) => {
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-12 lt-lg:h-16 mr-0 px-4 lt-lg:px-6 flex flex-row border-b border-analytics-border text-sm font-karla">
|
<div className="w-full h-12 lt-lg:h-16 mr-0 px-4 lt-lg:px-6 flex border-b border-gray-300 text-sm font-karla">
|
||||||
<div className="w-full h-full flex-analytics flex flex-row justify-start items-center">
|
<div className="w-full h-full flex-analytics flex items-center">
|
||||||
<span className="mr-4 font-bold">Lifetime Analytics:</span>
|
<span className="mr-4 font-bold">Lifetime Analytics:</span>
|
||||||
<div className="mr-8 flex flex-row justify-center items-center">
|
<div className="mr-8 flex justify-center items-center">
|
||||||
<div className="h-2 w-2 mr-2 rounded bg-analytics-click-icon"></div>
|
<div className="h-2 w-2 mr-2 rounded bg-analytics-click-icon"></div>
|
||||||
<div className="flex flex-col lt-lg:flex-row text-xs lt-lg:text-base font-normal">
|
<div className="flex text-xs lt-lg:text-base font-normal">
|
||||||
<p className="whitespace-pre">Clicks: </p>
|
<p className="whitespace-pre">Clicks: </p>
|
||||||
<p className="font-bold lt-lg:font-normal">{clicks || "-"}</p>
|
<p className="font-bold lt-lg:font-normal">{clicks || "-"}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full h-full flex-chevron flex flex-row justify-center items-center">
|
|
||||||
<Chevron />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -44,7 +44,7 @@ const Link: React.FC<LinkProps> = ({ index, link, onChange, onDelete }) => {
|
||||||
<Draggable key={index} draggableId={index.toString()} index={index}>
|
<Draggable key={index} draggableId={index.toString()} index={index}>
|
||||||
{(provided) => (
|
{(provided) => (
|
||||||
<div {...provided.draggableProps} ref={provided.innerRef}>
|
<div {...provided.draggableProps} ref={provided.innerRef}>
|
||||||
<div className="p-2 container flex">
|
<div className="py-2 flex rounded-md md:container">
|
||||||
<div
|
<div
|
||||||
className="flex justify-center w-1/12 flex items-center border-r bg-white rounded-sm shadow-sm"
|
className="flex justify-center w-1/12 flex items-center border-r bg-white rounded-sm shadow-sm"
|
||||||
{...provided.dragHandleProps}
|
{...provided.dragHandleProps}
|
||||||
|
|
|
@ -61,70 +61,75 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex">
|
<div className="flex flex-col bg-gray-100 md:h-full md:flex-row">
|
||||||
<div className="space-y-4 bg-gray-100 w-1/2 p-2">
|
<div className="space-y-4 md:w-3/5 md:border-r md:border-gray-300 md:overflow-y-scroll">
|
||||||
{/* add link button */}
|
<div className="m-8">
|
||||||
<button
|
|
||||||
className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full"
|
|
||||||
onClick={handleOnClickAdd}
|
|
||||||
>
|
|
||||||
Add New Link
|
|
||||||
</button>
|
|
||||||
{displayDragDrop && (
|
|
||||||
<DragDropContext onDragEnd={handleOnDragEnd}>
|
|
||||||
<Droppable droppableId="links">
|
|
||||||
{(provided) => (
|
|
||||||
<div
|
|
||||||
className="links"
|
|
||||||
{...provided.droppableProps}
|
|
||||||
ref={provided.innerRef}
|
|
||||||
>
|
|
||||||
{editableLinks.map((link, index) => (
|
|
||||||
<Link
|
|
||||||
key={index}
|
|
||||||
index={index}
|
|
||||||
link={link}
|
|
||||||
onChange={(newLink: EditableLink) =>
|
|
||||||
setEditableLinks([
|
|
||||||
...editableLinks.slice(0, index),
|
|
||||||
newLink,
|
|
||||||
...editableLinks.slice(index + 1),
|
|
||||||
])
|
|
||||||
}
|
|
||||||
onDelete={() =>
|
|
||||||
setEditableLinks([
|
|
||||||
...editableLinks.slice(0, index),
|
|
||||||
...editableLinks.slice(index + 1),
|
|
||||||
])
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{provided.placeholder}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Droppable>
|
|
||||||
</DragDropContext>
|
|
||||||
)}
|
|
||||||
<div className="mb-16" />
|
|
||||||
<div className="flex">
|
|
||||||
<button
|
<button
|
||||||
className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
|
className="block flex py-2 items-center justify-center rounded-lg bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full"
|
||||||
onClick={onSubmit}
|
onClick={handleOnClickAdd}
|
||||||
disabled={equal(editableLinks, links)}
|
|
||||||
>
|
>
|
||||||
Submit
|
Add New Link
|
||||||
</button>
|
|
||||||
<div className="mr-4" />
|
|
||||||
<button
|
|
||||||
className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
|
|
||||||
onClick={onCancel}
|
|
||||||
disabled={equal(editableLinks, links)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
</button>
|
||||||
|
<div className="mb-8" />
|
||||||
|
{displayDragDrop && (
|
||||||
|
<DragDropContext onDragEnd={handleOnDragEnd}>
|
||||||
|
<Droppable droppableId="links">
|
||||||
|
{(provided) => (
|
||||||
|
<div
|
||||||
|
className="links"
|
||||||
|
{...provided.droppableProps}
|
||||||
|
ref={provided.innerRef}
|
||||||
|
>
|
||||||
|
{editableLinks.map((link, index) => (
|
||||||
|
<Link
|
||||||
|
key={index}
|
||||||
|
index={index}
|
||||||
|
link={link}
|
||||||
|
onChange={(newLink: EditableLink) =>
|
||||||
|
setEditableLinks([
|
||||||
|
...editableLinks.slice(0, index),
|
||||||
|
newLink,
|
||||||
|
...editableLinks.slice(index + 1),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
onDelete={() =>
|
||||||
|
setEditableLinks([
|
||||||
|
...editableLinks.slice(0, index),
|
||||||
|
...editableLinks.slice(index + 1),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{provided.placeholder}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Droppable>
|
||||||
|
</DragDropContext>
|
||||||
|
)}
|
||||||
|
<div className="mb-8" />
|
||||||
|
<div className="flex">
|
||||||
|
<button
|
||||||
|
className="block flex py-2 items-center justify-center rounded-lg bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
|
||||||
|
onClick={onSubmit}
|
||||||
|
disabled={equal(editableLinks, links)}
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
<div className="mr-4" />
|
||||||
|
<button
|
||||||
|
className="block flex py-2 items-center justify-center rounded-lg bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
|
||||||
|
onClick={onCancel}
|
||||||
|
disabled={equal(editableLinks, links)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Preview links={editableLinks.filter((link) => link.active)} />
|
<div className="mb-8 md:none" />
|
||||||
|
<div className="flex items-center justify-center md:w-2/5">
|
||||||
|
<Preview links={editableLinks.filter((link) => link.active)} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -23,18 +23,16 @@ export const Links: React.FC<Props> = ({ links, logClicks = false }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="text-s flex flex-col items-center w-full top-6 font-karla">
|
||||||
className={`text-s flex flex-col items-center w-full top-6 font-karla`}
|
|
||||||
>
|
|
||||||
<img className="mb-3" src="csc_logo.png" alt="CSC Logo" width="100px" />
|
<img className="mb-3" src="csc_logo.png" alt="CSC Logo" width="100px" />
|
||||||
<h1 className="font-bold">@uwcsclub</h1>
|
<h1 className="font-bold">@uwcsclub</h1>
|
||||||
<ul className="flex flex-col my-6 w-full">
|
<ul className="flex flex-col my-6 w-full">
|
||||||
{links.map(({ name, url }, i) => (
|
{links.map(({ name, url }, i) => (
|
||||||
<li key={i} className="w-full contents">
|
<li key={i} className="w-full flex justify-center">
|
||||||
<a
|
<a
|
||||||
className="btn bg-gray-450 p-3 text-white font-bold text-center self-center my-1.5
|
className="btn bg-gray-450 p-3 text-white font-karla font-bold text-center self-center my-1.5
|
||||||
hover:bg-white hover:text-black border-2 border-gray-800 transition duration-200 ease-in-out
|
hover:bg-white hover:text-black border-2 border-gray-800 transition duration-300 ease-in-out
|
||||||
w-11/12 sm:w-4/12"
|
w-11/12 sm:w-4/12 min-h-link"
|
||||||
href={url}
|
href={url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
|
|
|
@ -9,6 +9,9 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
|
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
|
||||||
padding-left: 5px;
|
padding-left: 7px;
|
||||||
box-sizing: content-box; /* So the width will be 100% + 17px */
|
box-sizing: content-box; /* So the width will be 100% + 17px */
|
||||||
}
|
}
|
||||||
|
.child a {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
|
@ -22,10 +22,10 @@ const EditorPage: React.FC = () => {
|
||||||
}, [loggedIn, headers]);
|
}, [loggedIn, headers]);
|
||||||
|
|
||||||
return loggedIn ? (
|
return loggedIn ? (
|
||||||
<>
|
<div>
|
||||||
<Analytics clicks={links.reduce((acc, curr) => acc + curr.clicks, 0)} />
|
<Analytics clicks={links.reduce((acc, curr) => acc + curr.clicks, 0)} />
|
||||||
<Editor links={links} setLinks={setLinks} />
|
<Editor links={links} setLinks={setLinks} />
|
||||||
</>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<Login />
|
<Login />
|
||||||
);
|
);
|
||||||
|
|
|
@ -15,3 +15,12 @@ input,
|
||||||
button {
|
button {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* NextJS reset styles https://gist.github.com/dmurawsky/d45f068097d181c733a53687edce1919 */
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
body > div:first-child,
|
||||||
|
div#__next,
|
||||||
|
div#__next > div {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
|
@ -19,7 +19,6 @@ module.exports = {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
analytics: {
|
analytics: {
|
||||||
border: "#d7dce1",
|
|
||||||
"view-icon": "#39e09b",
|
"view-icon": "#39e09b",
|
||||||
"click-icon": "#8a86e5",
|
"click-icon": "#8a86e5",
|
||||||
},
|
},
|
||||||
|
@ -47,9 +46,9 @@ module.exports = {
|
||||||
borderWidth: {
|
borderWidth: {
|
||||||
preview: "0.75rem",
|
preview: "0.75rem",
|
||||||
},
|
},
|
||||||
},
|
minHeight: {
|
||||||
container: {
|
link: "48px",
|
||||||
center: true,
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
|
|
Loading…
Reference in New Issue