lindeas
/
jilo-web
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 7 Wiki Activity

Switches profile edit to action-card design

main
Yasen Pramatarov 2025-12-14 16:43:51 +02:00
parent 817782a766
commit 31bc4d60e4
1 changed files with 132 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/templates/profile-edit.php
View File

@ -1,15 +1,12 @@
<!-- user profile --> <!-- user profile -->
<div class="tm-profile-card mx-auto"> <div class="action-card">
<div class="tm-profile-header"> <div class="action-card-header">
<div> <p class="action-eyebrow">Account</p>
<p class="tm-profile-eyebrow">Account</p> <h2 class="action-title">Profile of <?= htmlspecialchars($userDetails[0]['username']) ?></h2>
<h2 class="tm-profile-title">Profile of <?= htmlspecialchars($userDetails[0]['username']) ?></h2> <p class="action-subtitle">Update your personal details, avatar, and access rights in one streamlined view.</p>
<p class="tm-profile-subtitle">Update your personal details, avatar, and access rights in one streamlined view.</p>
</div> </div>
</div> <div class="action-card-body">
<form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=profile" enctype="multipart/form-data" class="action-form" novalidate>
<form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=profile" enctype="multipart/form-data" class="tm-profile-form" novalidate>
<?php include CSRF_TOKEN_INCLUDE; ?> <?php include CSRF_TOKEN_INCLUDE; ?>
<div class="row g-4 align-items-start"> <div class="row g-4 align-items-start">
<div class="col-lg-4"> <div class="col-lg-4">
@ -39,20 +36,25 @@
<h3 class="tm-profile-section-title">Personal info</h3> <h3 class="tm-profile-section-title">Personal info</h3>
<div class="row g-3"> <div class="row g-3">
<div class="col-md-6"> <div class="col-md-6">
<label for="name" class="form-label">Full name</label> <div class="action-form-group">
<input class="form-control" type="text" name="name" id="name" value="<?= htmlspecialchars($userDetails[0]['name'] ?? '') ?>" autofocus /> <label for="name" class="action-form-label">Full name</label>
<input class="form-control action-form-control" type="text" name="name" id="name" value="<?= htmlspecialchars($userDetails[0]['name'] ?? '') ?>" autofocus />
</div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="email" class="form-label">Email address</label> <div class="action-form-group">
<input class="form-control" type="text" name="email" id="email" value="<?= htmlspecialchars($userDetails[0]['email'] ?? '') ?>" /> <label for="email" class="action-form-label">Email address</label>
<input class="form-control action-form-control" type="text" name="email" id="email" value="<?= htmlspecialchars($userDetails[0]['email'] ?? '') ?>" />
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="tm-profile-section"> <div class="tm-profile-section">
<h3 class="tm-profile-section-title">Timezone</h3> <h3 class="tm-profile-section-title">Timezone</h3>
<label for="timezone" class="form-label">Preferred timezone</label> <div class="action-form-group">
<select class="form-control" name="timezone" id="timezone"> <label for="timezone" class="action-form-label">Preferred timezone</label>
<select class="form-control action-form-control" name="timezone" id="timezone">
<?php foreach ($allTimezones as $timezone) { ?> <?php foreach ($allTimezones as $timezone) { ?>
<option value="<?= htmlspecialchars($timezone) ?>" <?= $timezone === $userTimezone ? 'selected' : '' ?>> <option value="<?= htmlspecialchars($timezone) ?>" <?= $timezone === $userTimezone ? 'selected' : '' ?>>
<?= htmlspecialchars($timezone) ?>&nbsp;&nbsp;(<?= htmlspecialchars(getUTCOffset($timezone)) ?>) <?= htmlspecialchars($timezone) ?>&nbsp;&nbsp;(<?= htmlspecialchars(getUTCOffset($timezone)) ?>)
@ -60,10 +62,13 @@
<?php } ?> <?php } ?>
</select> </select>
</div> </div>
</div>
<div class="tm-profile-section"> <div class="tm-profile-section">
<h3 class="tm-profile-section-title">Bio</h3> <h3 class="tm-profile-section-title">Bio</h3>
<textarea class="form-control" name="bio" rows="6" placeholder="Share something about yourself, your role, or preferences."><?= htmlspecialchars($userDetails[0]['bio'] ?? '') ?></textarea> <div class="action-form-group">
<textarea class="form-control action-form-control" name="bio" rows="6" placeholder="Share something about yourself, your role, or preferences."><?= htmlspecialchars($userDetails[0]['bio'] ?? '') ?></textarea>
</div>
</div> </div>
<div class="tm-profile-section"> <div class="tm-profile-section">
@ -86,9 +91,9 @@
</div> </div>
</div> </div>
<div class="tm-profile-actions"> <div class="action-actions">
<a href="<?= htmlspecialchars($app_root) ?>?page=profile" class="btn btn-light tm-contact-back">Cancel</a> <a href="<?= htmlspecialchars($app_root) ?>?page=profile" class="btn btn-light">Cancel</a>
<button type="submit" class="btn btn-primary tm-contact-submit">Save changes</button> <button type="submit" class="btn btn-primary">Save changes</button>
</div> </div>
</div> </div>
</div> </div>
@ -116,11 +121,12 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- /user profile --> <!-- /user profile -->
<script> <script>
document.addEventListener('DOMContentLoaded', function() {
// Preview the uploaded avatar // Preview the uploaded avatar
document.getElementById('avatar-upload').addEventListener('change', function(event) { document.getElementById('avatar-upload').addEventListener('change', function(event) {
const reader = new FileReader(); const reader = new FileReader();
@ -151,6 +157,7 @@ document.getElementById('confirm-delete').addEventListener('click', function(eve
event.preventDefault(); // Prevent the outer form from submitting event.preventDefault(); // Prevent the outer form from submitting
document.getElementById('remove-avatar-form').submit(); document.getElementById('remove-avatar-form').submit();
}); });
});
// Function to detect user's timezone and select it in the dropdown // Function to detect user's timezone and select it in the dropdown
function setTimezone() { function setTimezone() {