tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix mobile style. (#810) 

* 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 {
}
}
@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;
return(
<div className="ticket-viewer__header row">
<div className="ticket-viewer__header">
<span className="ticket-viewer__number">#{ticketNumber}</span>
<span className="ticket-viewer__title">{title}</span>
<span className="ticket-viewer__flag">
@ -136,7 +136,7 @@ class TicketViewer extends React.Component {
renderEditableTitle(){
return(
<div className="ticket-viewer__header row">
<div className="ticket-viewer__header">
<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 })} />
</div>
@ -164,49 +164,58 @@ class TicketViewer extends React.Component {
return (
<div className="ticket-viewer__headers">
<div className="ticket-viewer__info-row-header row">
<div className="col-md-4">{i18n('DEPARTMENT')}</div>
<div className="col-md-4">{i18n('AUTHOR')}</div>
<div className="col-md-4">{i18n('TAGS')}</div>
</div>
<div className="ticket-viewer__info-row-values row">
<div className="col-md-4">
<DepartmentDropdown className="ticket-viewer__editable-dropdown"
departments={departments}
selectedIndex={_.findIndex(departments, {id: this.props.ticket.department.id})}
onChange={this.onDepartmentDropdownChanged.bind(this)} />
<div className="ticket-viewer__info">
<div className="ticket-viewer__info-container-editable">
<div className="ticket-viewer__info-header">{i18n('DEPARTMENT')}</div>
<div className="ticket-viewer__info-value">
<DepartmentDropdown className="ticket-viewer__editable-dropdown"
departments={departments}
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="col-md-4">
<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 className="ticket-viewer__info-container-editable">
<div className="ticket-viewer__info-header">{i18n('AUTHOR')}</div>
<div className="ticket-viewer__info-value">{ticket.author.name}</div>
</div>
<div className="ticket-viewer__info-container-editable">
<div className="ticket-viewer__info-header">{i18n('TAGS')}</div>
<div className="ticket-viewer__info-value">
<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 className="ticket-viewer__info-row-header row">
<div className="col-md-4">{i18n('PRIORITY')}</div>
<div className="col-md-4">{i18n('OWNER')}</div>
<div className="col-md-4">{i18n('STATUS')}</div>
</div>
<div className="ticket-viewer__info-row-values row">
<div className="col-md-4">
<DropDown
className="ticket-viewer__editable-dropdown"
items={priorityList}
selectedIndex={priorities[ticket.priority]}
onChange={this.onPriorityDropdownChanged.bind(this)} />
<div className="ticket-viewer__info">
<div className="ticket-viewer__info-container-editable">
<div className="ticket-viewer__info-header">{i18n('PRIORITY')}</div>
<div className="ticket-viewer__info-value">
<DropDown
className="ticket-viewer__editable-dropdown"
items={priorityList}
selectedIndex={priorities[ticket.priority]}
onChange={this.onPriorityDropdownChanged.bind(this)} />
</div>
</div>
<div className="col-md-4">
{this.renderAssignStaffList()}
<div className="ticket-viewer__info-container-editable">
<div className="ticket-viewer__info-header">{i18n('OWNER')}</div>
<div className="ticket-viewer__info-value">
{this.renderAssignStaffList()}
</div>
</div>
<div className="col-md-4">
{ticket.closed ?
<Button type='secondary' size="extra-small" onClick={this.onReopenClick.bind(this)}>
{i18n('RE_OPEN')}
</Button> : i18n('OPENED')}
<div className="ticket-viewer__info-container-editable">
<div className="ticket-viewer__info-header">{i18n('STATUS')}</div>
<div className="ticket-viewer__info-value">
{ticket.closed ?
<Button type='secondary' size="extra-small" onClick={this.onReopenClick.bind(this)}>
{i18n('RE_OPEN')}
</Button> : i18n('OPENED')}
</div>
</div>
</div>
</div>
@ -223,33 +232,41 @@ class TicketViewer extends React.Component {
return (
<div className="ticket-viewer__headers">
<div className="ticket-viewer__info-row-header row">
<div className="ticket-viewer__department col-md-4">{i18n('DEPARTMENT')}</div>
<div className="ticket-viewer__author col-md-4">{i18n('AUTHOR')}</div>
<div className="ticket-viewer__date col-md-4">{i18n('TAGS')}</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 className="ticket-viewer__info">
<div className="ticket-viewer__info-container">
<div className="ticket-viewer__info-header">{i18n('DEPARTMENT')}</div>
<div className="ticket-viewer__info-value">{ticket.department.name}</div>
</div>
<div className="col-md-4">
{this.renderOwnerNode()}
<div className="ticket-viewer__info-container">
<div className="ticket-viewer__info-header">{i18n('AUTHOR')}</div>
<div className="ticket-viewer__info-value">{ticket.author.name}</div>
</div>
<div className="col-md-4">
{i18n((this.props.ticket.closed) ? 'CLOSED' : 'OPENED')}
<div className="ticket-viewer__info-container">
<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>

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

@ -12,7 +12,7 @@
display: flex;
align-items:center;
justify-content:center;
position: relative;
&:hover {
.ticket-viewer__edit-title-icon {
color: $grey;
@ -23,13 +23,13 @@
&__edited-title-text {
font-style: italic;
font-size: 14px;
margin-left: 10px;
margin: 0 10px;
}
&__edit-title-icon {
position: absolute;
color: #414A59;
right: 12px;
margin: 0 10px;
&:hover {
cursor:pointer;
}
@ -49,27 +49,52 @@
&__number {
color: white;
margin-right: 10px;
margin-right: 30px;
font-size: 14px;
}
&__title {
display: inline-block;
max-width: 375px;
}
&__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;
font-weight: bold;
}
padding: 0 15px;
&__info-row-values {
background-color: $light-grey;
color: $secondary-blue;
padding-bottom: 10px;
&-container {
display: flex;
flex-direction: column;
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 {
@ -136,4 +161,39 @@
&__delete-button {
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 className="row">
<div className="col-md-12 admin-panel-layout__content">
<Widget>
<Widget className='admin-panel-layout__content__widget'>
{this.props.children}
</Widget>
</div>

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

@ -4,4 +4,10 @@
&__header {
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 {
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">
<Listing {...this.getListingProps()} />
</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()}
</div>
</div>
@ -123,7 +123,7 @@ class AdminPanelAdvancedSettings extends React.Component {
let currentAPIKey = this.state.APIKeys[this.state.selectedAPIKey];
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-data">{currentAPIKey.name}</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;
}
&-info {
&__container-info {
text-align: left;
}
@ -58,4 +58,32 @@
&__message {
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";
.admin-panel-email-settings {
&__loading {
min-height: 361px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: $grey;
}
&__text-area {
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 className="row">
<div className="col-md-6">
<FormField 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" />
<div className="col-md-6 admin-panel-system-preferences__form-fields">
<FormField className="admin-panel-system-preferences__form-fields__input" label={i18n('SUPPORT_CENTER_URL')} fieldProps={{size: 'large'}} name="url" validation="URL" required/>
<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 className="col-md-6">
<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" />
</div>
</div>
<div className="row">
<div className="row admin-panel-system-preferences__container">
<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 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>
</Form>

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

@ -51,4 +51,30 @@
&__message {
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">
{(errorMessage) ? <Message type="error">{i18n(errorMessage)}</Message> : null}
<Form {...this.getFormProps()}>
<div>
<FormField className="admin-panel-departments__name" label={i18n('NAME')} name="name" validation="NAME" required fieldProps={{size: 'large'}}/>
<div className="admin-panel-departments__container">
<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">
<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>
<SubmitButton
@ -95,7 +95,7 @@ class AdminPanelDepartments extends React.Component {
</div>
);
}
renderDefaultDepartmentForm() {
const {
defaultDepartmentError,
@ -120,9 +120,7 @@ class AdminPanelDepartments extends React.Component {
decorator={DepartmentDropdown}
fieldProps={{ departments: getPublicDepartmentList() , size: 'medium' }}
/>
<div className="admin-panel-departments__default-departments-container__form__fields__lock-option">
<FormField label={i18n('LOCK_DEPARTMENT_DESCRIPTION')} name="locked" field="checkbox"/>
</div>
<FormField className="admin-panel-departments__default-departments-container__form__fields__checkbox" label={i18n('LOCK_DEPARTMENT_DESCRIPTION')} name="locked" field="checkbox"/>
</div>
<SubmitButton
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})},
onValidateErrors: (errors) => {this.setState({errors})},
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 {
float: left;
min-width: 156px;
}
&__name {
display:inline-block;margin-right: 101px;
&__container{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 460px;
&__info-tooltip {
margin-left: 2px;
}
}
&__private-option {
display:inline-block;
margin-left: 10px;
&__form {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
&__default-departments-container {
&__form {
text-align: left;
@ -28,16 +39,6 @@
justify-content: space-around;
align-items: flex-start;
padding-bottom: 10px;
&__lock-option {
display: flex;
flex-direction: row;
align-items: center;
&__info-tooltip {
padding-left: 5px;
}
}
}
&__button {
min-width: 156px;
@ -81,7 +82,37 @@
text-transform: lowercase;
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 {
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 {
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>
<Form {...this.getFormProps()}>
<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>
{this.renderMessage()}
</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 {
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 {
border-radius: 0;
height: 40px;
&__login-links {
padding-top: 8px;
padding-left: 22px;
}
&__languages {
top: 10px;
left: -20px;
}
}

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

@ -21,4 +21,22 @@
height: 78px;
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 {
background-color: $primary-blue;
text-align: center;
height: 32px;
min-height: 32px;
width: 100%;
&__powered,
@ -37,4 +37,16 @@
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 = (
<div className="main-layout-header__login-links">
<Button
className="main-layout-header__login-links__button"
type="clean"
onClick={this.onHideLoginForm.bind(this)}
route={{to:'/'}}>
{i18n('HOME')}
</Button>
{(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')}
</Button> :
null}
{!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')}
</Button> :
null}

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

@ -17,33 +17,21 @@
border-top-left-radius: 4px;
color: white;
display: inline-block;
height: 32px;
padding: 5px 20px 0 10px;
min-height: 32px;
width: 100%;
padding: 5px 170px 5px 10px;
&__button {
margin: 5px;
}
}
&__languages {
display: inline-block;
position: relative;
top: 5px;
right: 5px;
position: absolute;
bottom: 0;
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;
}
}
}
}