Merge branch 'master' into stampy-redesign

StampyAI · Apr 30, 2024 · c55d731 · c55d731
2 parents 48eb46f + 6f2a69d
commit c55d731
Show file tree

Hide file tree

Showing 35 changed files with 202 additions and 205 deletions.
diff --git a/app/assets/icons/book-circle.svg b/app/assets/icons/book-circle.svg
diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx
@@ -122,8 +122,8 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
       addPopup(
         e as HTMLSpanElement,
         `glossary-${entry.term}`,
-        `<div class="glossary-popup flex-container black small col-${image ? 6 : 4}">
-              <div class="contents col-6 ${image ? '' : 'full-width'}">
+        `<div class="glossary-popup flex-container black small">
+              <div class="contents ${image ? '' : 'full-width'}">
                    <div class="small-bold">${entry.term}</div>
                    <div class="defintion small">${entry.contents}</div>
                    ${link || ''}

diff --git a/app/components/Article/FeedbackForm/index.tsx b/app/components/Article/FeedbackForm/index.tsx
@@ -66,7 +66,7 @@ const FeedbackForm = ({
 
   return (
     <div key={pageid} className={className} onBlur={handleBlur} onFocus={onFocus}>
-      <div className={'col-5 feedback-container bordered'}>
+      <div className={'fcol-5 feedback-container bordered'}>
         <span className={'black small'}>What was the problem?</span>
         {hasOptions
           ? options.map((option, index) => (

diff --git a/app/components/Article/KeepGoing/keepGoing.module.css b/app/components/Article/KeepGoing/keepGoing.module.css
@@ -6,7 +6,7 @@
   gap: var(--spacing-24);
 }
 
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .flex_dynamic {
     display: flex;
     flex-direction: column;

diff --git a/app/components/Article/article.css b/app/components/Article/article.css
@@ -1,6 +1,27 @@
 article {
-  max-width: 47.43vw;
-  margin: 0 auto;
+  flex: 100;
+  max-width: 800px;
+  min-height: 100vh;
+  padding-left: var(--spacing-80);
+}
+
+article.loading .contents {
+  overflow: hidden;
+  max-width: 100%;
+  animation: infinite-loader 3s ease-in infinite;
+}
+@keyframes infinite-loader {
+  0% {
+    opacity: 0;
+    max-width: 80px;
+  }
+  30% {
+    opacity: 1;
+    max-width: 100px;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 article .meta {
@@ -58,9 +79,13 @@ article .contents p {
   padding-bottom: var(--spacing-32);
 }
 
+article .contents img {
+  max-width: 100%;
+}
+
 article .glossary-entry {
   border-bottom: 3px dotted var(--colors-cool-grey-500);
-  cursor: pointer;
+  cursor: default;
 }
 
 article .link-popup {
@@ -73,7 +98,8 @@ article .link-popup {
   font-weight: 300;
   line-height: 170%; /* 30.6px */
   z-index: 2;
-  transform: translate(-20vw, var(--spacing-40));
+  left: calc(50% - 200px);
+  transform: translateY(var(--spacing-40));
   transition:
     visibility 0s 300ms,
     opacity cubic-bezier(1, 0, 1, 1) 300ms;
@@ -83,7 +109,7 @@ article .link-popup .footnote {
 }
 
 article .glossary-popup {
-  max-width: 522px;
+  width: 522px;
   height: 304px;
 }
 
@@ -149,9 +175,10 @@ article a.see-more.visible:after {
   content: 'See less';
 }
 
-@media only screen and (max-width: 640px) {
+@media only screen and (max-width: 780px) {
   article {
     max-width: 100%;
+    padding: 0;
   }
   article .footer-comtainer {
     flex-direction: row;

diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
@@ -154,7 +154,7 @@ export const Article = ({question, glossary, className}: ArticleProps) => {
   const {title, text, pageid} = question
 
   return (
-    <article className={className}>
+    <article className={`${className} ${isLoading(question) ? 'loading' : ''}`}>
       <h1 className="teal-500 padding-bottom-24">{title}</h1>
       <ArticleMeta question={question} className="padding-bottom-56" />
 

diff --git a/app/components/ArticlesDropdown/dropdown.css b/app/components/ArticlesDropdown/dropdown.css
@@ -29,7 +29,7 @@
   border-right: 1px solid var(--colors-cool-grey-200);
 }
 
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .articles-dropdown-container .toc {
     border-right: 0;
   }

diff --git a/app/components/ArticlesDropdown/index.tsx b/app/components/ArticlesDropdown/index.tsx
@@ -18,9 +18,9 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
   // it, so it's always shown (until the mouse is moved out, of course). To get around
   // this, use this variable to simply not render the dropdown for one render, which
   // will reset the CSS onHover checker.
-  const [shown, setShown] = useState(false)
-  const hide = () => setShown(true)
-  useEffect(() => setShown(false), [shown])
+  const [hidden, setHidden] = useState(false)
+  const hide = () => setHidden(true)
+  useEffect(() => setHidden(false), [hidden])
   const mobile = useIsMobile()
   const Link = ({
     to,
@@ -64,9 +64,9 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
     </div>
   )
 
-  return shown ? null : (
-    <div className="articles-dropdown-container bordered col-8">
-      <div className="col-5 toc">
+  return hidden ? null : (
+    <div className="articles-dropdown-container bordered fcol-8">
+      <div className="fcol-5 toc">
         <ArticlesSection
           category={INTRODUCTORY}
           toc={toc}
@@ -78,7 +78,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
           className={mobile ? 'padding-bottom-40' : ''}
         />
       </div>
-      <div className="col-4">
+      <div className="fcol-4">
         {/*sorted right side*/}
         <div className="default-bold">Browse by category</div>
 

diff --git a/app/components/ArticlesNav/Menu.tsx → app/components/ArticlesNav/ArticleNav.tsx b/app/components/ArticlesNav/Menu.tsx → app/components/ArticlesNav/ArticleNav.tsx
@@ -2,7 +2,7 @@ import {Link} from '@remix-run/react'
 import ChevronRight from '~/components/icons-generated/ChevronRight'
 import {questionUrl} from '~/routesMapper'
 import type {TOCItem} from '~/routes/questions.toc'
-import './menu.css'
+import './articlenav.css'
 
 type Article = {
   article: TOCItem
@@ -73,17 +73,24 @@ const ArticleLevel = ({article, path, current, hideChildren}: Article) => {
   )
 }
 
-export const ArticlesNav = ({article, path, className}: Article) => {
+export const ArticlesNav = ({
+  tocLoaded,
+  article,
+  path,
+  className,
+}: {tocLoaded: boolean} & Partial<Article>) => {
   const current = path ? path[path.length - 1] : ''
 
-  return (
-    <div className={`articles-group col-4-5 small ${className || ''}`}>
+  return article ? (
+    <div className={`articles-group small ${className || ''}`}>
       <ArticleLevel article={article} path={path} current={current} hideChildren />
       <hr />
 
       {article.children?.map((item) => (
         <ArticleLevel key={item.pageid} article={item} path={path} current={current} />
       ))}
     </div>
+  ) : (
+    <div className={`articles-group ${tocLoaded ? 'none' : 'loading'}`}></div>
   )
 }
diff --git a/app/components/ArticlesNav/menu.css → app/components/ArticlesNav/articlenav.css b/app/components/ArticlesNav/menu.css → app/components/ArticlesNav/articlenav.css
@@ -2,11 +2,25 @@
   display: none;
 }
 .articles-group {
+  flex: none;
+  width: clamp(230px, 30vw, 400px);
   height: fit-content;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
   overflow-y: scroll;
   overflow-x: hidden;
+  opacity: 1;
+  transition:
+    opacity 200ms,
+    width 200ms;
+}
+
+.articles-group.loading {
+  opacity: 0;
+}
+
+.articles-group.none {
+  width: clamp(0px, calc(100vw - 1100px), 400px);
 }
 
 .articles-title {
@@ -35,10 +49,10 @@
   cursor: pointer;
 }
 
-/* 
+/*
   https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#default_style
   "For Webkit-based browsers, such as Safari, it is possible to control the icon display
-  through the non-standard CSS pseudo-element ::-webkit-details-marker. 
+  through the non-standard CSS pseudo-element ::-webkit-details-marker.
   To remove the disclosure triangle, use summary::-webkit-details-marker { display: none }."
 */
 .articles-group details summary::-webkit-details-marker {
@@ -57,10 +71,10 @@
   height: 8px;
   position: relative;
   top: 25px;
-  left: -5px;
+  left: -8px;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .articles-group {
     width: 100%;
   }

diff --git a/app/components/CategoriesNav/Menu.tsx → ...omponents/CategoriesNav/CategoriesNav.tsx b/app/components/CategoriesNav/Menu.tsx → ...omponents/CategoriesNav/CategoriesNav.tsx
@@ -3,7 +3,7 @@ import {Link} from '@remix-run/react'
 import {SearchInput} from '../SearchInput/Input'
 import {Tag as TagType} from '~/server-utils/stampy'
 import {tagUrl} from '~/routesMapper'
-import './menu.css'
+import './categoriesnav.css'
 import useIsMobile from '~/hooks/isMobile'
 
 interface CategoriesNavProps {
@@ -25,7 +25,7 @@ export const CategoriesNav = ({categories, activeCategoryId, className}: Categor
   const [search, onSearch] = useState('')
   const mobile = useIsMobile()
   return (
-    <div className={['categoriesGroup bordered col-4-5', className].join(' ')}>
+    <div className={['categoriesGroup bordered', className].join(' ')}>
       {mobile ? <h1>Categories</h1> : <p className={'small-bold'}>Categories</p>}
       <div>
         <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />

diff --git a/app/components/CategoriesNav/Page.tsx b/app/components/CategoriesNav/Page.tsx
@@ -3,7 +3,7 @@ import {Link} from '@remix-run/react'
 import {SearchInput} from '../SearchInput/Input'
 import {Tag as TagType} from '~/server-utils/stampy'
 import {tagUrl} from '~/routesMapper'
-import './menu.css'
+import './categoriesnav.css'
 
 interface CategoriesPageProps {
   /**
@@ -15,7 +15,7 @@ interface CategoriesPageProps {
 export const CategoriesPage = ({categories}: CategoriesPageProps) => {
   const [search, onSearch] = useState('')
   return (
-    <div className={'categoriesPage col-12'}>
+    <div className={'categoriesPage fcol-12'}>
       <h1>Categories</h1>
       <div>
         <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />

diff --git a/app/components/CategoriesNav/menu.css → ...omponents/CategoriesNav/categoriesnav.css b/app/components/CategoriesNav/menu.css → ...omponents/CategoriesNav/categoriesnav.css
@@ -1,5 +1,7 @@
 .categoriesGroup {
   padding: var(--spacing-12);
+  flex: none;
+  width: clamp(230px, 30vw, 400px);
 }
 .categoriesGroup > * {
   padding: var(--spacing-16);
@@ -26,7 +28,7 @@
   flex: 1;
   flex-basis: 21vw;
 }
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .categoriesGroup {
     width: 100%;
     height: 100%;

diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css
@@ -15,7 +15,7 @@
   padding: var(--spacing-8) var(--spacing-24);
 }
 
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .button {
     width: 100%;
   }

diff --git a/app/components/ContentBox/box.css b/app/components/ContentBox/box.css
@@ -25,6 +25,7 @@
 
 .content-box-table {
   padding: var(--spacing-16);
+  display: flex; /* avoid space around svg inline-block elements */
 }
 
 .teal-background {
@@ -44,17 +45,12 @@
 
 .content-box-table.main {
   overflow: hidden;
-  padding: 0 var(--spacing-8);
+  padding: 0;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .main-container-box-table {
     flex-direction: column;
     margin-bottom: var(--spacing-80);
   }
-
-  .content-box-table {
-    padding: var(--spacing-80);
-    padding-top: 0;
-  }
 }
diff --git a/app/components/Error/index.tsx b/app/components/Error/index.tsx
@@ -88,7 +88,7 @@ const errorName = (error?: ErrorType) => {
 
 const Error = ({error}: {error?: ErrorType}) => {
   return (
-    <div className={styles.errorContainer + ' col-10'}>
+    <div className={styles.errorContainer + ' fcol-10'}>
       <h1 className="padding-bottom-24">{errorName(error)}</h1>
       {error?.status && <div>{errors[error.status as keyof typeof errors] || ''}</div>}
     </div>

diff --git a/app/components/Footer/footer.css b/app/components/Footer/footer.css
@@ -4,14 +4,15 @@
 
 .footer-contents {
   display: flex;
+  gap: var(--spacing-32);
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: baseline;
-  margin: var(--spacing-104) 13.33vw var(--spacing-80) 13.33vw;
+  margin: var(--spacing-104) var(--spacing-80) var(--spacing-80) var(--spacing-80);
 }
 
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .footer-contents {
     flex-direction: column;
     gap: 32px;

diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
@@ -16,7 +16,7 @@ export const FooterBar: FunctionComponent = () => {
     <div className="footer" key="footer">
       <hr />
       <div className="footer-contents">
-        <div className="col-5">
+        <div className="fcol-5">
           <p className="large-bold teal-500 padding-bottom-16">
             <a href="/">AISafety.info</a>
           </p>
@@ -26,14 +26,14 @@ export const FooterBar: FunctionComponent = () => {
           </div>
         </div>
 
-        <div className="col-3 small">
+        <div className="fcol-3 small">
           <p className="small-bold padding-bottom-16">Get involved</p>
           <Link to="https://www.every.org/stampy?utm_campaign=donate-link#/donate" title="Donate" />
           <Link to="https://github.com/StampyAI/stampy-ui" title="Code" />
           <Link to="https://get_involved.aisafety.info/" title="Write" />
           <Link to="https://discord.gg/88TbjZnNyA" title="Join us on Discord" />
         </div>
-        <div className="partners small col-4">
+        <div className="partners small fcol-4">
           <p className="small-bold padding-bottom-16">Partner projects</p>
           <Link to="https://www.aisafety.com/" title="AISafety.com" />
           <Link to="https://alignment.dev/" title="Alignment Ecosystem Development" />