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

Move personal settings to css grid layout

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
pull/9218/head
Julius Härtl 8 years ago
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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 98
      settings/css/settings.scss
  2. 116
      settings/templates/settings/personal/personal.info.php

98
settings/css/settings.scss
Unescape 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 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>
Write Preview
Loading…
Cancel
Save