mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move personal settings to css grid layout 

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2018-04-17 22:40:03 +02:00
parent 748b51a225
commit 09ada4ec2b
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
2 changed files with 136 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
settings/css/settings.scss
View File

@ -100,23 +100,20 @@ input {
}
}
#personal-settings-avatar-container,
#personal-settings-group-container {
display: inline-block;
#personal-settings-avatar-container {
display: inline-grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr 1fr 1fr;
vertical-align: top;
width: 225px;
}
.profile-settings-container {
display: inline-block;
max-width: 600px;
margin-bottom: 20px;
> div {
float: left;
width: 300px;
}
display: inline-grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.icon-federation-menu {
padding-left: 16px;
background-size: 16px;
@ -157,21 +154,84 @@ input {
}
}
#personal-settings {
display: grid;
padding: 20px;
max-width: 1500px;
grid-template-columns:1fr 2fr 1fr;
.section {
padding: 10px 10px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
#personal-settings {
display: grid;
grid-template-columns: 1fr 2fr;
#personal-settings-avatar-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.personal-settings-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.profile-settings-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-column: 2;
}
}
}
@media (max-width: 1200px) {
#personal-settings {
display: grid;
grid-template-columns: 1fr;
#personal-settings-avatar-container {
grid-template-rows: 1fr;
}
.personal-settings-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.profile-settings-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
}
}
@media (max-width: 560px) {
#personal-settings {
display: grid;
grid-template-columns: 1fr;
#personal-settings-avatar-container {
grid-template-rows: 1fr;
}
.personal-settings-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.profile-settings-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
}
}
.personal-settings-container {
display: inline-block;
max-width: 600px;
margin-bottom: 20px;
display: inline-grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
&:after {
clear: both;
}
&:not(#personal-settings-avatar-container) > div {
float: left;
width: 300px;
}
> div {
h2 {
position: relative;
margin-bottom: 5px;
margin-bottom: 12px;
display: inline-flex;
flex-wrap: nowrap;
justify-content: space-between;

30
settings/templates/settings/personal/personal.info.php
View File

@ -100,6 +100,15 @@ vendor_style('jcrop/css/jquery.Jcrop');
<?php } ?>
</form>
</div>
<div class="personal-settings-setting-box personal-settings-group-box">
<div id="groups" class="section">
<h2><?php p($l->t('Groups')); ?></h2>
<p><?php p($l->t('You are member of the following groups:')); ?></p>
<p id="groups-groups">
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
</p>
</div>
</div>
</div>
<div class="personal-settings-container">
@ -301,20 +310,6 @@ vendor_style('jcrop/css/jquery.Jcrop');
<?php } ?>
</div>
<div class="clear"></div>
<div id="personal-settings-group-container">
<div class="personal-settings-setting-box personal-settings-group-box">
<div id="groups" class="section">
<h2><?php p($l->t('Groups')); ?></h2>
<p><?php p($l->t('You are member of the following groups:')); ?></p>
<p id="groups-groups">
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
</p>
</div>
</div>
</div>
<div class="profile-settings-container">
<div class="personal-settings-setting-box personal-settings-language-box">
<?php if (isset($_['activelanguage'])) { ?>
@ -377,6 +372,9 @@ vendor_style('jcrop/css/jquery.Jcrop');
</div>
<span class="msg"></span>
</div>
</div>
<div class="clear"></div>
<div id="personal-settings-group-container">
</div>
</div>