fix: 🐛 news page mobile layout #1130

CAFECA-IO · Aug 23, 2023 · 8e197c5 · 8e197c5
1 parent a60872e
commit 8e197c5
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "0.8.0+41.3",
+  "version": "0.8.0+41.4",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -176,8 +176,8 @@ const Footer = () => {
       </div>
 
       {/* Info: (20230328 - Julian) Mobile */}
-      <div className={`${mobileVersionBreakpoint}`}>
-        <footer className="mx-auto w-screen justify-center bg-darkGray text-base">
+      <div className={`${mobileVersionBreakpoint} w-full`}>
+        <footer className="mx-0 lg:mx-auto w-full justify-center bg-darkGray text-base">
           <div className="flex flex-col flex-wrap px-1/10 pb-10 pt-10 md:flex-row md:flex-nowrap md:items-center lg:items-start">
             {/* Info: (20230328 - Julian) LOGO & Social media */}
             <div className="mx-auto w-full shrink-0 text-center">

diff --git a/src/components/hero_description/hero_description.tsx b/src/components/hero_description/hero_description.tsx
@@ -120,11 +120,6 @@ export default function HeroDescription() {
           <AppDowloadContainer />
         </div>
       </div>
-
-      {/* Footer */}
-      <div className="">
-        <Footer />
-      </div>
     </div>
   );
 }
diff --git a/src/components/news_article/news_article.tsx b/src/components/news_article/news_article.tsx
@@ -57,25 +57,28 @@ const NewsArticle = ({shareId, img, post, recommendations}: INewsArticle) => {
     );
 
   return (
-    <div className="bg-gradient-to-r from-darkGray1/80 via-black to-black pb-20">
+    <div className="w-full flex flex-col bg-gradient-to-r from-darkGray1/80 via-black to-black pb-20">
       <div className="ml-5 h-10 w-6 pt-24 pb-14 transition-all duration-200 hover:opacity-70 lg:hidden">
         <Link href="/news">
           <BiArrowBack size={25} />
         </Link>{' '}
       </div>
 
       <div className="flex w-full justify-center lg:pt-36">
-        <div className="hidden h-10 w-6 transition-all duration-200 hover:opacity-70 lg:-ml-10 lg:mr-20 lg:flex">
+        <div className="hidden h-10 w-6 transition-all duration-200 hover:opacity-70 -ml-0 mr-0 lg:-ml-10 lg:mr-20 lg:flex">
           <Link href="/news">
             <BiArrowBack size={25} />
           </Link>
         </div>
-        <div className="w-full px-5 md:w-90vw lg:w-80vw xl:w-70vw">
+
+        <div className="px-1 w-90vw md:w-80vw lg:w-70vw">
           <Image
             src={img}
-            style={{objectFit: 'cover'}}
-            width={NEWS_IMG_WIDTH}
-            height={NEWS_IMG_HEIGHT}
+            // fill={true}
+            style={{width: '100%', height: 'auto'}}
+            sizes="80vw"
+            width={0}
+            height={0}
             alt="image"
           />
           <div className="my-8 flex justify-between">
@@ -84,7 +87,7 @@ const NewsArticle = ({shareId, img, post, recommendations}: INewsArticle) => {
             <p className="mt-2 text-xs text-lightGray lg:text-sm">{displayedDate}</p>
           </div>
 
-          <div className="prose mt-5 max-w-none leading-10 tracking-normal">
+          <div className="prose mt-5 leading-10 tracking-normal text-ellipsis overflow-hidden">
             <article dangerouslySetInnerHTML={{__html: parsedBody}} />
           </div>
 
@@ -108,7 +111,7 @@ const NewsArticle = ({shareId, img, post, recommendations}: INewsArticle) => {
       </div>
       {recommendations && recommendations?.length > 0 ? (
         <>
-          <div className="mx-10 border-b border-dashed border-white/50"></div>
+          <div className="lg:mx-10 border-b border-dashed border-white/50"></div>
 
           <div className="md:mx-20">
             <div className="mx-5 my-10 text-base text-lightGray md:mx-0">

diff --git a/src/components/news_item/news_item.tsx b/src/components/news_item/news_item.tsx
@@ -13,7 +13,7 @@ const NewsItem = ({
   img,
   ...otherProps
 }: IRecommendedNews) => {
-  const overallWidth = 'mx-20';
+  const overallWidth = 'mx-10 lg:mx-20';
 
   const displayedHeading = <div className="">{title}</div>;
 

diff --git a/src/components/news_section/news_section.tsx b/src/components/news_section/news_section.tsx
@@ -1,15 +1,6 @@
 import React, {useContext} from 'react';
-import CryptoNewsItem from '../crypto_news_item/crypto_news_item';
-import {MarketContext} from '../../contexts/market_context';
-import {dummyTickerStatic} from '../../interfaces/tidebit_defi_background/ticker_static';
 import NewsItem from '../news_item/news_item';
-import Link from 'next/link';
-import Pagination from '../pagination/pagination';
-import {
-  IRecommendedNews,
-  getDummyRecommendationNews,
-} from '../../interfaces/tidebit_defi_background/news';
-import {Currency} from '../../constants/currency';
+import {IRecommendedNews} from '../../interfaces/tidebit_defi_background/news';
 import {ITEMS_PER_PAGE} from '../../constants/display';
 
 const NewsSection = ({

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -8,6 +8,7 @@ import {AppContext} from '../contexts/app_context';
 import {ILocale} from '../interfaces/tidebit_defi_background/locale';
 import {TIDEBIT_FAVICON} from '../constants/display';
 import {LayoutAssertion} from '../constants/layout_assertion';
+import Footer from '../components/footer/footer';
 
 const Home = () => {
   const {layoutAssertion} = useGlobal();
@@ -32,6 +33,8 @@ const Home = () => {
       <main>
         <HeroDescription />
       </main>
+
+      <Footer />
     </>
   ) : (
     <div>Loading...</div>

diff --git a/src/pages/news/[newsId].tsx b/src/pages/news/[newsId].tsx
@@ -82,17 +82,21 @@ const NewsPage = (props: IPageProps) => {
       {appCtx.isInit ? (
         <>
           <nav className="">{displayedNavBar}</nav>
-          <main className="">
-            <div>
+          <main className="w-full">
+            <div className="w-full">
               <NewsArticle
                 post={props.newsData}
                 shareId={props.newsId}
                 img={newsImg}
                 recommendations={props.brief}
               />
             </div>
-            <Footer />
           </main>
+
+          <div className="w-full mx-0">
+            {' '}
+            <Footer />
+          </div>
         </>
       ) : (
         <div>Loading...</div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -230,6 +230,7 @@ module.exports = {
         '700px': '700px',
         '726px': '726px',
         '768px': '768px',
+        '900px': '900px',
         '1000px': '1000px',
         '1200px': '1200px',
         '1500px': '1500px',
@@ -281,6 +282,8 @@ module.exports = {
         '80vw': '80vw',
         '85vw': '85vw',
         '90vw': '90vw',
+        '95vw': '95vw',
+        '100vw': '100vw',
       },
       margin: {
         '8px': '8px',