jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Use flexbox for profile panel instead of old boostrap grid

Browse Source
This commit is contained in:
Johannes Zellner
2024-10-15 17:27:58 +02:00
parent d02b6d90cc
commit 6e12d06343
1 changed files with 52 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
dashboard/public/views/profile.html
View File

@@ -392,62 +392,62 @@
</div>
<div class="card">
<div class="grid-item-top">
<div class="row">
<div class="col-xs-3" style="min-width: 150px;">
<div class="settings-avatar" style="background-image: url('{{ user.avatarUrl }}');" ng-click="avatarChange.showChangeAvatar()">
<i class="picture-edit-indicator fa fa-pencil-alt"></i>
</div>
</div>
<div class="col-xs-9">
<table width="100%">
<tr>
<td class="text-muted" style="vertical-align: top;">{{ 'main.username' | tr }}</td>
<td class="text-right" style="vertical-align: top;">
{{ user.username }} &nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">{{ 'main.displayName' | tr }}</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">
{{ user.displayName }} <a href="" ng-click="displayNameChange.show()" ng-hide="user.source || config.profileLocked"><i class="fa fa-edit text-small"></i></a>
</td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">{{ 'profile.primaryEmail' | tr }}</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">
{{ user.email }} <a href="" ng-click="emailChange.show()" ng-hide="user.source || config.profileLocked"><i class="fa fa-edit text-small"></i></a>
</td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">{{ 'profile.passwordRecoveryEmail' | tr }}</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">
{{ user.fallbackEmail }} <a href="" ng-click="fallbackEmailChange.show()" ng-hide="user.source || config.profileLocked"><i class="fa fa-edit text-small"></i></a>
</td>
</tr>
<tr ng-hide="user.source">
<td colspan="2" class="text-right">
<a href="" ng-click="sendPasswordReset()">{{ 'profile.passwordResetAction' | tr }}</a>
</td>
</tr>
<tr><td colspan="2">&nbsp;</td></tr>
<tr>
<td class="text-muted" style="vertical-align: middle;">{{ 'profile.language' | tr }}</td>
<td class="text-right" style="vertical-align: middle;">
<multiselect ng-model="language" options="lang.display for lang in languages" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
</td>
</tr>
</table>
<div style="display: flex; flex-wrap: wrap;">
<div style="width: 150px;">
<div class="settings-avatar" style="background-image: url('{{ user.avatarUrl }}');" ng-click="avatarChange.showChangeAvatar()">
<i class="picture-edit-indicator fa fa-pencil-alt"></i>
</div>
</div>
<div class="row">
<div class="col-md-12">
<br/>
<button class="btn btn-default" ng-click="backgroundImageChange.show()">Set Background Image</button>
<button class="btn btn-primary pull-right" ng-click="passwordchange.show()" ng-hide="user.source">{{ 'profile.changePasswordAction' | tr }}</button>
<button class="btn pull-right" uib-tooltip="{{ (user.source && config.external2FA) ? ('profile.enable2FANotAvailable' | tr) : '' }}" ng-disabled="user.source && config.external2FA" ng-class="user.twoFactorAuthenticationEnabled ? 'btn-danger' : 'btn-success'" ng-click="twoFactorAuthentication.show()">{{ user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction' | tr }}</button> </div>
<div style="flex-grow: 1;">
<table style="width: 100%;">
<tr>
<td class="text-muted" style="vertical-align: top;">{{ 'main.username' | tr }}</td>
<td class="text-right" style="vertical-align: top;">
{{ user.username }} &nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">{{ 'main.displayName' | tr }}</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">
{{ user.displayName }} <a href="" ng-click="displayNameChange.show()" ng-hide="user.source || config.profileLocked"><i class="fa fa-edit text-small"></i></a>
</td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">{{ 'profile.primaryEmail' | tr }}</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">
{{ user.email }} <a href="" ng-click="emailChange.show()" ng-hide="user.source || config.profileLocked"><i class="fa fa-edit text-small"></i></a>
</td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">{{ 'profile.passwordRecoveryEmail' | tr }}</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">
{{ user.fallbackEmail }} <a href="" ng-click="fallbackEmailChange.show()" ng-hide="user.source || config.profileLocked"><i class="fa fa-edit text-small"></i></a>
</td>
</tr>
<tr ng-hide="user.source">
<td colspan="2" class="text-right">
<a href="" ng-click="sendPasswordReset()">{{ 'profile.passwordResetAction' | tr }}</a>
</td>
</tr>
<tr><td colspan="2">&nbsp;</td></tr>
<tr>
<td class="text-muted" style="vertical-align: middle;">{{ 'profile.language' | tr }}</td>
<td class="text-right" style="vertical-align: middle;">
<multiselect ng-model="language" options="lang.display for lang in languages" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
</td>
</tr>
</table>
</div>
</div>
<br/>
<div style="display: flex; flex-wrap: wrap; gap: 5px;">
<button class="btn btn-default" ng-click="backgroundImageChange.show()">Set Background Image</button>
<div style="flex-grow: 1;"></div>
<button class="btn btn-primary" ng-click="passwordchange.show()" ng-hide="user.source">{{ 'profile.changePasswordAction' | tr }}</button>
<button class="btn" uib-tooltip="{{ (user.source && config.external2FA) ? ('profile.enable2FANotAvailable' | tr) : '' }}" ng-disabled="user.source && config.external2FA" ng-class="user.twoFactorAuthenticationEnabled ? 'btn-danger' : 'btn-success'" ng-click="twoFactorAuthentication.show()">{{ user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction' | tr }}</button>
</div>
</div>
<br>