bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix styling of hotkeys modal

Browse source
This commit is contained in:
Alex Gleason 2020-04-11 15:20:47 -05:00
parent 55b6592f6f
commit 8efc9c700e
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 192 additions and 220 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/gabsocial/features/ui/components/hotkeys_modal.js
View file

@ -21,12 +21,11 @@ class HotkeysModal extends ImmutablePureComponent {
return (
<div className='modal-root__modal hotkeys-modal'>
<div className='keyboard-shortcuts'>
<div className='keyboard-shortcuts__header'>
<h3 className='keyboard-shortcuts__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
<IconButton className='keyboard-shortcuts__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
<div className='compose-modal__header'>
<h3 className='compose-modal__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
</div>
<div className='keyboard-shortcuts__content'>
<div className='compose-modal__content'>
<table>
<thead>
<tr>
@ -164,7 +163,6 @@ class HotkeysModal extends ImmutablePureComponent {
</table>
</div>
</div>
</div>
);
}

1
app/styles/application.scss
View file

@ -31,6 +31,7 @@
@import 'gabsocial/components/group-form';
@import 'gabsocial/components/group-sidebar-panel';
@import 'gabsocial/components/sidebar-menu';
@import 'gabsocial/components/hotkeys-modal';
@import 'gabsocial/polls';
@import 'gabsocial/introduction';

78
app/styles/gabsocial/components.scss
View file

@ -2114,84 +2114,6 @@ a.account__display-name {
}
}
.keyboard-shortcuts {
padding: 8px 0 0;
overflow: hidden;
background-color: $classic-base-color;
border-radius: 6px;
@media screen and (max-width: 960px) {
height: 90vh;
}
&__header {
display: block;
position: relative;
border-bottom: 1px solid lighten($classic-base-color, 8%);
border-radius: 6px 6px 0 0;
padding-top: 12px;
padding-bottom: 12px;
&__title {
display: block;
width: 80%;
margin: 0 auto;
font-size: 18px;
font-weight: bold;
line-height: 24px;
color: $primary-text-color;
text-align: center;
}
}
&__close {
position: absolute;
right: 10px;
top: 10px;
}
&__content {
display: flex;
flex-direction: row;
padding: 15px;
@media screen and (max-width: 960px) {
flex-direction: column;
overflow: hidden;
overflow-y: scroll;
height: calc(100% - 80px);
-webkit-overflow-scrolling: touch;
}
}
table {
thead {
display: block;
padding-left: 10px;
margin-bottom: 10px;
color: $primary-text-color;
font-size: 16px;
font-weight: 600;
}
tr {
font-size: 12px;
}
td {
padding: 0 10px 8px;
}
kbd {
display: inline-block;
padding: 2px 8px;
background-color: lighten($ui-base-color, 8%);
border: 1px solid darken($ui-base-color, 4%);
border-radius: 4px;
}
}
}
.setting-text {
color: $darker-text-color;
background: transparent;

51
app/styles/gabsocial/components/hotkeys-modal.scss Normal file
View file

@ -0,0 +1,51 @@
.hotkeys-modal {
padding: 8px 0 0;
overflow: hidden;
background-color: $classic-base-color;
border-radius: 6px;
flex-direction: column;
@media screen and (max-width: 960px) {
height: 90vh;
}
.compose-modal__content {
background-color: $gab-background-base-light;
margin: 5px;
@media screen and (max-width: 960px) {
flex-direction: column;
overflow: hidden;
overflow-y: scroll;
height: calc(100% - 80px);
-webkit-overflow-scrolling: touch;
}
}
table {
thead {
display: block;
padding-left: 10px;
margin-bottom: 10px;
color: $primary-text-color;
font-size: 16px;
font-weight: 600;
}
tr {
font-size: 12px;
}
td {
padding: 0 10px 8px;
}
kbd {
display: inline-block;
padding: 2px 8px;
background-color: lighten($ui-base-color, 8%);
border: 1px solid darken($ui-base-color, 4%);
border-radius: 4px;
}
}
}