Styling adjustments to the settings nav component and the settings pages

This commit is contained in:
Alex Tselegidis 2022-09-14 10:14:19 +02:00
parent 1340fa6e9f
commit b6cc72cd06
6 changed files with 62 additions and 55 deletions

View file

@ -1,34 +1,34 @@
<h4 class="mt-4 text-black-50 pb-2 border-bottom mb-2"> <h4 class=" text-black-50 py-3 mb-3 border-bottom fw-light">
<?= lang('settings') ?> <?= lang('settings') ?>
</h4> </h4>
<ul id="settings-nav" class="nav flex-column"> <ul id="settings-nav" class="nav flex-column">
<li class="nav-item mb-2"> <li class="nav-item mb-3">
<a class="nav-link" href="<?= site_url('general_settings') ?>"> <a class="nav-link px-0 py-2" href="<?= site_url('general_settings') ?>">
<?= lang('general_settings') ?> <?= lang('general_settings') ?>
</a> </a>
</li> </li>
<li class="nav-item mb-2"> <li class="nav-item mb-3">
<a class="nav-link" href="<?= site_url('booking_settings') ?>"> <a class="nav-link px-0 py-2" href="<?= site_url('booking_settings') ?>">
<?= lang('booking_settings') ?> <?= lang('booking_settings') ?>
</a> </a>
</li> </li>
<li class="nav-item mb-2"> <li class="nav-item mb-3">
<a class="nav-link" href="<?= site_url('business_settings') ?>"> <a class="nav-link px-0 py-2" href="<?= site_url('business_settings') ?>">
<?= lang('business_logic') ?> <?= lang('business_logic') ?>
</a> </a>
</li> </li>
<li class="nav-item mb-2"> <li class="nav-item mb-3">
<a class="nav-link" href="<?= site_url('legal_settings') ?>"> <a class="nav-link px-0 py-2" href="<?= site_url('legal_settings') ?>">
<?= lang('legal_contents') ?> <?= lang('legal_contents') ?>
</a> </a>
</li> </li>
<li class="nav-item mb-2"> <li class="nav-item mb-3">
<a class="nav-link" href="<?= site_url('integrations') ?>"> <a class="nav-link px-0 py-2" href="<?= site_url('integrations') ?>">
<?= lang('integrations') ?> <?= lang('integrations') ?>
</a> </a>
</li> </li>

View file

@ -11,8 +11,9 @@
<div class="col-sm-6"> <div class="col-sm-6">
<form> <form>
<fieldset> <fieldset>
<legend class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2"> <div class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
<?= lang('booking_settings') ?>
<?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?> <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
<button type="button" id="save-settings" class="btn btn-primary"> <button type="button" id="save-settings" class="btn btn-primary">
@ -20,9 +21,9 @@
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<?php endif ?> <?php endif ?>
</legend> </div>
<div class="row mb-3 fields-row"> <div class="row mb-5 fields-row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="form-group mb-5"> <div class="form-group mb-5">
<label for="first-name" class="form-label"> <label for="first-name" class="form-label">
@ -329,7 +330,7 @@
</div> </div>
<div class="mb-3"> <div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="disable-booking" <input class="form-check-input" type="checkbox" id="disable-booking"
data-field="disable_booking"> data-field="disable_booking">

View file

@ -11,8 +11,10 @@
<div class="col-sm-6"> <div class="col-sm-6">
<form> <form>
<fieldset> <fieldset>
<legend class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2"> <div class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
<?= lang('business_logic') ?> <h4 class="text-black-50 mb-0 fw-light">
<?= lang('business_logic') ?>
</h4>
<?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?> <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
<button type="button" id="save-settings" class="btn btn-primary"> <button type="button" id="save-settings" class="btn btn-primary">
@ -20,14 +22,14 @@
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<?php endif ?> <?php endif ?>
</legend>
<h4><?= lang('working_plan') ?></h4>
<div class="form-text text-muted mb-4">
<?= lang('edit_working_plan_hint') ?>
</div> </div>
<h5 class="text-black-50 mb-3 fw-light"><?= lang('working_plan') ?></h5>
<p class="form-text text-muted mb-4">
<?= lang('edit_working_plan_hint') ?>
</p>
<table class="working-plan table table-striped"> <table class="working-plan table table-striped">
<thead> <thead>
<tr> <tr>
@ -39,18 +41,18 @@
<tbody><!-- Dynamic Content --></tbody> <tbody><!-- Dynamic Content --></tbody>
</table> </table>
<div class="text-end"> <div class="text-end mb-5">
<button class="btn btn-outline-secondary" id="apply-global-working-plan" type="button"> <button class="btn btn-outline-secondary" id="apply-global-working-plan" type="button">
<i class="fas fa-check"></i> <i class="fas fa-check"></i>
<?= lang('apply_to_all_providers') ?> <?= lang('apply_to_all_providers') ?>
</button> </button>
</div> </div>
<h4><?= lang('breaks') ?></h4> <h5 class="text-black-50 mb-3 fw-light"><?= lang('breaks') ?></h5>
<span class="form-text text-muted"> <p class="form-text text-muted">
<?= lang('edit_breaks_hint') ?> <?= lang('edit_breaks_hint') ?>
</span> </p>
<div class="mt-2"> <div class="mt-2">
<button type="button" class="add-break btn btn-primary"> <button type="button" class="add-break btn btn-primary">
@ -61,7 +63,7 @@
<br> <br>
<table class="breaks table table-striped mb-4"> <table class="breaks table table-striped mb-5">
<thead> <thead>
<tr> <tr>
<th><?= lang('day') ?></th> <th><?= lang('day') ?></th>
@ -73,9 +75,9 @@
<tbody><!-- Dynamic Content --></tbody> <tbody><!-- Dynamic Content --></tbody>
</table> </table>
<h4><?= lang('allow_rescheduling_cancellation_before') ?></h4> <h5 class="text-black-50 mb-3 fw-light"><?= lang('allow_rescheduling_cancellation_before') ?></h5>
<div class="mb-3"> <div class="mb-5">
<label for="book-advance-timeout" class="form-label"> <label for="book-advance-timeout" class="form-label">
<?= lang('timeout_minutes') ?> <?= lang('timeout_minutes') ?>
</label> </label>
@ -88,9 +90,9 @@
</div> </div>
</div> </div>
<h4><?= lang('future_booking_limit') ?></h4> <h5 class="text-black-50 mb-3 fw-light"><?= lang('future_booking_limit') ?></h5>
<div class="mb-3"> <div class="mb-5">
<label for="future-booking-limit" class="form-label"> <label for="future-booking-limit" class="form-label">
<?= lang('limit_days') ?> <?= lang('limit_days') ?>
</label> </label>

