Merge pull request #188 from 30-seconds/ux-improv-q3

Fixes #187 Fixes #186 Resolves #158
Chalarangelo · Sep 29, 2020 · 275479b · 275479b
2 parents 7926bdd + 4498f11
commit 275479b
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 35 deletions.
diff --git a/src/build/snippet/parseMarkdown.js b/src/build/snippet/parseMarkdown.js
@@ -41,6 +41,30 @@ const transformers = [
     matcher: /<blockquote>\s*\n*\s*<p>([\s\S]*?)<\/p>\s*\n*\s<\/blockquote>/g,
     replacer: '<blockquote class="blog-quote">$1</blockquote>',
   },
+  // Convert blog titles h3 and below to the appropriate elements
+  {
+    blogType: 'any',
+    matcher: /<h([123])>([\s\S]*?)<\/h\d>/g,
+    replacer: '<h3 class="blog-body-title">$2</h3>',
+  },
+  // Convert blog titles h4 and above to the appropriate elements
+  {
+    blogType: 'any',
+    matcher: /<h([456])>([\s\S]*?)<\/h\d>/g,
+    replacer: '<h4 class="blog-body-title">$2</h4>',
+  },
+  // Convert blog tables to the appropriate elements
+  {
+    blogType: 'any',
+    matcher: /<table>([\s\S]*?)<\/table>/g,
+    replacer: '<table class="blog-table">$1</table>',
+  },
+  // Convert blog cross tables to the appropriate elements
+  {
+    blogType: 'any',
+    matcher: /<table class="([^"]+)">\s*\n*\s*<thead>\s*\n*\s*<tr>\s*\n*\s*<th><\/th>/g,
+    replacer: '<table class="$1 with-primary-column"><thead><tr><th></th>',
+  },
   // Convert image credit to the appropriate element
   {
     blogType: 'any',

diff --git a/src/components/molecules/footer/_index.scss b/src/components/molecules/footer/_index.scss
@@ -1,5 +1,5 @@
 footer {
-  margin: 2.5rem 1rem 0.75rem;
+  margin: 2.5rem 1rem 0rem;
   color: var(--fore-color);
   // Make at least as tall as the cookie consent popup
   // to ensure that the paginator is never hidden

diff --git a/src/components/molecules/paginator/index.jsx b/src/components/molecules/paginator/index.jsx
@@ -40,7 +40,7 @@ const Paginator = ({
     buttons = Array.from({ length: totalPages }, (v, i) => i + 1);
   else if (pageNumber <= 2)
     buttons = [1, 2, '...', totalPages];
-  else if (totalPages - pageNumber <= 2)
+  else if (totalPages - pageNumber <= 1)
     buttons = [1, '...', totalPages - 1, totalPages];
   else
     buttons = [1, '...', pageNumber, '...', totalPages];

diff --git a/src/components/organisms/shell/_index.scss b/src/components/organisms/shell/_index.scss
@@ -32,10 +32,10 @@ body {
 
   &::-webkit-scrollbar-thumb {
     background-color: var(--scrollbar-fore-color);
-    border-radius: 0.125rem;
+    border-radius: 0.25rem;
 
-    @media screen and (min-width: $layout-medium-breakpoint) {
-      border-radius: 0.25rem;
+    &:hover {
+      background-color: var(--scrollbar-fore-color-dark);
     }
   }
 }

diff --git a/src/components/organisms/shell/index.jsx b/src/components/organisms/shell/index.jsx
@@ -36,38 +36,45 @@ const Shell = ({
   isSettings = false,
   lastPageUrl,
   children,
-}) => (
-  <div className={ combineClassNames`page-container ${isDarkMode ? 'dark' : ''}` }>
-    <header
-      className='nav-bar'
-      role='navigation'
-      aria-label='Main'
-    >
-      <a className='nav-btn' href='/'>
-        <img
-          src='/assets/30s-icon.png'
-          alt={ literals.home }
-          className='nav-website-logo'
+}) => {
+  React.useEffect(() => {
+    if(isDarkMode) document.querySelector('body').classList.add('dark');
+    else document.querySelector('body').classList.remove('dark');
+  }, [isDarkMode]);
+
+  return (
+    <div className={ combineClassNames`page-container ${isDarkMode ? 'dark' : ''}` }>
+      <header
+        className='nav-bar'
+        role='navigation'
+        aria-label='Main'
+      >
+        <a className='nav-btn' href='/'>
+          <img
+            src='/assets/30s-icon.png'
+            alt={ literals.home }
+            className='nav-website-logo'
+          />
+        </a>
+        <Search isMainSearch={ isSearch } />
+        <a
+          className='nav-btn icon icon-settings'
+          href={ isSettings ? lastPageUrl ? lastPageUrl : '/' : '/settings' }
+          rel='nofollow'
+          title={ literals.settings }
         />
-      </a>
-      <Search isMainSearch={ isSearch } />
-      <a
-        className='nav-btn icon icon-settings'
-        href={ isSettings ? lastPageUrl ? lastPageUrl : '/' : '/settings' }
-        rel='nofollow'
-        title={ literals.settings }
-      />
-    </header>
-    <div className='content'>
-      { children }
-      <Footer />
+      </header>
+      <div className='content'>
+        { children }
+        <Footer />
+      </div>
+      {
+        typeof acceptsCookies === 'undefined' && process.env.ENV !== 'development' && !isBot ?
+          <CookieConsentPopup /> : null
+      }
     </div>
-    {
-      typeof acceptsCookies === 'undefined' && process.env.ENV !== 'development' && !isBot ?
-        <CookieConsentPopup /> : null
-    }
-  </div>
-);
+  );
+};
 
 Shell.propTypes = propTypes;
 

diff --git a/src/components/organisms/snippetCard/blogSnippetCard/_index.scss b/src/components/organisms/snippetCard/blogSnippetCard/_index.scss
@@ -3,10 +3,12 @@
 // Colors
 :root {
   --blog-quote-border-color: #212631;
+  --table-border-color: hsl(0, 0%, 87%);
 }
 
 .page-container.dark {
   --blog-quote-border-color: #7486af;
+  --table-border-color: hsl(0, 0%, 16%);
 }
 
 .snippet-card {
@@ -95,6 +97,45 @@
     font-weight: 300;
   }
 
+  h3.blog-body-title {
+    font-size: 1.125rem;
+    line-height: 2rem;
+    margin: 2rem 0.5rem 0rem;
+  }
+
+  h4.blog-body-title {
+    font-size: 1rem;
+    line-height: 2rem;
+    font-weight: 600;
+    margin: 2rem 0.5rem 0rem;
+  }
+
+  table.blog-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
+
+    &.with-primary-column {
+
+      tr > td:first-child {
+        font-weight: 600;
+        text-align: right;
+        padding: 0.5rem 1rem 0.5rem 0.5rem;
+      }
+    }
+
+    th {
+      font-weight: 600;
+      font-size: 1.125rem;
+    }
+
+    td, th {
+      text-align: center;
+      border: 1px solid var(--table-border-color);
+      padding: 0.5rem;
+    }
+  }
+
   p:last-child.blog-image-credit {
     font-size: 0.875rem;
     margin: 0 -1rem -1rem;

diff --git a/src/styles/_global_variables.scss b/src/styles/_global_variables.scss
@@ -10,6 +10,7 @@
   // Scrollbar
   --scrollbar-back-color: #e0e4f6;
   --scrollbar-fore-color: #666E8F;
+  --scrollbar-fore-color-dark: #555c77;
 }
 
 // Dark mode colors
@@ -19,10 +20,14 @@
   --fore-color-light: #acb1c3;
   --fore-color-dark: #c5cadd;
   --fore-color-darker: #fcfcfd;
+}
 
+body.dark {
+  background: #12151c;  // Hack to remove white space
   // Scrollbar
   --scrollbar-back-color: hsl(227, 21%, 9%);
   --scrollbar-fore-color: hsl(228, 17%, 27%);
+  --scrollbar-fore-color-dark: hsl(228, 17%, 36%);
 }
 
 // Layout breakpoints