mirror of
https://github.com/nextcloud/server.git
synced 2026-04-22 23:03:00 -04:00
Refactor profile info settings
- Make it possible to add the new property whiout chaning foundamentally how the layout work each time - Use only one grid instead of multiple nested grid - Better mobile reponsiveness Signed-off-by: Carl Schwan <carl@carlschwan.eu>
This commit is contained in:
Carl Schwan
parent
86d9626901
commit
d847eacfbd
6 changed files with 89 additions and 151 deletions
|
|
@ -118,6 +118,15 @@ input#openid, input#webdav {
|
|||
.personal-settings-setting-box .section input[type=text], .personal-settings-setting-box .section input[type=email], .personal-settings-setting-box .section input[type=tel], .personal-settings-setting-box .section input[type=url] {
|
||||
width: 100%;
|
||||
}
|
||||
.personal-settings-setting-box-profile {
|
||||
grid-row: 3/5;
|
||||
}
|
||||
.personal-settings-setting-box-detail {
|
||||
grid-row: 5;
|
||||
}
|
||||
.personal-settings-setting-box-detail--without-profile {
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
select#timezone {
|
||||
width: 100%;
|
||||
|
|
@ -126,8 +135,8 @@ select#timezone {
|
|||
#personal-settings {
|
||||
display: grid;
|
||||
padding: 20px;
|
||||
max-width: 1500px;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
max-width: 1700px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
#personal-settings .section {
|
||||
padding: 10px 10px;
|
||||
|
|
@ -177,58 +186,23 @@ select#timezone {
|
|||
background-position: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1400px) {
|
||||
@media (min-width: 1400px) and (max-width: 1700px) {
|
||||
#personal-settings {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
#personal-settings #personal-settings-avatar-container {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
#personal-settings .personal-settings-container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
#personal-settings .profile-settings-container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-column: 2;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
@media (min-width: 800px) and (max-width: 1400px) {
|
||||
#personal-settings {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#personal-settings #personal-settings-avatar-container {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
#personal-settings .personal-settings-container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
#personal-settings .profile-settings-container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
@media (max-width: 800px) {
|
||||
#personal-settings {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#personal-settings #personal-settings-avatar-container {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
#personal-settings .personal-settings-container {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
#personal-settings .profile-settings-container {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
.personal-settings-container {
|
||||
display: inline-grid;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -66,6 +66,17 @@ input {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-profile {
|
||||
grid-row: 3/5;
|
||||
}
|
||||
|
||||
&-detail {
|
||||
grid-row: 5;
|
||||
}
|
||||
&-detail--without-profile {
|
||||
grid-row: 3;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
@ -77,8 +88,8 @@ select {
|
|||
#personal-settings {
|
||||
display: grid;
|
||||
padding: 20px;
|
||||
max-width: 1500px;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
max-width: 1700px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
|
||||
.section {
|
||||
padding: 10px 10px;
|
||||
|
|
@ -138,70 +149,24 @@ select {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1400px) {
|
||||
@media (min-width: 1400px) and (max-width: 1700px) {
|
||||
#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 1fr;
|
||||
}
|
||||
|
||||
.profile-settings-container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-column: 2;
|
||||
}
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media (min-width: 800px) and (max-width: 1400px) {
|
||||
#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 1fr;
|
||||
}
|
||||
|
||||
.profile-settings-container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
@media (max-width: 800px) {
|
||||
#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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -276,6 +276,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
section {
|
||||
grid-row: 1/3;
|
||||
}
|
||||
.avatar {
|
||||
&__container {
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export const ACCOUNT_PROPERTY_READABLE_ENUM = Object.freeze({
|
|||
PROFILE_ENABLED: t('settings', 'Profile'),
|
||||
ROLE: t('settings', 'Role'),
|
||||
TWITTER: t('settings', 'Twitter'),
|
||||
MASTODON: t('settings', 'Mastodon'),
|
||||
MASTODON: t('settings', 'Fediverse (e.g. Mastodon)'),
|
||||
WEBSITE: t('settings', 'Website'),
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -45,67 +45,63 @@ script('settings', [
|
|||
|
||||
<div id="personal-settings">
|
||||
<h2 class="hidden-visually"><?php p($l->t('Personal info')); ?></h2>
|
||||
<div id="personal-settings-avatar-container" class="personal-settings-container">
|
||||
<div id="vue-avatar-section"></div>
|
||||
<div class="personal-settings-setting-box personal-settings-group-box section">
|
||||
<div id="vue-avatar-section"></div>
|
||||
<?php if ($_['profileEnabledGlobally']) : ?>
|
||||
<div class="personal-settings-setting-box personal-settings-setting-box-profile">
|
||||
<div id="vue-profile-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box personal-settings-setting-box-detail">
|
||||
<div id="vue-details-section"></div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="personal-settings-setting-box personal-settings-setting-box-detail--without-profile">
|
||||
<div id="vue-details-section"></div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-displayname-section"></div>
|
||||
</div>
|
||||
|
||||
<div class="personal-settings-container">
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-displayname-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-email-section"></div>
|
||||
</div>
|
||||
<?php if ($_['profileEnabledGlobally']) : ?>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-profile-section"></div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-phone-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-location-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-website-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-twitter-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-mastodon-section"></div>
|
||||
</div>
|
||||
<?php if ($_['profileEnabledGlobally']) : ?>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-organisation-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-role-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-headline-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-biography-section"></div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="personal-settings-setting-box personal-settings-language-box">
|
||||
<div id="vue-language-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box personal-settings-locale-box">
|
||||
<div id="vue-locale-section"></div>
|
||||
</div>
|
||||
<span class="msg"></span>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-email-section"></div>
|
||||
</div>
|
||||
|
||||
<div id="personal-settings-group-container">
|
||||
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-phone-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-location-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box personal-settings-language-box">
|
||||
<div id="vue-language-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box personal-settings-locale-box">
|
||||
<div id="vue-locale-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-website-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-twitter-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-mastodon-section"></div>
|
||||
</div>
|
||||
<?php if ($_['profileEnabledGlobally']) : ?>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-organisation-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-role-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-headline-section"></div>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box">
|
||||
<div id="vue-biography-section"></div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<span class="msg"></span>
|
||||
|
||||
<div id="personal-settings-group-container"></div>
|
||||
</div>
|
||||
|
||||
<?php if ($_['profileEnabledGlobally']) : ?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue