From 33d41bed0966cdfc8b16951be383447caa2ced56 Mon Sep 17 00:00:00 2001
From: Moritz Stueckler <moritz.stueckler@gmail.com>
Date: Fri, 11 Jun 2021 15:58:17 +0200
Subject: [PATCH] fix: list elements collapsing * fix list elements collapsing
* make random color values more distinct * fix problem with tag element keys
---
snowpack.config.js | 3 +--
src/components/Form/TagInput.tsx | 2 +-
src/components/Map/MapLayerControl.tsx | 4 ++--
src/components/Sidebar/ListElement.tsx | 2 +-
src/util/color.ts | 6 +++---
5 files changed, 8 insertions(+), 9 deletions(-)
diff --git a/snowpack.config.js b/snowpack.config.js
index 677863b..d00f2ec 100644
--- a/snowpack.config.js
+++ b/snowpack.config.js
@@ -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: */
diff --git a/src/components/Form/TagInput.tsx b/src/components/Form/TagInput.tsx
index c6f87b5..87b96be 100644
--- a/src/components/Form/TagInput.tsx
+++ b/src/components/Form/TagInput.tsx
@@ -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}
>
diff --git a/src/components/Map/MapLayerControl.tsx b/src/components/Map/MapLayerControl.tsx
index 285fc56..3313c16 100644
--- a/src/components/Map/MapLayerControl.tsx
+++ b/src/components/Map/MapLayerControl.tsx
@@ -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"
diff --git a/src/components/Sidebar/ListElement.tsx b/src/components/Sidebar/ListElement.tsx
index a088ece..18919b8 100644
--- a/src/components/Sidebar/ListElement.tsx
+++ b/src/components/Sidebar/ListElement.tsx
@@ -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">
diff --git a/src/util/color.ts b/src/util/color.ts
index 0b6b03f..0052acc 100644
--- a/src/util/color.ts
+++ b/src/util/color.ts
@@ -1,6 +1,6 @@
-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;
}
--
GitLab