fix: css alignment and text ellipsis (#101)

Signed-off-by: Antonio Sonis <[email protected]>
platformatic · Dec 11, 2023 · bc49c6f · bc49c6f
1 parent 60bf8cf
commit bc49c6f
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 45 deletions.
diff --git a/src/components/Quotes/index.js b/src/components/Quotes/index.js
@@ -1,12 +1,12 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
+import React from 'react'
+import clsx from 'clsx'
+import styles from './styles.module.css'
 
 const quotesData = [{
-  name: "James Snell",
-  title: "Node.js Technical Steering Committee",
-  quote: "Platformatic DB is a great example of how to build a great developer experience on top of a database.",
-  avatar: "https://avatars.githubusercontent.com/u/439929?s=460&v=4"
+  name: 'James Snell',
+  title: 'Node.js Technical Steering Committee',
+  quote: 'Platformatic DB is a great example of how to build a great developer experience on top of a database.',
+  avatar: 'https://avatars.githubusercontent.com/u/439929?s=460&v=4'
   /*
 }, {
   name: "Feross Aboukhadijeh",
@@ -20,64 +20,67 @@ const quotesData = [{
   avatar: "https://avatars.githubusercontent.com/u/4624?s=460&v=4"
   */
 }, {
-  name: "Jan Lehnardt",
-  title: "Makes @couchdb & #offlinefirst. Made @jsconfeu @greenkeeperio @hoodiehq. CEO at @neighbourh00die.",
+  name: 'Jan Lehnardt',
+  title: 'Makes @couchdb & #offlinefirst. Made @jsconfeu @greenkeeperio @hoodiehq. CEO at @neighbourh00die.',
   quote: "I always wondered why building APIs isn't that easy.",
-  avatar: "https://avatars.githubusercontent.com/u/11321?s=460&v=4"
+  avatar: 'https://avatars.githubusercontent.com/u/11321?s=460&v=4'
 }, {
-  name: "David Mark Clements",
-  title: "Dave at Holepunch. Tech lead/primary author of OpenJS Foundation JSNAD & JSNSD Certifications. (Original) Author of Node Cookbook.",
-  quote: "A platform that simplifies and streamlines developer collaboration within an organization can revolutionise the organization itself. This is digital transformation distilled to its purest and easiest form.",
-  avatar: "https://avatars.githubusercontent.com/u/1190716?s=460&v=4"
+  name: 'David Mark Clements',
+  title: 'Dave at Holepunch. Tech lead/primary author of OpenJS Foundation JSNAD & JSNSD Certifications. (Original) Author of Node Cookbook.',
+  quote: 'A platform that simplifies and streamlines developer collaboration within an organization can revolutionise the organization itself. This is digital transformation distilled to its purest and easiest form.',
+  avatar: 'https://avatars.githubusercontent.com/u/1190716?s=460&v=4'
 }, {
-  name: "Manuel Spigolon",
-  title: "Senior Software Engineer at NearForm. Fastify Collaborator. Author of \"Accelerating Server-Side Development with Fastify\".",
-  quote: "After building this small project, I think Platformatic DB is not just an ORM as it may seem but an enhanced version of Fastify. It implements a lot of good practices and boring stuff that enable us to spin up a Fastify instance!",
-  avatar: "https://avatars.githubusercontent.com/u/11404065?v=4"
+  name: 'Manuel Spigolon',
+  title: 'Senior Software Engineer at NearForm. Fastify Collaborator. Author of "Accelerating Server-Side Development with Fastify".',
+  quote: 'After building this small project, I think Platformatic DB is not just an ORM as it may seem but an enhanced version of Fastify. It implements a lot of good practices and boring stuff that enable us to spin up a Fastify instance!',
+  avatar: 'https://avatars.githubusercontent.com/u/11404065?v=4'
 }]
 
-function Quotes() {
+function Quotes () {
   return (
     <section className={styles.section__quotes}>
-      <div class="container container__quotes">
-        <div class="row">
-          <div class="col col--12">
+      <div class='container container__quotes'>
+        <div class='row'>
+          <div class='col col--12'>
             <h1>Quotes</h1>
           </div>
           <div className={styles.quotes}>
-            {quotesData.map((quote, index) => ( 
-            <div className={styles.quote}>
-              <div class="card">
-                <div class="card__header">
-                  <div class="avatar">
-                    <img
-                      class="avatar__photo"
-                      src={quote.avatar} />
-                    <div class="avatar__intro">
-                      <div class="avatar__name">{quote.name}</div>
-                      <small class="avatar__subtitle">
-                        {quote.title}
-                      </small>
+            {quotesData.map((quote, index) => (
+              <div className={styles.quote}>
+                <div class='card'>
+                  <div class='card__header'>
+                    <div class='avatar'>
+                      <img
+                        class='avatar__photo'
+                        src={quote.avatar}
+                      />
+                      <div class='avatar__intro'>
+                        <div class='avatar__name'>{quote.name}</div>
+                        <div class='container__avatar-subtitle' title={quote.title}>
+                          <small class='avatar__subtitle'>
+                            {quote.title}
+                          </small>
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div class="card__body">
-                  <p> {quote.quote} </p>
+                  <div class='card__body' title={quote.quote}>
+                    <p> {quote.quote} </p>
+                  </div>
                 </div>
               </div>
-            </div>
             ))}
           </div>
-          
+
         </div>
-        <div class="row padding--lg">
-          <div class="col col--12 padding--lg">
+        <div class='row padding--lg'>
+          <div class='col col--12 padding--lg'>
             <br />
           </div>
         </div>
       </div>
     </section>
-  );
+  )
 }
 
-export default Quotes;
+export default Quotes
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -67,24 +67,61 @@ main a {
 
 /* Quotes section */
 .container__quotes .card {
+  min-height: 260px;
+  max-height: 260px;
   height: 260px;
 }
 
 .container__quotes .card__header {
   height: 120px;
 }
 
-.container__quotes .card__header .avatar__subtitle {
+.container__quotes .card__header .container__avatar-subtitle .avatar__subtitle {
   color: grey;
 }
 
+.container__quotes .card__body,
+.container__quotes .card__header .container__avatar-subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.container__quotes .card__header .container__avatar-subtitle {
+  -webkit-line-clamp: 3;
+}
+
+.container__quotes .card__body {
+  -webkit-line-clamp: 4;
+  max-height: 120px;
+}
+
+
+
+
 @media screen and (max-width: 996px) {
   .container__quotes .card {
     height: auto;
+    min-height: unset;
+    max-height: unset;
   }
   .container__quotes .card__header {
+    min-height: unset;
+    max-height: unset;
     height: auto;
   }
+
+  .container__quotes .card__body,
+  .container__quotes .card__header .container__avatar-subtitle {
+    overflow: auto;
+    text-overflow: unset;
+    display: block;
+    -webkit-box-orient: unset;
+  }
+
+  .container__quotes .card__body {
+    max-height: unset;
+  }
 }
 
 .aspect-ratio-16-9 {