base tabler
This commit is contained in:
JACS
parent
ac2cfa9fe1
commit
0f84beacf1
1432 changed files with 28760 additions and 1 deletions
45
liquid/includes/parts/modals/add-task.html
Normal file
45
liquid/includes/parts/modals/add-task.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title">Add task</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" placeholder="Task name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Assigned To</label>
|
||||
<select class="form-select">
|
||||
<option value="">Select person</option>
|
||||
{% assign selected_people = "5,6,2,3" | split: "," %}
|
||||
{% for person_id_str in selected_people %}
|
||||
{% assign person_id = person_id_str | plus: 0 | minus: 1 %}
|
||||
{% assign person = people[person_id] %}
|
||||
<option value="{{ person.id }}">{{ person.full_name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Priority</label>
|
||||
<select class="form-select">
|
||||
<option value="Low">Low</option>
|
||||
<option value="Medium">Medium</option>
|
||||
<option value="High">High</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Description</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Task description"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
138
liquid/includes/parts/modals/change-password.html
Normal file
138
liquid/includes/parts/modals/change-password.html
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="password-modal-label">Change password</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="password-current">Current password</label>
|
||||
{% include "ui/form/input-group.html" type="password" id="password-current" placeholder="Enter your current password" append-button="eye:Show password" flat=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="password-new">New password</label>
|
||||
{% include "ui/form/input-group.html" type="password" id="password-new" placeholder="Enter new password" append-button="eye:Show password" flat=true %}
|
||||
<small class="form-hint">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain
|
||||
spaces, special characters, or emoji.
|
||||
</small>
|
||||
<div class="mt-2">
|
||||
<div class="progress" style="height: 4px;">
|
||||
<div class="progress-bar" id="password-strength" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
<div class="text-secondary text-xs mt-1" id="password-strength-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="password-confirm">Confirm new password</label>
|
||||
{% include "ui/form/input-group.html" type="password" id="password-confirm" placeholder="Confirm your new password" append-button="eye:Show password" flat=true %}
|
||||
<div class="invalid-feedback d-none" id="password-match-error">
|
||||
Passwords do not match.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "ui/button.html" type="submit" text="Update password" color="primary" block=true class="mt-4" %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% capture_script %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
function setupPasswordToggle(inputId) {
|
||||
const input = document.getElementById(inputId);
|
||||
if (!input) return;
|
||||
|
||||
const inputGroup = input.closest('.input-group');
|
||||
if (!inputGroup) return;
|
||||
|
||||
const toggleLink = inputGroup.querySelector('a.link-secondary');
|
||||
if (!toggleLink) return;
|
||||
|
||||
toggleLink.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const isPassword = input.type === 'password';
|
||||
input.type = isPassword ? 'text' : 'password';
|
||||
|
||||
// Update tooltip text
|
||||
const tooltipText = isPassword ? 'Hide password' : 'Show password';
|
||||
this.setAttribute('title', tooltipText);
|
||||
this.setAttribute('data-bs-original-title', tooltipText);
|
||||
|
||||
// Update icon (simple approach - toggle classes if needed)
|
||||
const svg = this.querySelector('svg');
|
||||
if (svg) {
|
||||
const use = svg.querySelector('use');
|
||||
if (use) {
|
||||
use.setAttribute('href', isPassword ? '#icon-eye-off' : '#icon-eye');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupPasswordToggle('password-current');
|
||||
setupPasswordToggle('password-new');
|
||||
setupPasswordToggle('password-confirm');
|
||||
|
||||
const newPasswordInput = document.getElementById('password-new');
|
||||
const strengthBar = document.getElementById('password-strength');
|
||||
const strengthText = document.getElementById('password-strength-text');
|
||||
|
||||
if (newPasswordInput && strengthBar && strengthText) {
|
||||
newPasswordInput.addEventListener('input', function() {
|
||||
const password = this.value;
|
||||
let strength = 0;
|
||||
let strengthLabel = '';
|
||||
|
||||
if (password.length >= 8) strength++;
|
||||
if (password.length >= 12) strength++;
|
||||
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
|
||||
if (/\d/.test(password)) strength++;
|
||||
if (/[^a-zA-Z0-9]/.test(password)) strength++;
|
||||
|
||||
const percentage = (strength / 5) * 100;
|
||||
strengthBar.style.width = percentage + '%';
|
||||
|
||||
if (strength <= 2) {
|
||||
strengthBar.className = 'progress-bar bg-danger';
|
||||
strengthLabel = 'Weak';
|
||||
} else if (strength <= 3) {
|
||||
strengthBar.className = 'progress-bar bg-warning';
|
||||
strengthLabel = 'Fair';
|
||||
} else if (strength <= 4) {
|
||||
strengthBar.className = 'progress-bar bg-info';
|
||||
strengthLabel = 'Good';
|
||||
} else {
|
||||
strengthBar.className = 'progress-bar bg-success';
|
||||
strengthLabel = 'Strong';
|
||||
}
|
||||
|
||||
strengthText.textContent = password ? strengthLabel : '';
|
||||
});
|
||||
}
|
||||
|
||||
const confirmPasswordInput = document.getElementById('password-confirm');
|
||||
const matchError = document.getElementById('password-match-error');
|
||||
|
||||
if (newPasswordInput && confirmPasswordInput && matchError) {
|
||||
function validateMatch() {
|
||||
const newPassword = newPasswordInput.value;
|
||||
const confirmPassword = confirmPasswordInput.value;
|
||||
|
||||
if (confirmPassword && newPassword !== confirmPassword) {
|
||||
confirmPasswordInput.classList.add('is-invalid');
|
||||
matchError.classList.remove('d-none');
|
||||
} else {
|
||||
confirmPasswordInput.classList.remove('is-invalid');
|
||||
matchError.classList.add('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
newPasswordInput.addEventListener('input', validateMatch);
|
||||
confirmPasswordInput.addEventListener('input', validateMatch);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endcapture_script %}
|
||||
|
||||
56
liquid/includes/parts/modals/confirm-delete.html
Normal file
56
liquid/includes/parts/modals/confirm-delete.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
{% include "ui/modal/close.html" %}
|
||||
<div class="modal-status bg-danger"></div>
|
||||
<div class="modal-body text-center py-4">
|
||||
{% include "ui/icon.html" icon="alert-triangle" color="danger" size="lg" class="mb-2" %}
|
||||
|
||||
<h3 id="confirm-delete-title">Are you sure?</h3>
|
||||
<div class="text-secondary mb-4">
|
||||
<p id="confirm-delete-message">Do you really want to delete this item? This action cannot be undone.</p>
|
||||
<div id="confirm-delete-items" class="text-start d-none">
|
||||
<div class="card card-sm mt-3">
|
||||
<div class="card-body">
|
||||
<div class="fw-bold mb-2">Items to be deleted:</div>
|
||||
<ul class="list-unstyled mb-0" id="confirm-delete-list">
|
||||
<li>• Item 1</li>
|
||||
<li>• Item 2</li>
|
||||
<li>• Item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="form-check text-start">
|
||||
<input class="form-check-input" type="checkbox" id="confirm-delete-checkbox">
|
||||
<span class="form-check-label">I understand this action cannot be undone</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<div class="w-100">
|
||||
<div class="row">
|
||||
<div class="col">{% include "ui/button.html" dismiss=true text="Cancel" block=true %}</div>
|
||||
<div class="col">
|
||||
<button type="button" class="btn btn-danger w-100" data-bs-dismiss="modal" id="confirm-delete-button" disabled>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture_script %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const checkbox = document.getElementById("confirm-delete-checkbox");
|
||||
const deleteButton = document.getElementById("confirm-delete-button");
|
||||
|
||||
if (checkbox && deleteButton) {
|
||||
checkbox.addEventListener("change", function() {
|
||||
deleteButton.disabled = !this.checked;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endcapture_script %}
|
||||
|
||||
18
liquid/includes/parts/modals/danger.html
Normal file
18
liquid/includes/parts/modals/danger.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{% include "ui/modal/close.html" %}
|
||||
<div class="modal-status bg-danger"></div>
|
||||
<div class="modal-body text-center py-4">
|
||||
|
||||
{% include "ui/icon.html" icon="alert-triangle" color="danger" size="lg" class="mb-2" %}
|
||||
|
||||
<h3>Are you sure?</h3>
|
||||
<div class="text-secondary">Do you really want to remove 84 files? What you've done cannot be undone.</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<div class="w-100">
|
||||
<div class="row">
|
||||
<div class="col">{% include "ui/button.html" dismiss=true text="Cancel" block=true %}</div>
|
||||
<div class="col">{% include "ui/button.html" color="danger" dismiss=true text="Delete 84 items" block=true %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
19
liquid/includes/parts/modals/deactivate.html
Normal file
19
liquid/includes/parts/modals/deactivate.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-auto">{% include "ui/avatar.html" color="red" icon="alert-triangle" class="avatar-rounded" %}</div>
|
||||
<div class="col">
|
||||
<div class="h3">Are you sure you want to delete your account?
|
||||
</div>
|
||||
<div class="text-secondary">Deleting your account is permanent and will remove all content including comments,
|
||||
avatars and profile settings. Are you sure you want to delete your account?
|
||||
</div>
|
||||
|
||||
<div class="mt">
|
||||
<div class="btn-list justify-content-end">
|
||||
<div class="btn">Cancel</div>
|
||||
<div class="btn btn-danger">Deactivate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
92
liquid/includes/parts/modals/edit-profile.html
Normal file
92
liquid/includes/parts/modals/edit-profile.html
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="profile-modal-label">Edit profile</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-4">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar-upload.html" class="rounded" size="lg" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label">Avatar</label>
|
||||
<div class="text-secondary">Click to upload a new avatar</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="profile-first-name">First name</label>
|
||||
<input class="form-control" id="profile-first-name" type="text" placeholder="John">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="profile-last-name">Last name</label>
|
||||
<input class="form-control" id="profile-last-name" type="text" placeholder="Doe">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="profile-email">Email</label>
|
||||
<input class="form-control" id="profile-email" type="email" placeholder="john.doe@example.com">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="profile-phone">Phone</label>
|
||||
<input class="form-control" id="profile-phone" type="tel" placeholder="+1 (555) 123-4567">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="profile-bio">Bio</label>
|
||||
<textarea class="form-control" id="profile-bio" rows="4" placeholder="Tell us about yourself..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="profile-location">Location</label>
|
||||
<input class="form-control" id="profile-location" type="text" placeholder="City, Country">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="profile-birthdate">Date of birth</label>
|
||||
{% include "ui/datepicker.html" layout="icon" id="profile-birthdate" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Social links</label>
|
||||
<div class="row g-2">
|
||||
<div class="col-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">{% include "ui/icon.html" icon="brand-twitter" %}</span>
|
||||
<input type="text" class="form-control" placeholder="twitter.com/username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">{% include "ui/icon.html" icon="brand-github" %}</span>
|
||||
<input type="text" class="form-control" placeholder="github.com/username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">{% include "ui/icon.html" icon="brand-linkedin" %}</span>
|
||||
<input type="text" class="form-control" placeholder="linkedin.com/in/username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "ui/button.html" type="submit" text="Save changes" color="primary" block=true class="mt-4" %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
5
liquid/includes/parts/modals/full-width.html
Normal file
5
liquid/includes/parts/modals/full-width.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{% include "ui/modal/header.html" title="Full width modal" %}
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
|
||||
</div>
|
||||
{% include "ui/modal/footer.html" %}
|
||||
5
liquid/includes/parts/modals/large.html
Normal file
5
liquid/includes/parts/modals/large.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{% include "ui/modal/header.html" title="Large modal" %}
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
|
||||
</div>
|
||||
{% include "ui/modal/footer.html" %}
|
||||
27
liquid/includes/parts/modals/new-email.html
Normal file
27
liquid/includes/parts/modals/new-email.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title">New Message</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">To</label>
|
||||
<input type="text" class="form-control" placeholder="Example@email.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Subject</label>
|
||||
<input type="text" class="form-control" placeholder="Your subject">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Message</label>
|
||||
{% include "ui/wysiwyg.html" id="email-message" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
|
||||
{% include "ui/icon.html" icon="send" %} Send Message
|
||||
</button>
|
||||
</div>
|
||||
33
liquid/includes/parts/modals/new-event.html
Normal file
33
liquid/includes/parts/modals/new-event.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="event-modal-label">New event</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="event-title">Title</label>
|
||||
<input class="form-control" id="event-title" type="text" placeholder="Event title">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="event-description">Description</label>
|
||||
<textarea class="form-control" id="event-description" rows="3" placeholder="Event description"></textarea>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="event-start">Start</label>
|
||||
{% include "ui/datepicker.html" layout="icon" id="event-start" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="event-end">End</label>
|
||||
{% include "ui/datepicker.html" layout="icon" id="event-end" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/button.html" type="submit" text="Create event" color="primary" block=true class="mt-4" %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
51
liquid/includes/parts/modals/new-task.html
Normal file
51
liquid/includes/parts/modals/new-task.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="task-modal-label">New task</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="task-name">Task name</label>
|
||||
<input class="form-control" id="task-name" type="text" placeholder="Enter task name">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="task-description">Description</label>
|
||||
<textarea class="form-control" id="task-description" rows="3" placeholder="Enter task description"></textarea>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="task-assigned">Assigned to</label>
|
||||
{% include "ui/select.html" key="people" id="task-assigned" indicator="avatar" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="task-priority">Priority</label>
|
||||
<select class="form-select" id="task-priority">
|
||||
<option value="low">Low</option>
|
||||
<option value="medium" selected>Medium</option>
|
||||
<option value="high">High</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="task-due-date">Due date</label>
|
||||
{% include "ui/datepicker.html" layout="icon" id="task-due-date" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="task-category">Category / Tags</label>
|
||||
{% include "ui/select.html" key="tags" id="task-category" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/button.html" type="submit" text="Create task" color="primary" block=true class="mt-4" %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
79
liquid/includes/parts/modals/report.html
Normal file
79
liquid/includes/parts/modals/report.html
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
{% include "ui/modal/header.html" title="New report" %}
|
||||
{% assign reports = "Simple:Provide only basic data needed for the report,Advanced:Insert charts and additional advanced analyses to be inserted in the report" | split: "," %}
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
|
||||
</div>
|
||||
|
||||
<label class="form-label">Report type</label>
|
||||
<div class="form-selectgroup-boxes row mb-3">
|
||||
{% for report in reports %}
|
||||
{% assign r = report | split: ':' %}
|
||||
<div class="col-lg-6">
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="report-type" value="1" class="form-selectgroup-input"{% if forloop.index == 1 %} checked{% endif %}>
|
||||
<span class="form-selectgroup-label d-flex align-items-center p-3">
|
||||
<span class="me-3">
|
||||
<span class="form-selectgroup-check"></span>
|
||||
</span>
|
||||
<span class="form-selectgroup-label-content">
|
||||
<span class="form-selectgroup-title strong mb-1">{{ r[0] }}</span>
|
||||
<span class="d-block text-secondary">{{ r[1] }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Report url</label>
|
||||
{% include "ui/form/input-group.html" prepend="https://tabler.io/reports/" flat=true input-class="ps-0" value="report-01" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Visibility</label>
|
||||
{% assign options = "Private,Public,Hidden" | split: "," %}
|
||||
<select class="form-select">
|
||||
{% for option in options %}
|
||||
<option value="{{ forloop.index }}"{% if forloop.index == 1 %} selected{% endif %}>{{ option }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Client name</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Reporting period</label>
|
||||
<input type="date" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label class="form-label">Additional information</label>
|
||||
<textarea class="form-control" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
{% include "ui/button.html" text="Cancel" color="link link-secondary" dismiss=true %}
|
||||
{% include "ui/button.html" text="Create new report" icon="plus" color="primary" dismiss=true class="ms-auto" %}
|
||||
</div>
|
||||
40
liquid/includes/parts/modals/scrollable.html
Normal file
40
liquid/includes/parts/modals/scrollable.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
{% include "ui/modal/header.html" title="Scrollable modal" %}
|
||||
<div class="modal-body">
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
|
||||
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
|
||||
laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
|
||||
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
|
||||
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
|
||||
laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
|
||||
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
|
||||
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
|
||||
laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
|
||||
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
|
||||
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
|
||||
laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
|
||||
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
|
||||
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
|
||||
laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
|
||||
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
|
||||
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
|
||||
laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
|
||||
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
{% include "ui/modal/footer.html" %}
|
||||
23
liquid/includes/parts/modals/signature.html
Normal file
23
liquid/includes/parts/modals/signature.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{% include "ui/modal/close.html" %}
|
||||
<div class="modal-body">
|
||||
<h3 class="card-title">Confirm transfer</h3>
|
||||
<p class="card-subtitle">Please confirm the transfer of funds by signing below.</p>
|
||||
<form action="">
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Signature</label>
|
||||
<div class="position-relative select-none">
|
||||
{% include "ui/signature.html" sample clear width=684 height=400 %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="text-secondary fs-5">
|
||||
I agree that the signature and initials will be the electronic representation of my signature and initials for
|
||||
all purposes when I (or my agent) use
|
||||
them on documents, including legally binding contracts - just the same as a pen-and-paper signature or initial.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn">Cancel</button>
|
||||
<button type="button" class="btn btn-primary ms-auto">Confirm transfer</button>
|
||||
</div>
|
||||
5
liquid/includes/parts/modals/simple.html
Normal file
5
liquid/includes/parts/modals/simple.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{% include "ui/modal/header.html" %}
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
|
||||
</div>
|
||||
{% include "ui/modal/footer.html" %}
|
||||
8
liquid/includes/parts/modals/small.html
Normal file
8
liquid/includes/parts/modals/small.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="modal-body">
|
||||
<div class="modal-title">Are you sure?</div>
|
||||
<div>If you proceed, you will lose all your personal data.</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Yes, delete all my data</button>
|
||||
</div>
|
||||
17
liquid/includes/parts/modals/success.html
Normal file
17
liquid/includes/parts/modals/success.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{% include "ui/modal/close.html" %}
|
||||
<div class="modal-status bg-success"></div>
|
||||
<div class="modal-body text-center py-4">
|
||||
{% include "ui/icon.html" icon="circle-check" color="green" size="lg" class="mb-2" %}
|
||||
|
||||
<h3>Payment succedeed</h3>
|
||||
<div class="text-secondary">Your payment of $290 has been successfully submitted. Your invoice has been sent to {{ site.email }}.</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<div class="w-100">
|
||||
<div class="row">
|
||||
<div class="col">{% include "ui/button.html" dismiss=true text="Go to dashboard" block=true %}</div>
|
||||
<div class="col">{% include "ui/button.html" color="success" dismiss=true text="View invoice" block=true %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
24
liquid/includes/parts/modals/team.html
Normal file
24
liquid/includes/parts/modals/team.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{% include "ui/modal/header.html" title="Add a new team" %}
|
||||
<div class="modal-body">
|
||||
<div class="row mb-3 align-items-end">
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar-upload.html" class="rounded" size="xl" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "parts/form/input-color.html" label="Pick your team color" %}
|
||||
|
||||
<div>
|
||||
<label class="form-label">Additional info</label>
|
||||
<textarea class="form-control"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add Team</button>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue