Merge pull request #718 from StampyAI/moondry-fixes

Improved column spacing, Mobile feedback, & sundry fixes
StampyAI · Jun 11, 2024 · e6bef50 · e6bef50
2 parents d691337 + 6283093
commit e6bef50
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 55 deletions.
diff --git a/app/components/Article/article.css b/app/components/Article/article.css
@@ -192,6 +192,18 @@ article .banner h3 .title {
   padding-left: 10px;
 }
 
+.footer-comtainer .edited-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-16);
+}
+
+.footer-comtainer .feeback-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+}
+
 @media (min-width: 780px) {
   article .link-popup {
     position: absolute;
@@ -212,16 +224,14 @@ article .banner h3 .title {
     padding: 0;
   }
   article .footer-comtainer {
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: start;
   }
 
   article .link-popup {
     width: 100%;
   }
-  article .footer-comtainer > div:nth-child(-n + 2) {
-    flex: 1 1;
-  }
+
   article {
     margin: 0;
   }

diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
@@ -9,10 +9,13 @@ import {tagUrl} from '~/routesMapper'
 import type {Glossary, Question, Banner as BannerType} from '~/server-utils/stampy'
 import Contents from './Contents'
 import './article.css'
+import useIsMobile from '~/hooks/isMobile'
 
 const isLoading = ({text}: Question) => !text || text === 'Loading...'
 
 const ArticleFooter = (question: Question) => {
+  const mobile = useIsMobile()
+
   const date =
     question.updatedAt &&
     new Date(question.updatedAt).toLocaleDateString('en-GB', {
@@ -23,33 +26,38 @@ const ArticleFooter = (question: Question) => {
   return (
     !isLoading(question) && (
       <div className="footer-comtainer padding-bottom-40">
-        {date && <div className="grey"> {`Updated ${date}`}</div>}
-        <CompositeButton secondary>
-          <Button
-            secondary
-            action={question.answerEditLink || ''}
-            tooltip="Google Doc"
-            props={{target: '_blank', rel: 'noopener noreferrer'}}
-          >
-            <EditIcon />
-          </Button>
-        </CompositeButton>
-        <Feedback
-          showForm
-          pageid={question.pageid}
-          onSubmit={async (message: string, option?: string) =>
-            logFeedback({
-              message,
-              option,
-              type: 'bot',
-              question: question.title || '',
-              answer: question.text || '',
-            })
-          }
-          options={['Unclear', 'Too wordy', 'Confusing', 'Incorrect', 'Other']}
-          upHint="This page was helpful"
-          downHint="This page was unhelpful"
-        />
+        <div className="edited-container">
+          {date && <div className="grey"> {`Updated ${date}`}</div>}
+          <CompositeButton secondary>
+            <Button
+              secondary
+              action={question.answerEditLink || ''}
+              tooltip="Google Doc"
+              props={{target: '_blank', rel: 'noopener noreferrer'}}
+            >
+              <EditIcon />
+            </Button>
+          </CompositeButton>
+        </div>
+        <div className="feeback-container">
+          {mobile && <p>Was this page helpful?</p>}
+          <Feedback
+            showForm
+            pageid={question.pageid}
+            onSubmit={async (message: string, option?: string) =>
+              logFeedback({
+                message,
+                option,
+                type: 'bot',
+                question: question.title || '',
+                answer: question.text || '',
+              })
+            }
+            options={['Unclear', 'Too wordy', 'Confusing', 'Incorrect', 'Other']}
+            upHint="This page was helpful"
+            downHint="This page was unhelpful"
+          />
+        </div>
       </div>
     )
   )

diff --git a/app/components/Button/button.css b/app/components/Button/button.css
@@ -232,8 +232,8 @@
   align-items: center;
   padding: 7px;
   gap: var(--spacing-4);
-  min-width: min-content;
-  min-height: min-content;
+  max-width: min-content;
+  height: min-content;
 }
 
 .tooltip::after {

diff --git a/app/components/Button/index.tsx b/app/components/Button/index.tsx
@@ -1,6 +1,7 @@
 import {ReactNode} from 'react'
 import {Link} from '@remix-run/react'
 import './button.css'
+import useIsMobile from '~/hooks/isMobile'
 
 type ButtonProps = {
   action?: string | (() => void)
@@ -22,6 +23,8 @@ const Button = ({
   active = false,
   props,
 }: ButtonProps) => {
+  const mobile = useIsMobile()
+
   const classes = [
     (secondary && 'button-secondary') || 'button',
     className,
@@ -45,7 +48,9 @@ const Button = ({
         {...props}
       >
         {children}
-        {secondary && tooltip && !disabled && <p className="tool-tip-secondary xs">{tooltip}</p>}
+        {secondary && tooltip && !disabled && !mobile && (
+          <p className="tool-tip-secondary xs">{tooltip}</p>
+        )}
       </Link>
     )
   }
@@ -58,7 +63,9 @@ const Button = ({
       {...props}
     >
       {children}
-      {secondary && tooltip && !disabled && <p className="tool-tip-secondary xs">{tooltip}</p>}
+      {secondary && tooltip && !disabled && !mobile && (
+        <p className="tool-tip-secondary xs">{tooltip}</p>
+      )}
     </button>
   )
 }

diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx
@@ -14,6 +14,7 @@ import {questionUrl} from '~/routesMapper'
 import {Question} from '~/server-utils/stampy'
 import {useSearch} from '~/hooks/useSearch'
 import Input from '~/components/Input'
+import useIsMobile from '~/hooks/isMobile'
 
 const MIN_SIMILARITY = 0.85
 
@@ -36,6 +37,7 @@ const QuestionInput = ({
   const [question, setQuestion] = useState(initial || '')
   const {results, search, clear} = useSearch(1)
   const clickDetectorRef = useOutsideOnClick(() => handleChange(''))
+  const mobile = useIsMobile()
 
   const handleAsk = (val: string) => {
     clear()
@@ -57,7 +59,10 @@ const QuestionInput = ({
 
   return (
     <div
-      className={'widget-ask ' + (fixed ? 'fixed col-10 z-index-1' : 'col-9')}
+      className={
+        'widget-ask ' +
+        (fixed ? `fixed z-index-1 ${mobile ? 'mobile-chat-width' : 'col-10'}` : 'col-9')
+      }
       ref={clickDetectorRef}
     >
       {results.length > 0 ? (
@@ -86,7 +91,7 @@ const QuestionInput = ({
       </div>
       {fixed && <div className="white-space" />}
 
-      <div className="mobile-only grey mobile-caution xxs">
+      <div className="mobile-only grey mobile-caution xxs padding-top-8">
         <ExclamationIcon />{' '}
         <span className="padding-left-4">Stampy can be inaccurate. Always verify its sources.</span>
       </div>
@@ -157,7 +162,7 @@ const Followups = ({title, followups, onSelect, className}: FollowupsProps) => {
       {items?.map(({text, pageid}, i) => (
         <div key={i} className="padding-bottom-16">
           <Button
-            className="secondary-alt-large text-align-left"
+            className="secondary-alt-large text-align-left followup-button"
             action={() => onSelect({text, pageid})}
           >
             {text}
@@ -178,7 +183,7 @@ const SplashScreen = ({
   <div className="padding-top-40">
     <IconStampyLarge />
     <div className="col-6 padding-bottom-40 padding-top-40">
-      <h2 className="teal-500">Hi there, I'm Stampy.</h2>
+      <h2 className="teal-500">Hi there, I’m Stampy.</h2>
       <h2>I can answer your questions about AI Safety.</h2>
     </div>
     <Followups
@@ -201,6 +206,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
   const [controller, setController] = useState(() => new AbortController())
   const fetcher = useFetcher({key: 'followup-fetcher'})
   const {search, resultsForRef, waitForResults, loadedQuestions} = useSearch(1)
+  const mobile = useIsMobile()
 
   // When a page needs to be loaded fetcher.load(url) is called and then this
   // effect takes care of filling in the content of the StampyArticle ChatEntry
@@ -309,7 +315,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
   }, [loadedQuestions, question])
 
   return (
-    <div className="centered col-10 height-70">
+    <div className={`centered height-70 ${mobile ? 'mobile-chat-width' : 'col-10'}`}>
       {history.length === 0 ? (
         <SplashScreen
           questions={questions?.map(({title, pageid}) => ({pageid, text: title}))}

diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css
@@ -10,12 +10,6 @@
   background: var(--colors-cool-grey-100);
 }
 
-@media (max-width: 780px) {
-  .button {
-    width: 100%;
-  }
-}
-
 .widget-ask {
   position: relative;
 }
@@ -45,8 +39,6 @@
 }
 
 .mobile-caution {
-  position: absolute;
-  top: calc(100% + var(--spacing-8));
   display: flex;
 }
 
@@ -81,18 +73,29 @@
   position: absolute;
   left: -1000px;
   width: calc(100% + 2000px);
-  height: 120px;
+  height: 250px;
   top: 0;
   z-index: -1;
   background: #ffffff;
 }
 
 .followups-container {
-  padding-bottom: calc(106px + var(--spacing-48));
+  padding-bottom: calc(106px + var(--spacing-80));
+}
+
+.followup-button {
+  justify-content: left !important;
+}
+
+.mobile-chat-width {
+  width: 87.2vw;
 }
 
 @media (max-width: 780px) {
+  .button {
+    width: 100%;
+  }
   .widget-ask.fixed {
-    bottom: 56px;
+    bottom: var(--spacing-16);
   }
 }
diff --git a/app/components/Feedback/feedback.css b/app/components/Feedback/feedback.css
@@ -81,6 +81,9 @@
 
 @media (max-width: 780px) {
   .feedback-form {
-    left: -20px;
+    position: fixed;
+    left: 6.4vw;
+    bottom: var(--spacing-80);
+    width: 87.2vw;
   }
 }
diff --git a/app/root.tsx b/app/root.tsx
@@ -133,7 +133,7 @@ function Head() {
   return (
     <head>
       <meta charSet="utf-8" />
-      <meta name="viewport" content="width=device-width,initial-scale=1" />
+      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
       {/* don't use color-scheme because supporting transparent iframes https://fvsch.com/transparent-iframes
           is more important than dark reader https://github.com/darkreader/darkreader/issues/1285#issuecomment-761893024
           <meta name="color-scheme" content="light dark" />

diff --git a/app/routes/categories.$.tsx b/app/routes/categories.$.tsx
@@ -56,7 +56,12 @@ export default function Tags() {
                       ? 'No pages found'
                       : `${selectedTag.questions.length} pages tagged "${selectedTag.name}"`}
                   </div>
-                  {selectedTag && <ListTable className="col-8" elements={selectedTag.questions} />}
+                  {selectedTag && (
+                    <ListTable
+                      className={mobile ? 'full-width' : 'col-8'}
+                      elements={selectedTag.questions}
+                    />
+                  )}
                 </article>
               )}
             </>