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

support form: align styling with prod-zenodo #94

Merged
merged 1 commit into from
Nov 17, 2022
Merged

support form: align styling with prod-zenodo #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
38 changes: 34 additions & 4 deletions assets/less/zenodo-rdm/globals/site.overrides
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,41 @@ a.inverted {
}


#contact-page {
#contact-page {

.panel-body {
padding-top: 2*@defaultPadding;
padding-left: 2*@defaultPadding;
.field.flex {
@media screen and (max-width: @largestMobileScreen) {
display: block;
width: 100% !important;
}

label {
min-width: 10rem;

+ div {
flex: 1 1 0;
}
}

.toggle {
text-align: left;
}
}

.label-padding {
padding-left: 10rem;

@media screen and (max-width: @largestMobileScreen) {
padding-left: 0;
}
}

.dropzone {
width: 100%;
border: 1px solid @borderColor;
border-radius: @defaultBorderRadius;
padding: @defaultPadding;
cursor: pointer;
}
}

14 changes: 10 additions & 4 deletions site/zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/support/components/CategoryDropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ class CategoryDropdown extends Component {
}

render() {
const { categories } = this.props;
const { categories, className } = this.props;
kpsherva marked this conversation as resolved.
Show resolved Hide resolved
const { activeCategory} = this.state;

const serializedCategories = categories.map((cat) => (this.serializeCategory(cat)));
Expand All @@ -52,21 +52,27 @@ class CategoryDropdown extends Component {
required
width={4}
onChange={this.onChange}
className={className}
/>
<div
className="label-padding"
dangerouslySetInnerHTML={{ __html: activeCategory?.description }}
/>
{<div dangerouslySetInnerHTML={{ __html: activeCategory?.description }}/>}
</>
)
}
}

CategoryDropdown.propTypes = {
categories: PropTypes.array,
defaultCategory: PropTypes.string
defaultCategory: PropTypes.string,
className: PropTypes.string,
};

CategoryDropdown.defaultProps = {
categories: [],
defaultCategory: ''
defaultCategory: '',
className: '',
};

export default CategoryDropdown;
49 changes: 23 additions & 26 deletions site/zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/support/components/FileUploader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,30 @@ import FileTable from "./FileTable";

const FileUploader = ({ dropzoneParams, maxFileSize, name, currentFiles, handleDelete }) => {
return (
<Dropzone {...dropzoneParams}>
{({ getRootProps, getInputProps }) => {
const inpProps = {
...getInputProps(),
// Display the dropzone input, otherwise it's hidden by default.
style: {
'display': 'block'
},
name: name
}
return (
<div {...getRootProps()}>
<input {...inpProps} />
<label className="helptext mt-0">
{`Optional. Max attachments size:`} {humanReadableBytes(maxFileSize, false)}
</label>
{currentFiles.length > 0
&&
<FileTable
handleDelete={handleDelete}
filesList={currentFiles}
/>
}
<div>
<Dropzone {...dropzoneParams}>
{({ getRootProps, getInputProps }) => (
<div id="file-dropzone" {...getRootProps({className: "dropzone"})}>
<input {...getInputProps()} name={name} />
<p className="ui medium header text-align-center m-0">
Drag files here, or click to select files
</p>
</div>
)
}}
</Dropzone>
)}
</Dropzone>

<label className="helptext mt-5">
{`Optional. Max attachments size:`} {humanReadableBytes(maxFileSize, false)}
</label>

{currentFiles.length > 0
&&
<FileTable
handleDelete={handleDelete}
filesList={currentFiles}
/>
}
</div>
);
};

Expand Down
59 changes: 31 additions & 28 deletions site/zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/support/components/SupportForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,8 @@ class SupportForm extends Component {
// TODO: show error message when files are rejected e.g size limit
console.error(rejectedFiles[0].errors);
},
noClick: true,
noKeyboard: true,
maxSize: maxFileSize,
accept: ".jpeg,.jpg,.png"
accept: ".jpeg,.jpg,.png",
};
return (
<SemanticForm
Expand All @@ -143,51 +141,39 @@ class SupportForm extends Component {
fieldPath="name"
required
fluid={false}
width={4}
width={8}
className="field flex"
/>
<TextField
disabled={isUserAuthenticated}
label='Email'
fieldPath="email"
required
fluid={false}
width={4}
width={8}
className="field flex"
/>
<CategoryDropdown
categories={categories}
defaultCategory={defaultCategory}
className="eight wide field flex"
/>
<TextField
label='Subject'
fieldPath="subject"
required
fluid={false}
className='mt-10'
className='field flex rel-mt-1'
required
/>
<TextAreaField
label='Description'
label='How can we help?'
fieldPath="description"
className="field flex"
required
/>
<div className="field">
<label>
{`Browser & OS`}
</label>
<ToggleField
fieldPath='sysInfo'
offLabel='Include browser and system information to assist us with narrowing down the cause of your problem.'
onLabel='Include browser and system information to assist us with narrowing down the cause of your problem.'
offValue={false}
onValue={true}
/>
<label className="helptext">
{sysInfo}
</label>
</div>
<div className="field">
<label>
{`Files`}
</label>

<div className="field flex">
<label htmlFor="file-dropzone">Files</label>
<FileUploader
dropzoneParams={dropzoneParams}
maxFileSize={maxFileSize}
Expand All @@ -200,7 +186,24 @@ class SupportForm extends Component {
}}
/>
</div>
<Modal.Actions>

<div className="field flex">
<label htmlFor="sysInfo">
Browser & OS
</label>
<div>
<ToggleField
fieldPath='sysInfo'
offLabel='Include browser and system information to assist us with narrowing down the cause of your problem.'
onLabel='Include browser and system information to assist us with narrowing down the cause of your problem.'
offValue={false}
onValue={true}
/>
<label className="helptext">{sysInfo}</label>
</div>
</div>

<Modal.Actions className="label-padding">
<Button type="submit" positive>
Send Request
</Button>
Expand Down
6 changes: 3 additions & 3 deletions site/zenodo_rdm/templates/semantic-ui/zenodo_rdm/support.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
{%- set userData = user and { 'email': user.email, 'full_name': user.user_profile.full_name }%}

{% block grid_section %}
<div id="contact-page" class="ui one column grid container p-15">
<div id="contact-page" class="ui one column grid container rel-pt-3">
<div class="row">
<div class="column">
<div class="sixteen wide mobile sixteen wide tablet ten wide computer column">
<div class="panel-body mt-5">
<h2 class="ui header mb-10">Contact us</h2>
<p>Before making a request, you can have a look at our <a href="http://help.zenodo.org">FAQ</a> and <a href="http://about.zenodo.org">other resources</a> for more detailed information about the operation, features and goals of Zenodo.</p>
Expand All @@ -21,7 +21,7 @@ <h2 class="ui header mb-10">Contact us</h2>
</div>
</div>
<div class="row">
<div class="column">
<div class="sixteen wide mobile sixteen wide tablet ten wide computer column">
{% block root_section %}
<div id="zenodo-rdm-support-root" class="panel-body"></div>
{% endblock %}
Expand Down