Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mobile view #1797

Open
wants to merge 3 commits into
base: edge
Choose a base branch
from
+109 −85
Open

Mobile view #1797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ddd9d9
mobile view
thomassth Jul 11, 2024
1a7ba43
more mobile view
thomassth Jul 14, 2024
75d0415
comment blocks
thomassth Jul 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions client-admin/src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={`/`}>
Expand All @@ -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()}
Expand Down Expand Up @@ -227,6 +231,7 @@ class App extends React.Component {
component={Integrate}
/>
</Box>
</Flex>
</Flex>
)
}}
Expand Down
38 changes: 18 additions & 20 deletions client-admin/src/components/conversation-admin/CheckboxField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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>
)
}
Expand Down
18 changes: 9 additions & 9 deletions client-admin/src/components/conversation-admin/comment-moderation/comment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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>
Expand All @@ -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] }}
Expand All @@ -66,7 +66,7 @@ class Comment extends React.Component {
) : null}
</Flex>
</Flex>
</Box>
</Flex>
</Card>
)
}
Expand Down
8 changes: 4 additions & 4 deletions client-admin/src/components/conversation-admin/comment-moderation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand Down
10 changes: 7 additions & 3 deletions client-admin/src/components/conversation-admin/conversation-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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)}
Expand All @@ -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)}
Expand Down
62 changes: 36 additions & 26 deletions client-admin/src/components/conversation-admin/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={`/`}>
Expand Down Expand Up @@ -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>
)
}
Expand Down
2 changes: 1 addition & 1 deletion client-admin/src/components/conversation-admin/no-permission.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
1 change: 1 addition & 0 deletions client-admin/src/components/conversation-admin/seed-comment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ class ModerateCommentsSeed extends React.Component {
fontFamily: 'body',
fontSize: [2],
width: '35em',
maxWidth: '100%',
height: '7em',
resize: 'none',
padding: [2],
Expand Down
2 changes: 1 addition & 1 deletion client-admin/src/components/conversation-admin/share-and-embed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 + "'>"}
Expand Down
2 changes: 1 addition & 1 deletion client-admin/src/components/conversation-admin/stats/conversation-stats-number-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
2 changes: 1 addition & 1 deletion client-admin/src/components/conversations-and-account/account.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
1 change: 1 addition & 0 deletions client-admin/src/components/conversations-and-account/conversation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
20 changes: 10 additions & 10 deletions client-admin/src/components/conversations-and-account/conversations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading