OO-725 beautify poster selector

src/main/java/org/olat/modules/video/ui/VideoPosterSelectionForm.java

@@ -87,6 +87,7 @@ public class VideoPosterSelectionForm extends BasicController {
 				proposalLayout.contextPut("serverUrl", serverUrl);
 
 				Link button = LinkFactory.createButton(String.valueOf(x), proposalLayout, this);
+				button.setCustomEnabledLinkCSS("o_video_poster_selct");
 				button.setCustomDisplayText(translate("poster.select"));
 				buttons.put(button, posterProposal);
 //				.addFormLink(posterProposal.getName(), "selectPoster", "track.delete", "track.delete", null, Link.BUTTON);

src/main/java/org/olat/modules/video/ui/_content/video_poster_proposal.html

-#foreach( $poster in $pics.entrySet())
-<div>
-<img src="$poster.key" height="400px" width="400px" />$r.render($poster.value)
+<div class="o_video_poster_select">
+	<h2>$r.translate("poster.select")</h2>
+	#foreach( $poster in $pics.entrySet())
+	<div class="o_video_poster" style="background-image: url('$poster.key')">
+		$r.render($poster.value)
+	</div>
+	#end
 </div>
-#end

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

@@ -29,7 +29,7 @@ track.upload=Upload
 track.delete=L\u00F6schen
 track.upload.error.nolang=Bitte w\u00E4hlen Sie eine Sprache aus dieser Liste aus
 track.upload.error.nofile=Bitte w\u00E4hlen Sie eine Datei aus.
-poster.select=ausw\u00E4hlen
+poster.select=Vorschaubild ausw\u00E4hlen
 admin.menu.title=Video
 admin.menu.title.alt=Konfiguration der Video-Resource
 admin.config.title=Video Konfiguration

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

@@ -28,7 +28,7 @@ track.langs=Language
 track.upload=Upload
 track.delete=Delete
 track.upload.error.nolang=Please select a language form the list
-poster.select=select
+poster.select=Select poster frame
 admin.menu.title=Video
 admin.menu.title.alt=Configuration of the Video-Resource
 admin.config.title=Video Configuration

src/main/webapp/static/themes/light/_modules.scss

@@ -56,6 +56,7 @@
 @import "modules/devel";
 @import "modules/wiki";
 @import "modules/portfolio";
+@import "modules/video";
 @import "modules/admin";
 @import "modules/qpool";
 @import "modules/dmz";

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

+.o_video {
+
+}
+
+.o_video_poster_select {
+	text-align: center;
+	.o_video_poster {
+		position: relative;
+		display: inline-block;
+		width: 400px;
+		max-width: 100%;
+		height: 225px;
+		margin: 5px;
+		background-size: cover;
+		background-repeat: no-repeat;
+		
+		a {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			border: 1px solid #eee;
+			
+			span {
+				position: absolute;
+				bottom: 0;
+				width: 100%;
+				display: block;
+				line-height: 3em;
+				background: #FFF;
+				opacity: 0.8;
+			}
+			&:hover {
+				border: 1px solid #bbb;
+				span {
+					opacity: 0.9;			
+				}
+			}
+		}	
+	}
+	
+}
\ No newline at end of file