imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed settings dialog header; Adjust padding on dialog

Browse source 
Some recent changes to dialogs changed how this works and altered the look of the settings dialogs. This fixes that and makes it so that the header and content scroll independently.

Fixes https://github.com/vector-im/riot-web/issues/8329
Fixes https://github.com/vector-im/riot-web/issues/8328
This commit is contained in:
Travis Ralston 2019-01-29 21:45:15 -07:00
parent 786e725f5f
commit 4036e52c24
6 changed files with 56 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

69
res/css/views/dialogs/_SettingsDialog.scss
View file

@ -15,56 +15,31 @@ limitations under the License.
*/
.mx_SettingsDialog {
.mx_Dialog {
max-width: 784px; // 900px - 58px (left padding) - 58px (right padding)
width: 80%;
height: 80%;
border-radius: 4px;
.mx_Dialog {
max-width: 900px;
width: 80%;
height: 80%;
border-radius: 4px;
padding-top: 0;
padding-right: 0;
padding-left: 0;
.mx_TabbedView_tabLabels {
// Force the sidebar to be always visible, letting the rest of the content scroll
position: fixed;
}
.mx_TabbedView {
top: 65px;
}
.mx_TabbedView_tabPanel {
max-width: 485px;
margin-left: 206px; // 70px margin + 136px for the sidebar
}
.mx_TabbedView .mx_SettingsTab {
max-width: calc(100% - 130px); // 130px right hand padding
.mx_SettingsDialog_header {
font-size: 24px;
display: block;
text-align: center;
color: $dialog-title-fg-color;
margin-top: 16px;
margin-bottom: 24px;
padding: 0;
}
// Put some padding on the bottom to avoid the settings tab from
// colliding harshly with the dialog when scrolled down.
padding-bottom: 100px;
}
.mx_SettingsDialog_close {
position: absolute;
top: 16px;
right: 25px;
.mx_Dialog_title {
text-align: center;
margin-top: 16px;
margin-bottom: 24px;
}
}
.mx_SettingsDialog_closeIcon {
width: 16px;
height: 16px;
display: inline-block;
}
.mx_SettingsDialog_closeIcon:before {
mask: url('$(res)/img/feather-icons/cancel.svg');
background-color: $dialog-close-fg-color;
mask-repeat: no-repeat;
mask-size: 16px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
}