tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-07-25 23:05:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix mobile style. (#810)

Browse Source 
* Fix header style.

* Fix check ticket mobile style.

* Fix footer style bug.

* Fix admin panel departments.

* Fix admin panel system preferences.

* Fix article list.

* Fix admin panel staff menbers.

* Fix admin panel ban users.

* fix admin panel advance settings.

* Fix ticket viewer first part.

* Fix ticket viewer second part.

* Fix  ticket viewer header.

* fix admin panel departments

* Fix admin panel system preferences second part.

* fix admin panel ban users second part.

* Fix full width.

* fix loading in admin panel email settings.

* Fix admin panel departments second part.
This commit is contained in:
LautaroCesso 2020-06-25 15:25:24 -03:00 committed by GitHub
parent 82d6f47eea
commit d3f95bde05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 432 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/app-components/people-list.scss
View File

@ -61,4 +61,28 @@
&__pagination { &__pagination {
} }
}
@media screen and (max-width: 415px) {
.people-list {
&__item {
height: unset;
padding: unset;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
&-profile-pic-wrapper {
top: 15px;
left: 15px;
}
&-block {
width: unset;
display: unset;
padding: 15px 10px 0 0;
}
}
}
}
}

147
client/src/app-components/ticket-viewer.js
View File

@ -108,7 +108,7 @@ class TicketViewer extends React.Component {
const {ticketNumber, title, author, editedTitle, language} = ticket; const {ticketNumber, title, author, editedTitle, language} = ticket;
return( return(
<div className="ticket-viewer__header row"> <div className="ticket-viewer__header">
<span className="ticket-viewer__number">#{ticketNumber}</span> <span className="ticket-viewer__number">#{ticketNumber}</span>
<span className="ticket-viewer__title">{title}</span> <span className="ticket-viewer__title">{title}</span>
<span className="ticket-viewer__flag"> <span className="ticket-viewer__flag">
@ -136,7 +136,7 @@ class TicketViewer extends React.Component {
renderEditableTitle(){ renderEditableTitle(){
return( return(
<div className="ticket-viewer__header row"> <div className="ticket-viewer__header">
<div className="ticket-viewer__edit-title-box"> <div className="ticket-viewer__edit-title-box">
<FormField className="ticket-viewer___input-edit-title" error={this.state.editTitleError} value={this.state.newTitle} field='input' onChange={(e) => this.setState({newTitle: e.target.value })} /> <FormField className="ticket-viewer___input-edit-title" error={this.state.editTitleError} value={this.state.newTitle} field='input' onChange={(e) => this.setState({newTitle: e.target.value })} />
</div> </div>
@ -164,49 +164,58 @@ class TicketViewer extends React.Component {
return ( return (
<div className="ticket-viewer__headers"> <div className="ticket-viewer__headers">
<div className="ticket-viewer__info-row-header row"> <div className="ticket-viewer__info">
<div className="col-md-4">{i18n('DEPARTMENT')}</div> <div className="ticket-viewer__info-container-editable">
<div className="col-md-4">{i18n('AUTHOR')}</div> <div className="ticket-viewer__info-header">{i18n('DEPARTMENT')}</div>
<div className="col-md-4">{i18n('TAGS')}</div> <div className="ticket-viewer__info-value">
</div> <DepartmentDropdown className="ticket-viewer__editable-dropdown"
<div className="ticket-viewer__info-row-values row"> departments={departments}
<div className="col-md-4"> selectedIndex={_.findIndex(departments, {id: this.props.ticket.department.id})}
<DepartmentDropdown className="ticket-viewer__editable-dropdown" onChange={this.onDepartmentDropdownChanged.bind(this)} />
departments={departments} </div>
selectedIndex={_.findIndex(departments, {id: this.props.ticket.department.id})}
onChange={this.onDepartmentDropdownChanged.bind(this)} />
</div> </div>
<div className="col-md-4">{ticket.author.name}</div> <div className="ticket-viewer__info-container-editable">
<div className="col-md-4"> <div className="ticket-viewer__info-header">{i18n('AUTHOR')}</div>
<TagSelector <div className="ticket-viewer__info-value">{ticket.author.name}</div>
items={this.props.tags} </div>
values={this.props.ticket.tags} <div className="ticket-viewer__info-container-editable">
onRemoveClick={this.removeTag.bind(this)} <div className="ticket-viewer__info-header">{i18n('TAGS')}</div>
onTagSelected={this.addTag.bind(this)} <div className="ticket-viewer__info-value">
loading={this.state.tagSelectorLoading}/> <TagSelector
items={this.props.tags}
values={this.props.ticket.tags}
onRemoveClick={this.removeTag.bind(this)}
onTagSelected={this.addTag.bind(this)}
loading={this.state.tagSelectorLoading}/>
</div>
</div> </div>
</div> </div>
<div className="ticket-viewer__info-row-header row">
<div className="col-md-4">{i18n('PRIORITY')}</div> <div className="ticket-viewer__info">
<div className="col-md-4">{i18n('OWNER')}</div> <div className="ticket-viewer__info-container-editable">
<div className="col-md-4">{i18n('STATUS')}</div> <div className="ticket-viewer__info-header">{i18n('PRIORITY')}</div>
</div> <div className="ticket-viewer__info-value">
<div className="ticket-viewer__info-row-values row"> <DropDown
<div className="col-md-4"> className="ticket-viewer__editable-dropdown"
<DropDown items={priorityList}
className="ticket-viewer__editable-dropdown" selectedIndex={priorities[ticket.priority]}
items={priorityList} onChange={this.onPriorityDropdownChanged.bind(this)} />
selectedIndex={priorities[ticket.priority]} </div>
onChange={this.onPriorityDropdownChanged.bind(this)} />
</div> </div>
<div className="col-md-4"> <div className="ticket-viewer__info-container-editable">
{this.renderAssignStaffList()} <div className="ticket-viewer__info-header">{i18n('OWNER')}</div>
<div className="ticket-viewer__info-value">
{this.renderAssignStaffList()}
</div>
</div> </div>
<div className="col-md-4"> <div className="ticket-viewer__info-container-editable">
{ticket.closed ? <div className="ticket-viewer__info-header">{i18n('STATUS')}</div>
<Button type='secondary' size="extra-small" onClick={this.onReopenClick.bind(this)}> <div className="ticket-viewer__info-value">
{i18n('RE_OPEN')} {ticket.closed ?
</Button> : i18n('OPENED')} <Button type='secondary' size="extra-small" onClick={this.onReopenClick.bind(this)}>
{i18n('RE_OPEN')}
</Button> : i18n('OPENED')}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -223,33 +232,41 @@ class TicketViewer extends React.Component {
return ( return (
<div className="ticket-viewer__headers"> <div className="ticket-viewer__headers">
<div className="ticket-viewer__info-row-header row"> <div className="ticket-viewer__info">
<div className="ticket-viewer__department col-md-4">{i18n('DEPARTMENT')}</div> <div className="ticket-viewer__info-container">
<div className="ticket-viewer__author col-md-4">{i18n('AUTHOR')}</div> <div className="ticket-viewer__info-header">{i18n('DEPARTMENT')}</div>
<div className="ticket-viewer__date col-md-4">{i18n('TAGS')}</div> <div className="ticket-viewer__info-value">{ticket.department.name}</div>
</div>
<div className="ticket-viewer__info-row-values row">
<div className="ticket-viewer__department col-md-4">{ticket.department.name}</div>
<div className="ticket-viewer__author col-md-4">{ticket.author.name}</div>
<div className="col-md-4">{ticket.tags.length ? ticket.tags.map((tagName,index) => {
let tag = _.find(this.props.tags, {name:tagName});
return <Tag name={tag && tag.name} color={tag && tag.color} key={index} />
}) : i18n('NONE')}</div>
</div>
<div className="ticket-viewer__info-row-header row">
<div className="ticket-viewer__department col-md-4">{i18n('PRIORITY')}</div>
<div className="ticket-viewer__author col-md-4">{i18n('OWNER')}</div>
<div className="ticket-viewer__date col-md-4">{i18n('STATUS')}</div>
</div>
<div className="ticket-viewer__info-row-values row">
<div className="col-md-4">
{i18n(priorities[this.props.ticket.priority || 'low'])}
</div> </div>
<div className="col-md-4"> <div className="ticket-viewer__info-container">
{this.renderOwnerNode()} <div className="ticket-viewer__info-header">{i18n('AUTHOR')}</div>
<div className="ticket-viewer__info-value">{ticket.author.name}</div>
</div> </div>
<div className="col-md-4"> <div className="ticket-viewer__info-container">
{i18n((this.props.ticket.closed) ? 'CLOSED' : 'OPENED')} <div className="ticket-viewer__info-header">{i18n('TAGS')}</div>
<div className="ticket-viewer__info-value">{ticket.tags.length ? ticket.tags.map((tagName,index) => {
let tag = _.find(this.props.tags, {name:tagName});
return <Tag name={tag && tag.name} color={tag && tag.color} key={index} />
}) : i18n('NONE')}</div>
</div>
</div>
<div className="ticket-viewer__info">
<div className="ticket-viewer__info-container">
<div className="ticket-viewer__info-header">{i18n('PRIORITY')}</div>
<div className="ticket-viewer__info-value">
{i18n(priorities[this.props.ticket.priority || 'low'])}
</div>
</div>
<div className="ticket-viewer__info-container">
<div className="ticket-viewer__info-header">{i18n('OWNER')}</div>
<div className="ticket-viewer__info-value">
{this.renderOwnerNode()}
</div>
</div>
<div className="ticket-viewer__info-container">
<div className="ticket-viewer__info-header">{i18n('STATUS')}</div>
<div className="ticket-viewer__info-value">
{i18n((this.props.ticket.closed) ? 'CLOSED' : 'OPENED')}
</div>
</div> </div>
</div> </div>
</div> </div>

86
client/src/app-components/ticket-viewer.scss
View File

@ -12,7 +12,7 @@
display: flex; display: flex;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
position: relative;
&:hover { &:hover {
.ticket-viewer__edit-title-icon { .ticket-viewer__edit-title-icon {
color: $grey; color: $grey;
@ -23,13 +23,13 @@
&__edited-title-text { &__edited-title-text {
font-style: italic; font-style: italic;
font-size: 14px; font-size: 14px;
margin-left: 10px; margin: 0 10px;
} }
&__edit-title-icon { &__edit-title-icon {
position: absolute;
color: #414A59; color: #414A59;
right: 12px; right: 12px;
margin: 0 10px;
&:hover { &:hover {
cursor:pointer; cursor:pointer;
} }
@ -49,27 +49,52 @@
&__number { &__number {
color: white; color: white;
margin-right: 10px; margin-right: 30px;
font-size: 14px; font-size: 14px;
} }
&__title { &__title {
display: inline-block; max-width: 375px;
} }
&__flag { &__flag {
margin-left: 10px; margin-left: 30px;
} }
&__info-row-header { &__info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
background-color: $light-grey; background-color: $light-grey;
font-weight: bold; padding: 0 15px;
}
&__info-row-values { &-container {
background-color: $light-grey; display: flex;
color: $secondary-blue; flex-direction: column;
padding-bottom: 10px; justify-content: space-around;
align-items: center;
min-width: 150px;
max-width: 250px;
}
&-container-editable {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
min-width: 300px;
}
&-header {
font-weight: bold;
}
&-value {
color: $secondary-blue;
padding-bottom: 10px;
}
} }
&__editable-dropdown { &__editable-dropdown {
@ -136,4 +161,39 @@
&__delete-button { &__delete-button {
margin-left: 10px; margin-left: 10px;
} }
@media screen and (max-width: 1151px) {
.ticket-viewer__info {
&-container {
width: 200px;
min-width: unset;
max-width: unset;
}
&-container-editable {
min-width: 250px;
max-width: 300px;
}
}
}
@media screen and (max-width: 992px) {
.ticket-viewer__info {
flex-direction: column;
justify-content: space-between;
align-items: center;
}
}
@media screen and (max-width: 571px) {
.ticket-viewer {
&__number, &__edit-title-icon {
margin: 0 5px;
}
&__flag {
padding: 0 10px;
}
}
}
} }

2
client/src/app/admin/panel/admin-panel-layout.js
View File

@ -29,7 +29,7 @@ class AdminPanel extends React.Component {
</div> </div>
<div className="row"> <div className="row">
<div className="col-md-12 admin-panel-layout__content"> <div className="col-md-12 admin-panel-layout__content">
<Widget> <Widget className='admin-panel-layout__content__widget'>
{this.props.children} {this.props.children}
</Widget> </Widget>
</div> </div>

6
client/src/app/admin/panel/admin-panel-layout.scss
View File

@ -4,4 +4,10 @@
&__header { &__header {
margin-bottom: 20px; margin-bottom: 20px;
} }
@media screen and (max-width: 415px) {
.admin-panel-layout__content__widget {
padding: 20px 5px;
}
}
} }

9
client/src/app/admin/panel/articles/admin-panel-list-articles.scss
View File

@ -3,4 +3,11 @@
&__list { &__list {
padding: 0 50px; padding: 0 50px;
} }
}
@media screen and (max-width: 415px) {
.admin-panel-list-articles__list {
padding: 0;
}
}
}

4
client/src/app/admin/panel/settings/admin-panel-advanced-settings.js
View File

@ -94,7 +94,7 @@ class AdminPanelAdvancedSettings extends React.Component {
<div className="col-md-4"> <div className="col-md-4">
<Listing {...this.getListingProps()} /> <Listing {...this.getListingProps()} />
</div> </div>
<div className="col-md-8"> <div className="col-md-8 admin-panel-advanced-settings__api-keys__container">
{(this.state.selectedAPIKey === -1) ? this.renderNoKey() : this.renderKey()} {(this.state.selectedAPIKey === -1) ? this.renderNoKey() : this.renderKey()}
</div> </div>
</div> </div>
@ -123,7 +123,7 @@ class AdminPanelAdvancedSettings extends React.Component {
let currentAPIKey = this.state.APIKeys[this.state.selectedAPIKey]; let currentAPIKey = this.state.APIKeys[this.state.selectedAPIKey];
return ( return (
<div className="admin-panel-advanced-settings__api-keys-info"> <div className="admin-panel-advanced-settings__api-keys__container-info">
<div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('NAME_OF_KEY')}</div> <div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('NAME_OF_KEY')}</div>
<div className="admin-panel-advanced-settings__api-keys-data">{currentAPIKey.name}</div> <div className="admin-panel-advanced-settings__api-keys-data">{currentAPIKey.name}</div>
<div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('KEY')}</div> <div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('KEY')}</div>

30
client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss
View File

@ -27,7 +27,7 @@
text-align: left; text-align: left;
} }
&-info { &__container-info {
text-align: left; text-align: left;
} }
@ -58,4 +58,32 @@
&__message { &__message {
margin-bottom: 20px; margin-bottom: 20px;
} }
@media screen and (max-width: 415px) {
.admin-panel-advanced-settings {
&__api-keys {
&-button {
margin-bottom: 30px;
width: 150px;
}
&__container {
padding: 30px 0;
&-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
&-subtitle {
margin: 10px 0 0 0;
}
}
}
}
} }

8
client/src/app/admin/panel/settings/admin-panel-email-settings.scss
View File

@ -1,6 +1,14 @@
@import "../../../../scss/vars"; @import "../../../../scss/vars";
.admin-panel-email-settings { .admin-panel-email-settings {
&__loading {
min-height: 361px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: $grey;
}
&__text-area { &__text-area {
width: 100%; width: 100%;

12
client/src/app/admin/panel/settings/admin-panel-system-preferences.js
View File

@ -52,9 +52,9 @@ class AdminPanelSystemPreferences extends React.Component {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-md-6"> <div className="col-md-6 admin-panel-system-preferences__form-fields">
<FormField label={i18n('SUPPORT_CENTER_URL')} fieldProps={{size: 'large'}} name="url" validation="URL" required/> <FormField className="admin-panel-system-preferences__form-fields__input" label={i18n('SUPPORT_CENTER_URL')} fieldProps={{size: 'large'}} name="url" validation="URL" required/>
<FormField label={i18n('SUPPORT_CENTER_LAYOUT')} fieldProps={{size: 'large', items: [{content: i18n('BOXED')}, {content: i18n('FULL_WIDTH')}]}} field="select" name="layout" /> <FormField className="admin-panel-system-preferences__form-fields__select" label={i18n('SUPPORT_CENTER_LAYOUT')} fieldProps={{size: 'large', items: [{content: i18n('BOXED')}, {content: i18n('FULL_WIDTH')}]}} field="select" name="layout" />
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<FormField label={i18n('SUPPORT_CENTER_TITLE')} fieldProps={{size: 'large'}} name="title" validation="TITLE" required/> <FormField label={i18n('SUPPORT_CENTER_TITLE')} fieldProps={{size: 'large'}} name="title" validation="TITLE" required/>
@ -99,12 +99,12 @@ class AdminPanelSystemPreferences extends React.Component {
<span className="separator" /> <span className="separator" />
</div> </div>
</div> </div>
<div className="row"> <div className="row admin-panel-system-preferences__container">
<div className="col-md-4 col-md-offset-2"> <div className="col-md-4 col-md-offset-2">
<SubmitButton type="secondary">{i18n('UPDATE_SETTINGS')}</SubmitButton> <SubmitButton className="admin-panel-system-preferences__container__button" type="secondary">{i18n('UPDATE_SETTINGS')}</SubmitButton>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<Button onClick={this.onDiscardChangesSubmit.bind(this)}>{i18n('DISCARD_CHANGES')}</Button> <Button className="admin-panel-system-preferences__container__button" onClick={this.onDiscardChangesSubmit.bind(this)}>{i18n('DISCARD_CHANGES')}</Button>
</div> </div>
</div> </div>
</Form> </Form>

28
client/src/app/admin/panel/settings/admin-panel-system-preferences.scss
View File

@ -51,4 +51,30 @@
&__message { &__message {
margin-top: 20px; margin-top: 20px;
} }
}
@media screen and (max-width: 376px) {
.admin-panel-system-preferences {
&__form-fields {
padding: 0;
&__input, &__select {
padding: 0 15px;
}
}
}
}
@media screen and (max-width: 415px) {
.admin-panel-system-preferences {
&__container__button {
margin: 10px;
}
&__languages {
&-allowed, &-supported {
display: unset;
}
}
}
}
}

15
client/src/app/admin/panel/staff/admin-panel-departments.js
View File

@ -70,11 +70,11 @@ class AdminPanelDepartments extends React.Component {
<div className="col-md-8"> <div className="col-md-8">
{(errorMessage) ? <Message type="error">{i18n(errorMessage)}</Message> : null} {(errorMessage) ? <Message type="error">{i18n(errorMessage)}</Message> : null}
<Form {...this.getFormProps()}> <Form {...this.getFormProps()}>
<div> <div className="admin-panel-departments__container">
<FormField className="admin-panel-departments__name" label={i18n('NAME')} name="name" validation="NAME" required fieldProps={{size: 'large'}}/> <FormField className="admin-panel-departments__container__name" label={i18n('NAME')} name="name" validation="NAME" required fieldProps={{size: 'large'}}/>
<div className="admin-panel-departments__private-option"> <div className="admin-panel-departments__private-option">
<FormField label={i18n('PRIVATE')} name="private" field="checkbox"/> <FormField label={i18n('PRIVATE')} name="private" field="checkbox"/>
<InfoTooltip className="admin-panel-departments__info-tooltip" text={i18n('PRIVATE_DEPARTMENT_DESCRIPTION')} /> <InfoTooltip className="admin-panel-departments__container__info-tooltip" text={i18n('PRIVATE_DEPARTMENT_DESCRIPTION')} />
</div> </div>
</div> </div>
<SubmitButton <SubmitButton
@ -95,7 +95,7 @@ class AdminPanelDepartments extends React.Component {
</div> </div>
); );
} }
renderDefaultDepartmentForm() { renderDefaultDepartmentForm() {
const { const {
defaultDepartmentError, defaultDepartmentError,
@ -120,9 +120,7 @@ class AdminPanelDepartments extends React.Component {
decorator={DepartmentDropdown} decorator={DepartmentDropdown}
fieldProps={{ departments: getPublicDepartmentList() , size: 'medium' }} fieldProps={{ departments: getPublicDepartmentList() , size: 'medium' }}
/> />
<div className="admin-panel-departments__default-departments-container__form__fields__lock-option"> <FormField className="admin-panel-departments__default-departments-container__form__fields__checkbox" label={i18n('LOCK_DEPARTMENT_DESCRIPTION')} name="locked" field="checkbox"/>
<FormField label={i18n('LOCK_DEPARTMENT_DESCRIPTION')} name="locked" field="checkbox"/>
</div>
</div> </div>
<SubmitButton <SubmitButton
className="admin-panel-departments__default-departments-container__form__button" className="admin-panel-departments__default-departments-container__form__button"
@ -215,7 +213,8 @@ class AdminPanelDepartments extends React.Component {
onChange: (form) => {this.setState({form, edited: true})}, onChange: (form) => {this.setState({form, edited: true})},
onValidateErrors: (errors) => {this.setState({errors})}, onValidateErrors: (errors) => {this.setState({errors})},
onSubmit: this.onFormSubmit.bind(this), onSubmit: this.onFormSubmit.bind(this),
loading: formLoading loading: formLoading,
className: 'admin-panel-departments__form'
}; };
} }

67
client/src/app/admin/panel/staff/admin-panel-departments.scss
View File

@ -7,17 +7,28 @@
} }
&__update-name-button { &__update-name-button {
float: left;
min-width: 156px; min-width: 156px;
} }
&__name { &__container{
display:inline-block;margin-right: 101px; display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 460px;
&__info-tooltip {
margin-left: 2px;
}
} }
&__private-option {
display:inline-block; &__form {
margin-left: 10px; display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
} }
&__default-departments-container { &__default-departments-container {
&__form { &__form {
text-align: left; text-align: left;
@ -28,16 +39,6 @@
justify-content: space-around; justify-content: space-around;
align-items: flex-start; align-items: flex-start;
padding-bottom: 10px; padding-bottom: 10px;
&__lock-option {
display: flex;
flex-direction: row;
align-items: center;
&__info-tooltip {
padding-left: 5px;
}
}
} }
&__button { &__button {
min-width: 156px; min-width: 156px;
@ -81,7 +82,37 @@
text-transform: lowercase; text-transform: lowercase;
margin-left: 3px; margin-left: 3px;
} }
&__info-tooltip {
margin-left: 2px; @media screen and (max-width: 415px) {
.admin-panel-departments {
&__container{
display: unset;
width: 100%;
&__name {
margin: 30px;
}
&__private-option {
margin: 10px;
}
}
&__update-name-button {
float: unset;
margin: 15px;
}
&__default-departments-container__form__fields {
&__checkbox {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
}
} }
} }

17
client/src/app/admin/panel/staff/admin-panel-staff-members.scss
View File

@ -26,4 +26,21 @@
&__private { &__private {
margin-left: 5px; margin-left: 5px;
} }
@media screen and (max-width: 415px) {
.admin-panel-staff-members {
&__drowpdown {
float: unset;
}
&__button {
float: unset;
margin: 15px;
}
&__wrapper {
height: unset;
}
}
}
} }

11
client/src/app/admin/panel/tickets/admin-panel-view-ticket.scss
View File

@ -15,4 +15,13 @@
&__ticket-view { &__ticket-view {
margin: 20px 30px; margin: 20px 30px;
} }
}
@media screen and (max-width: 415px) {
margin: 0;
.admin-panel-view-ticket__ticket-view {
margin: 20px 0;
}
}
}

4
client/src/app/admin/panel/users/admin-panel-ban-users.js
View File

@ -50,7 +50,7 @@ class AdminPanelBanUsers extends React.Component {
</span> </span>
<Form {...this.getFormProps()}> <Form {...this.getFormProps()}>
<FormField className="admin-panel-ban-users__input" placeholder="email" name="email" validation="EMAIL" required fieldProps={{size: 'large'}}/> <FormField className="admin-panel-ban-users__input" placeholder="email" name="email" validation="EMAIL" required fieldProps={{size: 'large'}}/>
<SubmitButton>{i18n('BAN_EMAIL')}</SubmitButton> <SubmitButton className="admin-panel-ban-users__submit-button">{i18n('BAN_EMAIL')}</SubmitButton>
</Form> </Form>
{this.renderMessage()} {this.renderMessage()}
</div> </div>
@ -156,4 +156,4 @@ class AdminPanelBanUsers extends React.Component {
} }
} }
export default AdminPanelBanUsers; export default AdminPanelBanUsers;

31
client/src/app/admin/panel/users/admin-panel-ban-users.scss
View File

@ -33,4 +33,33 @@
&__form-message { &__form-message {
margin-top: 20px; margin-top: 20px;
} }
}
@media screen and (max-width: 415px) {
.admin-panel-ban-users {
&__input {
display: unset;
}
&__submit-button {
margin: 20px 0;
}
&__ban-email {
margin-top: 40px;
}
&__email-row {
text-align: unset;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
&__un-ban-button {
float: unset;
margin: 15px 0;
}
}
}
}

7
client/src/app/app.scss
View File

@ -12,16 +12,13 @@
&-header { &-header {
border-radius: 0; border-radius: 0;
height: 40px;
&__login-links { &__login-links {
padding-top: 8px;
padding-left: 22px;
} }
&__languages { &__languages {
top: 10px;
left: -20px;
} }
} }

20
client/src/app/main/main-check-ticket-page.scss
View File

@ -21,4 +21,22 @@
height: 78px; height: 78px;
width: 304px; width: 304px;
} }
}
@media screen and (max-width: 415px) {
.main-check-ticket-page {
&__inputs {
display: unset;
}
&__input {
width: 300px;
margin: 0;
display: unset;
}
&__form {
width: 280px;
}
}
}
}

16
client/src/app/main/main-layout-footer.scss
View File

@ -3,7 +3,7 @@
.main-layout-footer { .main-layout-footer {
background-color: $primary-blue; background-color: $primary-blue;
text-align: center; text-align: center;
height: 32px; min-height: 32px;
width: 100%; width: 100%;
&__powered, &__powered,
@ -37,4 +37,16 @@
padding-left: 20px; padding-left: 20px;
} }
} }
}
@media screen and (max-width: 415px) {
&_admin-panel {
.main-layout-footer {
&__powered,
&__extra-link {
float: unset;
padding: 5px;
}
}
}
}
}

5
client/src/app/main/main-layout-header.js
View File

@ -37,18 +37,19 @@ class MainLayoutHeader extends React.Component {
result = ( result = (
<div className="main-layout-header__login-links"> <div className="main-layout-header__login-links">
<Button <Button
className="main-layout-header__login-links__button"
type="clean" type="clean"
onClick={this.onHideLoginForm.bind(this)} onClick={this.onHideLoginForm.bind(this)}
route={{to:'/'}}> route={{to:'/'}}>
{i18n('HOME')} {i18n('HOME')}
</Button> </Button>
{(config['registration'] * 1) ? {(config['registration'] * 1) ?
<Button type="clean" route={{to:'/signup'}}> <Button className="main-layout-header__login-links__button" type="clean" route={{to:'/signup'}}>
{i18n('SIGN_UP')} {i18n('SIGN_UP')}
</Button> : </Button> :
null} null}
{!config['mandatory-login'] ? {!config['mandatory-login'] ?
<Button type="clean" onClick={this.onShowLoginForm.bind(this)} route={{to:'/'}}> <Button className="main-layout-header__login-links__button" type="clean" onClick={this.onShowLoginForm.bind(this)} route={{to:'/'}}>
{i18n('LOG_IN')} {i18n('LOG_IN')}
</Button> : </Button> :
null} null}

36
client/src/app/main/main-layout-header.scss
View File

@ -17,33 +17,21 @@
border-top-left-radius: 4px; border-top-left-radius: 4px;
color: white; color: white;
display: inline-block; display: inline-block;
height: 32px; min-height: 32px;
padding: 5px 20px 0 10px; width: 100%;
padding: 5px 170px 5px 10px;
&__button {
margin: 5px;
}
} }
&__languages { &__languages {
display: inline-block; right: 5px;
position: relative; position: absolute;
top: 5px; bottom: 0;
margin: 0 6px; margin: 0 6px;
} }
@media screen and (max-width: 500px) { }
.main-layout-header__languages {
float: none;
}
}
@media (max-width: 363px) {
.main-layout-header__login-links{
padding: 8px 0 0 0;
}
}
@media (max-width: 350px) {
.main-layout-header__languages {
margin: 0 3px;
left: unset;
}
}
}