ufc panel redesign

panels/ufc/script.js

@@ -4,7 +4,7 @@ var img=null;
 var titleDiv=null;
 var zeitDiv=null;
 this.loaded=function(panel,config) {
-    img = $(panel).find("#image img");
+    img = $(panel).find("#background");
     titleDiv=$(panel).find("#title span");
     zeitDiv=$(panel).find("#zeit span");
     $.ajax("panels/ufc/semester.json",{
@@ -53,7 +53,9 @@ this.show=function() {
                 break;
             }
         }
-        img.attr("src","https://ufc.tu-dortmund.de" + nextMovie.movie.image_url_medium );
+
+        img.css("backgroundImage", "url(https://ufc.tu-dortmund.de" + nextMovie.movie.image_url_medium + ")");
+        //img.attr("src","https://ufc.tu-dortmund.de" + nextMovie.movie.image_url_medium );
         titleDiv.text(nextMovie.title);
         var d = new Date(nextMovie.date);
         var tag = d.getDate();

panels/ufc/style.less

@@ -7,7 +7,6 @@
 }
 #zeit{
   height:10%;
-  color:white;
 }
 #image img {
   height: 100%;
@@ -15,21 +14,37 @@
   width:auto;
   border: solid black 1px;
 }
-#zeit, #title{
-}
 #zeit span {
   background:#b00;
   display:inline-block;
   padding: 3px;
 }
-#background {
+
+
+
+* {
+  box-sizing:border-box;
+}
+
+#container {
+  position:relative;
   height:100%;
   width:100%;
-  background:white;
+}
+#background {
+  background-size: auto 70%;
+  background-repeat: no-repeat;
+  background-position: 50% 100%;
+  -webkit-filter: grayscale(60%);
+  filter: grayscale(60%);
+}
+#content{
   font-family:NewCicle, Verdana, Arial, sans-serif;
   text-transform: Capitalize;
-  color:black;
-}
-* {
-  box-sizing:border-box;
+  color:white;
 }
+#background,#content {
+  height:100%;
+  width:100%;
+  position:absolute;
+}
\ No newline at end of file

panels/ufc/template.html

-<div id="background">
-    <!-- TODO: fallback image -->
-    <div id="zeit"><span></span></div>
-    <div id="title"><span></span></div>
-    <div id="image"><img></div>
+<div id="container">
+    <div id="background">
+    </div>
+    <div id="content">
+        <div id="zeit"><span></span></div>
+        <div id="title"><span></span></div>
+    </div>
 </div>
\ No newline at end of file