OO-3617, OO-3619: layout the side options panel for image and table

src/main/java/org/olat/modules/ceditor/ui/_content/table_editor.html

 #if($editMode)
-	<div class="o_page_table_edition">
-		<div class="o_table_title">
-			$r.render("table.title")
-		</div>
-		<table>
-		#foreach($tableRow in $tableRows)
-			<tr>
-			#foreach($tableColumn in $tableRow.columns)
-				#if($r.isTrue($tableColumn.header))
-					<th>$r.render($tableColumn.text)</th>
-				#else
-					<td>$r.render($tableColumn.text)</td>
+	<div class="clearfix">
+		<div class="o_page_table_edition">
+			<div class="o_table_title">
+				$r.render("table.title")
+			</div>
+			<table>
+			#foreach($tableRow in $tableRows)
+				<tr>
+				#foreach($tableColumn in $tableRow.columns)
+					#if($r.isTrue($tableColumn.header))
+						<th>$r.render($tableColumn.text)</th>
+					#else
+						<td>$r.render($tableColumn.text)</td>
+					#end
 				#end
+				</tr>
 			#end
-			</tr>
-		#end
-		</table>
-		<div class="o_table_caption">
-			$r.render("table.caption")
+			</table>
+			<div class="o_table_caption">
+				$r.render("table.caption")
+			</div>
+		</div>
+		<div class="o_page_side_options">
+			<label class="o_page_side_option">$r.translate("table.row")</label>
+			<div class="o_page_side_option">$r.render("table.row")</div>
+			<label class="o_page_side_option">$r.translate("table.column")</label>
+			<div class="o_page_side_option">$r.render("table.column")</div>
+			<div class="o_page_side_option">$r.render("table.column.header")</div>
+			<div class="o_page_side_option">$r.render("table.row.header")</div>
+			<label class="o_page_side_option">$r.translate("table.style")</label>
+			<div class="o_page_side_option">$r.render("table.style.striped")</div>
+			<div class="o_page_side_option">$r.render("table.style.bordered")</div>
+			<div class="o_page_side_option">$r.render("table.style")</div>
 		</div>
-	</div>
-	<div class="o_page_side_options">
-		<label class="o_page_side_option">$r.translate("table.row")</label>
-		<div class="o_page_side_option">$r.render("table.row")</div>
-		<label class="o_page_side_option">$r.translate("table.column")</label>
-		<div class="o_page_side_option">$r.render("table.column")</div>
-		<div class="o_page_side_option">$r.render("table.column.header")</div>
-		<div class="o_page_side_option">$r.render("table.row.header")</div>
-		<label class="o_page_side_option">$r.translate("table.style")</label>
-		<div class="o_page_side_option">$r.render("table.style.striped")</div>
-		<div class="o_page_side_option">$r.render("table.style.bordered")</div>
-		<div class="o_page_side_option">$r.render("table.style")</div>
 	</div>
 #else
 	$r.render("run")

src/main/java/org/olat/modules/portfolio/ui/media/_content/editor_image.html

 #if($editMode)
-$r.render("image")
-<div class="o_page_side_options">
-	<label class="o_page_side_option">$r.translate("image.title")</label>
-	<div class="o_page_side_option">$r.render("image.title")</div>
-	<div class="o_page_side_option">$r.render("image.title.position")</div>
-	<div class="o_page_side_option">$r.render("image.title.style")</div>
-	
-	<label class="o_page_side_option">$r.translate("image.caption")</label>
-	<div class="o_page_side_option">$r.render("image.caption")</div>
-	
-	<label class="o_page_side_option">$r.translate("image.style")</label>
-	<div class="o_page_side_option">$r.render("image.align")</div>
-	<div class="o_page_side_option">$r.render("image.size")</div>
-	<div class="o_page_side_option">$r.render("image.style")</div>
-	<div class="o_page_side_option">$r.render("image.origin")</div>
-	<div class="o_page_side_option">$r.render("image.description")</div>
-	<div class="o_page_side_option">$r.render("image.description.content")</div>
+<div class="clearfix">
+	<div class="o_page_image_edition">
+		$r.render("image")
+	</div>	
+	<div class="o_page_side_options">
+		<label class="o_page_side_option">$r.translate("image.title")</label>
+		<div class="o_page_side_option">$r.render("image.title")</div>
+		<div class="o_page_side_option">$r.render("image.title.position")</div>
+		<div class="o_page_side_option">$r.render("image.title.style")</div>
+		
+		<label class="o_page_side_option">$r.translate("image.caption")</label>
+		<div class="o_page_side_option">$r.render("image.caption")</div>
+		
+		<label class="o_page_side_option">$r.translate("image.style")</label>
+		<div class="o_page_side_option">$r.render("image.align")</div>
+		<div class="o_page_side_option">$r.render("image.size")</div>
+		<div class="o_page_side_option">$r.render("image.style")</div>
+		<div class="o_page_side_option">$r.render("image.origin")</div>
+		<div class="o_page_side_option">$r.render("image.description")</div>
+		<div class="o_page_side_option">$r.render("image.description.content")</div>
+	</div>
 </div>
 #else
 	$r.render("imagePreview")

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

@@ -233,9 +233,8 @@
 }
 
 .o_page_table_edition {
-	padding-right: 300px;
-	
-	
+	width: 70%;
+	float:left;
 	.o_table_title, .o_table_caption {
 		padding: 5px 5em;
 		background-color: #efefef;
@@ -255,17 +254,28 @@
 	}
 }
 
+.o_page_image_edition {
+	width: 70%;
+	float:left;
+}
+
 .o_page_side_options {
-	clear:both;
-	width: 300px;
-	padding: 5px;
-	position: absolute;
-	top: 2px;
-	right: 25px;
+	width: 30%;
+	float:left;
 	background-color: $o-editor-settings-bg;
+	border-left: 1px solid darken($o-editor-settings-bg, 25%);
+	border-bottom: 1px solid darken($o-editor-settings-bg, 25%);
+	border-radius: 0 0 0 5px;
+	padding: 5px;
+	margin-bottom: 5px;
 	z-index: 2;
 }
 
+@media (max-width: $screen-xs-max) {
+	.o_page_image_edition, .o_page_table_edition, .o_page_side_options {
+		width: 50%;
+	}
+}
 
 .o_page_add_contents {
 	margin-top: 30px;