Updated the styling of the required fields

This commit is contained in:
Alex Tselegidis 2020-09-30 14:32:42 +03:00
parent fb8f433116
commit 9dbc7ae000
7 changed files with 291 additions and 102 deletions

View file

@ -219,7 +219,7 @@
</div>
<div class="command-buttons">
<button type="button" id="button-back-2" class="btn button-back btn-secondary"
<button type="button" id="button-back-2" class="btn button-back btn-outline-secondary"
data-step_index="2">
<i class="fas fa-chevron-left mr-2"></i>
<?= lang('back') ?>
@ -330,7 +330,7 @@
<?php endif ?>
<div class="command-buttons">
<button type="button" id="button-back-3" class="btn button-back btn-secondary"
<button type="button" id="button-back-3" class="btn button-back btn-outline-secondary"
data-step_index="3">
<i class="fas fa-chevron-left mr-2"></i>
<?= lang('back') ?>
@ -368,7 +368,7 @@
</div>
<div class="command-buttons">
<button type="button" id="button-back-4" class="btn button-back btn-secondary"
<button type="button" id="button-back-4" class="btn button-back btn-outline-secondary"
data-step_index="4">
<i class="fas fa-chevron-left mr-2"></i>
<?= lang('back') ?>

View file

@ -362,7 +362,7 @@
</div>
<div class="modal-footer">
<button id="cancel-appointment" class="btn btn-outline-secondary" data-dismiss="modal">
<button class="btn btn-outline-secondary" data-dismiss="modal">
<i class="fas fa-ban"></i>
<?= lang('cancel') ?>
</button>
@ -443,7 +443,7 @@
</form>
</div>
<div class="modal-footer">
<button id="cancel-unavailable" class="btn btn-outline-secondary" data-dismiss="modal">
<button class="btn btn-outline-secondary" data-dismiss="modal">
<i class="fas fa-ban"></i>
<?= lang('cancel') ?>
</button>
@ -479,6 +479,14 @@
<select id="custom-availability-period-provider" class="form-control"></select>
</div>
<div class="form-group">
<label for="custom-availability-period-date" class="control-label">
<?= lang('date') ?>
<span class="text-danger">*</span>
</label>
<input id="custom-availability-period-date" class="form-control">
</div>
<div class="form-group">
<label for="custom-availability-period-start" class="control-label">
<?= lang('start') ?>
@ -519,7 +527,7 @@
</form>
</div>
<div class="modal-footer">
<button id="cancel-custom-availability-period" class="btn btn-outline-secondar" data-dismiss="modal">
<button class="btn btn-outline-secondary" data-dismiss="modal">
<i class="fas fa-ban mr-2"></i>
<?= lang('cancel') ?>
</button>
@ -550,7 +558,7 @@
</div>
</div>
<div class="modal-footer">
<button id="close-calendar" class="btn btn-outline-secondary" data-dismiss="modal">
<button class="btn btn-outline-secondary" data-dismiss="modal">
<i class="fas fa-ban mr-2"></i>
<?= lang('cancel') ?>
</button>

View file

@ -96,54 +96,79 @@
<div id="form-message" class="alert" style="display:none;"></div>
<div class="form-group">
<label class="control-label" for="first-name"><?= lang('first_name') ?> *</label>
<label class="control-label" for="first-name">
<?= lang('first_name') ?>
<span class="text-danger">*</span>
</label>
<input id="first-name" class="form-control required">
</div>
<div class="form-group">
<label class="control-label" for="last-name"><?= lang('last_name') ?> *</label>
<label class="control-label" for="last-name">
<?= lang('last_name') ?>
<span class="text-danger">*</span>
</label>
<input id="last-name" class="form-control required">
</div>
<div class="form-group">
<label class="control-label" for="email"><?= lang('email') ?> *</label>
<label class="control-label" for="email">
<?= lang('email') ?>
<span class="text-danger">*</span>
</label>
<input id="email" class="form-control required">
</div>
<div class="form-group">
<label class="control-label" for="phone-number"><?= lang('phone_number') ?>
<?= $require_phone_number === '1' ? '*' : ''; ?></label>
<label class="control-label" for="phone-number">
<?= lang('phone_number') ?>
<?= $require_phone_number === '1' ? '<span class="text-danger">*</span>' : ''; ?></label>
<input id="phone-number" class="form-control
<?= $require_phone_number === '1' ? 'required' : '' ?>">
</div>
<div class="form-group">
<label class="control-label" for="address"><?= lang('address') ?></label>
<label class="control-label" for="address">
<?= lang('address') ?>
</label>
<input id="address" class="form-control">
</div>
<div class="form-group">
<label class="control-label" for="city"><?= lang('city') ?></label>
<label class="control-label" for="city">
<?= lang('city') ?>
</label>
<input id="city" class="form-control">
</div>
<div class="form-group">
<label class="control-label" for="zip-code"><?= lang('zip_code') ?></label>
<label class="control-label" for="zip-code">
<?= lang('zip_code') ?>
</label>
<input id="zip-code" class="form-control">
</div>
<div class="form-group">
<label for="language"><?= lang('language') ?></label>
<label for="language">
<?= lang('language') ?>
</label>
<select id="language" class="form-control"></select>
</div>
<div class="form-group">
<label for="timezone"><?= lang('timezone') ?></label>
<label for="timezone">
<?= lang('timezone') ?>
</label>
<?= render_timezone_dropdown('id="timezone" class="form-control"') ?>
</div>
<div class="form-group">
<label class="control-label" for="notes"><?= lang('notes') ?></label>
<label class="control-label" for="notes">
<?= lang('notes') ?>
</label>
<textarea id="notes" rows="4" class="form-control"></textarea>
</div>
</div>

