Fix display glitches with signup finalize form.

BeWelcome · May 7, 2024 · 0d7ac8c · 0d7ac8c
1 parent 2d00ece
commit 0d7ac8c
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 111 deletions.
diff --git a/assets/scss/bewelcome.scss b/assets/scss/bewelcome.scss
@@ -314,80 +314,73 @@ figure > figcaption {
   }
 }
 
-.rangeslider,
-.rangeslider__fill {
+.rangeSlider, .rangeSlider__fill {
   display: block;
-  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
+  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.7);
   border-radius: 10px;
 }
 
-.rangeslider {
-  background: #e6e6e6;
+.rangeSlider {
   position: relative;
+  background: #f7f7f7;
 }
 
-.rangeslider--horizontal {
+.rangeSlider__horizontal {
   height: 20px;
   width: 100%;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 
-.rangeslider--vertical {
-  width: 20px;
-  min-height: 150px;
-  max-height: 100%;
+.rangeSlider__vertical {
   height: 100%;
+  width: 20px;
 }
 
-.rangeslider--disabled {
+.rangeSlider--disabled {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
   opacity: 0.4;
 }
 
-.rangeslider__fill {
-  background: $brand-primary;
-  background: -webkit-linear-gradient(to right, #fff , $brand-primary);
-  background: -o-linear-gradient(to right, #fff , $brand-primary);
-  background: -moz-linear-gradient(to right, #fff , $brand-primary);
-  background: linear-gradient(to right, #fff , $brand-primary);
-
+.rangeSlider__fill {
+  background: #f37000;
   position: absolute;
 }
 
-.rangeslider--horizontal .rangeslider__fill {
-  top: 0;
+.rangeSlider__fill__horizontal {
   height: 100%;
+  top: 0;
+  left: 0;
 }
-.rangeslider--vertical .rangeslider__fill {
-  bottom: 0;
+
+.rangeSlider__fill__vertical {
   width: 100%;
+  bottom: 0;
+  left: 0;
 }
 
-.rangeslider__handle {
-  background: white;
+.rangeSlider__handle {
   border: 1px solid #ccc;
   cursor: pointer;
   display: inline-block;
   width: 40px;
   height: 40px;
   position: absolute;
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
-  background-size: 100%;
-  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)));
-  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
-  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
-  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
-  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  background: white linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
   border-radius: 50%;
 }
-.rangeslider__handle:after {
+
+.rangeSlider__handle__horizontal {
+  top: -10px;
+}
+
+.rangeSlider__handle__vertical {
+  left: -10px;
+  bottom: 0;
+}
+
+.rangeSlider__handle:after {
   content: "";
   display: block;
   width: 18px;
@@ -398,76 +391,24 @@ figure > figcaption {
   right: 0;
   bottom: 0;
   left: 0;
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  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)));
-  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
-  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
   background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
   border-radius: 50%;
 }
-.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  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)));
-  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
-  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
+
+.rangeSlider__handle:active {
   background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
 }
-.rangeslider--horizontal .rangeslider__handle {
-  top: -10px;
-  touch-action: pan-y;
-  -ms-touch-action: pan-y;
-}
-.rangeslider--vertical .rangeslider__handle {
-  left: -10px;
-  touch-action: pan-x;
-  -ms-touch-action: pan-x;
-}
 
-input[type="range"]:focus + .rangeslider .rangeslider__handle {
-  -moz-box-shadow: 0 0 8px rgba(243, 112, 0, 0.7);
-  -webkit-box-shadow: 0 0 8px rgba(243, 112, 0, 0.7);
-  box-shadow: 0 0 8px rgba(243, 112, 0, 0.7);
+input[type="range"]:focus + .rangeSlider .rangeSlider__handle {
+  box-shadow: 0 0 8px rgba(142, 68, 173, 0.9);
 }
 
-.rangeslider__value-bubble {
-  border: 1px solid #ccc;
-  display: block;
-  padding: 5px;
+.rangeSlider__buffer {
   position: absolute;
-  bottom: 100%;
-  margin-bottom: 25px;
-  width: 100px;
-  margin-left: -50px;
-  text-align: center;
-  @include border-radius(5px);
-
-  &:before,
-  &:after {
-    border-width: 11px;
-    border-style: solid;
-    border-color: transparent;
-    content: "";
-    display: block;
-    margin: auto;
-    width: 10px;
-    position: absolute;
-    left: 0;
-    right: 0;
-  }
-  &:before {
-    border-top-color: #ccc;
-    border-bottom-width: 0;
-    bottom: -11px;
-  }
-  &:after {
-    border-top-color: #fff;
-    border-bottom-width: 0;
-    bottom: -10px;
-  }
+  top: 3px;
+  height: 14px;
+  background: #2c3e50;
+  border-radius: 10px;
 }
 
 #mockup {
@@ -607,18 +548,17 @@ $avatar-sizes: 30, 50, 75, 100, 150, 200, 500;
 
 .list {
   position:absolute;
-  left:0px;
-  top:0px;
+  left:0;
+  top:0;
   min-width:3500px;
-  margin-top:0px;
+  margin-top:0;
 }
 
 .list li{
   display:table-cell;
   position:relative;
   text-align:center;
   cursor:grab;
-  cursor:-webkit-grab;
   color:#efefef;
   vertical-align:middle;
 }
@@ -628,7 +568,7 @@ $avatar-sizes: 30, 50, 75, 100, 150, 200, 500;
   cursor:pointer;
   display:none;
   padding:5px;
-  white-space:no-wrap;
+  white-space:nowrap;
   vertical-align:middle;
   background-color:transparent;
 }
@@ -638,3 +578,12 @@ $avatar-sizes: 30, 50, 75, 100, 150, 200, 500;
 .o-form-group, .o-form-group-sm {
   margin-bottom: 8px;
 }
+
+.vanilla-calendar {
+  z-index: 1000;
+}
+
+[data-calendar-theme="light"] .vanilla-calendar-day__btn_today {
+  color: white;
+  background-color: #ffb474;
+}
diff --git a/assets/tailwindcss/layouts/layouts.css b/assets/tailwindcss/layouts/layouts.css
@@ -1,2 +1,3 @@
 @import '_layouts.general.css';
 @import '_layouts.search.css';
+@import '_layouts.calendar.css';
diff --git a/src/Form/SignupFormFinalizeType.php b/src/Form/SignupFormFinalizeType.php
@@ -87,6 +87,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                 'attr' => [
                     'class' =>  'js-location-picker',
                 ],
+                'label' => 'profile.set.location',
                 'error_bubbling' => true,
                 'help' => 'help.location',
             ])

diff --git a/templates/signup/finalize.html.twig b/templates/signup/finalize.html.twig
@@ -111,12 +111,11 @@
     <div id="hosting_interest" class="
         {%- if finalize.accommodation.vars.value == finalize.accommodation.children[1].vars.value %}u-block{% else %}u-hidden{% endif -%}
     ">
-    {{ form_label(finalize.hosting_interest) }}
-    {{ form_widget(finalize.hosting_interest) }}
-    <div class="range text-center u-mt-16">
-        <p class="rangeSlider__value-output">{{ 'hosting.interest.set'|trans }}</p>
-    </div>
-        {{ form_errors(finalize.hosting_interest) }}
+        {{ form_label(finalize.hosting_interest) }}
+        {{ form_widget(finalize.hosting_interest) }}
+        <div class="range text-center u-mt-16">
+            <p class="rangeSlider__value-output">{{ 'hosting.interest.set'|trans }}</p>
+        </div>
         {{ form_help(finalize.hosting_interest) }}
     </div>
     <div class="u-flex u-justify-end">