(feat) more contents for smaller devices

- related issue: 일부 작은 기기에서 목록 영역이 너무 작습니다. #25 - less paddings and margins for layout - shorten sentences - footer displayed after all places are loaded in mobile devices
re-pharm · Jan 1, 2024 · 0447ff4 · 0447ff4
1 parent 578d707
commit 0447ff4
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 15 deletions.
diff --git a/src/app/(result)/[state]/[city]/page.tsx b/src/app/(result)/[state]/[city]/page.tsx
@@ -88,7 +88,7 @@ export default function Page({ params }: Params) {
             state: params.state,
             city: params.city  
         }}>
-            <div id="mainData" className="w-full sm:w-fit flex flex-col h-[calc(100vh-6rem)]">
+            <div id="mainData" className="w-full sm:w-fit flex flex-col md:h-[calc(100vh-6rem)]">
                 <Header />
                 <main className="h-full flex flex-col overflow-hidden">
                     <ManualLocation />

diff --git a/src/app/components/data/DataList.tsx b/src/app/components/data/DataList.tsx
@@ -42,20 +42,18 @@ export default function DataList(props: Props) {
             onChange={(e) => search(e.target.value)}
             />
         </form>
-        <section id="info" className="flex my-2 gap-2 break-keep">
+        <section id="info" className="flex my-1 gap-2 break-keep">
             <p className="rounded-xl shadow-md p-2">
-                <span className="inline-block">
+                <span className="inline-block me-1">
                     <FontAwesomeIcon icon={faCalendarCheck} className="px-1" />
-                    <span className="font-semibold pe-2">기준일</span>
                 </span>
                 <span className="inline-block">
-                    {props.date ?? "-"}
+                    {`${props.date} 기준` ?? "-"}
                 </span>
             </p>
             <p className="rounded-xl shadow-md p-2">
-                <span className="inline-block">
+                <span className="inline-block me-1">
                     <FontAwesomeIcon icon={faArrowUpWideShort} className="px-1" />
-                    <span className="font-semibold pe-2">정렬 방법</span>
                 </span>
                 <span className="inline-block">
                     {useGeolocation && useGeolocation.value ? "가까운 순" : "기본 순"}

diff --git a/src/app/components/layouts/Header.tsx b/src/app/components/layouts/Header.tsx
@@ -21,7 +21,9 @@ export default function Header(props: Props) {
                 <a href="https://forms.gle/EST5vaZBFGy8DHGE8" target="_blank"
                     className="border-b-2 border-slate-300 dark:border-slate-400 hover:bg-slate-100
                         hover:dark:bg-slate-600 dark:bg-slate-800 rounded-sm p-2 no-underline">
-                    <FontAwesomeIcon icon={faPaperPlane} className="pe-1" />
+                    <span className="pe-1">
+                        <FontAwesomeIcon icon={faPaperPlane} />
+                    </span>
                     문의/제보
                 </a>
             </nav>

diff --git a/src/app/components/locations/CurrentLocationButton.tsx b/src/app/components/locations/CurrentLocationButton.tsx
@@ -109,16 +109,20 @@ export default function CurrentLocationButton() {
                 className="border-b-2 border-slate-300 dark:border-slate-400 hover:bg-slate-100
                     hover:dark:bg-slate-600 dark:bg-slate-800 rounded-sm p-2"
                 onClick={(e) => {getGeolocation(e)}}>
-                <FontAwesomeIcon icon={faLocationCrosshairs} className="pe-1" />
-                {isGeolocationSaved ? "위치정보 갱신" : "현위치"}
+                <span className="pe-1">
+                    <FontAwesomeIcon icon={faLocationCrosshairs} />
+                </span>
+                {isGeolocationSaved ? "위치 갱신" : "현위치"}
             </button>
             {isGeolocationSaved ? (
                 <button
                     className="border-b-2 border-slate-300 dark:border-slate-400 hover:bg-slate-100
                         hover:dark:bg-slate-600 dark:bg-slate-800 rounded-sm p-2"
                     onClick={(e) => {removeLocationInfo(e)}}>
-                    <FontAwesomeIcon icon={faEraser}className="pe-1" />
-                    위치정보 지우기
+                    <span className="pe-1">
+                        <FontAwesomeIcon icon={faEraser} />
+                    </span>
+                    위치 지우기
                 </button>
             ):""}
         </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -24,10 +24,10 @@ export default function RootLayout({
   return (
     <html lang="ko">
       <body>
-        <div className="flex h-full px-8 pt-8 gap-8">
+        <div className="flex h-full px-4 pt-4 gap-4 md:px-8 md:pt-8 md:gap-8">
           {children}
         </div>
-        <footer className="m-4 h-[2rem]">
+        <footer className="mx-4 md:mx-8 my-2 md:my-4 h-[2rem]">
           <p>
             © 2023 Re:Pharm 프로젝트 및 &nbsp;
             <a href="https://github.com/re-pharm/pharm-map/graphs/contributors" target="_blank">기여자</a>. &nbsp;

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Home() {
 
     return(
         <>
-            <div id="mainData" className="w-full sm:w-fit flex flex-col h-[calc(100vh-6rem)]">
+            <div id="mainData" className="w-full sm:w-fit flex flex-col h-[calc(100vh-4rem)] md:h-[calc(100vh-6rem)]">
                 <Header />
                 <main className="h-full flex flex-col">
                     <ManualLocation />