improve layout of personal settings page

diff --git a/core/css/styles.css b/core/css/styles.css
index ce2cfa37c64d753d22e0aaf67474d18b87a725e7..7604a6ef343be3fc4048d2486f71c139045d4d83 100644 (file)
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -705,9 +705,9 @@ code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono
 
 #quota {
        cursor: default;
-       margin: 30px;
+       margin: 30px !important;
        position: relative;
-       padding: 0;
+       padding: 0 !important;
 }
 #quota div {
        padding: 0;

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 5a1d864734b9a8664ad1844c22ed06f02a996f34..cf9a61431c9a2d7eb011d39460a7d0ec1150388b 100644 (file)
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -6,30 +6,49 @@ select#languageinput, select#timezone { width:15em; }
 input#openid, input#webdav { width:20em; }
 
 /* PERSONAL */
-#sslCertificate tr.expired {
-       background-color: rgba(255, 0, 0, 0.5);
+
+#avatar {
+       display: inline-block;
+       float: left;
+       width: 160px;
+       padding-right: 0;
 }
-#sslCertificate td {
-       padding: 5px;
+#avatar .avatardiv {
+       margin-bottom: 10px;
+}
+#avatar .warning {
+       width: 350px;
+}
+#uploadavatarbutton,
+#selectavatar,
+#removeavatar {
+       width: 33px;
+       height: 33px;
 }
 
-/* Sync clients */
-.clientsbox {
-       padding-top: 30px;
-       margin-top: -30px;
+#displaynameform,
+#lostpassword,
+#groups {
+       display: inline-block;
+       margin-bottom: 0;
+       padding-bottom: 0;
+       padding-right: 0;
+       min-width: 60%;
 }
-.clientsbox h2 {
-       font-weight: 300;
-       font-size: 20px;
-       margin: 35px 0 10px;
+#avatar,
+#passwordform {
+       margin-bottom: 0;
+       padding-bottom: 0;
 }
-.clientsbox .center {
-       margin-top: 10px;
+
+#sslCertificate tr.expired {
+       background-color: rgba(255, 0, 0, 0.5);
 }
-.clientsbox a {
-       font-weight: 600;
+#sslCertificate td {
+       padding: 5px;
 }
 
+
 #displaynameerror {
        display: none;
 }
@@ -44,10 +63,6 @@ input#identity {
        width: 17em;
 }
 
