Skip to content
Snippets Groups Projects
Commit 33d41bed authored by Moritz Stückler's avatar Moritz Stückler :cowboy:
Browse files

fix: list elements collapsing

* fix list elements collapsing
* make random color values more distinct
* fix problem with tag element keys
parent 2362d743
No related branches found
No related tags found
No related merge requests found
......@@ -5,11 +5,10 @@ module.exports = {
src: { url: '/dist' },
},
plugins: [
'@snowpack/plugin-react-refresh',
'@snowpack/plugin-dotenv',
'@snowpack/plugin-react-refresh',
'@snowpack/plugin-typescript',
'@snowpack/plugin-postcss',
'@snowpack/plugin-dotenv',
],
routes: [
/* Enable an SPA Fallback in development: */
......
......@@ -80,7 +80,7 @@ const TagInput: React.FC<Props> = ({ label, tags, options, onTagsChange, require
<div className="flex flex-wrap items-center flex-1 p-2">
{tags.map((selectedTag) => (
<Tag
key={`selected${selectedTag.id}`}
key={`selected${selectedTag.color}`}
onClickDelete={() => handleClickDeleteTag(selectedTag)}
color={selectedTag.color}
>
......
......@@ -18,7 +18,7 @@ const MapLayerControl: React.FC = () => {
};
return (
<div className="border-2 border-black w-48 border-opacity-20 rounded-lg absolute right-0 bottom-0 mb-4 mr-4 bg-white p-4 z-10">
<div className="border-2 border-black w-52 border-opacity-20 rounded-lg absolute right-0 bottom-0 mb-4 mr-4 bg-white p-4 z-10">
<div className={`flex justify-between cursor-pointer ${isOpen ? 'mb-2' : ''}`} onClick={() => setIsOpen(!isOpen)}>
<h3 className="text-base font-semibold text-gray-900">Kategorien:</h3>
<DownIcon
......@@ -28,7 +28,7 @@ const MapLayerControl: React.FC = () => {
{isOpen &&
layers.map((layer) => {
return (
<div key={layer}>
<div key={layer} className="my-2">
<label className="inline-flex items-center">
<input
type="checkbox"
......
......@@ -16,7 +16,7 @@ const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
{...restProps}
className={`border-2 border-black border-opacity-20 ${
hovered ? 'border-opacity-40' : 'hover:border-opacity-40'
} cursor-pointer rounded-lg md:overflow-hidden mx-4 my-2`}
} cursor-pointer rounded-lg mx-4 my-2`}
>
<div className="p-3">
<h2 className="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">
......
export function generateRandomHslColor(saturation = 100, lightness = 50): string {
const randomHue = getRandomIntInclusive(0, 360);
const color = `hsl(${randomHue},${saturation}%,${lightness}%)`;
export function generateRandomHslColor(saturation = 100, lightness = 50, distinctValues = 20): string {
const randomColorIndex = getRandomIntInclusive(0, distinctValues);
const color = `hsl(${Math.floor(randomColorIndex * (360 / distinctValues))},${saturation}%,${lightness}%)`;
return color;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment