Merge pull request #63 from Blazity/mobile-design

feat: add mobile design

src/app/[lang]/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from "next"
+import { HighlightedArticles } from "@/components/HighlightedArticles/HighlightedArticles"
 import { HighlightedCategoryArticles } from "@/components/HighlightedCategoryArticles/HighlightedCategoryArticles"
 import { RecentArticles } from "@/components/RecentArticles/RecentArticles"
 import { StockDisplay } from "@/components/StockDisplay/StockDisplay"
@@ -7,8 +8,6 @@ import { i18n, Locale } from "@/i18n/i18n"
 import { getHomepage, getHomepageMetadata } from "@/lib/client"
 import { getMatadataObj } from "@/utils/getMetadataObj"
 
-import { HighlightedArticles } from "@/components/HighlightedArticles/HighlightedArticles"
-
 export const dynamicParams = false
 
 export async function generateStaticParams() {

src/components/ArticleCard/ArticleCard.tsx

@@ -23,6 +23,7 @@ type ArticleCardProps = {
   orientation?: "vertical" | "horizontal"
   locale: Locale
   lines?: "1" | "2" | "3"
+  isMain?: boolean
 }
 
 export const hygraphArticleToCardProps = (article: {
@@ -52,21 +53,24 @@ export function ArticleCard({
   orientation = "vertical",
   lines = "2",
   locale,
+  isMain = false,
 }: ArticleCardProps) {
   const mainTag = tags[0]
   return (
     <Link href={`/${locale}/article/${slug}`} hrefLang={locale} passHref className="w-full">
       <article
         className={cn(
-          orientation === "vertical" && "flex-col",
+          orientation === "vertical" && "flex-row md:flex-col",
           orientation === "horizontal" && "flex-row",
-          "flex h-full max-h-[490px] w-full cursor-pointer overflow-hidden rounded-xl"
+          "flex h-full w-full cursor-pointer gap-5 overflow-hidden rounded-xl md:max-h-[490px] md:gap-0",
+          isMain && "max-h-[490px] flex-col gap-0"
         )}
       >
         <div
           className={cn(
-            orientation === "horizontal" && "w-1/2 min-w-[204px]",
-            "bg-gradient-to-brh-[264px] relative min-h-[264px] from-gray-200 to-gray-300"
+            orientation === "horizontal" && "min-h-[82px] md:w-1/2 md:min-w-[204px]",
+            "bg-gradient-to-brh-[264px] relative h-[82px] min-h-[82px] w-[82px] from-gray-200 to-gray-300 md:min-h-[264px] md:w-full",
+            isMain && "min-h-[264px] w-auto"
           )}
         >
           {imageUrl && (
@@ -76,10 +80,18 @@ export function ArticleCard({
               width={780}
               height={264}
               sizes="(max-width: 640px) 320px, (max-width: 1024px) 480px, 780px"
-              className={cn("h-[264px]  min-h-[264px] w-full object-cover text-center brightness-90")}
+              className={cn(
+                "h-[82px] min-h-[82px] w-full rounded-xl object-cover text-center brightness-90 md:h-[264px] md:min-h-[264px] md:rounded-none",
+                isMain && "h-[264px] min-h-[264px] rounded-none"
+              )}
             />
           )}
-          <div className="absolute inset-0 z-20 flex w-full flex-col items-start justify-end p-6 ">
+          <div
+            className={cn(
+              "absolute inset-0 z-20 hidden w-full flex-col items-start justify-end p-6 md:flex",
+              isMain && "flex"
+            )}
+          >
             <div className="flex w-full flex-wrap justify-between">
               {tagsPosition === "over" && (
                 <div className="flex gap-2">
@@ -93,13 +105,14 @@ export function ArticleCard({
         </div>
         <div
           className={cn(
-            "flex flex-1 flex-col  border border-gray-200 bg-white",
+            "flex flex-1 flex-col  border-gray-200 bg-white md:border",
             orientation === "vertical" && "rounded-b-xl border-t-0",
-            orientation === "horizontal" && "rounded-r-xl border-l-0"
+            orientation === "horizontal" && "rounded-r-xl border-l-0",
+            isMain && "border"
           )}
         >
           {tagsPosition === "under" && tags?.length > 0 && (
-            <div className="flex  gap-2 p-5 pb-2">
+            <div className={cn("hidden gap-2 p-5 pb-2 md:flex", isMain && "flex")}>
               {mainTag && (
                 <Tag key={mainTag} variant="light">
                   {mainTag}
@@ -117,19 +130,25 @@ export function ArticleCard({
               )}
             </div>
           )}
-          <div className="flex flex-1 flex-col justify-between  gap-5  p-5 pt-2 ">
+          <div
+            className={cn(
+              "flex flex-1 items-start gap-5  pt-0 md:flex-col  md:justify-between md:p-5 md:pt-2",
+              isMain && "flex-col justify-between p-5 pt-2"
+            )}
+          >
             <h2
               className={cn(
                 tagsPosition === "under" && "min-h-[80px] ",
-                lines === "1" && "line-clamp-1",
-                lines === "2" && "line-clamp-2",
-                lines === "3" && "line-clamp-3",
-                "text-[1.5rem] font-bold leading-10 tracking-[1px]"
+                lines === "1" && "md:line-clamp-1",
+                lines === "2" && "md:line-clamp-2",
+                lines === "3" && "md:line-clamp-3",
+                "line-clamp-3 text-lg font-bold tracking-[1px] md:text-[1.5rem] md:leading-10"
               )}
             >
               {title}
             </h2>
             <ArticlePublishDetails
+              className={cn("hidden md:flex", isMain && "flex")}
               imageUrl={author.imageUrl}
               author={author.name}
               publicationDate={publicationDate}

src/components/ArticleCard/ArticlePublishDetails.tsx

@@ -3,6 +3,7 @@ import { cn } from "@/utils/cn"
 import { formatDate } from "@/utils/formatDate"
 
 type ArticlePublishDetailsProps = {
+  className?: string
   author: string
   publicationDate: string | null | Date
   imageUrl?: string
@@ -14,13 +15,15 @@ export function ArticlePublishDetails({
   publicationDate,
   imageUrl,
   variant = "dark",
+  className = "",
 }: ArticlePublishDetailsProps) {
   return (
     <div
       className={cn(
         variant === "dark" && " text-custom-dim",
         variant === "light" && " text-gray-500",
-        "flex items-center gap-2 whitespace-nowrap text-center text-sm"
+        "flex items-center gap-2 whitespace-nowrap text-center text-sm",
+        className
       )}
       style={{ textShadow: variant === "dark" ? "0px 1px 2px rgba(26, 26, 27, 1)" : undefined }}
     >

src/components/ArticleCard/HeroArticleCard.tsx

@@ -70,7 +70,7 @@ export function HeroArticleCard({
             </div>
             <div className="flex flex-col justify-around gap-5">
               <h2
-                className=" text-[1.8rem] font-bold leading-10 tracking-[1px]"
+                className=" text-[1.8rem] font-bold leading-7 tracking-[1px] md:leading-10"
                 style={{ textShadow: "0px 1px 4px rgba(26, 26, 27, 1)" }}
               >
                 {title}

src/components/ArticlesGrid/ArticlesGrid.tsx

@@ -1,4 +1,5 @@
 import { Locale } from "@/i18n/i18n"
+import { cn } from "@/utils/cn"
 import { ArticleCard, hygraphArticleToCardProps } from "../ArticleCard/ArticleCard"
 
 type Nullable<T extends object> = T | null
@@ -29,14 +30,13 @@ type ArtilcesGridProps = {
   articles: Articles
   locale: Locale
   cardsOrientation?: "vertical" | "horizontal"
-  columns?: number
+  className?: string
 }
 
-export function ArticlesGrid({ articles, locale, cardsOrientation, columns = 3 }: ArtilcesGridProps) {
+export function ArticlesGrid({ articles, locale, cardsOrientation, className }: ArtilcesGridProps) {
   if (!articles || articles.length === 0) return <p>No Articles Found!</p>
-  const columnsStyle = `grid-cols-${columns}`
   return (
-    <div className={`grid ${columnsStyle} gap-8`}>
+    <div className={cn(`grid gap-8 md:grid-cols-3`, className)}>
       {articles.map((article) => {
         return (
           <ArticleCard

src/components/CategoryArticles/CategoryArticlesInfinite.tsx

@@ -45,7 +45,12 @@ export function RecentArticlesInfinite({ initialArticles, category }: CategoryAr
 
   return (
     <>
-      <ArticlesGrid cardsOrientation="horizontal" columns={2} locale={locale} articles={articles} />
+      <ArticlesGrid
+        cardsOrientation="horizontal"
+        className="md:grid-cols-1 lg:grid-cols-2"
+        locale={locale}
+        articles={articles}
+      />
       {hasNextPage && (
         <Button className="mt-16 w-full p-4" disabled={isFetchingNextPage} onClick={() => fetchNextPage()}>
           {buttonText}

src/components/HighlightedArticles/HighlightedArticles.tsx

@@ -12,7 +12,7 @@ export async function HighlightedArticles({ title, articles, locale }: Highlight
   return (
     <section className="w-full">
       <h2 className="py-12 pb-8 text-3xl font-bold">{title}</h2>
-      <div className="grid grid-cols-2 gap-5">
+      <div className="grid gap-5 md:grid-cols-2">
         {articles.map((article) => {
           return (
             <ArticleCard

src/components/HighlightedCategoryArticles/HighlightedCategoryArticles.tsx

@@ -16,7 +16,7 @@ export async function HighlightedCategoryArticles({ locale, title, categoryId }:
   return (
     <section className="w-full">
       <h2 className="py-12 pb-8 text-3xl font-bold">{title}</h2>
-      <div className="grid grid-cols-2 gap-5">
+      <div className="grid gap-5 lg:grid-cols-2">
         {articles.map((article) => {
           return (
             <ArticleCard

src/components/RecentArticles/RecentArticlesInfinite.tsx

@@ -45,7 +45,7 @@ export function RecentArticlesInfinite({ initialArticles }: RecentArticlesInfini
   return (
     <section className="flex flex-col gap-5">
       <ArticleCard article={hygraphArticleToCardProps(firstArticle)} orientation="horizontal" locale={locale} />
-      <div className="grid grid-cols-3 gap-5">
+      <div className="grid gap-5 md:grid-cols-3">
         {otherArticles.map((article) => {
           return (
             <ArticleCard key={`recent-${article.id}`} article={hygraphArticleToCardProps(article)} locale={locale} />

src/components/Search/SearchDialog.tsx

@@ -46,7 +46,7 @@ function SearchDialogContent() {
       </DialogTrigger>
       <Popover>
         <InstantSearch searchClient={algoliaClient} indexName={`articles-${lang}`}>
-          <DialogContent className="bottom-auto top-[10%] max-h-[80vh] translate-y-[0%]  overflow-auto bg-gray-100 sm:max-w-2xl">
+          <DialogContent className="bottom-auto top-[10%] max-h-[80vh] translate-y-[0%] overflow-auto bg-gray-100 sm:max-w-2xl">
             <DialogHeader className="border-b bg-white p-4">
               <RefinementCombobox attribute={"tags"} />
               <DebouncedSearchBox />

src/components/TrendingArticles/TrendingArticles.tsx

@@ -25,7 +25,7 @@ export async function TrendingArticles({ locale, title }: TrendingArticlesProps)
       {otherTrendingArticles.length > 0 && (
         <>
           <h2 className="py-12 pb-8 text-3xl font-bold">{title}</h2>
-          <div className={cn(isTwoRowLayout ? "grid-cols-3" : "grid-cols-2", "grid  gap-5")}>
+          <div className={cn(isTwoRowLayout ? "md:grid-cols-3" : "md:grid-cols-2", "grid  grid-cols-1 gap-5")}>
             <div className="col-span-2 flex flex-col gap-5">
               {mainArticle && (
                 <div className="h-[388px]">
@@ -34,11 +34,12 @@ export async function TrendingArticles({ locale, title }: TrendingArticlesProps)
                     tagsPosition="over"
                     locale={locale}
                     lines={"1"}
+                    isMain={true}
                   />
                 </div>
               )}
               {secondaryArticles.length > 0 && (
-                <div className="flex h-[490px] gap-5">
+                <div className="flex flex-col gap-5 lg:h-[490px] lg:flex-row">
                   {secondaryArticles.map((article) => {
                     return (
                       <ArticleCard

src/components/ui/Dialog/Dialog.tsx

@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border shadow-lg duration-200 sm:rounded-lg md:w-full",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-[90%] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-hidden rounded-xl border shadow-lg duration-200 sm:rounded-lg md:w-full md:w-full",
         className
       )}
       {...props}