Improve page layouts for responsive (#152)

### Description: This PR makes some adjustments to all views on site pages to improve their layouts on smaller devices like tablets and mobile. There's still some pending work to do, as the build step of the site is messing some styles (I need to check a bit on the webpack plugins minimizing stuff and such to find the culprit). It also changes a bit the way the `StarsCount` component was being shown to use an SVG icon instead of the star ⭐ emoji. It also removes some unused code that was there commented or directly unused. This fixes #150. ### Preview: ![imagen](https://user-images.githubusercontent.com/7753447/229835275-29917a97-1ec8-4c59-84fa-d674fec9d2c3.png) ![imagen](https://user-images.githubusercontent.com/7753447/229835541-8b7d6f5e-42f0-4ce0-8f76-46bc5d07fa62.png)
arrow-kt · Apr 4, 2023 · a113bc7 · a113bc7
1 parent 7a8c568
commit a113bc7
Show file tree

Hide file tree

Showing 24 changed files with 201 additions and 258 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -25,8 +25,6 @@ const createConfig = async () => {
     url: 'https://arrow-kt.io',
     baseUrl: '/',
     trailingSlash: true,
-    // GitHub pages deployment config.
-    // If you aren't using GitHub pages, you don't need these.
     organizationName: 'arrow-kt', // Usually your GitHub org/user name.
     projectName: 'arrow-website', // Usually your repo name.
 
@@ -178,20 +176,11 @@ const createConfig = async () => {
                 },
               ],
             },
-//            {
-//              to: '/training',
-//              position: 'right',
-//              label: 'Training',
-//            },
             {
               type: 'dropdown',
               position: 'right',
               label: 'Community',
-              items: [
-//                { to: '/community/support', label: 'Support' },
-                { to: '/community/blog', label: 'Blog' },
-//                { to: '/community/events', label: 'Events' },
-              ],
+              items: [{ to: '/community/blog', label: 'Blog' }],
             },
           ],
         },
@@ -208,10 +197,6 @@ const createConfig = async () => {
                   label: 'API Docs',
                   href: 'https://apidocs.arrow-kt.io',
                 },
