add mobile improvements

CHANGELOG.md

@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## UNRELEASED
 
 ### Added
+
+- mobile improvements for lists and home page
+
 ### Changed
 ### Fixed
 ### Security

components/auth/footer.module.scss

@@ -0,0 +1,16 @@
+.footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  @media (max-width: 600px) {
+    position: relative;
+    margin-bottom: 16px;
+    flex-direction: column;
+    text-align: center;
+  }
+}

components/auth/footer.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { SETTINGS_QUERY, SettingsQueryData } from '../../graphql/query/settings.query'
 import { languages } from '../../i18n'
 import { clearAuth, withAuth } from '../with.auth'
+import scss from './footer.module.scss'
 
 interface Props {
   me?: {
@@ -26,16 +27,7 @@ const AuthFooterInner: React.FC<Props> = (props) => {
   }
 
   return (
-    <footer
-      style={{
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        display: 'flex',
-        flexDirection: 'row',
-      }}
-    >
+    <footer className={scss.footer}>
       <Link href={'/admin'}>
         <Button type={'link'} ghost>
           {t('admin')}
@@ -69,6 +61,7 @@ const AuthFooterInner: React.FC<Props> = (props) => {
         onChange={(next) => i18n.changeLanguage(next)}
         style={{
           color: '#FFF',
+          paddingLeft: 18,
         }}
         suffixIcon={false}
       >

pages/admin/forms/[id]/submissions.tsx

@@ -73,6 +73,7 @@ const Submissions: NextPage = () => {
       render(date: string) {
         return <DateTime date={date} />
       },
+      responsive: ['lg'],
     },
     {
       title: t('submission:lastModified'),
@@ -80,6 +81,7 @@ const Submissions: NextPage = () => {
       render(date: string) {
         return <TimeAgo date={date} />
       },
+      responsive: ['lg'],
     },
   ]
 

pages/admin/forms/index.tsx

@@ -24,6 +24,7 @@ import { NextPage } from 'next'
 import Link from 'next/link'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import {useWindowSize} from '../../../components/use.window.size'
 import {
   ADMIN_FORM_DELETE_MUTATION,
   AdminFormDeleteMutationData,
@@ -32,6 +33,7 @@ import {
 
 const Index: NextPage = () => {
   const { t } = useTranslation()
+  const { width } = useWindowSize()
   const [pagination, setPagination] = useState<PaginationProps>({
     pageSize: 25,
   })
@@ -84,6 +86,7 @@ const Index: NextPage = () => {
       render(live: boolean) {
         return <FormIsLive isLive={live} />
       },
+      responsive: ['md'],
     },
     {
       title: t('form:row.title'),
@@ -101,6 +104,7 @@ const Index: NextPage = () => {
           </Link>
         )
       },
+      responsive: ['lg'],
     },
     {
       title: t('form:row.language'),
@@ -108,6 +112,7 @@ const Index: NextPage = () => {
       render(lang: string) {
         return t(`language:${lang}`)
       },
+      responsive: ['lg'],
     },
     {
       title: t('form:row.created'),
@@ -115,6 +120,7 @@ const Index: NextPage = () => {
       render(date: string) {
         return <DateTime date={date} />
       },
+      responsive: ['lg'],
     },
     {
       title: t('form:row.lastModified'),
@@ -122,13 +128,14 @@ const Index: NextPage = () => {
       render(date: string) {
         return <TimeAgo date={date} />
       },
+      responsive: ['md'],
     },
     {
       title: t('form:row.menu'),
       align: 'right',
       render(row: AdminPagerFormEntryQueryData) {
         return (
-          <Space>
+          <Space direction={width < 600 ? 'vertical' : 'horizontal'}>
             <Link href={'/admin/forms/[id]/submissions'} as={`/admin/forms/${row.id}/submissions`}>
               <Tooltip title={'Show Submissions'}>
                 <Button>

pages/admin/index.tsx

@@ -20,15 +20,15 @@ const Index: NextPage = () => {
   return (
     <Structure title={t('admin:home')} selected={'home'} loading={loading}>
       <Row gutter={16}>
-        <Col span={8}>
+        <Col span-sm={8} span-xs={24}>
           <Statistic title={t('statistic:totalForms')} value={data && data.forms.total} />
         </Col>
 
-        <Col span={8}>
+        <Col span-sm={8} span-xs={24}>
           <Statistic title={t('statistic:totalUsers')} value={data && data.users.total} />
         </Col>
 
-        <Col span={8}>
+        <Col span-sm={8} span-xs={24}>
           <Statistic
             title={t('statistic:totalSubmissions')}
             value={data && data.submissions.total}

pages/admin/users/index.tsx

@@ -10,6 +10,7 @@ import Link from 'next/link'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DateTime } from '../../../components/date.time'
+import {useWindowSize} from '../../../components/use.window.size'
 import { UserRole } from '../../../components/user/role'
 import {
   ADMIN_USER_DELETE_MUTATION,
@@ -24,6 +25,7 @@ import {
 } from '../../../graphql/query/admin.pager.user.query'
 
 const Index: NextPage = () => {
+  const { width } = useWindowSize()
   const { t } = useTranslation()
   const [pagination, setPagination] = useState<PaginationProps>({
     pageSize: 10,
@@ -76,6 +78,7 @@ const Index: NextPage = () => {
       render(roles: string[]) {
         return <UserRole roles={roles} />
       },
+      responsive: ['md'],
     },
     {
       title: t('user:row.email'),
@@ -89,13 +92,14 @@ const Index: NextPage = () => {
       render(date: string) {
         return <DateTime date={date} />
       },
+      responsive: ['lg'],
     },
     {
       title: t('user:row.menu'),
       align: 'right',
       render(row: AdminPagerUserEntryQueryData) {
         return (
-          <Space>
+          <Space direction={width < 600 ? 'vertical' : 'horizontal'}>
             <Link href={'/admin/users/[id]'} as={`/admin/users/${row.id}`}>
               <Button type={'primary'}>
                 <EditOutlined />

pages/login/index.module.scss

@@ -0,0 +1,11 @@
+
+.otherActions {
+  width: 100%;
+  justify-content: center;
+  display: flex;
+
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
+}

pages/login/index.tsx

@@ -14,6 +14,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import scss from './index.module.scss'
 
 const Index: NextPage = () => {
   const { t } = useTranslation()
@@ -90,13 +91,7 @@ const Index: NextPage = () => {
           </Button>
         </Form.Item>
 
-        <Button.Group
-          style={{
-            width: '100%',
-            justifyContent: 'center',
-            display: 'flex',
-          }}
-        >
+        <Button.Group className={scss.otherActions}>
           <Link href={'/register'}>
             <Button type={'link'} ghost>
               {t('register')}

pages/register.module.scss

@@ -0,0 +1,19 @@
+
+.otherActions {
+  width: 100%;
+  justify-content: center;
+  display: flex;
+
+  button {
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    span {
+      overflow: hidden;
+    }
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
+}

pages/register.tsx

@@ -17,6 +17,7 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ErrorPage } from '../components/error.page'
 import { SETTINGS_QUERY, SettingsQueryData } from '../graphql/query/settings.query'
+import scss from './register.module.scss'
 
 const Register: NextPage = () => {
   const { t } = useTranslation()
@@ -114,13 +115,7 @@ const Register: NextPage = () => {
           </Button>
         </Form.Item>
 
-        <Button.Group
-          style={{
-            width: '100%',
-            justifyContent: 'center',
-            display: 'flex',
-          }}
-        >
+        <Button.Group className={scss.otherActions}>
           <Link href={'/login'}>
             <Button type={'link'} ghost>
               {t('register:gotoLogin')}