View file

@ -4,7 +4,7 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Backend | Easy!Appointments</title>
<title><?= isset($page_title) ? $page_title : lang('backend_section') ?> | Easy!Appointments</title>
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/bootstrap/css/bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.css') ?>">

View file

@ -49,16 +49,16 @@
<div class="input-group">
<input type="text" class="key form-control">
<span class="input-group-addon">
<div>
<button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
<i class="fas fa-search"></i>
</button>
<button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i>
</button>
</div>
</span>
<div class="input-group-addon">
<div>
<button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
<i class="fas fa-search"></i>
</button>
<button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i>
</button>
</div>
</div>
</div>
</form>
@ -102,32 +102,49 @@
<input type="hidden" id="service-id">
<div class="form-group">
<label for="service-name"><?= lang('name') ?> *</label>
<label for="service-name">
<?= lang('name') ?>
<span class="text-danger">*</span>
</label>
<input id="service-name" class="form-control required" maxlength="128">
</div>
<div class="form-group">
<label for="service-duration"><?= lang('duration_minutes') ?> *</label>
<label for="service-duration">
<?= lang('duration_minutes') ?>
<span class="text-danger">*</span>
</label>
<input id="service-duration" class="form-control required" type="number" min="15">
</div>
<div class="form-group">
<label for="service-price"><?= lang('price') ?> *</label>
<label for="service-price">
<?= lang('price') ?>
<span class="text-danger">*</span>
</label>
<input id="service-price" class="form-control required">
</div>
<div class="form-group">
<label for="service-currency"><?= lang('currency') ?></label>
<label for="service-currency">
<?= lang('currency') ?>
</label>
<input id="service-currency" class="form-control" maxlength="32">
</div>
<div class="form-group">
<label for="service-category"><?= lang('category') ?></label>
<label for="service-category">
<?= lang('category') ?>
</label>
<select id="service-category" class="form-control"></select>
</div>
<div class="form-group">
<label for="service-availabilities-type"><?= lang('availabilities_type') ?></label>
<label for="service-availabilities-type">
<?= lang('availabilities_type') ?>
</label>
<select id="service-availabilities-type" class="form-control">
<option value="<?= AVAILABILITIES_TYPE_FLEXIBLE ?>">
<?= lang('flexible') ?>
@ -139,17 +156,25 @@
</div>
<div class="form-group">
<label for="service-attendants-number"><?= lang('attendants_number') ?> *</label>
<label for="service-attendants-number">
<?= lang('attendants_number') ?>
<span class="text-danger">*</span>
</label>
<input id="service-attendants-number" class="form-control required" type="number" min="1">
</div>
<div class="form-group">
<label for="service-location"><?= lang('location') ?></label>
<label for="service-location">
<?= lang('location') ?>
</label>
<input id="service-location" class="form-control">
</div>
<div class="form-group">
<label for="service-description"><?= lang('description') ?></label>
<label for="service-description">
<?= lang('description') ?>
</label>
<textarea id="service-description" rows="4" class="form-control"></textarea>
</div>
</div>
@ -165,16 +190,16 @@
<div class="input-group">
<input type="text" class="key form-control">
<span class="input-group-addon">
<div>
<button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
<i class="fas fa-search"></i>
</button>
<button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i>
</button>
</div>
</span>
<div class="input-group-addon">
<div>
<button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
<i class="fas fa-search"></i>
</button>
<button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i>
</button>
</div>
</div>
</div>
</form>
@ -218,12 +243,18 @@
<input type="hidden" id="category-id">
<div class="form-group">
<label for="category-name"><?= lang('name') ?> *</label>
<label for="category-name">
<?= lang('name') ?>
<span class="text-danger">*</span>
</label>
<input id="category-name" class="form-control required">
</div>
<div class="form-group">
<label for="category-description"><?= lang('description') ?></label>
<label for="category-description">
<?= lang('description') ?>
</label>
<textarea id="category-description" rows="4" class="form-control"></textarea>
</div>
</div>

