OO-3303: GUI details and wording

src/main/java/org/olat/core/gui/components/form/flexible/impl/elements/table/DefaultFlexiColumnModel.java

@@ -34,6 +34,7 @@ public class DefaultFlexiColumnModel implements FlexiColumnModel {
 
 	private String headerKey;
 	private String headerLabel;
+	private Integer headerAlignment;
 	private String columnKey;
 	private int columnIndex;
 
@@ -218,6 +219,15 @@ public class DefaultFlexiColumnModel implements FlexiColumnModel {
 		this.headerLabel = headerLabel;
 	}
 
+	@Override
+	public Integer getHeaderAlignment() {
+		return headerAlignment;
+	}
+
+	public void setHeaderAlignment(int headerAlignment) {
+		this.headerAlignment = headerAlignment;
+	}
+
 	@Override
 	public String getColumnKey() {
 		return columnKey;

src/main/java/org/olat/core/gui/components/form/flexible/impl/elements/table/FlexiColumnModel.java

@@ -58,6 +58,8 @@ public interface FlexiColumnModel {
 	
 	public String getHeaderLabel();
 	
+	public Integer getHeaderAlignment();
+	
 	public String getColumnKey();
 	
 	public int getColumnIndex();

src/main/java/org/olat/core/gui/components/form/flexible/impl/elements/table/FlexiTableClassicRenderer.java

@@ -81,9 +81,17 @@ class FlexiTableClassicRenderer extends AbstractFlexiTableRenderer implements Co
 	private void renderHeader(StringOutput sb, FlexiTableComponent ftC, FlexiColumnModel fcm, Translator translator) {
 		String header = getHeader(fcm, translator);
 		sb.append("<th");
-		// append sort key to make column width set via css
-		if (fcm.getSortKey() != null) {
-			sb.append(" class='o_col_").append(fcm.getSortKey()).append("'");	
+		if (fcm.getSortKey() != null || fcm.getHeaderAlignment() != null) {
+			sb.append(" class='");
+			// append sort key to make column width set via css
+			if (fcm.getSortKey() != null) {
+				sb.append(" o_col_").append(fcm.getSortKey());	
+			}
+			if (fcm.getHeaderAlignment() != null) {
+				String alignmentCssClass = getAlignmentCssClass(fcm.getHeaderAlignment());
+				sb.append(" ").append(alignmentCssClass);
+			}
+			sb.append("'");
 		}
 		sb.append(">");
 		// sort is not defined
@@ -217,7 +225,7 @@ class FlexiTableClassicRenderer extends AbstractFlexiTableRenderer implements Co
 		FlexiTableDataModel<?> dataModel = ftE.getTableDataModel();
 
 		int alignment = fcm.getAlignment();
-		String cssClass = (alignment == FlexiColumnModel.ALIGNMENT_LEFT ? "text-left" : (alignment == FlexiColumnModel.ALIGNMENT_RIGHT ? "text-right" : "text-center"));
+		String cssClass = getAlignmentCssClass(alignment);
 
 		target.append("<td class=\"").append(cssClass).append(" ")
 		  .append("o_dnd_label", ftE.getColumnIndexForDragAndDropLabel() == fcm.getColumnIndex())
@@ -249,7 +257,7 @@ class FlexiTableClassicRenderer extends AbstractFlexiTableRenderer implements Co
 		}
 		target.append("</td>");
 	}
-	
+
 	@Override
 	protected void renderFooter(Renderer renderer, StringOutput target, FlexiTableComponent ftC,
 			URLBuilder ubu, Translator translator, RenderResult renderResult) {
@@ -283,7 +291,7 @@ class FlexiTableClassicRenderer extends AbstractFlexiTableRenderer implements Co
 						target.append("</th>");
 						footerHeader = true;
 					} else {
-						String cssClass = (alignment == FlexiColumnModel.ALIGNMENT_LEFT ? "text-left" : (alignment == FlexiColumnModel.ALIGNMENT_RIGHT ? "text-right" : "text-center"));
+						String cssClass = getAlignmentCssClass(alignment);
 						target.append("<td class=\"").append(cssClass).append("\">");
 						fcm.getFooterCellRenderer().render(renderer, target, cellValue, 0, ftC, ubu, translator);
 						target.append("</td>");
@@ -293,4 +301,8 @@ class FlexiTableClassicRenderer extends AbstractFlexiTableRenderer implements Co
 			target.append("</tr>");
 		}
 	}
+
+	private String getAlignmentCssClass(int alignment) {
+		return alignment == FlexiColumnModel.ALIGNMENT_LEFT ? "text-left" : (alignment == FlexiColumnModel.ALIGNMENT_RIGHT ? "text-right" : "text-center");
+	}
 }
\ No newline at end of file

src/main/java/org/olat/modules/forms/ui/BarChartController.java

@@ -21,12 +21,12 @@ package org.olat.modules.forms.ui;
 
 import org.olat.core.gui.UserRequest;
 import org.olat.core.gui.components.Component;
-import org.olat.core.gui.components.chart.BarChartComponent;
 import org.olat.core.gui.components.velocity.VelocityContainer;
 import org.olat.core.gui.control.Event;
 import org.olat.core.gui.control.WindowControl;
 import org.olat.core.gui.control.controller.BasicController;
 import org.olat.core.util.CodeHelper;
+import org.olat.modules.forms.ui.component.ResponsiveBarChartComponent;
 import org.olat.modules.forms.ui.model.BarSeriesDataSource;
 
 /**
@@ -44,7 +44,7 @@ public class BarChartController extends BasicController {
 		
 		mainVC = createVelocityContainer("bar_chart");
 		
-		BarChartComponent chart = new BarChartComponent("o_eve_bc_" + CodeHelper.getRAMUniqueID());
+		ResponsiveBarChartComponent chart = new ResponsiveBarChartComponent("o_eve_bc_" + CodeHelper.getRAMUniqueID());
 		chart.setYLegend(translate("chart.count"));
 		chart.addSeries(dataSource.getBarSeries());
 		mainVC.put("chart", chart);

src/main/java/org/olat/modules/forms/ui/EvaluationFormFormatter.java

@@ -19,6 +19,8 @@
  */
 package org.olat.modules.forms.ui;
 
+import java.text.DecimalFormat;
+import java.text.NumberFormat;
 import java.util.Date;
 import java.util.Locale;
 import java.util.concurrent.TimeUnit;
@@ -33,6 +35,7 @@ import org.olat.core.util.Formatter;
  */
 public class EvaluationFormFormatter {
 	
+	private static final NumberFormat ZERO_OR_ONE_DECIMAL = new DecimalFormat("#0.#");
 	private static final long hour = 60*60*1000;
 	private static final long day = 24*60*60*1000;
 
@@ -42,6 +45,11 @@ public class EvaluationFormFormatter {
 		}
 		return String.format("%.2f", value);
 	}
+	
+	public static String formatZeroOrOneDecimals(double value) {
+		return ZERO_OR_ONE_DECIMAL.format(value);
+	}
+	
 	public static String duration(long duration) {
 		if (duration >= day) {
 			return String.format("%d d %d h %d m %d s", 

src/main/java/org/olat/modules/forms/ui/EvaluationFormOverviewController.java

@@ -24,7 +24,6 @@ import java.util.List;
 
 import org.olat.core.gui.UserRequest;
 import org.olat.core.gui.components.Component;
-import org.olat.core.gui.components.chart.BarChartComponent;
 import org.olat.core.gui.components.chart.BarSeries;
 import org.olat.core.gui.components.velocity.VelocityContainer;
 import org.olat.core.gui.control.Controller;
@@ -37,6 +36,7 @@ import org.olat.modules.forms.EvaluationFormStatistic;
 import org.olat.modules.forms.model.xml.AbstractElement;
 import org.olat.modules.forms.model.xml.Form;
 import org.olat.modules.forms.model.xml.Rubric;
+import org.olat.modules.forms.ui.component.ResponsiveBarChartComponent;
 import org.springframework.beans.factory.annotation.Autowired;
 
 /**
@@ -85,8 +85,8 @@ public class EvaluationFormOverviewController extends BasicController {
 		return false;
 	}
 
-	private BarChartComponent initDurationHistogram(long[] durations) {
-		BarChartComponent chart = new BarChartComponent("o_eve_duration_chart");
+	private ResponsiveBarChartComponent initDurationHistogram(long[] durations) {
+		ResponsiveBarChartComponent chart = new ResponsiveBarChartComponent("o_eve_duration_chart");
 		chart.setYLegend(translate("report.overview.duration.count"));
 		chart.setXLegend(translate("report.overview.duration"));
 

src/main/java/org/olat/modules/forms/ui/RubricBarChartsController.java

@@ -42,7 +42,7 @@ import org.olat.modules.forms.model.xml.Rubric;
 import org.olat.modules.forms.model.xml.Rubric.SliderType;
 import org.olat.modules.forms.model.xml.Slider;
 import org.olat.modules.forms.model.xml.StepLabel;
-import org.olat.modules.forms.ui.component.SliderChartComponent;
+import org.olat.modules.forms.ui.component.ResponsiveBarChartComponent;
 import org.olat.modules.forms.ui.model.RubricStatistic;
 import org.olat.modules.forms.ui.model.SliderStatistic;
 
@@ -91,7 +91,7 @@ public class RubricBarChartsController extends FormBasicController {
 
 	private String createChartAndGetName(SliderStatistic sliderStatistic) {
 		String barChartName = "o_eve_bc_" + CodeHelper.getRAMUniqueID();
-		SliderChartComponent chart = new SliderChartComponent(barChartName);
+		ResponsiveBarChartComponent chart = new ResponsiveBarChartComponent(barChartName);
 		chart.setYLegend(translate("chart.count"));
 		BarSeries barSeries = createBarSeries(sliderStatistic);
 		chart.addSeries(barSeries);
@@ -105,7 +105,8 @@ public class RubricBarChartsController extends FormBasicController {
 		for (int step = 1; step <= rubric.getSteps(); step++) {
 			Long count = stepCounts.get(step -1);
 			double stepValue = rubric.getScaleType().getStepValue(rubric.getSteps(), step);
-			series.add(count, stepValue);
+			String stepName = EvaluationFormFormatter.formatZeroOrOneDecimals(stepValue);
+			series.add(count, stepName);
 		}
 		return series;
 	}
@@ -132,9 +133,9 @@ public class RubricBarChartsController extends FormBasicController {
 		rows.add(new StatisticRow(translate("rubric.report.number.no.responses.title"), String.valueOf(sliderStatistic.getNumberOfNoResponses())));
 		rows.add(new StatisticRow(translate("rubric.report.number.responses.title"), String.valueOf(sliderStatistic.getNumberOfResponses())));
 		rows.add(new StatisticRow(translate("rubric.report.median.title"), EvaluationFormFormatter.formatDouble(sliderStatistic.getMedian())));
-		rows.add(new StatisticRow(translate("rubric.report.avg.title"), EvaluationFormFormatter.formatDouble(sliderStatistic.getAvg())));
 		rows.add(new StatisticRow(translate("rubric.report.variance.title"), EvaluationFormFormatter.formatDouble(sliderStatistic.getVariance())));
 		rows.add(new StatisticRow(translate("rubric.report.sdtdev.title"), EvaluationFormFormatter.formatDouble(sliderStatistic.getStdDev())));
+		rows.add(new StatisticRow(translate("rubric.report.avg.title"), EvaluationFormFormatter.formatDouble(sliderStatistic.getAvg())));
 		return rows;
 	}
 

src/main/java/org/olat/modules/forms/ui/RubricDataModel.java

@@ -82,13 +82,13 @@ public class RubricDataModel extends DefaultFlexiTableDataModel<RubricRow> imple
 			return EvaluationFormFormatter.formatDouble(rubricRow.getMedian());
 		}
 		if (col - offset == 3) {
-			return EvaluationFormFormatter.formatDouble(rubricRow.getAvg());
+			return EvaluationFormFormatter.formatDouble(rubricRow.getVariance());
 		}
 		if (col - offset == 4) {
-			return EvaluationFormFormatter.formatDouble(rubricRow.getVariance());
+			return EvaluationFormFormatter.formatDouble(rubricRow.getSdtDev());
 		}
 		if (col - offset == 5) {
-			return EvaluationFormFormatter.formatDouble(rubricRow.getSdtDev());
+			return EvaluationFormFormatter.formatDouble(rubricRow.getAvg());
 		}
 		return rubricRow.getStepCounts().get(col - 1);
 	}
@@ -109,9 +109,9 @@ public class RubricDataModel extends DefaultFlexiTableDataModel<RubricRow> imple
 		numberOfNoResponses("rubric.report.number.no.responses.title"),
 		numberOfResponses("rubric.report.number.responses.title"),
 		median("rubric.report.median.title"),
-		avg("rubric.report.avg.title"),
 		variance("rubric.report.variance.title"),
-		stdDev("rubric.report.sdtdev.title");
+		stdDev("rubric.report.sdtdev.title"),
+		avg("rubric.report.avg.title");
 		
 		private final String i18nKey;
 		

src/main/java/org/olat/modules/forms/ui/RubricTableController.java

@@ -75,43 +75,57 @@ public class RubricTableController extends FormBasicController {
 		if (!rubric.getSliderType().equals(SliderType.continuous)) {
 			ScaleType scaleType = rubric.getScaleType();
 			for (int step = 1; step <= rubric.getSteps(); step++) {
+				String label = rubric.getStepLabels().get(step -1).getLabel();
 				double stepValue = scaleType.getStepValue(rubric.getSteps(), step);
-				String header = String.valueOf(stepValue);
+				StringBuilder headerSb = new StringBuilder();
+				if (StringHelper.containsNonWhitespace(label)) {
+					headerSb.append(label).append("<br>");
+				}
+				headerSb.append("(").append(EvaluationFormFormatter.formatZeroOrOneDecimals(stepValue)).append(")");
+				String header = headerSb.toString();
 				DefaultFlexiColumnModel columnModel = new DefaultFlexiColumnModel(header, columnIndex++);
 				columnModel.setHeaderLabel(header);
+				columnModel.setHeaderAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
 				columnModel.setAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
 				columnsModel.addFlexiColumnModel(columnModel);
 			}
 		}
 
 		if (hasEndLabel()) {
-			columnsModel.addFlexiColumnModel(new DefaultFlexiColumnModel(RubricReportCols.endLabel.i18nHeaderKey(), columnIndex++, false, null));
+			DefaultFlexiColumnModel columnModel = new DefaultFlexiColumnModel(RubricReportCols.endLabel.i18nHeaderKey(), columnIndex++, false, null);
+			columnsModel.addFlexiColumnModel(columnModel);
 		}
 		if (rubric.isNoResponseEnabled()) {
 			DefaultFlexiColumnModel noResponsesColumn = new DefaultFlexiColumnModel(RubricReportCols.numberOfNoResponses.i18nHeaderKey(), columnIndex++, false, null);
 			noResponsesColumn.setAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
+			noResponsesColumn.setHeaderAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
 			columnsModel.addFlexiColumnModel(noResponsesColumn);
 		}
 		
 		DefaultFlexiColumnModel responsesColumn = new DefaultFlexiColumnModel(RubricReportCols.numberOfResponses.i18nHeaderKey(), columnIndex++, false, null);
 		responsesColumn.setAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
+		responsesColumn.setHeaderAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
 		columnsModel.addFlexiColumnModel(responsesColumn);
 		
 		DefaultFlexiColumnModel medianColumn = new DefaultFlexiColumnModel(RubricReportCols.median.i18nHeaderKey(), columnIndex++, false, null);
 		medianColumn.setAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
+		medianColumn.setHeaderAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
 		columnsModel.addFlexiColumnModel(medianColumn);
 		
-		DefaultFlexiColumnModel avgColumn = new DefaultFlexiColumnModel(RubricReportCols.avg.i18nHeaderKey(), columnIndex++, false, null);
-		avgColumn.setAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
-		columnsModel.addFlexiColumnModel(avgColumn);
-		
 		DefaultFlexiColumnModel varianceColumn = new DefaultFlexiColumnModel(RubricReportCols.variance.i18nHeaderKey(), columnIndex++, false, null);
 		varianceColumn.setAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
+		varianceColumn.setHeaderAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
 		columnsModel.addFlexiColumnModel(varianceColumn);
 		
 		DefaultFlexiColumnModel sdtDevColumn = new DefaultFlexiColumnModel(RubricReportCols.stdDev.i18nHeaderKey(), columnIndex++, false, null);
 		sdtDevColumn.setAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
+		sdtDevColumn.setHeaderAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
 		columnsModel.addFlexiColumnModel(sdtDevColumn);
+		
+		DefaultFlexiColumnModel avgColumn = new DefaultFlexiColumnModel(RubricReportCols.avg.i18nHeaderKey(), columnIndex++, false, null);
+		avgColumn.setAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
+		avgColumn.setHeaderAlignment(FlexiColumnModel.ALIGNMENT_RIGHT);
+		columnsModel.addFlexiColumnModel(avgColumn);
 
 		String footerHeader = translate("rubric.report.total", new String[] {rubric.getName()});
 		dataModel = new RubricDataModel(columnsModel, footerHeader);

src/main/java/org/olat/modules/forms/ui/RubricsTotalRow.java

@@ -42,6 +42,7 @@ public class RubricsTotalRow {
 		return name;
 	
 	}
+	
 	Double getAverage() {
 		return average;
 	}

src/main/java/org/olat/modules/forms/ui/_content/bar_chart.html

 <div class="o_evaluation_block o_evaluation_bar_chart clearfix o_block_large">
-	$r.render("chart")
+	<div class="col-xs-12 col-sm-9 col-md-9 col-lg-6">$r.render("chart")</div>
 </div>
\ No newline at end of file

src/main/java/org/olat/modules/forms/ui/_content/overview.html

@@ -19,11 +19,11 @@
 
 #if($r.available("report") && $r.visible("report"))
 	<h4>$r.translate("report.overview.total.title")</h4>
-	$r.render("report")
+	<div class="o_eva_rubric">$r.render("report")</div>
 #end
 #if($r.available("durationHistogram") && $r.visible("durationHistogram"))
 	<h4>$r.translate("report.overview.duration.title")</h4>
-	$r.render("durationHistogram")
+	<div class="col-xs-12 col-sm-9 col-md-9 col-lg-6">$r.render("durationHistogram")</div>
 #end
 
 </div>
\ No newline at end of file

src/main/java/org/olat/modules/forms/ui/_i18n/LocalStrings_de.properties

@@ -93,8 +93,8 @@ rubric.report.end.lable.title=
 rubric.report.figure.title=Kennzahl
 rubric.report.median.title=Median
 rubric.report.name.title=
-rubric.report.number.no.responses.title=Anzahl "$\:no.response"
-rubric.report.number.responses.title=Anzahl Antworten
+rubric.report.number.no.responses.title="$\:no.response"
+rubric.report.number.responses.title=Antworten
 rubric.report.scale={0} bis {1}
 rubric.report.scale.title=Skala
 rubric.report.sdtdev.title=Standardabweichung

src/main/java/org/olat/modules/forms/ui/_i18n/LocalStrings_en.properties

@@ -98,8 +98,8 @@ rubric.report.end.lable.title=
 rubric.report.figure.title=Figure
 rubric.report.median.title=Median
 rubric.report.name.title=
-rubric.report.number.no.responses.title=Number of "$\:no.response"
-rubric.report.number.responses.title=Number of answers
+rubric.report.number.no.responses.title="$\:no.response"
+rubric.report.number.responses.title=Answers
 rubric.report.scale={0} to {1}
 rubric.report.scale.title=Scale
 rubric.report.sdtdev.title=Standard deviation

src/main/java/org/olat/modules/forms/ui/component/SliderChartComponent.java → src/main/java/org/olat/modules/forms/ui/component/ResponsiveBarChartComponent.java

@@ -32,9 +32,9 @@ import org.olat.core.gui.components.chart.DefaultD3Component;
  * @author uhensler, urs.hensler@frentix.com, http://www.frentix.com
  *
  */
-public class SliderChartComponent extends DefaultD3Component {
+public class ResponsiveBarChartComponent extends DefaultD3Component {
 	
-	private static final ComponentRenderer renderer = new SliderChartRenderer();
+	private static final ComponentRenderer renderer = new ResponsiveBarChartRenderer();
 
 	private List<BarSeries> seriesList = new ArrayList<>();
 	
@@ -42,7 +42,7 @@ public class SliderChartComponent extends DefaultD3Component {
 	private String yLegend;
 	private String xLegend;
 	
-	public SliderChartComponent(String name) {
+	public ResponsiveBarChartComponent(String name) {
 		super(name);
 	}
 

src/main/java/org/olat/modules/forms/ui/component/SliderChartRenderer.java → src/main/java/org/olat/modules/forms/ui/component/ResponsiveBarChartRenderer.java

@@ -38,13 +38,13 @@ import org.olat.core.util.StringHelper;
  * @author uhensler, urs.hensler@frentix.com, http://www.frentix.com
  *
  */
-public class SliderChartRenderer extends DefaultComponentRenderer {
+public class ResponsiveBarChartRenderer extends DefaultComponentRenderer {
 
 	@Override
 	public void render(Renderer renderer, StringOutput sb, Component source, URLBuilder ubu,
 			Translator translator, RenderResult renderResult, String[] args) {
 		
-		SliderChartComponent chartCmp = (SliderChartComponent)source;
+		ResponsiveBarChartComponent chartCmp = (ResponsiveBarChartComponent)source;
 		List<BarSeries> seriesList = chartCmp.getSeries();
 		
 		String yLegend = chartCmp.getYLegend();
@@ -92,8 +92,7 @@ public class SliderChartRenderer extends DefaultComponentRenderer {
 		sb.append("svg.append('g')")
 		  .append("   .attr('class', 'x axis')")
 		  .append("   .attr('transform', 'translate(0,' + height + ')')")
-		  .append("   .call(xAxis)"); // geht aber besser mit css
-//		  .append("   .call(xAxis).selectAll('text').remove()"); // geht aber besser mit css
+		  .append("   .call(xAxis)");
 		if(StringHelper.containsNonWhitespace(xLegend)) {
 			sb.append("  .append('text')")
 			  .append("    .attr('y', (margin.bottom / 2))")
@@ -129,7 +128,7 @@ public class SliderChartRenderer extends DefaultComponentRenderer {
 		  .append("</script>");
 	}
 	
-	private void appendSeries(StringOutput sb, StringBuilder colors, SliderChartComponent chartCmp) {
+	private void appendSeries(StringOutput sb, StringBuilder colors, ResponsiveBarChartComponent chartCmp) {
 		if(colors.length() > 0) {
 			sb.append("var colors = [").append(colors).append("];");
 		}

src/main/webapp/static/themes/light/modules/_evaluation_form.scss

@@ -45,7 +45,6 @@
 	
 	.o_evaluation_discrete_radio {
 		.o_slider {
-			
 			.o_evaluation_steps {
 				 label {
 					padding: 0;
@@ -129,21 +128,28 @@
 				}
 			}
 		}
-		.svg-container {
-			display: inline-block;
-			position: relative;
-			width: 100%;
-			padding-bottom: 50%;
-			vertical-align: top;
-			overflow: hidden;
-		}
-		.svg-content-responsive {
-			display: inline-block;
-			position: absolute;
-			top: 10px;
-			left: 0;
+	}
+	
+	.o_ed_rubrictablehandler {
+		.table {
+			margin-top: 5px;
 		}
 	}
+		
+	.svg-container {
+		display: inline-block;
+		position: relative;
+		width: 100%;
+		padding-bottom: 50%;
+		vertical-align: top;
+		overflow: hidden;
+	}
+	.svg-content-responsive {
+		display: inline-block;
+		position: absolute;
+		top: 10px;
+		left: 0;
+	}
 }
 
 .o_evaluation_discrete_slider {
@@ -301,4 +307,14 @@
 	.o_eva_report {
 		margin-top: -44px;
 	}
+}
+
+.o_eva_report {
+	.o_eva_overview {
+		.o_eva_rubric {
+			.table {
+				margin-top: 5px;
+			}
+		}
+	}
 }
\ No newline at end of file