style for small screens

palprabhat · Feb 8, 2021 · 15c0243 · 15c0243 · vercel · Feb 8, 2021
1 parent 21399ee
commit 15c0243
Show file tree

Hide file tree

Showing 23 changed files with 271 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "class-validator": "^0.13.1",
     "cloudinary": "^1.24.0",
     "cloudinary-react": "^1.6.8",
+    "cookie": "^0.4.1",
     "firebase": "^8.2.4",
     "firebase-admin": "^9.4.2",
     "framer-motion": "^3.2.2-rc.1",
@@ -54,6 +55,7 @@
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-decorators": "^7.12.12",
     "@prisma/cli": "2.12.0",
+    "@types/cookie": "^0.4.0",
     "@types/js-cookie": "^2.2.6",
     "@types/node": "^14.14.22",
     "@types/react": "^17.0.0",

diff --git a/pages/api/login.ts b/pages/api/login.ts
@@ -0,0 +1,16 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import cookie from "cookie";
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
+  res.setHeader(
+    "Set-Cookie",
+    cookie.serialize("token", req.body.token, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV !== "development",
+      maxAge: 60 * 60,
+      sameSite: "strict",
+      path: "/",
+    })
+  );
+  res.status(200).json({ success: true });
+};
diff --git a/pages/api/logout.ts b/pages/api/logout.ts
@@ -0,0 +1,16 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import cookie from "cookie";
+
+export default (_req: NextApiRequest, res: NextApiResponse) => {
+  res.setHeader(
+    "Set-Cookie",
+    cookie.serialize("token", "", {
+      httpOnly: true,
+      secure: process.env.NODE_ENV !== "development",
+      expires: new Date(0),
+      sameSite: "strict",
+      path: "/",
+    })
+  );
+  res.status(200).json({ success: true });
+};
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -56,6 +56,8 @@ export const Home = () => {
 
   return (
     <Layout
+      className="flex-col-reverse xl:flex-row"
+      leftChildrenClassName="w-full"
       leftChildren={
         <PlaceList
           places={lastData && lastData.places ? lastData.places : []}
@@ -68,6 +70,7 @@ export const Home = () => {
           }
         />
       }
+      rightChildrenClassName="w-full"
       rightChildren={
         <HomeMap
           setDataBounds={setDataBounds}

diff --git a/pages/places/[id]/index.tsx b/pages/places/[id]/index.tsx
@@ -4,7 +4,7 @@ import { DELETE_PLACE_QUERY, GET_PLACE_BY_ID_QUERY } from "src/gql";
 import { GetPlaceByIdQuery } from "src/generated/GetPlaceByIdQuery";
 import { GetPlaceByIdQueryVariables } from "src/generated/GetPlaceByIdQuery";
 import { FC, useEffect, useState } from "react";
-import { additionalType } from "src/utils";
+import { additionalType, minWidthXl } from "src/utils";
 import Head from "next/head";
 import { IoChevronBack, IoLocationSharp } from "react-icons/io5";
 import { MdDelete, MdEdit } from "react-icons/md";
@@ -52,6 +52,8 @@ const PlaceId: PlaceIdFC = () => {
     GetPlaceByIdQueryVariables
   >(GET_PLACE_BY_ID_QUERY, { variables: { id: (id as string) ?? "" } });
 
+  const isMinWidthXl = minWidthXl();
+
   useEffect(() => {
     if (data && data.place) {
       setSearchedViewport({
@@ -105,10 +107,15 @@ const PlaceId: PlaceIdFC = () => {
         <title>{place.address} | Places to see</title>
       </Head>
       <Layout
+        className="flex-col xl:flex-row"
+        leftChildrenClassName="w-full"
         leftChildren={
           <div
-            className="overflow-y-scroll p-8 pt-4 mx-auto"
-            style={{ maxWidth: "780px", height: ViewportFullHeight }}
+            className="xl:overflow-y-scroll p-8 pt-4 mx-auto"
+            style={{
+              maxWidth: "1200px",
+              height: isMinWidthXl ? ViewportFullHeight : "auto",
+            }}
           >
             <div className="flex justify-between mt-1">
               {editMode ? (
@@ -173,7 +180,8 @@ const PlaceId: PlaceIdFC = () => {
                 <h2 className="text-3xl">{place.placeName}</h2>
                 <p className="mt-1 text-sm text-gray-400">{place.placeType}</p>
                 <div className="flex items-center mt-2">
-                  <IoLocationSharp className="mr-2" /> {place.address}
+                  <IoLocationSharp className="mr-2 text-lg w-5" />
+                  <span className="flex-1">{place.address}</span>
                 </div>
                 <CloudinaryImage
                   className="rounded-md mt-6"
@@ -185,6 +193,7 @@ const PlaceId: PlaceIdFC = () => {
             )}
           </div>
         }
+        rightChildrenClassName="w-full"
         rightChildren={
           <ViewPlaceMap
             place={place}

diff --git a/pages/places/add.tsx b/pages/places/add.tsx
@@ -9,6 +9,7 @@ import { ViewState } from "react-map-gl";
 import AddPlaceMap from "src/components/AddPlaceMap";
 import { useLocalStorage } from "src/hooks";
 import { useState } from "react";
+import { minWidthXl } from "src/utils";
 
 const Add = () => {
   const router = useRouter();
@@ -23,10 +24,15 @@ const Add = () => {
 
   return (
     <Layout
+      className="flex-col xl:flex-row"
+      leftChildrenClassName="w-full"
       leftChildren={
         <div
-          className="mx-auto overflow-y-scroll p-8"
-          style={{ maxWidth: "780px", height: ViewportFullHeight }}
+          className="mx-auto xl:overflow-y-scroll p-8"
+          style={{
+            maxWidth: "1200px",
+            height: minWidthXl() ? ViewportFullHeight : "auto",
+          }}
         >
           <div className="flex justify-end space-x-4 mt-1">
             <Button asLink href={urls.home}>
@@ -45,6 +51,7 @@ const Add = () => {
           />
         </div>
       }
+      rightChildrenClassName="w-full"
       rightChildren={<AddPlaceMap searchedViewport={searchedViewport} />}
     />
   );

diff --git a/src/components/AddPlaceMap.tsx b/src/components/AddPlaceMap.tsx
@@ -2,8 +2,9 @@ import { FC, useEffect, useRef, useState } from "react";
 import ReactMapGL, { Marker, ViewState } from "react-map-gl";
 import { IoLocationSharp } from "react-icons/io5";
 import Map from "./ui/Map";
-import { LOCAL_STORAGE_VIEWPORT, ViewportFullHeight } from "src/consts";
+import { LOCAL_STORAGE_VIEWPORT, ViewportFullHeight, ViewportHalfHeight } from "src/consts";
 import { useLocalStorage } from "src/hooks";
+import { minWidthXl } from 'src/utils';
 
 interface IProps {
   searchedViewport: ViewState;
@@ -27,7 +28,7 @@ const AddPlaceMap: FC<IProps> = ({ searchedViewport }) => {
       <Map
         viewport={viewport}
         width="100%"
-        height={ViewportFullHeight}
+        height={minWidthXl() ? ViewportFullHeight : ViewportHalfHeight}
         minZoom={4}
         maxZoom={18}
         ref={mapRef}

diff --git a/src/components/HomeMap.tsx b/src/components/HomeMap.tsx
@@ -14,6 +14,8 @@ import { BoundsArray } from "src/consts";
 import Link from "next/link";
 import { IoLocationSharp } from "react-icons/io5";
 import { GetPlacesQuery_places } from "src/generated/GetPlacesQuery";
+import { minWidthXl } from "../utils/windowSize";
+import { ViewportHalfHeight } from "../consts/index";
 
 interface IProps {
   setDataBounds: (bounds: BoundsArray) => void;
@@ -61,7 +63,7 @@ const HomeMap: FC<IProps> = ({
       <Map
         viewport={viewport}
         width="100%"
-        height={ViewportFullHeight}
+        height={minWidthXl() ? ViewportFullHeight : ViewportHalfHeight}
         minZoom={4}
         maxZoom={15}
         ref={(instance) => {

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,42 +1,51 @@
 import { FC, ReactNode } from "react";
-import { ViewportFullHeight } from "src/consts";
 import Navbar from "./Navbar";
 
 type ISplitLayout = {
   leftChildren: ReactNode;
   rightChildren: ReactNode;
   children?: never;
+  className?: string;
+  leftChildrenClassName?: string;
+  rightChildrenClassName?: string;
 };
 
 type IFullLayout = {
   leftChildren?: never;
   rightChildren?: never;
   children: ReactNode;
+  className?: string;
+  leftChildrenClassName?: never;
+  rightChildrenClassName?: never;
 };
 
 declare type ILayout = ISplitLayout | IFullLayout;
 
-const Layout: FC<ILayout> = ({ children, leftChildren, rightChildren }) => {
+const Layout: FC<ILayout> = ({
+  children,
+  leftChildren,
+  rightChildren,
+  className,
+  leftChildrenClassName,
+  rightChildrenClassName,
+}) => {
   let content = null;
 
   if (children) {
     content = children;
   } else {
     content = (
       <>
-        <div className="w-1/2">{leftChildren}</div>
-        <div className="w-1/2 h-full">{rightChildren}</div>
+        <div className={`w-1/2 ${leftChildrenClassName}`}>{leftChildren}</div>
+        <div className={`w-1/2 ${rightChildrenClassName}`}>{rightChildren}</div>
       </>
     );
   }
 
   return (
     <>
       <Navbar />
-      <main
-        className={`${!children ? "flex" : ""}`}
-        style={{ minHeight: ViewportFullHeight }}
-      >
+      <main className={`${!children ? "flex" : ""} ${className}`}>
         {content}
       </main>
     </>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -7,13 +7,15 @@ import {
   IoPerson,
 } from "react-icons/io5";
 import { AiOutlineGithub } from "react-icons/ai";
+import { IoMdAdd } from "react-icons/io";
 import { useAuth } from "src/contexts";
 import FirebaseAuth from "./FirebaseAuth";
 import { useRouter } from "next/router";
 import Modal from "./Modal";
 import Link from "next/link";
 import { Button } from "./ui";
 import { externalUrls, urls } from "src/consts";
+import { minWidthMd } from "src/utils";
 
 interface IMenuItem {
   onClick?: () => any;
@@ -74,7 +76,7 @@ const Navbar = () => {
         <div className="flex justify-between items-center">
           {authenticated && router.pathname === urls.home && (
             <Button asLink href={urls.addPlace}>
-              Add a new place
+              {minWidthMd() ? "Add a new place" : <IoMdAdd />}
             </Button>
           )}
 
@@ -114,7 +116,7 @@ const Navbar = () => {
                 </MenuItem>
                 <MenuItem onClick={() => logout()}>
                   <div className="flex space-x-2">
-                    <IoLogOutOutline  fontSize="1.75rem" />
+                    <IoLogOutOutline fontSize="1.75rem" />
                     <span>Logout</span>
                   </div>
                 </MenuItem>

diff --git a/src/components/PlaceForm.tsx b/src/components/PlaceForm.tsx
@@ -17,6 +17,7 @@ import { UpdatePlaceMutation } from "src/generated/UpdatePlaceMutation";
 import { UpdatePlaceMutationVariables } from "src/generated/UpdatePlaceMutation";
 import { CreatePlaceMutationVariables } from "src/generated/CreatePlaceMutation";
 import CloudinaryImage from "./ui/CloudinaryImage";
+import placeTypeData from "src/data/places-type.json";
 
 interface IFormData {
   placeName: string;
@@ -452,7 +453,7 @@ const PlaceForm: FC<IPlaceFormProps> = ({
         name="placeType"
         placeholder="Place type"
         value={place?.placeType ?? ""}
-        options={[{ label: "1", value: "1" }]}
+        options={placeTypeData}
         onChange={(data) => {
           setValue("placeType", data ? data.value : "", {
             shouldValidate: true,

diff --git a/src/components/PlaceList.tsx b/src/components/PlaceList.tsx
@@ -4,6 +4,8 @@ import { Dispatch, FC, SetStateAction } from "react";
 import CloudinaryImage from "./ui/CloudinaryImage";
 import Link from "next/link";
 import LocationSearch from "./LocationSearch";
+import { IoLocationSharp } from "react-icons/io5";
+import { minWidthXl } from "src/utils";
 
 interface IPlaceList {
   places: GetPlacesQuery_places[];
@@ -26,10 +28,13 @@ const PlaceList: FC<IPlaceList> = ({
 }) => {
   return (
     <div
-      className="mx-auto overflow-y-scroll p-8"
-      style={{ maxWidth: "780px", height: ViewportFullHeight }}
+      className="mx-auto xl:overflow-y-scroll p-8"
+      style={{
+        maxWidth: "1200px",
+        height: minWidthXl() ? ViewportFullHeight : "auto",
+      }}
     >
-      <div className="flex justify-end space-x-4 mt-1">
+      <div className="flex justify-end space-x-4 mt-1 absolute top-20 left-6 right-6 z-10 xl:relative xl:top-0 xl:left-0 xl:right-0">
         <LocationSearch
           defaultValue=""
           onSelectAddress={({ lat, lng }) =>
@@ -42,7 +47,7 @@ const PlaceList: FC<IPlaceList> = ({
         {places.map((place) => (
           <Link key={place.id} href={`${urls.places}/${place.id}`}>
             <a
-              className={`flex rounded-md overflow-hidden transform transition-all border-2 border-solid bg-gray-800 cursor-pointer ${
+              className={`flex flex-col sm:flex-row rounded-md overflow-hidden transform transition-all border-2 border-solid bg-gray-800 cursor-pointer ${
                 focusedPlaceId === place.id
                   ? "border-purple-500"
                   : "border-gray-700"
@@ -56,10 +61,13 @@ const PlaceList: FC<IPlaceList> = ({
                   alt={place.placeName}
                 />
               </div>
-              <div className="flex-1 p-3">
-                <div>{place.placeName}</div>
-                <div>{place.placeType}</div>
-                <div>{place.address}</div>
+              <div className="flex-1 p-4">
+                <div className="text-2xl">{place.placeName}</div>
+                <div className="mt-1 text-gray-400">{place.placeType}</div>
+                <div className="flex items-center mt-2">
+                  <IoLocationSharp className="mr-2 text-lg w-5" />
+                  <span className="flex-1">{place.address}</span>
+                </div>
               </div>
             </a>
           </Link>

diff --git a/src/components/ViewPlaceMap.tsx b/src/components/ViewPlaceMap.tsx
@@ -3,7 +3,8 @@ import ReactMapGL, { Marker, ViewState } from "react-map-gl";
 import { IoLocationSharp } from "react-icons/io5";
 import Link from "next/link";
 import Map from "./ui/Map";
-import { urls, ViewportFullHeight } from "src/consts";
+import { urls, ViewportFullHeight, ViewportHalfHeight } from "src/consts";
+import { minWidthXl } from 'src/utils';
 
 interface IPlace {
   id: string;
@@ -18,7 +19,7 @@ interface IProps {
   searchedViewport: ViewState;
 }
 
-const CurrentMap: FC<IProps> = ({
+const ViewPlaceMap: FC<IProps> = ({
   place,
   nearby,
   editMode,
@@ -40,7 +41,7 @@ const CurrentMap: FC<IProps> = ({
       <Map
         viewport={viewport}
         width="100%"
-        height={ViewportFullHeight}
+        height={minWidthXl() ? ViewportFullHeight : ViewportHalfHeight}
         minZoom={4}
         maxZoom={18}
         ref={mapRef}
@@ -79,4 +80,4 @@ const CurrentMap: FC<IProps> = ({
   );
 };
 
-export default CurrentMap;
+export default ViewPlaceMap;
diff --git a/src/components/ui/Map.tsx b/src/components/ui/Map.tsx
@@ -25,7 +25,7 @@ const Map: ForwardRefRenderFunction<ReactMapGL, IMap> = (
         ref={ref}
         mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN}
       >
-        <div className="absolute top-0 right-0 p-4">
+        <div className="absolute bottom-0 right-0 p-4">
           <NavigationControl showCompass={false} />
         </div>
         {children}