-#avatar .warning {
-       width: 350px;
-}
-
 .msg.success {
        color: #fff;
        background-color: #47a447;

diff --git a/settings/js/personal.js b/settings/js/personal.js
index b90194b90ec2255a3812ddb581d7c8ff85eefcc6..4308bb4cd4df4715e4a612f265c356d9ddaec938 100644 (file)
--- a/settings/js/personal.js
+++ b/settings/js/personal.js
@@ -408,7 +408,7 @@ $(document).ready(function () {
 
        // Load the big avatar
        if (oc_config.enable_avatars) {
-               $('#avatar .avatardiv').avatar(OC.currentUser, 128);
+               $('#avatar .avatardiv').avatar(OC.currentUser, 145);
        }
 });
 

diff --git a/settings/personal.php b/settings/personal.php
index 9a714393585b38c91282ebaa37ddf538c6ba35e1..e5ceb1b4fb505a284011267178d7bf49dadaf4d4 100644 (file)
--- a/settings/personal.php
+++ b/settings/personal.php
@@ -163,9 +163,8 @@ $tmpl->assign('groups', $groups2);
 // add hardcoded forms from the template
 $l = \OC::$server->getL10N('settings');
 $formsAndMore = [];
+$formsAndMore[]= ['anchor' => 'avatar', 'section-name' => $l->t('Personal info')];
 $formsAndMore[]= ['anchor' => 'clientsbox', 'section-name' => $l->t('Sync clients')];
-$formsAndMore[]= ['anchor' => 'passwordform', 'section-name' => $l->t('Personal info')];
-$formsAndMore[]= ['anchor' => 'groups', 'section-name' => $l->t('Groups')];
 
 $forms=OC_App::getForms('personal');
 

diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index 446494c934b4fe0b65dcbb18dd7b4307800d580c..8afa5aa551bc9fede83144f8b5d76095cc7da607 100644 (file)
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -22,36 +22,6 @@
 
 <div id="app-content">
 
-<div id="clientsbox" class="clientsbox center">
-       <h2><?php p($l->t('Get the apps to sync your files'));?></h2>
-       <a href="<?php p($_['clients']['desktop']); ?>" target="_blank">
-               <img src="<?php print_unescaped(OCP\Util::imagePath('core', 'desktopapp.png')); ?>"
-                       alt="<?php p($l->t('Desktop client'));?>" />
-       </a>
-       <a href="<?php p($_['clients']['android']); ?>" target="_blank">
-               <img src="<?php print_unescaped(OCP\Util::imagePath('core', 'googleplay.png')); ?>"
-                       alt="<?php p($l->t('Android app'));?>" />
-       </a>
-       <a href="<?php p($_['clients']['ios']); ?>" target="_blank">
-               <img src="<?php print_unescaped(OCP\Util::imagePath('core', 'appstore.png')); ?>"
-                       alt="<?php p($l->t('iOS app'));?>" />
-       </a>
-
-       <?php if (OC_Util::getEditionString() === ''): ?>
-       <p class="center">
-               <?php print_unescaped($l->t('If you want to support the project
-               <a href="https://owncloud.org/contribute"
-                       target="_blank" rel="noreferrer">join development</a>
-               or
-               <a href="https://owncloud.org/promote"
-                       target="_blank" rel="noreferrer">spread the word</a>!'));?>
-       </p>
-       <?php endif; ?>
-
-       <?php if(OC_APP::isEnabled('firstrunwizard')) {?>
-       <p class="center"><a class="button" href="#" id="showWizard"><?php p($l->t('Show First Run Wizard again'));?></a></p>
-       <?php }?>
-</div>
 
 
 <div id="quota" class="section">
@@ -65,32 +35,32 @@
 </div>
 
 
-<?php
-if($_['passwordChangeSupported']) {
-       script('jquery-showpassword');
-?>
-<form id="passwordform" class="section">
-       <h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
-       <div class="hidden icon-checkmark" id="password-changed"></div>
-       <div class="hidden" id="password-error"><?php p($l->t('Unable to change your password'));?></div>
-       <br>
-       <label for="pass1" class="onlyInIE8"><?php echo $l->t('Current password');?>: </label>
-       <input type="password" id="pass1" name="oldpassword"
-               placeholder="<?php echo $l->t('Current password');?>"
-               autocomplete="off" autocapitalize="off" autocorrect="off" />
-       <label for="pass2" class="onlyInIE8"><?php echo $l->t('New password');?>: </label>
-       <input type="password" id="pass2" name="personal-password"
-               placeholder="<?php echo $l->t('New password');?>"
-               data-typetoggle="#personal-show"
-               autocomplete="off" autocapitalize="off" autocorrect="off" />
-       <input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="svg"></label>
-       <input id="passwordbutton" type="submit" value="<?php echo $l->t('Change password');?>" />
-       <br/>
-       <div class="strengthify-wrapper"></div>
+
+<?php if ($_['enableAvatars']): ?>
+<form id="avatar" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
+       <h2><?php p($l->t('Profile picture')); ?></h2>
+       <div id="displayavatar">
+               <div class="avatardiv"></div>
+               <div class="warning hidden"></div>
+               <?php if ($_['avatarChangeSupported']): ?>
+               <label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
+               <div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
+               <div class="inlineblock button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
+               <input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
+               <p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
+               <?php else: ?>
+               <?php p($l->t('Picture provided by original account')); ?>
+               <?php endif; ?>
+       </div>
+
+       <div id="cropper" class="hidden">
+               <div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
+               <div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile image')); ?></div>
+       </div>
 </form>
-<?php
-}
-?>
+<?php endif; ?>
+
+
 
 <?php
 if($_['displayNameChangeSupported']) {
@@ -116,6 +86,8 @@ if($_['displayNameChangeSupported']) {
 }
 ?>
 
+
+
 <?php
 if($_['passwordChangeSupported']) {
 ?>
@@ -127,7 +99,7 @@ if($_['passwordChangeSupported']) {
                placeholder="<?php p($l->t('Your email address'));?>"
                autocomplete="on" autocapitalize="off" autocorrect="off" />
        <span class="msg"></span><br />
-       <em><?php p($l->t('Fill in an email address to enable password recovery and receive notifications'));?></em>
+       <em><?php p($l->t('For password recovery and notifications'));?></em>
 </form>
 <?php
 } else {
@@ -140,6 +112,8 @@ if($_['passwordChangeSupported']) {
 }
 ?>
 
+
+
 <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>
@@ -148,29 +122,36 @@ if($_['passwordChangeSupported']) {
        </p>
 </div>
 
-<?php if ($_['enableAvatars']): ?>
-<form id="avatar" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
-       <h2><?php p($l->t('Profile picture')); ?></h2>
-       <div id="displayavatar">
-               <div class="avatardiv"></div><br>
-               <div class="warning hidden"></div>
-               <?php if ($_['avatarChangeSupported']): ?>
-               <label for="uploadavatar" class="inlineblock button" id="uploadavatarbutton"><?php p($l->t('Upload new')); ?></label>
-               <div class="inlineblock button" id="selectavatar"><?php p($l->t('Select new from Files')); ?></div>
-               <div class="inlineblock button" id="removeavatar"><?php p($l->t('Remove image')); ?></div>
-               <input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
-               <br>
-               <?php p($l->t('Either png or jpg. Ideally square but you will be able to crop it. The file is not allowed to exceed the maximum size of 20 MB.')); ?>
-               <?php else: ?>
-               <?php p($l->t('Your avatar is provided by your original account.')); ?>
-               <?php endif; ?>
-       </div>
-       <div id="cropper" class="hidden">
-               <div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
-               <div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile image')); ?></div>
-       </div>
+
+
+<?php
+if($_['passwordChangeSupported']) {
+       script('jquery-showpassword');
+?>
+<form id="passwordform" class="section">
+       <h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
+       <div class="hidden icon-checkmark" id="password-changed"></div>
+       <div class="hidden" id="password-error"><?php p($l->t('Unable to change your password'));?></div>
+       <br>
+       <label for="pass1" class="onlyInIE8"><?php echo $l->t('Current password');?>: </label>
+       <input type="password" id="pass1" name="oldpassword"
+               placeholder="<?php echo $l->t('Current password');?>"
+               autocomplete="off" autocapitalize="off" autocorrect="off" />
+       <label for="pass2" class="onlyInIE8"><?php echo $l->t('New password');?>: </label>
+       <input type="password" id="pass2" name="personal-password"
+               placeholder="<?php echo $l->t('New password');?>"
+               data-typetoggle="#personal-show"
+               autocomplete="off" autocapitalize="off" autocorrect="off" />
+       <input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="svg"></label>
+       <input id="passwordbutton" type="submit" value="<?php echo $l->t('Change password');?>" />
+       <br/>
+       <div class="strengthify-wrapper"></div>
 </form>
-<?php endif; ?>
+<?php
+}
+?>
+
+
 
 <form class="section">
        <h2>
@@ -200,6 +181,42 @@ if($_['passwordChangeSupported']) {
        <?php endif; ?>
 </form>
 
+
+
+<div id="clientsbox" class="section clientsbox">
+       <h2><?php p($l->t('Get the apps to sync your files'));?></h2>
+       <a href="<?php p($_['clients']['desktop']); ?>" target="_blank">
+               <img src="<?php print_unescaped(OCP\Util::imagePath('core', 'desktopapp.png')); ?>"
+                       alt="<?php p($l->t('Desktop client'));?>" />
+       </a>
+       <a href="<?php p($_['clients']['android']); ?>" target="_blank">
+               <img src="<?php print_unescaped(OCP\Util::imagePath('core', 'googleplay.png')); ?>"
+                       alt="<?php p($l->t('Android app'));?>" />
+       </a>
+       <a href="<?php p($_['clients']['ios']); ?>" target="_blank">
+               <img src="<?php print_unescaped(OCP\Util::imagePath('core', 'appstore.png')); ?>"
+                       alt="<?php p($l->t('iOS app'));?>" />
+       </a>
+
+       <?php if (OC_Util::getEditionString() === ''): ?>
+       <p>
+               <?php print_unescaped($l->t('If you want to support the project
+               <a href="https://owncloud.org/contribute"
+                       target="_blank" rel="noreferrer">join development</a>
+               or
+               <a href="https://owncloud.org/promote"
+                       target="_blank" rel="noreferrer">spread the word</a>!'));?>
+       </p>
+       <?php endif; ?>
+
+       <?php if(OC_APP::isEnabled('firstrunwizard')) {?>
+       <br>
+       <a class="button" href="#" id="showWizard"><?php p($l->t('Show First Run Wizard again'));?></a>
+       <?php }?>
+</div>
+
+
+
 <?php foreach($_['forms'] as $form) {
        if (isset($form['form'])) {?>
        <div id="<?php isset($form['anchor']) ? p($form['anchor']) : p('');?>"><?php print_unescaped($form['form']);?></div>