View file

@ -249,7 +249,7 @@
</table>
<div class="text-right">
<button class="btn btn-light" 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>
<?= lang('apply_to_all_providers') ?>
</button>

View file

@ -140,76 +140,115 @@
<div class="row">
<div class="provider-details col-12 col-md-6">
<div class="form-group">
<label for="provider-first-name"><?= lang('first_name') ?> *</label>
<label for="provider-first-name">
<?= lang('first_name') ?>
<span class="text-danger">*</span>
</label>
<input id="provider-first-name" class="form-control required" maxlength="256">
</div>
<div class="form-group">
<label for="provider-last-name"><?= lang('last_name') ?> *</label>
<label for="provider-last-name">
<?= lang('last_name') ?>
<span class="text-danger">*</span>
</label>
<input id="provider-last-name" class="form-control required" maxlength="512">
</div>
<div class="form-group">
<label for="provider-email"><?= lang('email') ?> *</label>
<label for="provider-email">
<?= lang('email') ?>
<span class="text-danger">*</span>
</label>
<input id="provider-email" class="form-control required" max="512">
</div>
<div class="form-group">
<label for="provider-phone-number"><?= lang('phone_number') ?> *</label>
<label for="provider-phone-number">
<?= lang('phone_number') ?>
<span class="text-danger">*</span>
</label>
<input id="provider-phone-number" class="form-control required" max="128">
</div>
<div class="form-group">
<label for="provider-mobile-number"><?= lang('mobile_number') ?></label>
<label for="provider-mobile-number">
<?= lang('mobile_number') ?>
</label>
<input id="provider-mobile-number" class="form-control" maxlength="128">
</div>
<div class="form-group">
<label for="provider-address"><?= lang('address') ?></label>
<label for="provider-address">
<?= lang('address') ?>
</label>
<input id="provider-address" class="form-control" maxlength="256">
</div>
<div class="form-group">
<label for="provider-city"><?= lang('city') ?></label>
<label for="provider-city">
<?= lang('city') ?>
</label>
<input id="provider-city" class="form-control" maxlength="256">
</div>
<div class="form-group">
<label for="provider-state"><?= lang('state') ?></label>
<label for="provider-state">
<?= lang('state') ?>
</label>
<input id="provider-state" class="form-control" maxlength="256">
</div>
<div class="form-group">
<label for="provider-zip-code"><?= lang('zip_code') ?></label>
<label for="provider-zip-code">
<?= lang('zip_code') ?>
</label>
<input id="provider-zip-code" class="form-control" maxlength="64">
</div>
<div class="form-group">
<label for="provider-notes"><?= lang('notes') ?></label>
<label for="provider-notes">
<?= lang('notes') ?>
</label>
<textarea id="provider-notes" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="provider-settings col-12 col-md-6">
<div class="form-group">
<label for="provider-username"><?= lang('username') ?> *</label>
<label for="provider-username">
<?= lang('username') ?>
<span class="text-danger">*</span>
</label>
<input id="provider-username" class="form-control required" maxlength="256">
</div>
<div class="form-group">
<label for="provider-password"><?= lang('password') ?> *</label>
<label for="provider-password">
<?= lang('password') ?>
<span class="text-danger">*</span>
</label>
<input type="password" id="provider-password" class="form-control required"
maxlength="512" autocomplete="new-password">
</div>
<div class="form-group">
<label for="provider-password-confirm"><?= lang('retype_password') ?> *</label>
<label for="provider-password-confirm">
<?= lang('retype_password') ?>
<span class="text-danger">*</span>
</label>
<input type="password" id="provider-password-confirm"
class="form-control required" maxlength="512"
autocomplete="new-password">
</div>
<div class="form-group">
<label for="provider-calendar-view"><?= lang('calendar') ?> *</label>
<label for="provider-calendar-view">
<?= lang('calendar') ?>
<span class="text-danger">*</span>
</label>
<select id="provider-calendar-view" class="form-control required">
<option value="default">Default</option>
<option value="table">Table</option>
@ -217,7 +256,10 @@
</div>
<div class="form-group">
<label for="provider-timezone"><?= lang('timezone') ?></label>
<label for="provider-timezone">
<?= lang('timezone') ?>
</label>
<?= render_timezone_dropdown('id="provider-timezone" class="form-control"') ?>
</div>
@ -259,9 +301,9 @@
<h3><?= lang('breaks') ?></h3>
<span class="help-block">
<?= lang('add_breaks_during_each_day') ?>
</span>
<p>
<?= lang('add_breaks_during_each_day') ?>
</p>
<div>
<button type="button" class="add-break btn btn-primary">
@ -288,9 +330,9 @@
<h3><?= lang('custom_availability_periods') ?></h3>
<span class="help-block">
<?= lang('add_custom_availability_periods_during_each_day') ?>
</span>
<p>
<?= lang('add_custom_availability_periods_during_each_day') ?>
</p>
<div>
<button type="button" class="add-custom-availability-periods btn btn-primary mr-2">
@ -383,75 +425,114 @@
<div class="row">
<div class="secretary-details col-12 col-md-6">
<div class="form-group">
<label for="secretary-first-name"><?= lang('first_name') ?> *</label>
<label for="secretary-first-name">
<?= lang('first_name') ?>
<span class="text-danger">*</span>
</label>
<input id="secretary-first-name" class="form-control required" maxlength="256">
</div>
<div class="form-group">
<label for="secretary-last-name"><?= lang('last_name') ?> *</label>
<label for="secretary-last-name">
<?= lang('last_name') ?>
<span class="text-danger">*</span>
</label>
<input id="secretary-last-name" class="form-control required" maxlength="512">
</div>
<div class="form-group">
<label for="secretary-email"><?= lang('email') ?> *</label>
<label for="secretary-email">
<?= lang('email') ?>
<span class="text-danger">*</span>
</label>
<input id="secretary-email" class="form-control required" maxlength="512">
</div>
<div class="form-group">
<label for="secretary-phone-number"><?= lang('phone_number') ?> *</label>
<label for="secretary-phone-number">
<?= lang('phone_number') ?>
<span class="text-danger">*</span>
</label>
<input id="secretary-phone-number" class="form-control required" maxlength="128">
</div>
<div class="form-group">
<label for="secretary-mobile-number"><?= lang('mobile_number') ?></label>
<label for="secretary-mobile-number">
<?= lang('mobile_number') ?>
</label>
<input id="secretary-mobile-number" class="form-control" maxlength="128">
</div>
<div class="form-group">
<label for="secretary-address"><?= lang('address') ?></label>
<label for="secretary-address">
<?= lang('address') ?>
</label>
<input id="secretary-address" class="form-control" maxlength="256">
</div>
<div class="form-group">
<label for="secretary-city"><?= lang('city') ?></label>
<label for="secretary-city">
<?= lang('city') ?>
</label>
<input id="secretary-city" class="form-control" maxlength="256">
</div>
<div class="form-group">
<label for="secretary-state"><?= lang('state') ?></label>
<label for="secretary-state">
<?= lang('state') ?>
</label>
<input id="secretary-state" class="form-control" maxlength="128">
</div>
<div class="form-group">
<label for="secretary-zip-code"><?= lang('zip_code') ?></label>
<label for="secretary-zip-code">
<?= lang('zip_code') ?>
</label>
<input id="secretary-zip-code" class="form-control" maxlength="64">
</div>
<div class="form-group">
<label for="secretary-notes"><?= lang('notes') ?></label>
<label for="secretary-notes">
<?= lang('notes') ?>
</label>
<textarea id="secretary-notes" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="secretary-settings col-12 col-md-6">
<div class="form-group">
<label for="secretary-username"><?= lang('username') ?> *</label>
<label for="secretary-username">
<?= lang('username') ?>
<span class="text-danger">*</span>
</label>
<input id="secretary-username" class="form-control required" maxlength="256">
</div>
<div class="form-group">
<label for="secretary-password"><?= lang('password') ?> *</label>
<label for="secretary-password">
<?= lang('password') ?>
<span class="text-danger">*</span>
</label>
<input type="password" id="secretary-password" class="form-control required"
maxlength="512" autocomplete="new-password">
</div>
<div class="form-group">
<label for="secretary-password-confirm"><?= lang('retype_password') ?> *</label>
<label for="secretary-password-confirm">
<?= lang('retype_password') ?>
<span class="text-danger">*</span>
</label>
<input type="password" id="secretary-password-confirm" class="form-control required"
maxlength="512" autocomplete="new-password">
</div>
<div class="form-group">
<label for="secretary-calendar-view"><?= lang('calendar') ?> *</label>
<label for="secretary-calendar-view">
<?= lang('calendar') ?>
<span class="text-danger">*</span>
</label>
<select id="secretary-calendar-view" class="form-control required">
<option value="default">Default</option>
<option value="table">Table</option>
@ -459,7 +540,10 @@
</div>
<div class="form-group">
<label for="secretary-timezone"><?= lang('timezone') ?></label>
<label for="secretary-timezone">
<?= lang('timezone') ?>
</label>
<?= render_timezone_dropdown('id="secretary-timezone" class="form-control"') ?>
</div>
@ -547,75 +631,114 @@
<div class="row">
<div class="admin-details col-12 col-md-6">
<div class="form-group">
<label for="first-name"><?= lang('first_name') ?> *</label>
<label for="first-name">
<?= lang('first_name') ?>
<span class="text-danger">*</span>
</label>
<input id="admin-first-name" class="form-control required" maxlength="256">
</div>
<div class="form-group">
<label for="admin-last-name"><?= lang('last_name') ?> *</label>
<label for="admin-last-name">
<?= lang('last_name') ?>
<span class="text-danger">*</span>
</label>
<input id="admin-last-name" class="form-control required" maxlength="512">
</div>
<div class="form-group">
<label for="admin-email"><?= lang('email') ?> *</label>
<label for="admin-email">
<?= lang('email') ?>
<span class="text-danger">*</span>
</label>
<input id="admin-email" class="form-control required" maxlength="512">
</div>
<div class="form-group">
<label for="admin-phone-number"><?= lang('phone_number') ?> *</label>
<label for="admin-phone-number">
<?= lang('phone_number') ?>
<span class="text-danger">*</span>
</label>
<input id="admin-phone-number" class="form-control required" maxlength="128">
</div>
<div class="form-group">
<label for="admin-mobile-number"><?= lang('mobile_number') ?></label>
<label for="admin-mobile-number">
<?= lang('mobile_number') ?>
</label>
<input id="admin-mobile-number" class="form-control" maxlength="128">
</div>
<div class="form-group">
<label for="admin-address"><?= lang('address') ?></label>
<label for="admin-address">
<?= lang('address') ?>
</label>
<input id="admin-address" class="form-control" maxlength="256">
</div>
<div class="form-group">
<label for="admin-city"><?= lang('city') ?></label>
<label for="admin-city">
<?= lang('city') ?>
</label>
<input id="admin-city" class="form-control" maxlength="256">
</div>
<div class="form-group">
<label for="admin-state"><?= lang('state') ?></label>
<label for="admin-state">
<?= lang('state') ?>
</label>
<input id="admin-state" class="form-control" maxlength="128">
</div>
<div class="form-group">
<label for="admin-zip-code"><?= lang('zip_code') ?></label>
<label for="admin-zip-code">
<?= lang('zip_code') ?>
</label>
<input id="admin-zip-code" class="form-control" maxlength="64">
</div>
<div class="form-group">
<label for="admin-notes"><?= lang('notes') ?></label>
<label for="admin-notes">
<?= lang('notes') ?>
</label>
<textarea id="admin-notes" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="admin-settings col-12 col-md-6">
<div class="form-group">
<label for="admin-username"><?= lang('username') ?> *</label>
<label for="admin-username">
<?= lang('username') ?>
<span class="text-danger">*</span>
</label>
<input id="admin-username" class="form-control required" maxlength="256">
</div>
<div class="form-group">
<label for="admin-password"><?= lang('password') ?> *</label>
<label for="admin-password">
<?= lang('password') ?>
<span class="text-danger">*</span>
</label>
<input type="password" id="admin-password" class="form-control required" maxlength="512"
autocomplete="new-password">
</div>
<div class="form-group">
<label for="admin-password-confirm"><?= lang('retype_password') ?> *</label>
<label for="admin-password-confirm">
<?= lang('retype_password') ?>
<span class="text-danger">*</span>
</label>
<input type="password" id="admin-password-confirm" class="form-control required"
maxlength="512" autocomplete="new-password">
</div>
<div class="form-group">
<label for="admin-calendar-view"><?= lang('calendar') ?> *</label>
<label for="admin-calendar-view">
<?= lang('calendar') ?>
<span class="text-danger">*</span>
</label>
<select id="admin-calendar-view" class="form-control required">
<option value="default">Default</option>
<option value="table">Table</option>
@ -623,7 +746,9 @@
</div>
<div class="form-group">
<label for="admin-timezone"><?= lang('timezone') ?></label>
<label for="admin-timezone">
<?= lang('timezone') ?>
</label>
<?= render_timezone_dropdown('id="admin-timezone" class="form-control"') ?>
</div>