From 352c26f08b1004b082aac4aa2080201290b8a0d9 Mon Sep 17 00:00:00 2001
From: Moritz Stueckler <moritz@elbstack.com>
Date: Thu, 8 Apr 2021 19:26:49 +0200
Subject: [PATCH] feat: add basic responsive design
---
src/App.tsx | 23 +++++++++++------------
src/Sidebar/SidebarContainer.tsx | 4 +++-
src/Sidebar/SidebarListElement.tsx | 2 +-
src/Sidebar/SidebarListView.tsx | 1 +
src/Sidebar/SidebarSingleView.tsx | 7 ++++---
src/index.css | 22 ++++++++++++++++++++++
6 files changed, 42 insertions(+), 17 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 2d1c5cd..92bca0e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,27 +29,26 @@ function App({}: AppProps) {
};
return (
- <div className={'flex h-full'}>
+ <div className={'flex md:flex-row-reverse flex-col h-full'}>
+ <Map
+ onMouseEnter={handlePoiHoverOn}
+ onMouseLeave={handlePoiHoverOff}
+ hoveredPoiId={hoveredPoiId}
+ values={data as PointOfInterest[]}
+ onSelect={handlePoiClick}
+ selectedEntry={selectedPoi}
+ />
{selectedPoi ? (
- <SidebarSingleView style={{ flex: 1, minWidth: '250px' }} value={selectedPoi} onClose={handlePoiClose} />
+ <SidebarSingleView className="sidebar" value={selectedPoi} onClose={handlePoiClose} />
) : (
<SidebarListView
onMouseEnter={handlePoiHoverOn}
onMouseLeave={handlePoiHoverOff}
- style={{ flex: 1, minWidth: '250px' }}
+ className="sidebar"
values={data as PointOfInterest[]}
onClick={handlePoiClick}
/>
)}
-
- <Map
- onMouseEnter={handlePoiHoverOn}
- onMouseLeave={handlePoiHoverOff}
- hoveredPoiId={hoveredPoiId}
- values={data as PointOfInterest[]}
- onSelect={handlePoiClick}
- selectedEntry={selectedPoi}
- />
</div>
);
}
diff --git a/src/Sidebar/SidebarContainer.tsx b/src/Sidebar/SidebarContainer.tsx
index ae64219..de02c07 100644
--- a/src/Sidebar/SidebarContainer.tsx
+++ b/src/Sidebar/SidebarContainer.tsx
@@ -9,7 +9,9 @@ const SidebarContainer: React.FC<Props> = ({ style, className, children }) => {
return (
<div
style={style}
- className={`flex flex-col shadow-2xl border-r-2 border-black border-opacity-20 ${className ?? ''}`}
+ className={`flex flex-col shadow-2xl border-t-2 md:border-r-2 md:border-t-0 border-black border-opacity-20 ${
+ className ?? ''
+ }`}
>
{children}
</div>
diff --git a/src/Sidebar/SidebarListElement.tsx b/src/Sidebar/SidebarListElement.tsx
index ebd09c0..c17b369 100644
--- a/src/Sidebar/SidebarListElement.tsx
+++ b/src/Sidebar/SidebarListElement.tsx
@@ -10,7 +10,7 @@ const SidebarListElement: React.FC<Props> = ({ value, ...restProps }) => {
value && (
<div
{...restProps}
- className="border-2 border-black border-opacity-20 hover:border-opacity-40 cursor-pointer rounded-lg overflow-hidden mx-4 my-2"
+ className="border-2 border-black border-opacity-20 hover:border-opacity-40 cursor-pointer rounded-lg md:overflow-hidden mx-4 my-2"
>
<div className="p-3">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2>
diff --git a/src/Sidebar/SidebarListView.tsx b/src/Sidebar/SidebarListView.tsx
index b42fd65..35a14f7 100644
--- a/src/Sidebar/SidebarListView.tsx
+++ b/src/Sidebar/SidebarListView.tsx
@@ -9,6 +9,7 @@ interface Props {
onClick?: (id: number) => void;
onMouseEnter?: (id: number) => void;
onMouseLeave?: () => void;
+ className?: string;
}
const SidebarListView: React.FC<Props> = ({ values, onMouseEnter, onMouseLeave, onClick, ...restProps }) => {
diff --git a/src/Sidebar/SidebarSingleView.tsx b/src/Sidebar/SidebarSingleView.tsx
index 6140736..badbde2 100644
--- a/src/Sidebar/SidebarSingleView.tsx
+++ b/src/Sidebar/SidebarSingleView.tsx
@@ -7,18 +7,19 @@ interface Props {
style?: CSSProperties;
value: PointOfInterest;
onClose?: () => void;
+ className?: string;
}
-const SidebarSingleView: React.FC<Props> = ({ value, onClose, ...restProps }) => {
+const SidebarSingleView: React.FC<Props> = ({ value, onClose, className, ...restProps }) => {
const strippedUrl = value?.website?.replace(/(^\w+:|^)\/\//, '');
return (
- <SidebarContainer className="relative p-0" {...restProps}>
+ <SidebarContainer className={`relative p-0 ${className || ''}`} {...restProps}>
<CloseIcon
size={32}
className="absolute left-5 top-5 p-1 text-gray-500 inline-block cursor-pointer hover:bg-gray-300 hover:bg-opacity-50 rounded-full"
onClick={onClose}
/>
- <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={value.image} alt="blog" />
+ <img className="lg:h-48 md:h-36 h-24 w-full object-cover object-center" src={value.image} alt="blog" />
<div className="p-6">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2>
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">{value.name}</h1>
diff --git a/src/index.css b/src/index.css
index 67041bd..fec3971 100644
--- a/src/index.css
+++ b/src/index.css
@@ -23,3 +23,25 @@ code {
.marker {
color: var(--fabcity-red);
}
+
+.sidebar {
+ flex: 3;
+ overflow-y: scroll;
+ max-height: 50vh;
+}
+
+.leaflet-control-container {
+ display: none;
+}
+
+@screen md {
+ .sidebar {
+ flex: 1;
+ min-width: 250px;
+ max-height: initial;
+ }
+
+ .leaflet-control-container {
+ display: initial;
+ }
+}
--
GitLab