View file

@ -11,8 +11,10 @@
<div class="col-sm-6"> <div class="col-sm-6">
<form> <form>
<fieldset> <fieldset>
<legend class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2"> <div class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
<?= lang('general_settings') ?> <h4 class="text-black-50 mb-0 fw-light">
<?= lang('general_settings') ?>
</h4>
<?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?> <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
<button type="button" id="save-settings" class="btn btn-primary"> <button type="button" id="save-settings" class="btn btn-primary">
@ -20,11 +22,11 @@
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<?php endif ?> <?php endif ?>
</legend> </div>
<div class="row mb-5"> <div class="row mb-5">
<div class="col-12"> <div class="col-12">
<h4><?= lang('company') ?></h4> <h5 class="text-black-50 mb-3 fw-light"><?= lang('company') ?></h5>
<div class="mb-3"> <div class="mb-3">
<label class="form-label" for="company-name"> <label class="form-label" for="company-name">
@ -139,7 +141,7 @@
<div class="row mb-5"> <div class="row mb-5">
<div class="col-12"> <div class="col-12">
<h4><?= lang('localization') ?></h4> <h5 class="text-black-50 mb-3 fw-light"><?= lang('localization') ?></h5>
<div class="mb-3"> <div class="mb-3">
<label class="form-label" for="date-format"> <label class="form-label" for="date-format">

View file

@ -8,11 +8,11 @@
<?php component('settings_nav') ?> <?php component('settings_nav') ?>
</div> </div>
<div id="integrations" class="col-sm-6"> <div id="integrations" class="col-sm-6">
<h3 class="text-muted border-bottom py-2"> <h4 class="text-black-50 border-bottom py-3 mb-3 fw-light">
<?= lang('integrations') ?> <?= lang('integrations') ?>
</h3> </h4>
<p class="mb-5"> <p class="form-text text-muted mb-4">
<?= lang('integrations_info') ?> <?= lang('integrations_info') ?>
</p> </p>

View file

@ -11,20 +11,22 @@
<div class="col-sm-6"> <div class="col-sm-6">
<form> <form>
<fieldset> <fieldset>
<legend class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2"> <div class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
<?= lang('legal_contents') ?> <h4 class="text-black-50 mb-0 fw-light">
<?= lang('legal_contents') ?>
</h4>
<?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?> <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
<button type="button" id="save-settings" class="btn btn-primary"> <button type="button" id="save-settings" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<?php endif ?> <?php endif ?>
</legend> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h4><?= lang('cookie_notice') ?></h4> <h5 class="text-black-50 mb-3 fw-light"><?= lang('cookie_notice') ?></h5>
<div class="form-check form-switch mb-3"> <div class="form-check form-switch mb-3">
<input class="form-check-input display-switch" type="checkbox" <input class="form-check-input display-switch" type="checkbox"
@ -38,8 +40,8 @@
<label class="form-label" for="cookie-notice-content"><?= lang('cookie_notice_content') ?></label> <label class="form-label" for="cookie-notice-content"><?= lang('cookie_notice_content') ?></label>
<textarea id="cookie-notice-content" cols="30" rows="10" class="mb-3"></textarea> <textarea id="cookie-notice-content" cols="30" rows="10" class="mb-3"></textarea>
</div> </div>
<h4><?= lang('terms_and_conditions') ?></h4> <h5 class="text-black-50 mb-3 fw-light"><?= lang('terms_and_conditions') ?></h5>
<div class="form-check form-switch mb-3"> <div class="form-check form-switch mb-3">
<input class="form-check-input display-switch" type="checkbox" <input class="form-check-input display-switch" type="checkbox"
@ -55,8 +57,8 @@
class="mb-3"></textarea> class="mb-3"></textarea>
</div> </div>
<h4><?= lang('privacy_policy') ?></h4> <h5 class="text-black-50 mb-3 fw-light"><?= lang('privacy_policy') ?></h5>
<div class="form-check form-switch mb-3"> <div class="form-check form-switch mb-3">
<input class="form-check-input display-switch" type="checkbox" <input class="form-check-input display-switch" type="checkbox"
id="display-privacy-policy"> id="display-privacy-policy">