Merge pull request #48 from aymericingargiola/#17-Design

Design liste des talks
aperowebnancy · Oct 6, 2020 · 9da4629 · 9da4629
2 parents be4ba40 + 84eee0e
commit 9da4629
Show file tree

Hide file tree

Showing 16 changed files with 434 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
         "next": "9.5.2",
         "prop-types": "^15.7.2",
         "react": "16.13.1",
-        "react-dom": "16.13.1"
+        "react-dom": "16.13.1",
+        "sass": "^1.26.11"
     },
     "devDependencies": {
         "@testing-library/jest-dom": "^5.11.4",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,4 +1,5 @@
 import '../styles/tailwind.css';
+import '../styles/sass/main.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';

diff --git a/pages/talks.js b/pages/talks.js
@@ -7,6 +7,14 @@ import { getAllTalks } from '../lib/requestMdxFiles';
 import { MeetupIcon } from '../components/Icons';
 import { Seo } from '../components/Seo';
 
+function datesAreOnSameDay(firstDate, secondDate) {
+    return (
+        firstDate.getFullYear() === secondDate.getFullYear() &&
+        firstDate.getMonth() === secondDate.getMonth() &&
+        firstDate.getDate() === secondDate.getDate()
+    );
+}
+
 export default function Talks({ talks }) {
     return (
         <>
@@ -37,33 +45,82 @@ export default function Talks({ talks }) {
                         Un sujet ? N&apos;hésitez pas à nous contacter pour nous le soumettre.
                     </p>
                 </div>
-                <ul className="divide-y divide-gray-200">
+                <ul className="talks-list flex flex-wrap -mx-2">
                     {talks.map(({ date, slug, frontMatter }) => {
+                        const isNextTalk = new Date() - new Date(date) < 0;
+                        const isCurrentTalk = datesAreOnSameDay(new Date(), new Date(date));
+                        const statusTalk = isNextTalk
+                            ? 'Prochainement'
+                            : isCurrentTalk
+                            ? "Aujourd'hui"
+                            : null;
                         return (
-                            <li key={slug} className="py-12">
-                                <article className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
-                                    <dl>
-                                        <dt className="sr-only">Published on</dt>
-                                        <dd className="text-base leading-6 font-medium">
-                                            <time dateTime={date}>
-                                                {new Date(date).toLocaleDateString('fr-FR', {
-                                                    year: 'numeric',
-                                                    month: 'short',
-                                                    day: 'numeric',
-                                                })}
-                                            </time>
-                                        </dd>
-                                    </dl>
-                                    <div className="space-y-5 xl:col-span-3">
-                                        <div className="space-y-6">
-                                            <h2 className="text-2xl leading-8 font-bold tracking-tight">
+                            <li
+                                key={slug}
+                                className={`talk w-full ${
+                                    isNextTalk || isCurrentTalk ? 'mb-6 special-talk' : 'mb-4'
+                                } ${
+                                    isNextTalk
+                                        ? 'next-talk'
+                                        : isCurrentTalk
+                                        ? 'current-talk'
+                                        : 'md:w-1/2 lg:w-1/3 xl:w-1/4'
+                                }`}
+                            >
+                                <article className="card h-full p-4 pt-8 mx-2 rounded-lg relative shadow-md">
+                                    <ul className="tags absolute top-0 flex">
+                                        {statusTalk && (
+                                            <li className="tag">
+                                                <div className="tag-content leading-3 overflow-hidden flex relative rounded-b-lg next-talk text-sm font-medium text-white p-2 pb-1 pt-2">
+                                                    <span>{statusTalk}</span>
+                                                </div>
+                                            </li>
+                                        )}
+                                        <li className="tag">
+                                            <div className="tag-content leading-3 overflow-hidden flex relative rounded-b-lg date p-2 pb-1 pt-2">
+                                                <dl>
+                                                    <dt className="sr-only">Published on</dt>
+                                                    <dd className="text-sm font-medium text-white">
+                                                        <time dateTime={date}>
+                                                            {new Date(date).toLocaleDateString(
+                                                                'fr-FR',
+                                                                {
+                                                                    year: 'numeric',
+                                                                    month: 'short',
+                                                                    day: 'numeric',
+                                                                },
+                                                            )}
+                                                        </time>
+                                                    </dd>
+                                                </dl>
+                                            </div>
+                                        </li>
+                                        <li className="tag">
+                                            <div className="tag-content leading-3 overflow-hidden flex relative rounded-b-lg edition text-sm font-medium text-white p-2 pb-1 pt-2">
+                                                <span>#{frontMatter.edition}</span>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                    <div className="informations flex flex-col xl:w-11/12">
+                                        <div className="space-y-2 mb-6">
+                                            <h2
+                                                className={`leading-8 font-bold tracking-tight ${
+                                                    isNextTalk || isCurrentTalk
+                                                        ? 'text-3xl'
+                                                        : 'text-2xl'
+                                                }`}
+                                            >
                                                 <Link href={slug}>
-                                                    <a className="text-gray-900">
-                                                        {frontMatter.title} #{frontMatter.edition}
+                                                    <a className="text-gray-900 hover:text-red-600">
+                                                        {frontMatter.title}
                                                     </a>
                                                 </Link>
                                             </h2>
-                                            <div className="max-w-none text-gray-700">
+                                            <div
+                                                className={`max-w-none text-gray-700 ${
+                                                    isNextTalk || isCurrentTalk ? 'text-xl' : ''
+                                                }`}
+                                            >
                                                 {frontMatter.description}
                                             </div>
                                         </div>
@@ -76,7 +133,7 @@ export default function Talks({ talks }) {
                                                     Lire plus &rarr;
                                                 </a>
                                             </Link>
-                                            {new Date() - new Date(date) < 0 && (
+                                            {statusTalk && (
                                                 <div className="flex mx-4">
                                                     <a
                                                         href={frontMatter.meetupLink}

diff --git a/styles/sass/abstracts/_mixins.scss b/styles/sass/abstracts/_mixins.scss
@@ -0,0 +1,3 @@
+@import "./mixins/breakpoints";
+@import "./mixins/colors";
+@import "./mixins/spacing";
diff --git a/styles/sass/abstracts/_variables.scss b/styles/sass/abstracts/_variables.scss
@@ -0,0 +1,4 @@
+@import "./vars/breakpoints";
+@import "./vars/colors";
+@import "./vars/spacing";
+@import "./vars/transitions";
diff --git a/styles/sass/abstracts/mixins/_breakpoints.scss b/styles/sass/abstracts/mixins/_breakpoints.scss
@@ -0,0 +1,71 @@
+$screen-xs: map-get($grid-breakpoints, "xs");
+$screen-sm: map-get($grid-breakpoints, "sm");
+$screen-md: map-get($grid-breakpoints, "md");
+$screen-lg: map-get($grid-breakpoints, "lg");
+$screen-xl: map-get($grid-breakpoints, "xl");
+
+@mixin xs-max {
+    @media screen and (max-width: #{$screen-sm - 1}) {
+        @content;
+    }
+}
+
+@mixin sm-min {
+    @media screen and (min-width: #{$screen-sm}) {
+        @content;
+    }
+}
+
+@mixin sm-max {
+    @media screen and (max-width: #{$screen-md - 1}) {
+        @content;
+    }
+}
+
+@mixin sm-only {
+    @media screen and (min-width: #{$screen-sm}) and (max-width: #{$screen-md - 1}) {
+        @content;
+    }
+}
+
+@mixin md-min {
+    @media screen and (min-width: #{$screen-md}) {
+        @content;
+    }
+}
+
+@mixin md-max {
+    @media screen and (max-width: #{$screen-lg - 1}) {
+        @content;
+    }
+}
+
+@mixin md-only {
+    @media screen and (min-width: #{$screen-md}) and (max-width: #{$screen-lg - 1}) {
+        @content;
+    }
+}
+
+@mixin lg-min {
+    @media screen and (min-width: #{$screen-lg}) {
+        @content;
+    }
+}
+
+@mixin lg-max {
+    @media screen and (max-width: #{$screen-xl - 1}) {
+        @content;
+    }
+}
+
+@mixin lg-only {
+    @media screen and (min-width: #{$screen-lg}) and (max-width: #{$screen-xl - 1}) {
+        @content;
+    }
+}
+
+@mixin xl-min {
+    @media screen and (min-width: #{$screen-xl}) {
+        @content;
+    }
+}
diff --git a/styles/sass/abstracts/mixins/_colors.scss b/styles/sass/abstracts/mixins/_colors.scss
@@ -0,0 +1,15 @@
+@mixin boxShadow(
+    $blur: $box-shadow-blur-default,
+    $opacity: $box-shadow-opacity-default,
+    $color: $gray-900,
+    $translate: none,
+    $translate-direction: none
+) {
+    @if ($translate == none) {
+        box-shadow: 0px 0px $blur rgba($color, $opacity);
+    } @else if ($translate-direction == y) {
+        box-shadow: 0px $translate $blur rgba($color, $opacity);
+    } @else if ($translate-direction == x) {
+        box-shadow: $translate 0px $blur rgba($color, $opacity);
+    }
+}
diff --git a/styles/sass/abstracts/mixins/_spacing.scss b/styles/sass/abstracts/mixins/_spacing.scss
@@ -0,0 +1,23 @@
+@function getTailwindSpacingVal($base-number: 1) {
+    $number: $base-number * $tailwind-spacing-base;
+    @return $number;
+}
+
+@mixin tailwindSpacing($type: padding, $direction: all, $base-number: 1) {
+    $number: getTailwindSpacingVal($base-number);
+    @if ($direction == all) {
+        #{$type}: $number $number $number $number;
+    } @else if ($direction == y) {
+        #{$type}: $number 0 $number 0;
+    } @else if ($direction == x) {
+        #{$type}: 0 $number 0 $number;
+    } @else if ($direction == t) {
+        #{$type}-top: $number;
+    } @else if ($direction == b) {
+        #{$type}-bottom: $number;
+    } @else if ($direction == l) {
+        #{$type}-left: 0;
+    } @else if ($direction == r) {
+        #{$type}-right: $number;
+    }
+}
diff --git a/styles/sass/abstracts/vars/_breakpoints.scss b/styles/sass/abstracts/vars/_breakpoints.scss
@@ -0,0 +1,7 @@
+$grid-breakpoints: (
+  xs: 0,
+  sm: 640px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px
+);