Skip to content

Commit 36ac237

Browse files
aath-odooaath-odoo
committed
[IMP] survey: revamped survey sample data view UI
Enhanced the survey sample data view by introducing a new card-based UI. - Removed the custom survey option and replaced it with a redirect link. - Added hover effects and ensured seamless compatibility with dark mode. Task-4571651 closes odoo#197777 Signed-off-by: Warnon Aurélien (awa) <[email protected]>
1 parent 224c61f commit 36ac237

File tree

3 files changed

+27
-64
lines changed

3 files changed

+27
-64
lines changed

‎addons/survey/static/src/scss/survey_survey_views.scss

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -119,38 +119,22 @@
119119
}
120120

121121
/* Style of the tiles allowing the user to load a sample survey. */
122-
.o_survey_sample_container {
123-
margin-top: .5rem;
124-
}
125122

126-
.o_survey_sample_tile {
127-
max-width: 150px;
128-
padding: 1rem;
129-
font-size: .75rem;
130-
.o_survey_sample_tile_cover {
131-
display: none;
132-
overflow-y: auto;
133-
cursor: pointer;
134-
}
123+
.survey_sample_card {
135124
&:hover {
136-
.o_survey_sample_tile_cover {
137-
display: flex;
138-
flex-direction: column;
139-
background: rgba(0, 0, 0, 0.9);
140-
&::before, &::after {
141-
content: '';
142-
}
143-
&::before {
144-
margin-top: auto;
145-
}
146-
&::after {
147-
margin-bottom: auto;
148-
}
125+
* {
126+
color: $primary !important;
149127
}
128+
box-shadow: $box-shadow;
129+
border-color: $primary !important;
150130
}
151131
}
152132

153133
.o_form_label.o_form_label_readonly.o_survey_label_survey_start_url{
154134
opacity: 100;
155135
font-weight: 500;
156136
}
137+
138+
.o_nocontent_help:has(.o_survey_load_sample) {
139+
max-width: unset !important;
140+
}

‎addons/survey/static/src/views/survey_views.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function useSurveyLoadSampleHook(selector) {
3232
}
3333
const handler = (ev) => {
3434
if (!isLoadingSample) {
35-
const surveyMethod = ev.currentTarget.closest('.o_survey_sample_container').getAttribute('action');
35+
const surveyMethod = ev.currentTarget.closest('.o_survey_load_sample').getAttribute('action');
3636
loadSample(surveyMethod);
3737
}
3838
}

‎addons/survey/views/survey_survey_views.xml

Lines changed: 17 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -402,56 +402,35 @@
402402
<p>
403403
No Survey Found
404404
</p><p>
405-
Ready to test? Pick a sample or create one from scratch...
405+
Pick a sample or <a action="action_load_sample_custom" class="o_survey_load_sample">Start from scratch</a>.
406406
</p>
407-
<div class="row mb-4">
408-
<div class="col-sm-3 o_survey_sample_container" action="action_load_sample_survey">
409-
<div class="o_survey_sample_tile position-relative w-100 d-flex align-items-center justify-content-center m-auto">
407+
<div class="row mb-4 w-100 px-5 justify-content-center">
408+
<div class="col-md-3 p-2 flex-row o_survey_load_sample survey_sample_card card rounded m-3 flex-wrap cursor-pointer" action="action_load_sample_survey">
409+
<div class="col-lg-4 p-3">
410410
<img src="/survey/static/src/img/survey_sample_survey.png" class="img-fluid"/>
411-
<div class="o_survey_sample_tile_cover o_survey_load_sample w-100 h-100 position-absolute rounded-circle text-center text-white p-3">
412-
Gather feedbacks from your employees and customers
413-
</div>
414411
</div>
415-
<div class="my-3">
416-
<a class="o_survey_load_sample h3 text-center text-primary">Survey</a>
412+
<div class="col-lg-8 p-3 text-start">
413+
<h3>Survey</h3>
414+
<p>Gather feedbacks from your employees and customers</p>
417415
</div>
418-
<a class="btn btn-outline-primary o_survey_load_sample"><span>Try It</span></a>
419416
</div>
420-
<div class="col-sm-3 o_survey_sample_container" action="action_load_sample_assessment">
421-
<div class="o_survey_sample_tile position-relative w-100 d-flex align-items-center justify-content-center m-auto">
417+
<div class="col-md-3 p-2 flex-row o_survey_load_sample survey_sample_card card rounded m-3 flex-wrap cursor-pointer" action="action_load_sample_assessment">
418+
<div class="col-lg-4 p-3">
422419
<img src="/survey/static/src/img/survey_sample_assessment.png" class="img-fluid"/>
423-
<div class="o_survey_sample_tile_cover o_survey_load_sample w-100 h-100 position-absolute rounded-circle text-center text-white p-3">
424-
Handle quiz &amp; certifications
425-
</div>
426420
</div>
427-
<div class="my-3">
428-
<a class="o_survey_load_sample h3 text-center text-primary">Assessment</a>
421+
<div class="col-lg-8 p-3 text-start">
422+
<h3>Assessment</h3>
423+
<p>Handle quiz &amp; certifications</p>
429424
</div>
430-
<a class="btn btn-outline-primary o_survey_load_sample"><span>Try It</span></a>
431425
</div>
432-
<div class="col-sm-3 o_survey_sample_container" action="action_load_sample_live_session">
433-
<div class="o_survey_sample_tile position-relative w-100 d-flex align-items-center justify-content-center m-auto">
426+
<div class="col-md-3 p-2 flex-row o_survey_load_sample survey_sample_card card rounded m-3 flex-wrap cursor-pointer" action="action_load_sample_live_session">
427+
<div class="col-lg-4 p-3">
434428
<img src="/survey/static/src/img/survey_sample_live_session.png" class="img-fluid"/>
435-
<div class="o_survey_sample_tile_cover o_survey_load_sample w-100 h-100 position-absolute rounded-circle text-center text-white p-3">
436-
Add some fun to your presentations by sharing questions live
437-
</div>
438-
</div>
439-
<div class="my-3">
440-
<a class="o_survey_load_sample h3 text-center text-primary">Live Session</a>
441-
</div>
442-
<a class="btn btn-outline-primary o_survey_load_sample"><span>Try It</span></a>
443-
</div>
444-
<div class="col-sm-3 o_survey_sample_container" action="action_load_sample_custom">
445-
<div class="o_survey_sample_tile position-relative w-100 d-flex align-items-center justify-content-center m-auto">
446-
<img src="/survey/static/src/img/survey_sample_custom.png" class="img-fluid"/>
447-
<div class="o_survey_sample_tile_cover o_survey_load_sample w-100 h-100 position-absolute rounded-circle text-center text-white p-3">
448-
Create a custom survey from scratch
449-
</div>
450429
</div>
451-
<div class="my-3">
452-
<a class="o_survey_load_sample h3 text-center text-primary">Custom</a>
430+
<div class="col-lg-8 p-3 text-start">
431+
<h3>Live Session</h3>
432+
<p>Make your presentations more fun by sharing questions live</p>
453433
</div>
454-
<a class="btn btn-outline-primary o_survey_load_sample"><span>Try It</span></a>
455434
</div>
456435
</div>
457436
</field>

0 commit comments

Comments
 (0)