sascha
/
nextcloud-server
mirror of https://github.com/nextcloud/server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move personal settings to css grid layout 

Signed-off-by: Julius Härtl <jus@bitgrid.net>
pull/9218/head
Julius Härtl 2018-04-17 22:40:03 +07: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
Unescape Escape 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;

116
settings/templates/settings/personal/personal.info.php
Unescape Escape 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,82 +310,71 @@ 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'])) { ?>
<form id="language" class="section">
<h2>
<label for="languageinput"><?php p($l->t('Language'));?></label>
</h2>
<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
<option value="<?php p($_['activelanguage']['code']);?>">
<?php p($_['activelanguage']['name']);?>
</option>
<?php foreach($_['commonlanguages'] as $language):?>
<option value="<?php p($language['code']);?>">
<?php p($language['name']);?>
</option>
<?php endforeach;?>
<optgroup label="––––––––––"></optgroup>
<?php foreach($_['languages'] as $language):?>
<option value="<?php p($language['code']);?>">
<?php p($language['name']);?>
<form id="language" class="section">
<h2>
<label for="languageinput"><?php p($l->t('Language'));?></label>
</h2>
<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
<option value="<?php p($_['activelanguage']['code']);?>">
<?php p($_['activelanguage']['name']);?>
</option>
<?php endforeach;?>
</select>
<a href="https://www.transifex.com/nextcloud/nextcloud/"
target="_blank" rel="noreferrer noopener">
<em><?php p($l->t('Help translate'));?></em>
</a>
</form>
<?php foreach($_['commonlanguages'] as $language):?>
<option value="<?php p($language['code']);?>">
<?php p($language['name']);?>
</option>
<?php endforeach;?>
<optgroup label="––––––––––"></optgroup>
<?php foreach($_['languages'] as $language):?>
<option value="<?php p($language['code']);?>">
<?php p($language['name']);?>
</option>
<?php endforeach;?>
</select>
<a href="https://www.transifex.com/nextcloud/nextcloud/"
target="_blank" rel="noreferrer noopener">
<em><?php p($l->t('Help translate'));?></em>
</a>
</form>
<?php } ?>
</div>
<div class="personal-settings-setting-box personal-settings-password-box">
<?php
if($_['passwordChangeSupported']) {
script('jquery-showpassword');
?>
<form id="passwordform" class="section">
<h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
<div id="password-error-msg" class="msg success inlineblock" style="display: none;">Saved</div>
?>
<form id="passwordform" class="section">
<h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
<div id="password-error-msg" class="msg success inlineblock" style="display: none;">Saved</div>
<label for="pass1" class="hidden-visually"><?php p($l->t('Current password')); ?>: </label>
<input type="password" id="pass1" name="oldpassword"
placeholder="<?php p($l->t('Current password'));?>"
autocomplete="off" autocapitalize="none" autocorrect="off" />
<label for="pass1" class="hidden-visually"><?php p($l->t('Current password')); ?>: </label>
<input type="password" id="pass1" name="oldpassword"
placeholder="<?php p($l->t('Current password'));?>"
autocomplete="off" autocapitalize="none" autocorrect="off" />
<div class="personal-show-container">
<label for="pass2" class="hidden-visually"><?php p($l->t('New password'));?>: </label>
<input type="password" id="pass2" name="newpassword"
placeholder="<?php p($l->t('New password')); ?>"
data-typetoggle="#personal-show"
autocomplete="off" autocapitalize="none" autocorrect="off" />
<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
</div>
<div class="personal-show-container">
<label for="pass2" class="hidden-visually"><?php p($l->t('New password'));?>: </label>
<input type="password" id="pass2" name="newpassword"
placeholder="<?php p($l->t('New password')); ?>"
data-typetoggle="#personal-show"
autocomplete="off" autocapitalize="none" autocorrect="off" />
<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
</div>
<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
</form>
<?php
</form>
<?php
}
?>
</div>
<span class="msg"></span>
</div>
</div>
<div class="clear"></div>
<div id="personal-settings-group-container">
</div>
</div>