left: 0
width: 100%
-[data-bg]
- position: absolute
- display: block
- top: 0
- left: 0
- width: 100%
- height: 100%
- pointer-events: none
// SimpleBar personalisation
.simplebar-wrapper
display: none
[data-bg]
+ position: absolute
+ display: block
+ top: 0
+ left: 0
+ width: 100%
+ height: 100%
+ pointer-events: none
+
+ &[data-bg-type="standard"]
+ height: 160px
+
+ .m &
+ height: 20%
+
+
img
width: 100%
height: 100%
-[data-bg-fit="cover"]
- img
- object-fit: cover
- object-position: 50% 50%
-[data-bg-fit="fill"]
- img
- object-fit: fill
+ &[data-bg-fit="cover"]
+ img
+ object-fit: cover
+ object-position: 50% 50%
+
+ &[data-bg-fit="fill"]
+ img
+ object-fit: fill
$m=false;
}
@endphp
-<div data-bg-fit="{{$fit}}" data-bg="" data-bg-d="{{$d}}" @if($m)data-bg-m="{{$m}}"@endif></div>
+<div data-bg-type="{{$name}}" data-bg-fit="{{$fit}}" data-bg="" data-bg-d="{{$d}}" @if($m)data-bg-m="{{$m}}"@endif></div>
<div class="container-screen none" data-screen="q-{{$position}}" data-type="country">
+ @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
<div class="fill-area"></div>
@include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
<div class="screen question-text question-country">
</div>
</form>
</div>
- <div class="screen-image">
- <img src="{{$theme->standardImage}}"/>
- <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
- </div>
@include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
</div>
<div class="container-screen none" data-screen="q-{{$position}}" data-type="email">
+ @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
<div class="fill-area"></div>
@include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
<div class="screen question-text question-email">
</div>
</form>
</div>
- <div class="screen-image">
- <img src="{{$theme->standardImage}}"/>
- <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
- </div>
@include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
</div>
@endphp
<div class="container-screen none question-match" data-type="match" data-screen="q-{{$position}}">
+ @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
<div class="fill-area"></div>
@include('header_question', ['data' => $data, 'max' => $max, 'position' => $position])
<div class="screen">
<div class="swiper-pagination-bottom"></div>
</div>
</div>
- <div class="screen-image">
- <img src="{{$theme->standardImage}}"/>
- <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
- </div>
@include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true, 'matchMaking' => true])
</div>
<div class="container-screen none" data-screen="q-{{$position}}" data-type="multiple">
+ @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
<div class="fill-area"></div>
@include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
<div class="screen question-multiple">
</ul>
</form>
</div>
- <div class="screen-image">
- <img src="{{$theme->standardImage}}"/>
- <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
- </div>
@include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
</div>
<div class="container-screen none" data-screen="q-{{$position}}" data-type="text">
+ @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
<div class="fill-area"></div>
@include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
<div class="screen question-text">
<form id="form-{{$position}}">
<div class="form-group">
- <input class="answer-text" name="text" type="text" placeholder="{{$__('Enter your answer')}}..." />
+ <input class="answer-text" name="text" type="text" placeholder="{{$__('Enter your answer')}}..."/>
</div>
</form>
</div>
- <div class="screen-image">
- <img src="{{$theme->standardImage}}"/>
- <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
- </div>
@include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
</div>
<div class="container-screen none" data-screen="q-{{$position}}" data-type="text">
+ @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
<div class="fill-area"></div>
@include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
<div class="screen question-text">
</div>
</form>
</div>
- <div class="screen-image">
- <img src="{{$theme->standardImage}}"/>
- <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
- </div>
@include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
</div>