-//                {
-//                  label: 'Training',
-//                  to: '/training',
-//                },
                 {
                   label: 'Community',
                   to: '/community/support',
@@ -276,14 +261,6 @@ const createConfig = async () => {
             {
               title: 'Community',
               items: [
-//                {
-//                  label: 'Support',
-//                  to: '/community/support',
-//                },
-//                {
-//                  label: 'Events',
-//                  to: '/community/events',
-//                },
                 {
                   label: 'Blog',
                   to: '/community/blog',

diff --git a/src/components/Blog/BlogListPage/blog-list-page.module.css b/src/components/Blog/BlogListPage/blog-list-page.module.css
@@ -7,3 +7,15 @@
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
 }
+
+@media (--ifm-narrow-window) {
+  .projectsContainer {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (--arrow-mobile-window) {
+  .projectsContainer {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/components/Blog/BlogTagsPostsPage/blog-tags-posts-page.module.css b/src/components/Blog/BlogTagsPostsPage/blog-tags-posts-page.module.css
@@ -7,3 +7,15 @@
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
 }
+
+@media (--ifm-narrow-window) {
+  .projectsContainer {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (--arrow-mobile-window) {
+  .projectsContainer {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/components/Hero/hero.module.css b/src/components/Hero/hero.module.css
@@ -42,7 +42,6 @@
   }
 }
 
-
 .container {
   max-width: 700px;
 }
@@ -53,6 +52,12 @@ u {
   white-space: nowrap;
 }
 
+@media (--arrow-mobile-window) {
+  u {
+    white-space: normal;
+  }
+}
+
 .subtitle {
   font-weight: normal;
 }
@@ -64,3 +69,10 @@ u {
   justify-content: center;
   margin-top: calc(2 * var(--ifm-spacing-vertical));
 }
+
+@media (--arrow-mobile-window) {
+  .ctaList {
+    flex-direction: column;
+  }
+}
+
diff --git a/src/components/ImageCard/ImageCard.tsx b/src/components/ImageCard/ImageCard.tsx
@@ -22,7 +22,7 @@ export function ImageCardBase({
   subtitle,
   image = useBaseUrl('/img/sample-image.jpg'),
   body = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie',
-  href = '/about/use-cases',
+  href,
   landscapeMode = false,
 }: ImageCardOptionsProps) {
   return (

diff --git a/src/components/QuoteCard/QuoteCard.tsx b/src/components/QuoteCard/QuoteCard.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 import styles from './quote-card.module.css';
 
 export interface QuoteCardProps {
@@ -9,17 +11,23 @@ export interface QuoteCardProps {
   body?: string;
 }
 
-export function QuoteCard({
-  name = 'Francisco Díaz',
-  position = 'Principal at Xebia Functional',
-  body,
-}: QuoteCardProps) {
+export function QuoteCard({ name, position, image, body }: QuoteCardProps) {
   return (
     <div className={`card ${styles.quoteCard}`}>
       <div className="card__body">
         <p>{body}</p>
       </div>
       <div className={`card__footer avatar`}>
+        {image && (
+          <div className="avatar__photo-wrapper">
+            <img
+              className="avatar__photo"
+              src={useBaseUrl(`/img/${image}`)}
+              alt={name}
+              title={name}
+            />
+          </div>
+        )}
         <div className="avatar__intro">
           <div className="avatar__name">{name}</div>
           <small className="avatar__subtitle">{position}</small>

diff --git a/src/components/QuoteCard/quote-card.module.css b/src/components/QuoteCard/quote-card.module.css
@@ -24,6 +24,7 @@
 
 :local(.quoteCard) :global(.card__body) {
   padding-top: calc(2.5 * var(--ifm-card-vertical-spacing));
+  font-size: 0.9rem;
 }
 
 :local(.quoteCard) :global(.avatar__photo-wrapper) {

diff --git a/src/components/StarsCount/StarsCount.tsx b/src/components/StarsCount/StarsCount.tsx
@@ -10,10 +10,12 @@ import styles from './stars-count.module.css';
 
 const githubLink = 'https://github.com/arrow-kt/arrow';
 const icon = '/img/icon-social-github.svg';
+const starIcon = '/img/icon-star.svg';
 
 export const StarsCount = () => {
   const isBrowser = useIsBrowser();
   const iconPath = useBaseUrl(`${icon}`);
+  const starIconPath = useBaseUrl(`${starIcon}`);
   const { githubInfo } = useGithubInfo();
 
   if (!isBrowser) {
@@ -33,10 +35,17 @@ export const StarsCount = () => {
             src={iconPath}
             className={styles.icon}
             alt="GitHub"
-            height="24px"
-            width="24px"
+            height="20px"
+            width="20px"
+          />
+          arrow • {stars.toLocaleString()}
+          <img
+            src={starIconPath}
+            className={styles.starIcon}
+            alt="Star"
+            height="16px"
+            width="16px"
           />
-          arrow • {stars.toLocaleString()} <span>⭐</span>
         </Link>
       )}
     </>

diff --git a/src/components/StarsCount/stars-count.module.css b/src/components/StarsCount/stars-count.module.css
@@ -1,8 +1,19 @@
 .link {
   font-weight: 500;
+  font-size: 0.9rem;
+  white-space: nowrap;
 }
 
 .icon {
-  vertical-align: top;
+  vertical-align: text-top;
   margin-right: 0.4rem;
+}
+
+.starIcon {
+  margin-left: 0.4rem;
+  vertical-align: text-top;
+}
+
+.link:hover .icon, .link:hover .starIcon  {
+  filter: brightness(0.8);
 }
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -20,12 +20,6 @@ table {
   background: var(--background);
 }
 
-/* To set the ToC properly aligned */
-.plugin-docs main .theme-doc-toc-desktop {
-  top: var(--ifm-navbar-height);
-  margin-top: -1rem;
-}
-
 /* Navbar */
 .plugin-docs .navbar {
   border-bottom: 1px solid var(--ifm-toc-border-color);
@@ -51,6 +45,7 @@ table {
 /* Search */
 .navbar__search-input {
   border-radius: var(--ifm-global-radius);
+  transition: width var(--ifm-transition-fast);
 }
 
 .navbar__search[class*='searchBarContainer'] {
@@ -96,6 +91,56 @@ table {
   color: var(--ifm-link-hover-color);
 }
 
+/* Navbar sidebar */
+.navbar-sidebar__item {
+  padding: 0
+}
+
+.navbar-sidebar__back {
+  margin: 0;
+  padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+  top: 0;
+  background: var(--ifm-navbar-background-color);
+  color: var(--ifm-menu-color);
+}
+
+.navbar-sidebar__back:hover {
+  background: var(--ifm-menu-color-background-hover);
+}
+
+.navbar-sidebar__close {
+  transition: transform var(--ifm-transition-fast);
+}
+
+.navbar-sidebar__close:hover {
+  transform: rotateZ(90deg);
+}
+
+.navbar-sidebar .menu__link {
+  border-radius: var(--ifm-global-radius);
+}
+
+.navbar-sidebar .menu__link:hover {
+  cursor: pointer;
+}
+
+.menu__link.menu__link--sublist.menu__link--active {
+  color: var(--ifm-menu-color);
+}
+
+.menu__list-item-collapsible--active .menu__link.menu__link--active {
+  color: var(--ifm-menu-color-active);
+}
+
+/* To set the ToC properly aligned */
+.plugin-docs main .theme-doc-toc-desktop {
+  top: var(--ifm-navbar-height);
+  margin-top: -1rem;
+}
+
+/* Collapsible ToC */ 
+
+
 /* Pagination bottom buttons not needed */
 .plugin-docs .pagination-nav {
   display: none;
@@ -229,11 +274,13 @@ code {
   color: var(--ifm-menu-color-active);
 }
 
+
 .menu__list-item-collapsible {
   border-radius: var(--ifm-global-radius);
 }
 
-.plugin-docs .theme-doc-sidebar-container .menu__list-item-collapsible--active {
+.plugin-docs .theme-doc-sidebar-container .menu__list-item-collapsible--active,
+.theme-doc-sidebar-menu .menu__list-item-collapsible--active {
   background: var(--ifm-menu-color-background-active);
 }
 

diff --git a/src/css/vars.css b/src/css/vars.css
@@ -97,3 +97,5 @@
 
 /* Custom Media query mimicking the one from Infima */
 @custom-media --ifm-narrow-window (max-width: 996px);
+
+@custom-media --arrow-mobile-window (max-width: 768px);
diff --git a/src/pages/about/use-cases/index.tsx b/src/pages/about/use-cases/index.tsx
diff --git a/src/pages/about/what-is-arrow/index.tsx b/src/pages/about/what-is-arrow/index.tsx
diff --git a/src/pages/community/events/events.module.css b/src/pages/community/events/events.module.css
@@ -2,44 +2,15 @@
   margin-bottom: calc(2 * var(--ifm-spacing-vertical));
 }
 
-.textContainer {
-  max-width: 480px;
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* composes: container from global;
-  composes: text--center from global; */
-}
-
-.featuresContainer,
-.quotesContainer {
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* https://github.com/css-modules/css-modules#composing-from-other-files */
-  /* composes: container from global; */
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
-}
-
 .projectsContainer {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
 }
 
-.navigationContainer {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
-}
-
-.usageWrapperContainer {
-  background-color: var(--ifm-color-primary-light);
+@media (--ifm-narrow-window) {
+  .projectsContainer {
+    grid-template-columns: 1fr;
+  }
 }
 
-.usageContainer {
-  display: flex;
-  align-content: center;
-  justify-content: space-between;
-  padding: calc(2 * var(--ifm-spacing-vertical)) var(--ifm-spacing-horizontal);
-  flex-wrap: wrap;
-  row-gap: var(--ifm-spacing-vertical);
-}