Skip to content
Snippets Groups Projects
Commit e9a7914c authored by uhensler's avatar uhensler
Browse files

OO-3303: Enhancements in the mobile view of a rubric question

parent ebe7c751
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 99 additions and 62 deletions
src/main/java/org/olat/modules/forms/ui/_content/overview.html
+ 1
− 1
View file @ e9a7914c
...@@ -25,5 +25,5 @@ ...@@ -25,5 +25,5 @@
<h4>$r.translate("report.overview.duration.title")</h4> <h4>$r.translate("report.overview.duration.title")</h4>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-6">$r.render("durationHistogram")</div> <div class="col-xs-12 col-sm-9 col-md-9 col-lg-6">$r.render("durationHistogram")</div>
#end #end
<div class="clearfix"></div>
</div> </div>
\ No newline at end of file
src/main/java/org/olat/modules/forms/ui/_content/rubric.html
+ 37
− 7
View file @ e9a7914c
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
#if($element.isStepLabels() || $isNoResponseEnabled) #if($element.isStepLabels() || $isNoResponseEnabled)
<div class="clearfix"> <div class="clearfix">
<div class="$colLeft"></div> <div class="$colLeft"></div>
<div class="$colMiddle o_evaluation_step_labels"> <div class="$colMiddle o_evaluation_step_labels #if(!$hasRightLabels) hidden-xs #end">
#if($element.isStepLabels()) #if($element.isStepLabels())
#foreach($stepLabel in $element.stepLabels) #foreach($stepLabel in $element.stepLabels)
<div style="width:${element.getStepInPercent()}%;">$r.escapeHtml($stepLabel)</div> <div style="width:${element.getStepInPercent()}%;">$r.escapeHtml($stepLabel)</div>
...@@ -65,8 +65,19 @@ ...@@ -65,8 +65,19 @@
#end #end
#foreach($slider in $element.getSliders()) #foreach($slider in $element.getSliders())
<div class="o_slider clearfix"> <div class="o_slider clearfix">
<div class="$colLeft #if($hasRightLabels) o_evaluation_left_label #else o_evaluation_left_label_la #end">$slider.startLabel</div> <div class="$colLeft o_evaluation_left_label #if(!$hasRightLabels) o_evaluation_left_label_la #end">$slider.startLabel</div>
<div class="$colMiddle o_evaluation_steps">$r.render($slider.formItem)</div> <div class="$colMiddle ">
#if($element.isStepLabels() && !$hasRightLabels)
<div class="o_evaluation_step_labels hidden-sm hidden-md hidden-lg">
#if($element.isStepLabels())
#foreach($stepLabel in $element.stepLabels)
<div style="width:${element.getStepInPercent()}%;">$r.escapeHtml($stepLabel)</div>
#end
#end
</div>
#end
<div class="o_evaluation_steps">$r.render($slider.formItem)</div>
</div>
#if($isNoResponseEnabled) #if($isNoResponseEnabled)
<div class="$colNoResponse text-center o_evaluation_no_response">$r.render($slider.noResponseEl)</div> <div class="$colNoResponse text-center o_evaluation_no_response">$r.render($slider.noResponseEl)</div>
#end #end
...@@ -79,7 +90,7 @@ ...@@ -79,7 +90,7 @@
#if($element.isStepLabels() || $isNoResponseEnabled) #if($element.isStepLabels() || $isNoResponseEnabled)
<div class="clearfix"> <div class="clearfix">
<div class="$colLeft"></div> <div class="$colLeft"></div>
<div class="$colMiddle o_evaluation_step_labels"> <div class="$colMiddle o_evaluation_step_labels #if(!$hasRightLabels) hidden-xs #end">
#if($element.isStepLabels()) #if($element.isStepLabels())
#set($colWidth = 100 / (${element.getStepLabels().size()} - 1)) #set($colWidth = 100 / (${element.getStepLabels().size()} - 1))
#set($marginWidth = $colWidth / 2) #set($marginWidth = $colWidth / 2)
...@@ -102,8 +113,27 @@ ...@@ -102,8 +113,27 @@
#end #end
#foreach($slider in $element.getSliders()) #foreach($slider in $element.getSliders())
<div class="o_slider clearfix"> <div class="o_slider clearfix">
<div class="$colLeft #if($hasRightLabels) o_evaluation_left_label #else o_evaluation_left_label_la #end">$slider.startLabel</div> <div class="$colLeft o_evaluation_left_label #if($hasRightLabels) o_evaluation_left_label_la #end">$slider.startLabel</div>
<div class="$colMiddle">$r.render($slider.formItem)</div> <div class="$colMiddle ">
#if($element.isStepLabels() && !$hasRightLabels)
<div class="o_evaluation_step_labels hidden-sm hidden-md hidden-lg">
#if($element.isStepLabels())
#set($colWidth = 100 / (${element.getStepLabels().size()} - 1))
#set($marginWidth = $colWidth / 2)
#foreach($stepLabel in $element.stepLabels)
#if($foreach.first || $foreach.last)
<div>$r.escapeHtml($stepLabel)</div>
#elseif($foreach.index == 1)
<div style="width: ${colWidth}%; margin-left:${marginWidth}%;">$r.escapeHtml($stepLabel)</div>
#else
<div style="width: ${colWidth}%;">$r.escapeHtml($stepLabel)</div>
#end
#end
#end
</div>
#end
<div class="o_evaluation_steps">$r.render($slider.formItem)</div>
</div>
#if($isNoResponseEnabled) #if($isNoResponseEnabled)
<div class="$colNoResponse text-center o_evaluation_no_response">$r.render($slider.noResponseEl)</div> <div class="$colNoResponse text-center o_evaluation_no_response">$r.render($slider.noResponseEl)</div>
#end #end
...@@ -115,7 +145,7 @@ ...@@ -115,7 +145,7 @@
<div class="o_evaluation_block o_evaluation_slider"> <div class="o_evaluation_block o_evaluation_slider">
#foreach($slider in $element.getSliders()) #foreach($slider in $element.getSliders())
<div class="o_slider clearfix"> <div class="o_slider clearfix">
<div class="$colLeft #if($hasRightLabels) o_evaluation_left_label #else o_evaluation_left_label_la #end">$slider.startLabel</div> <div class="$colLeft o_evaluation_left_label #if($hasRightLabels) o_evaluation_left_label_la #end">$slider.startLabel</div>
<div class="$colMiddle">$r.render($slider.formItem)</div> <div class="$colMiddle">$r.render($slider.formItem)</div>
#if($isNoResponseEnabled) #if($isNoResponseEnabled)
<div class="$colNoResponse text-center o_evaluation_no_response">$r.render($slider.noResponseEl)</div> <div class="$colNoResponse text-center o_evaluation_no_response">$r.render($slider.noResponseEl)</div>
......
src/main/webapp/static/themes/light/modules/_evaluation_form.scss
+ 55
− 48
View file @ e9a7914c
...@@ -17,11 +17,6 @@ ...@@ -17,11 +17,6 @@
.o_slider { .o_slider {
margin-bottom: $o-evaluation-slider-margin-bottom; margin-bottom: $o-evaluation-slider-margin-bottom;
.radio {
padding: 0;
min-height: unset;
}
label { label {
padding: 0; padding: 0;
} }
...@@ -46,27 +41,38 @@ ...@@ -46,27 +41,38 @@
.o_evaluation_discrete_radio { .o_evaluation_discrete_radio {
.o_slider { .o_slider {
.o_evaluation_steps { .o_evaluation_steps {
label { display: flex;
justify-content: space-between;
label {
padding: 0; padding: 0;
margin: 0; margin: 0;
text-align: center; text-align: center;
} }
div.radio {
.radio {
background-color: $o-evaluation-step-background-color; background-color: $o-evaluation-step-background-color;
padding: 0px;
margin-top: 0px; margin-top: 0px;
display:inline-block;
text-align: center; text-align: center;
&:hover { &:hover {
background-color: $o-evaluation-slider-hover-background-color; background-color: $o-evaluation-slider-hover-background-color;
} }
} }
} }
.o_evaluation_no_response { .o_evaluation_no_response {
div.checkbox { div.checkbox {
margin-top: 0px; margin-top: 0px;
margin-left: 8px;
} }
} }
} }
.o_evaluation_step_labels {
display: flex;
justify-content: space-between;
}
} }
.o_slider .ui-slider.ui-slider-horizontal.ui-widget-content { .o_slider .ui-slider.ui-slider-horizontal.ui-widget-content {
...@@ -78,7 +84,7 @@ ...@@ -78,7 +84,7 @@
font-weight: $o-evaluation-side-labels-font-weight; font-weight: $o-evaluation-side-labels-font-weight;
} }
.o_evaluation_left_label_la { .o_evaluation_left_label.o_evaluation_left_label_la {
text-align: left; text-align: left;
padding-left: 0px; padding-left: 0px;
font-weight: $o-evaluation-side-labels-font-weight; font-weight: $o-evaluation-side-labels-font-weight;
...@@ -152,6 +158,10 @@ ...@@ -152,6 +158,10 @@
} }
} }
.d3chart {
.o_eva_bar { fill: $o-d3chart-default; }
}
.o_evaluation_discrete_slider { .o_evaluation_discrete_slider {
.o_evaluation_step_labels { .o_evaluation_step_labels {
position: relative; position: relative;
...@@ -175,39 +185,6 @@ ...@@ -175,39 +185,6 @@
} }
} }
@media (max-width: $screen-sm-min) {
.o_evaluation_form {
.o_evaluation_left_label {
text-align: left;
}
.o_evaluation_right_label {
text-align: right;
}
.o_evaluation_no_response {
text-align: left;
.o_evaluation_no_resp_value {
font-weight: bold;
}
}
.o_evaluation_slider {
.o_evaluation_no_response {
margin-top: 0.7em;
}
}
}
}
@media (min-width: $screen-sm-min) {
.o_evaluation_form {
.o_evaluation_no_resp_value {
display:none;
}
}
}
.o_slider_overview { .o_slider_overview {
width: 100%; width: 100%;
height: 20px; height: 20px;
...@@ -248,12 +225,13 @@ ...@@ -248,12 +225,13 @@
} }
.o_slider_descrete_radio { .o_slider_descrete_radio {
div.radio { display: flex;
justify-content: space-between;
.radio {
background-color: $o-evaluation-step-background-color; background-color: $o-evaluation-step-background-color;
padding-top: 5px; padding: 0px;
padding-bottom: -5px;
margin-top: 0px; margin-top: 0px;
display:inline-block;
text-align: center; text-align: center;
&:hover { &:hover {
background-color: $o-evaluation-slider-hover-background-color; background-color: $o-evaluation-slider-hover-background-color;
...@@ -285,10 +263,39 @@ ...@@ -285,10 +263,39 @@
} }
} }
.d3chart { @media (max-width: $screen-sm-min) {
.o_eva_bar { fill: $o-d3chart-default; } .o_evaluation_form {
.o_evaluation_left_label {
text-align: left;
margin-bottom: 0.5em;
}
.o_evaluation_right_label {
text-align: right;
}
.o_evaluation_no_response {
text-align: left;
.o_evaluation_no_resp_value {
font-weight: bold;
}
}
.o_evaluation_slider {
.o_evaluation_no_response {
margin-top: 0.7em;
}
}
}
} }
@media (min-width: $screen-sm-min) {
.o_evaluation_form {
.o_evaluation_no_resp_value {
display:none;
}
}
}
/* Print styles */ /* Print styles */
@media print { @media print {
......
src/main/webapp/static/themes/light/theme.css
+ 1
− 1
View file @ e9a7914c
This diff is collapsed.
src/main/webapp/static/themes/light/theme.css.map
+ 1
− 1
View file @ e9a7914c
This diff is collapsed.
src/main/webapp/static/themes/light/theme_ie_completions.css
+ 1
− 1
View file @ e9a7914c
source diff could not be displayed: it is too large. Options to address this: view the blob.
src/main/webapp/static/themes/openolat/theme.css
+ 1
− 1
View file @ e9a7914c
This diff is collapsed.
src/main/webapp/static/themes/openolat/theme.css.map
+ 1
− 1
View file @ e9a7914c
This diff is collapsed.
src/main/webapp/static/themes/openolat/theme_ie_completions.css
+ 1
− 1
View file @ e9a7914c
source diff could not be displayed: it is too large. Options to address this: view the blob.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment