Merge pull request #1 from thomassth/mobile

Mobile views: merge first, debug later

client-admin/src/app.js

@@ -173,7 +173,7 @@ class App extends React.Component {
                   return null
                 }
                 return (
-                  <Flex>
+                  <Flex sx={{ flexWrap: 'wrap' }}>
                     <Box sx={{ mr: [5], p: [4], flex: '0 0 auto' }}>
                       <Box sx={{ mb: [3] }}>
                         <Link sx={{ variant: 'links.nav' }} to={`/`}>
@@ -191,13 +191,17 @@ class App extends React.Component {
                         </Link>
                       </Box>
                     </Box>
-                    <Box
+                    <Flex
                       sx={{
-                        p: [4],
-                        flex: '0 0 auto',
+                        flexGrow: 1,
+                        justifyContent: 'center',
                         maxWidth: '35em',
+                        p: [4],
                         mx: [4]
-                      }}>
+
+                      }}
+                    >
+                      <Box>
                       <PrivateRoute
                         isLoading={this.isLoading()}
                         authed={this.isAuthed()}
@@ -227,6 +231,7 @@ class App extends React.Component {
                         component={Integrate}
                       />
                     </Box>
+                    </Flex>
                   </Flex>
                 )
               }}

client-admin/src/components/conversation-admin/CheckboxField.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Box, Flex, Text } from 'theme-ui'
+import { Flex } from 'theme-ui'
 import PropTypes from 'prop-types'
 
 import { handleZidMetadataUpdate } from '../../actions'
@@ -32,25 +32,23 @@ export const CheckboxField = ({
   }
 
   return (
-    <Flex sx={{ alignItems: 'flex-start', mb: [3] }}>
-      <Box sx={{ flexShrink: 0, position: 'relative', top: -0.5 }}>
-        <input
-          type="checkbox"
-          label={label}
-          data-test-id={field}
-          checked={
-            isIntegerBool ? zid_metadata[field] === 1 : zid_metadata[field]
-          }
-          onChange={
-            isIntegerBool
-              ? () => handleIntegerBoolValueChange(field)
-              : () => handleBoolValueChange(field)
-          }
-        />
-      </Box>
-      <Box sx={{ ml: [2], flexShrink: 0, maxWidth: '35em' }}>
-        <Text>{children}</Text>
-      </Box>
+    <Flex sx={{ alignItems: 'flex-start', mb: [3], gap: [2] }}>
+      <input
+        type="checkbox"
+        id={field}
+        value={field}
+        label={label}
+        data-test-id={field}
+        checked={
+          isIntegerBool ? zid_metadata[field] === 1 : zid_metadata[field]
+        }
+        onChange={
+          isIntegerBool
+            ? () => handleIntegerBoolValueChange(field)
+            : () => handleBoolValueChange(field)
+        }
+      />
+      <label htmlFor={field}>{children}</label>
     </Flex>
   )
 }

client-admin/src/components/conversation-admin/comment-moderation/comment.js

