Merge pull request #356 from commons-stack/style/responsiviness

Improve dapp responsiviness
givepraise · Jun 7, 2022 · aa69367 · aa69367
2 parents d673095 + 819fb65
commit aa69367
Show file tree

Hide file tree

Showing 19 changed files with 45 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Improve dapp responsiviness #190 #356
+- Opening dialog to mark praise as duplicate should place focus on input #80
+
 ## [0.8.0] - 2022-06-06
 
 ### Added

diff --git a/packages/frontend/src/navigation/NavItem.tsx b/packages/frontend/src/navigation/NavItem.tsx
@@ -24,8 +24,8 @@ const NavItem = ({ icon, description, to }: NavProps): JSX.Element => {
           <FontAwesomeIcon icon={icon} size="1x" className="inline-block" />
         </div>
       )}
-      <div className="flex-auto inline-block my-1">
-        <span>{description}</span>
+      <div className="flex-auto inline-block my-1 whitespace-nowrap">
+        {description}
       </div>
     </NavLink>
   );

diff --git a/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx b/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx
@@ -5,7 +5,7 @@ import EventLogsList from './components/EventLogsList';
 
 const EventLogsPage = (): JSX.Element => {
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name="Transparency Log" icon={faBook} />
 
       <div className="w-full praise-box overflow-x-auto">

diff --git a/packages/frontend/src/pages/FAQ/FAQPage.tsx b/packages/frontend/src/pages/FAQ/FAQPage.tsx
@@ -24,7 +24,7 @@ const FAQPage = (): JSX.Element | null => {
   if (!faq || !faq.length) return null;
 
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name="FAQ" icon={faQuestionCircle} />
 
       <div className="w-full praise-box">

diff --git a/packages/frontend/src/pages/MyPraise/MyPraisePage.tsx b/packages/frontend/src/pages/MyPraise/MyPraisePage.tsx
@@ -6,7 +6,7 @@ import MyPraiseTable from './components/MyPraiseTable';
 
 const MyPraise = (): JSX.Element => {
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name="My praise" icon={faPrayingHands} />
 
       <ActiveNoticesBoard />

diff --git a/packages/frontend/src/pages/MyPraise/components/MyPraiseTable.tsx b/packages/frontend/src/pages/MyPraise/components/MyPraiseTable.tsx
@@ -25,7 +25,6 @@ const getReceiverId = (user: UserDto | undefined): string | undefined => {
 };
 
 const MyPraiseTable = (): JSX.Element => {
-  const history = useHistory();
   const allPraise = useRecoilValue(AllPraiseList(MY_PRAISE_LIST_KEY));
   const userId = useRecoilValue(ActiveUserId);
   const user = useRecoilValue(SingleUser(userId));

diff --git a/packages/frontend/src/pages/Periods/Create/PeriodCreatePage.tsx b/packages/frontend/src/pages/Periods/Create/PeriodCreatePage.tsx
@@ -104,6 +104,7 @@ const PeriodsForm = (): JSX.Element => {
                     value={input.value}
                     onChange={input.onChange}
                     className="w-72 block"
+                    inputClassName="w-100"
                   />
                   {apiResponse && (
                     <FieldErrorMessage
@@ -126,7 +127,7 @@ const PeriodsForm = (): JSX.Element => {
 
 const PeriodsCreatePage = (): JSX.Element => {
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name="Quantification periods" icon={faCalendarAlt} />
       <BackLink to="/periods" />
 

diff --git a/packages/frontend/src/pages/Periods/Details/PeriodDetailsPage.tsx b/packages/frontend/src/pages/Periods/Details/PeriodDetailsPage.tsx
@@ -70,11 +70,11 @@ const PeriodDetailPage = (): JSX.Element | null => {
   if (!period || !period.receivers) return null;
 
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name="Quantification periods" icon={faCalendarAlt} />
       <BackLink to="/periods" />
 
-      <div className="max-w-4xl praise-box">
+      <div className="praise-box">
         <React.Suspense fallback="Loading…">
           <PeriodDetailHead />
         </React.Suspense>
@@ -84,9 +84,9 @@ const PeriodDetailPage = (): JSX.Element | null => {
         <QuantifierMessage />
       </React.Suspense>
 
-      <div className="flex space-x-4">
+      <div className="flex sm:space-x-4 sm:flex-row flex-col">
         <div>
-          <div className="w-40 py-5 mb-5 break-words border rounded-lg shadow-sm bg-gray-50">
+          <div className="w-full sm:w-40 py-5 mb-5 break-words border rounded-lg shadow-sm bg-gray-50">
             <nav>
               <NavItem
                 to={`${url}/receivers`}
@@ -107,7 +107,7 @@ const PeriodDetailPage = (): JSX.Element | null => {
           </div>
         </div>
 
-        <div className="w-full max-w-3xl praise-box">
+        <div className="praise-box w-full">
           <Suspense fallback="Loading…">
             <Switch>
               <Route path={`${path}/receivers`}>

diff --git a/packages/frontend/src/pages/Periods/Details/components/Details.tsx b/packages/frontend/src/pages/Periods/Details/components/Details.tsx
@@ -119,7 +119,7 @@ const PeriodDetails = (): JSX.Element | null => {
           <PeriodDateForm />
           <div className="mt-5">
             {period.status === 'OPEN' || period.status === 'QUANTIFY' ? (
-              <div className="flex justify-between">
+              <div className="flex gap-4 justify-between">
                 {period.status === 'OPEN' &&
                 period.receivers &&
                 period?.receivers.length > 0 &&

diff --git a/packages/frontend/src/pages/Periods/PeriodsPage.tsx b/packages/frontend/src/pages/Periods/PeriodsPage.tsx
@@ -9,7 +9,7 @@ import PeriodsTable from './components/Table';
 
 const PeriodsPage = (): JSX.Element => {
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name="Quantification periods" icon={faCalendarAlt} />
 
       <ActiveNoticesBoard />

diff --git a/packages/frontend/src/pages/PraiseDetails/PraiseDetailsPage.tsx b/packages/frontend/src/pages/PraiseDetails/PraiseDetailsPage.tsx
@@ -25,7 +25,7 @@ const PraiseDetailsPage = (): JSX.Element | null => {
   if (!praise) return null;
 
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name={'Praise details'} icon={faCalendarAlt} />
       <BackLink to={backLinkUrl} />
 

diff --git a/packages/frontend/src/pages/QuantifyPeriod/QuantifyPeriodPage.tsx b/packages/frontend/src/pages/QuantifyPeriod/QuantifyPeriodPage.tsx
@@ -40,7 +40,7 @@ const QuantifyPeriodPage = (): JSX.Element => {
   const { periodId } = useParams<PeriodPageParams>();
 
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name="Quantify" icon={faCalendarAlt} />
       <BackLink to={`/periods/${periodId}`} />
 

diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/QuantifyPeriodReceiverPage.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/QuantifyPeriodReceiverPage.tsx
@@ -83,7 +83,7 @@ const QuantifyPeriodReceiverPage = (): JSX.Element => {
   const { periodId, receiverId } = useParams<PeriodAndReceiverPageParams>();
 
   return (
-    <div className="max-w-5xl mx-auto h-full">
+    <div className="praise-page h-full">
       <React.Suspense fallback="Loading…">
         <PeriodBreadCrumb />
       </React.Suspense>

diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseAutosuggest.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseAutosuggest.tsx
@@ -10,7 +10,7 @@ import { faPrayingHands } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { PraiseDto } from 'api/dist/praise/types';
 import { useCombobox } from 'downshift';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 
@@ -25,6 +25,8 @@ const PraiseAutosuggest = ({
   onClose,
   praise,
 }: PraiseAutosuggestProps): JSX.Element | null => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const { periodId, receiverId } = useParams<PeriodAndReceiverPageParams>();
   const userId = useRecoilValue(ActiveUserId);
   const data = useRecoilValue(
@@ -36,6 +38,12 @@ const PraiseAutosuggest = ({
     'PRAISE_QUANTIFY_RECEIVER_PSEUDONYMS'
   ) as boolean;
 
+  useEffect(() => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
   if (!data) return null;
 
   const filteredData = data.filter(
@@ -93,7 +101,7 @@ const PraiseAutosuggest = ({
               className="pl-10 text-sm w-80"
               type="text"
               placeholder="Search by praise id"
-              {...getInputProps()}
+              {...getInputProps({ ref: inputRef })}
             />
           </div>
         </div>

diff --git a/packages/frontend/src/pages/Settings/SettingsPage.tsx b/packages/frontend/src/pages/Settings/SettingsPage.tsx
@@ -26,18 +26,16 @@ const SettingsPage = (): JSX.Element | null => {
   );
 
   return (
-    <div className="max-w-3xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name="Settings" icon={faCogs} />
 
-      <div className="flex space-x-4">
-        <div>
-          <div className="w-40 py-5 mb-5 break-words border rounded-lg shadow-sm bg-gray-50">
-            <nav>
-              <NavItem to={`${url}/application`} description="Application" />
-              <NavItem to={`${url}/period`} description="Period Defaults" />
-              <NavItem to={`${url}/discord`} description="Discord Bot" />
-            </nav>
-          </div>
+      <div className="flex flex-col sm:space-x-4 sm:flex-row">
+        <div className="w-full py-5 mb-5 break-words border rounded-lg shadow-sm h-fit sm:w-40 bg-gray-50">
+          <nav>
+            <NavItem to={`${url}/application`} description="Application" />
+            <NavItem to={`${url}/period`} description="Period Defaults" />
+            <NavItem to={`${url}/discord`} description="Discord Bot" />
+          </nav>
         </div>
 
         <div className="w-full max-w-3xl praise-box">

diff --git a/packages/frontend/src/pages/Start/StartPage.tsx b/packages/frontend/src/pages/Start/StartPage.tsx
@@ -6,7 +6,7 @@ import PraiseTable from './components/PraiseTable';
 
 const StartPage: React.FC = (): ReactElement => {
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name="Praise" icon={faPrayingHands} />
 
       <ActiveNoticesBoard />

diff --git a/packages/frontend/src/pages/UserDetails/UserDetailsPage.tsx b/packages/frontend/src/pages/UserDetails/UserDetailsPage.tsx
@@ -64,7 +64,7 @@ const UserDetailsPage = (): JSX.Element | null => {
       </div>
       <div className="praise-box">
         <span className="text-xl font-bold">Roles</span>
-        <div className="flex gap-4 pt-5">
+        <div className="flex flex-wrap gap-4 pt-5">
           {roles.map((role) => (
             <div
               key={role}

diff --git a/packages/frontend/src/pages/Users/UsersPage.tsx b/packages/frontend/src/pages/Users/UsersPage.tsx
@@ -5,7 +5,7 @@ import UsersTable from './components/UsersTable';
 
 const UsersPage = (): JSX.Element => {
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="praise-page">
       <BreadCrumb name="Users" icon={faUserFriends} />
       <UsersStatistics />
       <div className="praise-box">

diff --git a/packages/frontend/src/styles/custom-components.css b/packages/frontend/src/styles/custom-components.css
@@ -1,3 +1,7 @@
+.praise-page {
+  @apply max-w-5xl mx-auto
+}
+
 .praise-box {
   @apply p-5 mb-5 break-words border rounded-lg shadow-sm bg-gray-50;
 }