Added cover overlayorigin/dev-0.3

7 files changed, 107 insertions, 8 deletions

diff --git a/src/app/css/app.css b/src/app/css/app.css
index 4d059ef..50fb48a 100644
--- a/src/app/css/app.css
+++ b/src/app/css/app.css
@@ -502,6 +502,59 @@ body,
   box-shadow: 0px 0px 10px;
   cursor: pointer;
 }
+.movie-item .cover .cover-overlay {
+  background: rgba(45,117,223,0.7);
+  text-align: center;
+  padding: 88px 0;
+  width: 100%;
+  height: 100%;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  -o-transition: opacity 0.25s ease;
+  -ms-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+}
+.movie-item .cover .cover-overlay:hover {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.movie-item .cover .cover-overlay .actions {
+  margin: auto;
+  width: 105px;
+}
+.movie-item .cover .cover-overlay .actions div {
+  float: left;
+  background-position: center;
+  background-repeat: no-repeat;
+  margin: 0 5px;
+  width: 25px;
+  height: 20px;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  -o-transition: opacity 0.25s ease;
+  -ms-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+.movie-item .cover .cover-overlay .actions div.favorites {
+  background-image: url("../images/icons/add_favorites.png");
+}
+.movie-item .cover .cover-overlay .actions div.detail {
+  background-image: url("../images/icons/detail.png");
+}
+.movie-item .cover .cover-overlay .actions div.queue {
+  background-image: url("../images/icons/add_queue.png");
+}
+.movie-item .cover .cover-overlay .actions div:hover {
+  opacity: 0.5;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+  filter: alpha(opacity=50);
+}
 .movie-item .title {
   height: 14px;
   margin: 6px 0 4px;
diff --git a/src/app/images/icons/add_favorites.png b/src/app/images/icons/add_favorites.png
new file mode 100644
index 0000000..73a6912
--- /dev/null
+++ b/src/app/images/icons/add_favorites.png
diff --git a/src/app/images/icons/add_queue.png b/src/app/images/icons/add_queue.png
new file mode 100644
index 0000000..2c00017
--- /dev/null
+++ b/src/app/images/icons/add_queue.png
diff --git a/src/app/images/icons/detail.png b/src/app/images/icons/detail.png
new file mode 100644
index 0000000..7dd4015
--- /dev/null
+++ b/src/app/images/icons/detail.png
diff --git a/src/app/index.html b/src/app/index.html
index f0daca3..0300792 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -15,8 +15,18 @@
     </script>
 
     <script id="movie-item-tpl" type="text/x-template">
-        <img src="<%= image %>" class="real hidden cover" alt="<%= title %>" />
-        <p class="title"><%= title %></p>
+        <img class="cover-image" src="<%= image %>" style="display: none" />
+        <div class="cover">
+            <div class="cover-overlay">
+                <div class="actions">
+                    <div class="favorites"></div>
+                    <div class="detail"></div>
+                    <div class="queue"></div>
+                </div>
+            </div>
+        </div>
+
+        <p class="title" title="<%= title %>"><%= title %></p>
         <p class="year"><%= year %></p>
     </script>
 
@@ -245,9 +255,6 @@
     <script src="frontend/views/listview.js"></script>
     <script src="frontend/views/movie.js"></script>
     <script src="frontend/views/sidebar.js"></script>
-    <script src="frontend/controllers/home.js"></script>
-    <script src="frontend/controllers/search.js"></script>
-    <script src="frontend/controllers/filter.js"></script>
     <script src="frontend/router.js"></script>
 
     <!-- Other Dependencies -->
diff --git a/src/app/lib/views/movie_browser/movie_item.js b/src/app/lib/views/movie_browser/movie_item.js
index 8bec5a5..716f686 100644
--- a/src/app/lib/views/movie_browser/movie_item.js
+++ b/src/app/lib/views/movie_browser/movie_item.js
@@ -8,19 +8,21 @@
         className: 'movie-item',
 
         ui: {
+            coverIamge: '.cover-image',
             cover: '.cover'
         },
 
         onShow: function() {
-            this.ui.cover.on('load', _.bind(this.showCover, this));
+            this.ui.coverIamge.on('load', _.bind(this.showCover, this));
         },
 
         onClose: function() {
-            this.ui.cover.off('load');
+            this.ui.coverIamge.off('load');
         },
 
         showCover: function() {
-            this.ui.cover.removeClass('hidden');
+            this.ui.cover.css('background-image', 'url(' + this.model.get('image') + ')');
+            this.ui.coverIamge.remove();
         }
     });
 
diff --git a/src/app/styl/movie_browser/movie_item.styl b/src/app/styl/movie_browser/movie_item.styl
index 8101cec..6a9555a 100644
--- a/src/app/styl/movie_browser/movie_item.styl
+++ b/src/app/styl/movie_browser/movie_item.styl
@@ -11,6 +11,43 @@
         box-shadow: 0px 0px 10px
         cursor: pointer
 
+        .cover-overlay
+            background: rgba(45, 117, 223, .70);
+            text-align: center;
+            padding: 88px 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 4px;
+            transition: opacity .25s ease;
+
+            opacity: 0
+            &:hover
+                opacity: 1
+
+            .actions
+                margin: auto
+                width: 105px
+
+                div
+                    float: left;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    margin: 0 5px
+                    width: 25px
+                    height: 20px
+                    transition: opacity .25s ease;
+
+                    &.favorites
+                        background-image: url(../../images/icons/add_favorites.png)
+                    &.detail
+                        background-image: url(../../images/icons/detail.png)
+                    &.queue
+                        background-image: url(../../images/icons/add_queue.png)
+
+                    &:hover
+                        opacity: 0.5
+
+
     .title
         height: 14px;
         margin: 6px 0 4px;