@@ -3,7 +3,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Flex, Box, Text, Button, Card, Link } from 'theme-ui'
+import { Flex, Text, Button, Card, Link } from 'theme-ui'
 
 @connect((state) => {
   return {
@@ -25,19 +25,19 @@ class Comment extends React.Component {
 
   render() {
     return (
-      <Card sx={{ mb: [3], minWidth: '35em' }}>
-        <Box>
+      <Card sx={{ mb: [3], width: '35em', maxWidth: '100%' }}>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Text sx={{ mb: [3] }}>{this.props.comment.txt}</Text>
           <Flex
             sx={{
               justifyContent: 'space-between',
               alignItems: 'center',
-              width: '100%'
+              width: '100%',
+              flexWrap: 'wrap'
             }}>
-            <Box>
+            <Flex sx={{ gap: '1rem', flexWrap: 'wrap' }} className='buttons'>
               {this.props.acceptButton ? (
                 <Button
-                  sx={{ mr: [3] }}
                   onClick={this.onAcceptClicked.bind(this)}>
                   {this.props.acceptButtonText}
                 </Button>
@@ -47,8 +47,8 @@ class Comment extends React.Component {
                   {this.props.rejectButtonText}
                 </Button>
               ) : null}
-            </Box>
-            <Flex sx={{ alignItems: 'center' }}>
+            </Flex>
+            <Flex sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
               <Link
                 target="_blank"
                 sx={{ mr: [2] }}
@@ -66,7 +66,7 @@ class Comment extends React.Component {
               ) : null}
             </Flex>
           </Flex>
-        </Box>
+        </Flex>
       </Card>
     )
   }

client-admin/src/components/conversation-admin/comment-moderation/index.js

@@ -67,14 +67,14 @@ class CommentModeration extends React.Component {
           }}>
           Moderate
         </Heading>
-        <Flex sx={{ mb: [4] }}>
+        <Flex sx={{ mb: [4], flexWrap: 'wrap' }}>
           <Link
             sx={{
               mr: [4],
               variant: url ? 'links.nav' : 'links.activeNav'
             }}
             to={`${match.url}`}>
-            Unmoderated{' '}
+            Unmoderated<br />
             {this.props.unmoderated.unmoderated_comments
               ? this.props.unmoderated.unmoderated_comments.length
               : null}
@@ -85,7 +85,7 @@ class CommentModeration extends React.Component {
               variant: url === 'accepted' ? 'links.activeNav' : 'links.nav'
             }}
             to={`${match.url}/accepted`}>
-            Accepted{' '}
+            Accepted<br />
             {this.props.accepted.accepted_comments
               ? this.props.accepted.accepted_comments.length
               : null}
@@ -96,7 +96,7 @@ class CommentModeration extends React.Component {
               variant: url === 'rejected' ? 'links.activeNav' : 'links.nav'
             }}
             to={`${match.url}/rejected`}>
-            Rejected{' '}
+            Rejected<br />
             {this.props.rejected.rejected_comments
               ? this.props.rejected.rejected_comments.length
               : null}

client-admin/src/components/conversation-admin/conversation-config.js

@@ -10,7 +10,7 @@ import {
 } from '../../actions'
 import ComponentHelpers from '../../util/component-helpers'
 import NoPermission from './no-permission'
-import { Heading, Box, Text, jsx } from 'theme-ui'
+import { Heading, Box, Text, jsx, Label } from 'theme-ui'
 import emoji from 'react-easy-emoji'
 
 import { CheckboxField } from './CheckboxField'
@@ -76,18 +76,20 @@ class ConversationConfig extends React.Component {
         </CheckboxField>
 
         <Box sx={{ mb: [3] }}>
-          <Text sx={{ mb: [2] }}>Topic</Text>
+          <Label htmlFor="topic" sx={{ mb: [2] }}>Topic</Label>
           <input
             ref={(c) => (this.topic = c)}
             sx={{
               fontFamily: 'body',
               fontSize: [2],
               width: '35em',
+              maxWidth: '100%',
               borderRadius: 2,
               padding: [2],
               border: '1px solid',
               borderColor: 'mediumGray'
             }}
+            name="topic"
             data-test-id="topic"
             onBlur={this.handleStringValueChange('topic').bind(this)}
             onChange={this.handleConfigInputTyping('topic').bind(this)}
@@ -96,20 +98,22 @@ class ConversationConfig extends React.Component {
         </Box>
 
         <Box sx={{ mb: [3] }}>
-          <Text sx={{ mb: [2] }}>Description</Text>
+          <Label htmlFor="description" sx={{ mb: [2] }}>Description</Label>
           <textarea
             ref={(c) => (this.description = c)}
             sx={{
               fontFamily: 'body',
               fontSize: [2],
               width: '35em',
+              maxWidth: '100%',
               height: '7em',
               resize: 'none',
               padding: [2],
               borderRadius: 2,
               border: '1px solid',
               borderColor: 'mediumGray'
             }}
+            name="description"
             data-test-id="description"
             onBlur={this.handleStringValueChange('description').bind(this)}
             onChange={this.handleConfigInputTyping('description').bind(this)}

client-admin/src/components/conversation-admin/index.js

@@ -47,7 +47,7 @@ class ConversationAdminContainer extends React.Component {
     const url = location.pathname.split('/')[3]
 
     return (
-      <Flex>
+      <Flex sx={{ flexWrap: 'wrap' }}>
         <Box sx={{ mr: [5], p: [4], flex: '0 0 275' }}>
           <Box sx={{ mb: [3] }}>
             <Link sx={{ variant: 'links.nav' }} to={`/`}>
@@ -98,31 +98,41 @@ class ConversationAdminContainer extends React.Component {
             </Link>
           </Box>
         </Box>
-        <Box sx={{ p: [4], flex: '0 0 auto', maxWidth: '35em', mx: [4] }}>
-          <Switch>
-            <Route
-              exact
-              path={`${match.path}/`}
-              component={ConversationConfig}
-            />
-            <Route
-              exact
-              path={`${match.path}/share`}
-              component={ShareAndEmbed}
-            />
-            <Route exact path={`${match.path}/reports`} component={Reports} />
-            <Route
-              path={`${match.path}/comments`}
-              component={ModerateComments}
-            />
-            <Route
-              exact
-              path={`${match.path}/stats`}
-              component={ConversationStats}
-            />
-            {/* <Route exact path={`${match.path}/export`} component={DataExport} /> */}
-          </Switch>
-        </Box>
+        <Flex
+          sx={{
+            flexGrow: 1,
+            justifyContent: 'center',
+            maxWidth: '35em',
+            p: [4],
+            mx: [4]
+          }}
+        >
+          <Box>
+            <Switch>
+              <Route
+                exact
+                path={`${match.path}/`}
+                component={ConversationConfig}
+              />
+              <Route
+                exact
+                path={`${match.path}/share`}
+                component={ShareAndEmbed}
+              />
+              <Route exact path={`${match.path}/reports`} component={Reports} />
+              <Route
+                path={`${match.path}/comments`}
+                component={ModerateComments}
+              />
+              <Route
+                exact
+                path={`${match.path}/stats`}
+                component={ConversationStats}
+              />
+              {/* <Route exact path={`${match.path}/export`} component={DataExport} /> */}
+            </Switch>
+          </Box>
+        </Flex>
       </Flex>
     )
   }

client-admin/src/components/conversation-admin/no-permission.js

@@ -7,7 +7,7 @@ class NoPermission extends React.Component {
   render() {
     return (
       <div id="no-permission-warning">
-        <div>{strings('no_permission')}</div>
+        <p>{strings('no_permission')}</p>
       </div>
     )
   }

client-admin/src/components/conversation-admin/seed-comment.js

@@ -64,6 +64,7 @@ class ModerateCommentsSeed extends React.Component {
               fontFamily: 'body',
               fontSize: [2],
               width: '35em',
+              maxWidth: '100%',
               height: '7em',
               resize: 'none',
               padding: [2],

client-admin/src/components/conversation-admin/share-and-embed.js

@@ -60,7 +60,7 @@ class ShareAndEmbed extends React.Component {
         <div>
           <p> Embed</p>
           <div>
-            <pre>
+            <pre style={{ whiteSpace: 'break-spaces' }}>
               {'<div'}
               {" class='polis'"}
               {" data-conversation_id='" + match.params.conversation_id + "'>"}

client-admin/src/components/conversation-admin/stats/conversation-stats-number-card.js

@@ -8,7 +8,7 @@ class NumberCard extends React.Component {
   render() {
     return (
       <Flex sx={{ my: [2] }}>
-        <Text sx={{ fontWeight: 700, mr: [2] }}>{this.props.datum}</Text>
+        <Text sx={{ fontWeight: 700, mr: [2], minWidth: 'unset' }}>{this.props.datum}</Text>
         <Text> {this.props.subheading} </Text>
       </Flex>
     )

client-admin/src/components/conversations-and-account/account.js

@@ -38,7 +38,7 @@ class Account extends React.Component {
   render() {
     return (
       <div>
-        {this.props.user.hname ? this.buildAccountMarkup() : <Spinner />}
+        {this.props.user?.hname ? this.buildAccountMarkup() : <Spinner />}
       </div>
     )
   }

client-admin/src/components/conversations-and-account/conversation.js

@@ -13,6 +13,7 @@ function Conversation({ c, i, goToConversation }) {
       <Text data-test-id="embed-page">
         {c.parent_url ? `Embedded on ${c.parent_url}` : null}
       </Text>
+      <br />
       <Text sx={{ mt: [2] }}>{c.participant_count} participants</Text>
     </Card>
   )

client-admin/src/components/conversations-and-account/conversations.js

@@ -103,17 +103,17 @@ class Conversations extends React.Component {
                 err.statusText}
             </Text>
           ) : null}
-          {conversations
+          {Array.isArray(conversations)
             ? conversations.map((c, i) => {
-                return this.filterCheck(c) ? (
-                  <Conversation
-                    key={c.conversation_id}
-                    c={c}
-                    i={i}
-                    goToConversation={this.goToConversation(c.conversation_id)}
-                  />
-                ) : null
-              })
+              return this.filterCheck(c) ? (
+                <Conversation
+                  key={c.conversation_id}
+                  c={c}
+                  i={i}
+                  goToConversation={this.goToConversation(c.conversation_id)}
+                />
+              ) : null
+            })
             : null}
         </Box>
       </Box>