Skip to content

Commit 0d7ac8c

Browse files
thisismeonmounteverestthisismeonmounteverest
committed
Fix display glitches with signup finalize form.
1 parent 2d00ece commit 0d7ac8c

File tree

4 files changed

+61
-111
lines changed

4 files changed

+61
-111
lines changed

‎assets/scss/bewelcome.scss

+54-105
Original file line numberDiff line numberDiff line change
@@ -314,80 +314,73 @@ figure > figcaption {
314314
}
315315
}
316316

317-
.rangeslider,
318-
.rangeslider__fill {
317+
.rangeSlider, .rangeSlider__fill {
319318
display: block;
320-
-moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
321-
-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
322-
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
323-
-moz-border-radius: 10px;
324-
-webkit-border-radius: 10px;
319+
box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.7);
325320
border-radius: 10px;
326321
}
327322

328-
.rangeslider {
329-
background: #e6e6e6;
323+
.rangeSlider {
330324
position: relative;
325+
background: #f7f7f7;
331326
}
332327

333-
.rangeslider--horizontal {
328+
.rangeSlider__horizontal {
334329
height: 20px;
335330
width: 100%;
331+
margin-top: 16px;
332+
margin-bottom: 16px;
336333
}
337334

338-
.rangeslider--vertical {
339-
width: 20px;
340-
min-height: 150px;
341-
max-height: 100%;
335+
.rangeSlider__vertical {
342336
height: 100%;
337+
width: 20px;
343338
}
344339

345-
.rangeslider--disabled {
340+
.rangeSlider--disabled {
346341
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
347342
opacity: 0.4;
348343
}
349344

350-
.rangeslider__fill {
351-
background: $brand-primary;
352-
background: -webkit-linear-gradient(to right, #fff , $brand-primary);
353-
background: -o-linear-gradient(to right, #fff , $brand-primary);
354-
background: -moz-linear-gradient(to right, #fff , $brand-primary);
355-
background: linear-gradient(to right, #fff , $brand-primary);
356-
345+
.rangeSlider__fill {
346+
background: #f37000;
357347
position: absolute;
358348
}
359349

360-
.rangeslider--horizontal .rangeslider__fill {
361-
top: 0;
350+
.rangeSlider__fill__horizontal {
362351
height: 100%;
352+
top: 0;
353+
left: 0;
363354
}
364-
.rangeslider--vertical .rangeslider__fill {
365-
bottom: 0;
355+
356+
.rangeSlider__fill__vertical {
366357
width: 100%;
358+
bottom: 0;
359+
left: 0;
367360
}
368361

369-
.rangeslider__handle {
370-
background: white;
362+
.rangeSlider__handle {
371363
border: 1px solid #ccc;
372364
cursor: pointer;
373365
display: inline-block;
374366
width: 40px;
375367
height: 40px;
376368
position: absolute;
377-
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
378-
background-size: 100%;
379-
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
380-
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
381-
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
382-
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
383-
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
384-
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
369+
background: white linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
385370
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
386-
-moz-border-radius: 50%;
387-
-webkit-border-radius: 50%;
388371
border-radius: 50%;
389372
}
390-
.rangeslider__handle:after {
373+
374+
.rangeSlider__handle__horizontal {
375+
top: -10px;
376+
}
377+
378+
.rangeSlider__handle__vertical {
379+
left: -10px;
380+
bottom: 0;
381+
}
382+
383+
.rangeSlider__handle:after {
391384
content: "";
392385
display: block;
393386
width: 18px;
@@ -398,76 +391,24 @@ figure > figcaption {
398391
right: 0;
399392
bottom: 0;
400393
left: 0;
401-
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
402-
background-size: 100%;
403-
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)));
404-
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
405-
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
406394
background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
407-
-moz-border-radius: 50%;
408-
-webkit-border-radius: 50%;
409395
border-radius: 50%;
410396
}
411-
.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
412-
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
413-
background-size: 100%;
414-
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
415-
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
416-
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
397+
398+
.rangeSlider__handle:active {
417399
background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
418400
}
419-
.rangeslider--horizontal .rangeslider__handle {
420-
top: -10px;
421-
touch-action: pan-y;
422-
-ms-touch-action: pan-y;
423-
}
424-
.rangeslider--vertical .rangeslider__handle {
425-
left: -10px;
426-
touch-action: pan-x;
427-
-ms-touch-action: pan-x;
428-
}
429401

430-
input[type="range"]:focus + .rangeslider .rangeslider__handle {
431-
-moz-box-shadow: 0 0 8px rgba(243, 112, 0, 0.7);
432-
-webkit-box-shadow: 0 0 8px rgba(243, 112, 0, 0.7);
433-
box-shadow: 0 0 8px rgba(243, 112, 0, 0.7);
402+
input[type="range"]:focus + .rangeSlider .rangeSlider__handle {
403+
box-shadow: 0 0 8px rgba(142, 68, 173, 0.9);
434404
}
435405

436-
.rangeslider__value-bubble {
437-
border: 1px solid #ccc;
438-
display: block;
439-
padding: 5px;
406+
.rangeSlider__buffer {
440407
position: absolute;
441-
bottom: 100%;
442-
margin-bottom: 25px;
443-
width: 100px;
444-
margin-left: -50px;
445-
text-align: center;
446-
@include border-radius(5px);
447-
448-
&:before,
449-
&:after {
450-
border-width: 11px;
451-
border-style: solid;
452-
border-color: transparent;
453-
content: "";
454-
display: block;
455-
margin: auto;
456-
width: 10px;
457-
position: absolute;
458-
left: 0;
459-
right: 0;
460-
}
461-
&:before {
462-
border-top-color: #ccc;
463-
border-bottom-width: 0;
464-
bottom: -11px;
465-
}
466-
&:after {
467-
border-top-color: #fff;
468-
border-bottom-width: 0;
469-
bottom: -10px;
470-
}
408+
top: 3px;
409+
height: 14px;
410+
background: #2c3e50;
411+
border-radius: 10px;
471412
}
472413

473414
#mockup {
@@ -607,18 +548,17 @@ $avatar-sizes: 30, 50, 75, 100, 150, 200, 500;
607548

608549
.list {
609550
position:absolute;
610-
left:0px;
611-
top:0px;
551+
left:0;
552+
top:0;
612553
min-width:3500px;
613-
margin-top:0px;
554+
margin-top:0;
614555
}
615556

616557
.list li{
617558
display:table-cell;
618559
position:relative;
619560
text-align:center;
620561
cursor:grab;
621-
cursor:-webkit-grab;
622562
color:#efefef;
623563
vertical-align:middle;
624564
}
@@ -628,7 +568,7 @@ $avatar-sizes: 30, 50, 75, 100, 150, 200, 500;
628568
cursor:pointer;
629569
display:none;
630570
padding:5px;
631-
white-space:no-wrap;
571+
white-space:nowrap;
632572
vertical-align:middle;
633573
background-color:transparent;
634574
}
@@ -638,3 +578,12 @@ $avatar-sizes: 30, 50, 75, 100, 150, 200, 500;
638578
.o-form-group, .o-form-group-sm {
639579
margin-bottom: 8px;
640580
}
581+
582+
.vanilla-calendar {
583+
z-index: 1000;
584+
}
585+
586+
[data-calendar-theme="light"] .vanilla-calendar-day__btn_today {
587+
color: white;
588+
background-color: #ffb474;
589+
}

‎assets/tailwindcss/layouts/layouts.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@import '_layouts.general.css';
22
@import '_layouts.search.css';
3+
@import '_layouts.calendar.css';

‎src/Form/SignupFormFinalizeType.php

+1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
8787
'attr' => [
8888
'class' => 'js-location-picker',
8989
],
90+
'label' => 'profile.set.location',
9091
'error_bubbling' => true,
9192
'help' => 'help.location',
9293
])

‎templates/signup/finalize.html.twig

+5-6
Original file line numberDiff line numberDiff line change
@@ -111,12 +111,11 @@
111111
<div id="hosting_interest" class="
112112
{%- if finalize.accommodation.vars.value == finalize.accommodation.children[1].vars.value %}u-block{% else %}u-hidden{% endif -%}
113113
">
114-
{{ form_label(finalize.hosting_interest) }}
115-
{{ form_widget(finalize.hosting_interest) }}
116-
<div class="range text-center u-mt-16">
117-
<p class="rangeSlider__value-output">{{ 'hosting.interest.set'|trans }}</p>
118-
</div>
119-
{{ form_errors(finalize.hosting_interest) }}
114+
{{ form_label(finalize.hosting_interest) }}
115+
{{ form_widget(finalize.hosting_interest) }}
116+
<div class="range text-center u-mt-16">
117+
<p class="rangeSlider__value-output">{{ 'hosting.interest.set'|trans }}</p>
118+
</div>
120119
{{ form_help(finalize.hosting_interest) }}
121120
</div>
122121
<div class="u-flex u-justify-end">

0 commit comments

Comments
 (0)