const TEXTAREA = 'textarea';
+ public function __construct() {
+ $this->register_scripts();
+ $this->register_fields();
+ }
+
+ public function register_scripts() {
+
+ }
+
+ public function register_fields() {
+
+ }
+
/**
* Output field HTML
* @param $name
$settings = array_merge($default_settings, $settings);
$res = '';
-
- if ($settings['show_title']) {
- $res .= '<div class="form-field-title '. $settings['title_class'] .'">'. $field['title'] .'</div>';
- }
+ $res .= $this->title($name, $settings);
// Special input styling for checkbox / radio fields
if (in_array($field['type'], [self::BINARY, self::CHECKBOX, self::RADIO])) {
return '<div class="form-field '. $settings['class'] .'">'. $res .'</div>';
}
+ /**
+ * Generate field title
+ * @param $name
+ * @param $settings
+ * @return bool|string
+ */
+ public function title($name, $settings = []) {
+
+ if (!isset($settings['show_title']) || !$settings['show_title']) return '';
+
+ $title_class = $settings['title_class'] ?? '';
+
+ $field = $this->getField($name);
+ if (!$field) return false;
+
+ return '<div class="form-field-title '. $title_class .'">'. $field['title'] .'</div>';
+ }
+
/**
* Generate a radio or checkbox input
* @param $name
$res .= '<label title="'. $option .'">';
$res .= '<input type="'. $type .'" name="'. $input_name .'" value="'. $option .'">';
- if ($settings['show_labels']) {
+ if (isset($settings['show_labels']) && $settings['show_labels']) {
$res .= '<span class="form-label">'. $option .'</span>';
}
* @param $settings
* @return string
*/
- public function radio($name, $settings) {
+ public function radio($name, $settings = []) {
return $this->radio_or_checkbox($name, $settings, 'radio');
}
* @param $settings
* @return string
*/
- public function checkbox($name, $settings) {
+ public function checkbox($name, $settings = []) {
return $this->radio_or_checkbox($name, $settings, 'checkbox');
}
* @param $settings
* @return string
*/
- public function date($name, $settings) {
+ public function date($name, $settings = []) {
return '<input type="date" placeholder="'. __('JJ/MM/AAAA') .'" name="'. $name .'">';
}
* @param $settings
* @return string
*/
- public function binary($name, $settings) {
+ public function binary($name, $settings = []) {
$settings['options'] = [
__('Oui', 'ccv'),
* @param $settings
* @return string
*/
- public function textarea($name, $settings) {
+ public function textarea($name, $settings = []) {
return '<textarea name="'. $name .'"></textarea>';
}
* @param $settings
* @return string
*/
- public function text($name, $settings) {
+ public function text($name, $settings = []) {
return '<input type="text" name="'. $name .'" placeholder="'. $settings['placeholder'] .'">';
}
* @param $settings
* @return string
*/
- public function select($name, $settings) {
+ public function select($name, $settings = []) {
$options = isset($settings['options']) ? $settings['options'] : $this->fields[$name]['options'];
+ // Placeholder can be used to set first element if it is passed as an array
+ if (is_array($settings['placeholder'])) {
+ $options = $settings['placeholder'] + $options; // Prepend to options
+ }
+
$res = '<select name="'. $name .'">';
foreach ($options as $value => $label) {
$res .= '<option value="'. $value .'">'. $label .'</option>';
namespace Cube\Forms;
+use function Roots\asset;
class Consultation extends Base
{
- function __construct() {
+ public function register_scripts() {
+
+ parent::register_scripts();
+
+ wp_enqueue_script(
+ 'ccv-consultation',
+ asset('scripts/consultation.js'),
+ ['jquery'], // Dependencies
+ null, // Version
+ true // In footer?
+ );
+ }
+
+
+ function register_fields() {
+
+ parent::register_fields();
//== SYMPTOMS
$this->addField('main-problem', __('Problème principal', 'ccv'), self::RADIO,
$this->addField('surgeries', __('Indiquez ici vos précédentes chirurgies de la colonne et leurs dates (le cas échéant)', 'ccv'), self::TEXTAREA);
//=== IMAGERY
- $this->addField('imagery', __('Imagerie', 'ccv'), null); // This is a special case and will be output manually so only using this for the e-mail label
+ $this->addField('imagery-type', __('Imagerie', 'ccv'), null); // This is a special case and will be output manually so only using this for the e-mail label
+ $this->addField('imagery-online', __('Images en ligne', 'ccv'), self::TEXTAREA); // Again, a manually handled field
+ $this->addField('imagery-posted', __('Images envoyé par courrier', 'ccv'), self::CHECKBOX);
//=== PERSONAL INFORMATION
$this->addField('last-name', _x('Nom', 'Nom de famille', 'ccv'), self::TEXT);
$this->addField('message', __('Avez vous un message (ou une demande) spécifique à nous formuler ?', 'ccv'), self::TEXTAREA);
$this->addField('surgeon', __('Chirurgien spécifique'), self::SELECT,
[
- '' => __('Sélectionner'),
- // TODO: figure out where this list should come from and what action is needed when a specific surgeon is selected
+ 'Dr Guilhaume GENESTE',
+ 'Dr Grégory EDGARD-ROSA',
+ 'Dr Martin GRAU ORTIZ',
+ 'Dr Caroline HIRSH',
]);
}
}
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="172.776" height="278.551" viewBox="0 0 172.776 278.551">
+ <g id="Group_517" data-name="Group 517" transform="translate(-1122.012 79.635)">
+ <ellipse id="Ellipse_100" data-name="Ellipse 100" cx="22.227" cy="31.379" rx="22.227" ry="31.379" transform="translate(1185.356 -79.635)" fill="#dfdfdf"/>
+ <path id="Path_604" data-name="Path 604" d="M1234.75-66.631c1.336.541,32.795,13.612,45.533,45.617,11.085,27.88,14.167,43.822,14.3,44.489,1.347,7.139-4.031,13.89-12.027,15.113a16.8,16.8,0,0,1-2.494.189c-7.025,0-13.244-4.52-14.48-10.9-.029-.142-2.9-14.656-13.026-40.111a52.853,52.853,0,0,0-12.12-17.927v47L1252.907,123.3c.847,7.207-5.025,13.664-13.1,14.415a15.151,15.151,0,0,1-1.542.073c-7.437,0-13.826-5.013-14.615-11.759L1211.892,25.665s-.288-4.289-3.5-4.289-3.489,4.289-3.489,4.289l-11.755,100.369c-.789,6.745-7.178,11.759-14.615,11.759a15.357,15.357,0,0,1-1.548-.073c-8.078-.751-13.944-7.207-13.1-14.415l12.473-106.469v-47a52.851,52.851,0,0,0-12.126,17.927c-10.12,25.454-13,39.969-13.021,40.111-1.235,6.383-7.455,10.9-14.479,10.9a16.763,16.763,0,0,1-2.5-.189c-8-1.223-13.379-7.974-12.026-15.113.124-.667,3.213-16.609,14.3-44.489,12.737-32.006,44.2-45.077,45.533-45.617.783-.315,13.039-.478,25.535-.488C1220.624-67.124,1233.933-66.961,1234.75-66.631Z" transform="translate(0 61.124)" fill="#dfdfdf"/>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+ <g transform="translate(-192 -3247)">
+ <circle cx="60" cy="60" r="60" transform="translate(192 3247)" fill="#ff078b"/>
+ <g transform="translate(-1138.299 2283.28)">
+ <circle cx="5.34" cy="5.34" r="5.34" transform="translate(1382.8 1016.221)" stroke-width="2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+ <path d="M1417.089,1031.97v4.839h-18.525a2.418,2.418,0,0,0-2.418,2.418v12.529a2.419,2.419,0,0,1-2.418,2.419h0a2.419,2.419,0,0,1-2.419-2.419v-19.248a2.418,2.418,0,0,1,2.419-2.418h9.239l1.985,1.88Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1405.4,1036.809h12.94a2.419,2.419,0,0,1,2.418,2.418v10.111a4.837,4.837,0,0,1-4.836,4.837h-16.144" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1415.267,1027.824a27.841,27.841,0,1,0-28.1,21.561" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1388.139,999.8a21.757,21.757,0,0,0-21.757,21.757" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ </g>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+ <g transform="translate(-192 -3643)">
+ <circle cx="60" cy="60" r="60" transform="translate(192 3643)" fill="#ff078b"/>
+ <g transform="translate(-1219.679 2678.039)">
+ <path d="M1491.633,1053.407v1.727a4.826,4.826,0,0,1-4.826,4.826h-29.394a4.826,4.826,0,0,1-4.826-4.826v-1.727" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1491.633,996.567v-1.78a4.826,4.826,0,0,0-4.826-4.826h-29.394a4.825,4.825,0,0,0-4.826,4.826v1.78" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1456.964,1050.414h-6.285v-6.285" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1487.265,1050.414h6.285v-6.285" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1456.964,999.506h-6.285v6.285" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1487.265,999.506h6.285v6.285" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <line x2="5.668" transform="translate(1469.277 1055.187)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <g >
+ <rect width="32.686" height="40.773" transform="translate(1455.773 1004.596)" stroke-width="2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+ <g >
+ <path d="M1468.02,1018.211a2.554,2.554,0,0,1-2.225-1.8,4.174,4.174,0,0,1,.44-2.034c.465-1.186,1.4-3.193,2.461-3.311.033,0,.114-.008.147-.008a1.381,1.381,0,0,1,1.006.463,1.407,1.407,0,0,1,.119-.187,1.244,1.244,0,0,1,.862-.5l6.495-.712c.032,0,.1-.007.129-.007a1.317,1.317,0,0,1,1.273,1.245,1.213,1.213,0,0,1,0,.159,9.973,9.973,0,0,0,.331,3.548,1.06,1.06,0,0,1,.027.157,1.361,1.361,0,0,1-1.143,1.515l-6.5.712c-.032,0-.1.007-.129.007a1.3,1.3,0,0,1-1.234-1.019,4.135,4.135,0,0,1-1.538,1.666A1.263,1.263,0,0,1,1468.02,1018.211Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1478.132,1004.6c.145.747-.241,1.136-.931,1.293l-6.388,1.456a1.65,1.65,0,0,1-.264.03,1.292,1.292,0,0,1-1.191-.879,4.245,4.245,0,0,1-1.365,1.834,1.311,1.311,0,0,1-.686.182,2.518,2.518,0,0,1-2.219-1.548,5.768,5.768,0,0,1,.288-2.368" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1468.331,1028.111a2.558,2.558,0,0,1-2.2-2.01,4.162,4.162,0,0,1,.595-1.982c.555-1.14,1.643-3.055,2.708-3.079h0a1.412,1.412,0,0,1,1.114.559,1.257,1.257,0,0,1,1.03-.6l6.528-.123a1.343,1.343,0,0,1,1.3,1.359,1.218,1.218,0,0,1-.009.161,15.682,15.682,0,0,0-.132,1.785,16.2,16.2,0,0,0,.188,1.78,1.033,1.033,0,0,1,.014.157,1.435,1.435,0,0,1-.359.986,1.229,1.229,0,0,1-.9.423l-6.528.122a1.326,1.326,0,0,1-1.28-1.131,4.049,4.049,0,0,1-1.661,1.521A1.225,1.225,0,0,1,1468.331,1028.111Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1471.1,1037.757a1.231,1.231,0,0,1-.878-.469,1.43,1.43,0,0,1-.311-.772,3.992,3.992,0,0,1-1.771,1.368,1.691,1.691,0,0,1-.3.037,2.382,2.382,0,0,1-1.571-.875,1.928,1.928,0,0,1-.585-1.327,4.1,4.1,0,0,1,.744-1.924c.5-.851,1.78-2.828,2.86-2.828a1.456,1.456,0,0,1,1.141.658,1.247,1.247,0,0,1,.989-.508c.02,0,6.6.465,6.6.465a1.351,1.351,0,0,1,1.193,1.469,1.221,1.221,0,0,1-.022.16,10.011,10.011,0,0,0-.215,3.558,1.021,1.021,0,0,1,0,.157,1.329,1.329,0,0,1-1.277,1.295C1477.683,1038.221,1471.1,1037.757,1471.1,1037.757Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1464.763,1044.772a3.994,3.994,0,0,1,.956-1.81c.437-.573,1.945-2.436,3.013-2.436a1.372,1.372,0,0,1,.22.022,1.442,1.442,0,0,1,.986.792,1.227,1.227,0,0,1,.882-.381,1.587,1.587,0,0,1,.239.024l6.413,1.325a1.269,1.269,0,0,1,.818.582,1.472,1.472,0,0,1,.2,1.037,1.15,1.15,0,0,1-.04.153,8.5,8.5,0,0,0-.372,1.289" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+ <g transform="translate(-991 -3643)">
+ <circle cx="60" cy="60" r="60" transform="translate(991 3643)" fill="#ff078b"/>
+ <g transform="translate(-565.662 2677.28)">
+ <path d="M1636.482,1009.761l8.353,6.644a6.046,6.046,0,0,1,2.282,4.732v28.2a4.837,4.837,0,0,1-4.837,4.837H1591.5a4.837,4.837,0,0,1-4.837-4.837v-28.2a6.046,6.046,0,0,1,2.287-4.736l8.358-6.633" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1641.169,1023.612l-13.926,12.582a13.576,13.576,0,0,1-4.223,2.6,13.391,13.391,0,0,1-4.862.906h-2.517a13.52,13.52,0,0,1-9.085-3.508l-13.925-12.582" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <line x1="13.169" y2="11.909" transform="translate(1593.387 1036.194)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <line x1="13.182" y1="11.909" transform="translate(1627.243 1036.194)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1597.307,1027.847V993.72h39.17v34.127" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <g>
+ <path d="M1612.79,1006.77a2.538,2.538,0,0,1-2.228-1.731,3.874,3.874,0,0,1,.441-1.949c.465-1.137,1.4-3.06,2.464-3.173.033,0,.115-.008.148-.008a1.41,1.41,0,0,1,1.008.443,1.294,1.294,0,0,1,.119-.179,1.259,1.259,0,0,1,.862-.48l6.505-.682c.032,0,.1-.007.129-.007a1.293,1.293,0,0,1,1.274,1.193.97.97,0,0,1,0,.153,9.151,9.151,0,0,0,.332,3.4.98.98,0,0,1,.026.151,1.315,1.315,0,0,1-1.145,1.452l-6.5.682c-.032,0-.1.007-.129.007a1.284,1.284,0,0,1-1.236-.976,4.06,4.06,0,0,1-1.54,1.6A1.332,1.332,0,0,1,1612.79,1006.77Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1622.917,993.72c.145.716-.242,1.089-.933,1.239l-6.4,1.4a1.657,1.657,0,0,1-.264.029,1.29,1.29,0,0,1-1.193-.842,4.1,4.1,0,0,1-1.366,1.758,1.359,1.359,0,0,1-.688.174,2.52,2.52,0,0,1-2.221-1.484,5.276,5.276,0,0,1,.288-2.269" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1613.1,1016.258a2.522,2.522,0,0,1-2.205-1.925,3.854,3.854,0,0,1,.6-1.9c.555-1.093,1.646-2.929,2.711-2.951h0a1.436,1.436,0,0,1,1.116.535,1.27,1.27,0,0,1,1.031-.574l6.538-.117a1.315,1.315,0,0,1,1.3,1.3,1.33,1.33,0,0,1-.009.154,14.348,14.348,0,0,0-.133,1.71,14.865,14.865,0,0,0,.189,1.707,1.074,1.074,0,0,1,.014.151,1.342,1.342,0,0,1-.36.945,1.256,1.256,0,0,1-.9.4l-6.537.117a1.31,1.31,0,0,1-1.282-1.084,4.01,4.01,0,0,1-1.663,1.458A1.284,1.284,0,0,1,1613.1,1016.258Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1615.881,1025.505a1.258,1.258,0,0,1-.88-.45,1.331,1.331,0,0,1-.312-.74,3.972,3.972,0,0,1-1.773,1.311,1.69,1.69,0,0,1-.3.036,2.409,2.409,0,0,1-1.573-.839,1.813,1.813,0,0,1-.586-1.272,3.833,3.833,0,0,1,.745-1.844c.5-.816,1.783-2.711,2.865-2.711a1.471,1.471,0,0,1,1.142.631,1.266,1.266,0,0,1,.99-.486c.021,0,6.609.444,6.609.444a1.312,1.312,0,0,1,1.194,1.409.981.981,0,0,1-.021.153,14.726,14.726,0,0,0-.268,1.693,14.564,14.564,0,0,0,.052,1.717.947.947,0,0,1,0,.151,1.3,1.3,0,0,1-1.278,1.242C1622.467,1025.95,1615.881,1025.505,1615.881,1025.505Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1609.529,1032.229a3.777,3.777,0,0,1,.958-1.736c.438-.548,1.947-2.335,3.017-2.335a1.357,1.357,0,0,1,.22.022,1.428,1.428,0,0,1,.987.759,1.258,1.258,0,0,1,.884-.366,1.587,1.587,0,0,1,.239.024l6.422,1.27a1.267,1.267,0,0,1,.819.558,1.356,1.356,0,0,1,.2.993,1.246,1.246,0,0,1-.039.148,7.675,7.675,0,0,0-.373,1.235" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ </g>
+ </g>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+ <g transform="translate(-991 -3249)">
+ <circle cx="60" cy="60" r="60" transform="translate(991 3249)" fill="#ff078b"/>
+ <g transform="translate(-485.662 2293.508)">
+ <rect width="70" height="50.909" transform="translate(1501.662 998.493)" fill="none"/>
+ <g>
+ <path d="M1543.854,1028.069l5.78,19.6a2.418,2.418,0,0,0,4.586.159l2.8-7.519,7.89-1.449a2.419,2.419,0,0,0,.64-4.544l-18.3-9.095A2.418,2.418,0,0,0,1543.854,1028.069Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1538.1,1029.918h-31.6a4.836,4.836,0,0,1-4.837-4.836V1009.3a4.836,4.836,0,0,1,4.837-4.836h60.327a4.836,4.836,0,0,1,4.836,4.836v15.782a4.836,4.836,0,0,1-4.836,4.836" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <g>
+ <path d="M1511.208,1013.023l3.411,8.335,3.411-8.335,3.411,8.335,3.411-8.335" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1528.46,1013.023l3.411,8.335,3.411-8.335,3.411,8.335,3.411-8.335" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path d="M1545.713,1013.023l3.411,8.335,3.411-8.335,3.411,8.335,3.411-8.335" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <line transform="translate(1562.117 1021.358)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
--- /dev/null
+//=== Consultation Form
+(function($) {
+
+ // Check the parent radio button when clicking on any element with this data attribute
+ $(document).on('click', '[data-update-imagery-type]', function () {
+ let radio = $(this).closest('.imagery-type-wrapper').find('input[name="imagery-type"]');
+ radio.prop('checked', true);
+ clearPostCheckbox(); // We can clear it here because this event is only triggered by the other options
+ });
+
+ $(document).on('click', 'input[name="imagery-type"]', function() {
+
+ if ('imagery_post' !== $(this).attr('id')) {
+ clearPostCheckbox();
+ }
+ });
+
+ // Tie the checkbox to the radio input for the "by post" option so they toggle together
+ $(document).on('click', '#images_sent_by_post, #imagery_post', function() {
+ let checked = $(this).prop('checked');
+
+ $('#images_sent_by_post, #imagery_post').prop('checked', checked);
+ });
+
+ function clearPostCheckbox() {
+ $('#images_sent_by_post').prop('checked', false);
+ }
+
+})(jQuery);
// Extracted components or custom styles that can't be done with utilities
@import 'components/*'
@import 'widgets/*'
-//@import 'pages/*'
+@import 'pages/*'
// Allow spacing classes to override others defined here
@import 'common/spacing'
// Ref: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
.spaced > * + *
margin-top: 1.5em
+.spaced-lg > * + *
+ margin-top: 2em
.spaced-horizontal > * + *
margin-left: 0.75em
input, textarea, select
- @apply text-base font-body
+ @apply text-base font-body font-light
outline: none
background-color: transparent
input[type="number"]
-moz-appearance: textfield
-//select
-// background: transparent url(../images/arrow-down.svg) center right no-repeat
-// background-size: 1em auto
+select
+ background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 15 9' xml:space='preserve'%3E%3Cg fill='none' stroke='%23ff078b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M13.9 1.3L7.5 7.7'/%3E%3Cpath d='M1.1 1.3l6.4 6.4'/%3E%3C/g%3E%3C/svg%3E") center right no-repeat
+ background-size: 0.8em auto
textarea
border: 1px solid theme('colors.dark')
> *
flex-basis: 47%
- +below(500px)
+ +below(1024px)
flex-basis: 100%
- margin-bottom: 1.5em
+ margin-bottom: 2em
.form-cols-4
> *
flex-basis: 23%
- +below(1100px)
+ +below(1400px)
flex-basis: 47%
- margin-bottom: 1.5em
- +below(500px)
+ margin-bottom: 2em
+ +below(600px)
flex-basis: 100%
--- /dev/null
+.imagery-icon
+ flex: 0 0 auto
+
+// Hidden radio input that records which option is selected
+input[name="imagery-type"]
+ position: absolute
+ visibility: hidden
+
+ // Change icon bg colour when selected
+ &:checked + .imagery-icon circle
+ fill: theme('colors.purple')
<div class="bg-light py-2v pl-4v pr-3v text-block-body">
<h2>{{ __('1. Vos symptômes') }}</h2>
- <div class="flex md:flex-wrap">
+ <div class="form-cols-2 mt-1v">
- <ul class="spaced w-1/2 pr-1v md:w-full md:pr-0 md:mb-6">
+ <ul class="spaced-lg">
<li>{!! $form->field('main-problem') !!}</li>
<li>{!! $form->field('date-first-symptoms', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}</li>
<li>{!! $form->field('date-pain-since', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}</li>
- <li>{!! $form->field('pain-arms-legs') !!}</li>
- <li>{!! $form->field('pain-arms-legs-detail') !!}</li>
+ <li>
+ {!! $form->field('pain-arms-legs') !!}
+
+ <div class="form-field mt-6">
+ {!! $form->title('pain-arms-legs-detail', ['show_title' => true]) !!}
+ <div class="relative custom-checkbox">
+ <img src="@asset('images/consultation-body-outline.svg')" class="consultation-body-outline-image">
+ {!! $form->checkbox('pain-arms-legs-detail', ['show_labels' => true]) !!}
+ </div>
+ </div>
+
+ </li>
</ul>
- <ul class="spaced w-1/2 pl-1v md:w-full md:pl-0">
+ <ul class="spaced-lg">
<li>{!! $form->field('main-pain') !!}</li>
<li>{!! $form->field('tingling-numbness') !!}</li>
<li>{!! $form->field('tingling-numbness-date', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}</li>
<div class="bg-white py-2v pl-4v pr-3v">
<h2>{{ __('2. Vos traitements réalisés') }}</h2>
- <div class="spaced">
- {!! $form->field('medication') !!}
+ <div class="spaced-lg mt-1v">
+ {!! $form->field('medication', ['title_class' => 'font-light']) !!}
<div class="form-cols-4">
{!! $form->field('kine-osteo') !!}
{!! $form->field('infiltration') !!}
</div>
- {!! $form->field('surgeries') !!}
+ {!! $form->field('surgeries', ['title_class' => 'font-light']) !!}
</div>
</div>
{{-- IMAGERY --}}
<div class="bg-light py-2v pl-4v pr-3v">
<h2>{{ __('3. Votre imagerie') }}</h2>
+
+ <p class="text-lg my-1v">
+ {{ __("IRM, Scanner, Radiographies, faites-nous parvenir vos imageries les plus récentes en utilisant l'une des méthodes suivantes :", 'ccv') }}
+ </p>
+
+ <div class="form-cols-2">
+
+ {{-- IMAGES FROM CD --}}
+ <div class="imagery-type-wrapper flex mb-8">
+ <input type="radio" id="imagery_cd" name="imagery-type" value="{{ __('') }}">
+ <label for="imagery_cd" class="imagery-icon">@svg('imagery-cd')</label>
+ <div class="ml-4">
+ <div class="text-lg font-normal leading-tight mb-2">
+ {{ __('Vos images sont sur un CD ?') }}
+ </div>
+ <p>
+ {{ __("Envoyez-nous l'ensemble des fichiers contenus sur votre CD en cliquant sur le lien ci-dessous :", "ccv") }}
+ </p>
+
+ <a href="javascript://" class="btn" data-update-imagery-type>{{ __('Envoyer vos fichiers') }}</a>
+ </div>
+ </div>
+
+ {{-- IMAGES ONLINE --}}
+ <div class="imagery-type-wrapper flex mb-8">
+ <input type="radio" id="imagery_web" name="imagery-type" value="{{ __('Images en ligne') }}">
+ <label for="imagery_web" class="imagery-icon">@svg('imagery-web')</label>
+ <div class="ml-4">
+ <div class="text-lg font-normal leading-tight mb-2">
+ {{ __('Vous avez reçu un lien pour consulter vos images en ligne ?') }}
+ </div>
+ <p class="mb-0! pb-2">
+ {{ __('Collez votre lien ci-dessous ainsi que vos identifiant et mot de passe :') }}
+ </p>
+ <textarea name="imagery-online" class="min-h-0 h-20" data-update-imagery-type></textarea>
+ </div>
+ </div>
+
+ {{-- IMAGES FROM PHONE --}}
+ <div class="imagery-type-wrapper flex mb-8">
+ <input type="radio" id="imagery_phone" name="imagery-type" value="{{ __('Images téléversées depuis portable') }}">
+ <label for="imagery_phone" class="imagery-icon">@svg('imagery-phone')</label>
+ <div class="ml-4">
+ <div class="text-lg font-normal leading-tight mb-2">
+ {{ __('Vous remplissez cette demande depuis votre téléphone ?') }}
+ </div>
+ <p>
+ {{ __('Prenez vos images en photo et envoyez-les directement depuis votre téléphone.') }}
+ </p>
+ <a href="javascript://" class="btn" data-update-imagery-type>{{ __('Parcourir') }}</a>
+ </div>
+ </div>
+
+ {{-- IMAGES SENT BY POST --}}
+ <div class="imagery-type-wrapper flex mb-8">
+ <input type="radio" id="imagery_post" name="imagery-type" value="{{ __('Images envoyé par courrier') }}">
+ <label for="imagery_post" class="imagery-icon">@svg('imagery-post')</label>
+ <div class="ml-4">
+ <div class="text-lg font-normal leading-tight mb-2">
+ {{ __('Vous pouvez aussi nous envoyer vos images par courrier :') }}
+ </div>
+ <p>
+ CCV MONTPELLIER<br>
+ AVIS MEDICAL<br>
+ Clinique du parc - 50 Rue Emile Combes,<br>
+ 34170 Castelnau-le-Lez<br>
+ </p>
+
+ <div class="custom-checkbox">
+ <label>
+ <input type="checkbox" id="images_sent_by_post">
+ <span class="form-label">{{ __('Cochez cette case si vous envoyez vos images par courrier', 'ccv') }}</span>
+ </label>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <p class="text-xs italic">
+ {{ __("Aucune demande d’avis ne pourra être étudiée sans imagerie médicale associée.", 'ccv') }}
+ </p>
+
</div>
{{-- CONTACT DETAILS --}}
<div class="bg-white py-2v pl-4v pr-3v">
<h2>{{ __('4. Vos informations') }}</h2>
- <div class="form-cols-2">
+ <div class="form-cols-2 mt-1v">
- <div class="spaced">
+ <div class="spaced-lg">
{!! $form->field('last-name', ['show_title' => false]) !!}
{!! $form->field('first-name', ['show_title' => false]) !!}
{!! $form->field('profession', ['show_title' => false]) !!}
{!! $form->field('email', ['show_title' => false]) !!}
</div>
- <div class="spaced">
- {!! $form->field('sex', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}
+ <div class="spaced-lg">
+ {!! $form->field('sex', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'font-light mb-0']) !!}
{!! $form->field('age', [
'class' => 'flex items-center spaced-horizontal',
- 'title_class' => 'mb-0',
+ 'title_class' => 'font-light mb-0',
'input_class' => 'flex items-center w-16',
'placeholder' => '',
'field_after' => __('ans')
]) !!}
- {!! $form->field('message') !!}
+ {!! $form->field('message', ['title_class' => 'font-light']) !!}
- <div class="mt-6">
- <div class="custom-checkbox">
+ <div class="mt-4">
+ <div class="custom-checkbox mb-1">
<label>
<input type="checkbox" name="send-to-team" value="{{ __('Oui') }}" checked class="ml-2">
<span class="form-label-reversed">{{ __("J'envoie ma demande à l'équipe du CCV", 'ccv') }}</span>
</label>
</div>
{{ __("ou je souhaite l'envoyer à un chirurgien spécifique :", 'ccv') }}
- {!! $form->field('surgeon', ['show_title' => false]) !!}
+ {!! $form->field('surgeon', [
+ 'class' => 'mt-4',
+ 'show_title' => false,
+ 'placeholder' => [
+ '' => __('Sélectionner') // First select option
+ ]
+ ]) !!}
</div>
</div>
// JavaScript
mix.js(src`scripts/app.js`, 'scripts')
+ .js(src`scripts/consultation.js`, 'scripts')
.js(src`scripts/header-slideshow.js`, 'scripts')
.js(src`scripts/link-carousel.js`, 'scripts')
.js(src`scripts/testimonial-carousel.js`, 'scripts')
projects / ccv-wordpress.git / commitdiff
