diff options
Diffstat (limited to 'movietool/html')
| -rw-r--r-- | movietool/html/movies-files/css/style.css | 43 | ||||
| -rw-r--r-- | movietool/html/movies-files/js/app.js | 1 | ||||
| -rw-r--r-- | movietool/html/movies-grid.html | 42 |
3 files changed, 86 insertions, 0 deletions
diff --git a/movietool/html/movies-files/css/style.css b/movietool/html/movies-files/css/style.css index 6f95335..7ff5474 100644 --- a/movietool/html/movies-files/css/style.css +++ b/movietool/html/movies-files/css/style.css @@ -89,3 +89,46 @@ font-weight: bold; border: 1px solid #a0a0a0; border-radius: 4px; } +/* grid variant */ +.grid-poster { + margin: 10px 20px auto; + border-radius: 5px; + box-shadow: 0px 0px 15px 0px gray; + background-color: #fafafa; + float: left; + + margin: 10px; + width: 154px; + float: left; + height: 231px; +} +.grid-poster > .grid-label { + width: 154px; + position: relative; + font-size: 3pt; + text-align: center; + color: #fafafa; +} +.grid-poster:hover > .grid-label { + width: 180px; + z-index: 10; + font-size: 23pt; + color: black; + border-radius: 5px; + box-shadow: 0px 0px 15px 0px gray; + background-color: #fafafa; +} +.grid { + padding-bottom: 100px; + padding-top: 30px; +} +.grid-filter { + text-align: center; + width: 100%; + position: fixed; + padding-top: 5px; +} +.grid-filter > input { + box-shadow: 0px 0px 5px 0px gray; + background-color: #fafafa; +}
\ No newline at end of file diff --git a/movietool/html/movies-files/js/app.js b/movietool/html/movies-files/js/app.js index a3a9632..9b380d9 100644 --- a/movietool/html/movies-files/js/app.js +++ b/movietool/html/movies-files/js/app.js @@ -13,6 +13,7 @@ App.Movie = DS.Model.extend({ summary: DS.attr('string'), path: DS.attr('string'), poster: DS.attr('string'), + posterGrid: DS.attr('string'), tagline: DS.attr('string'), plot: DS.attr('string'), website: DS.attr('string'), diff --git a/movietool/html/movies-grid.html b/movietool/html/movies-grid.html new file mode 100644 index 0000000..7e63ccb --- /dev/null +++ b/movietool/html/movies-grid.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Movies</title> + <link rel="stylesheet" href="movies-files/css/normalize.css" /> + <link rel="stylesheet" href="movies-files/css/style.css" /> + </head> + <body> + <script type="text/x-handlebars"> + {{outlet}} + </script> + <script type="text/x-handlebars" id="index"> + <div class="grid-filter"> + {{input value=filterTextEntry placeholder="Type to filter.." key-up='applyFilter' size="30"}} + </div> + <div class="grid"> + {{#each movie in filteredContent}} + <div class="grid-poster"> + <a {{bind-attr href=movie.path.path title=movie.path.label}}> + {{#if movie.poster}} + <img {{bind-attr src=movie.posterGrid alt=movie.path.label style="z-index: 3"}} /> + {{else}} + <span> no image </span> + {{/if}} + </a> + <div class="grid-label"> + {{movie.title}} + </div> + </div> + {{/each}} + </div> + <p style="height: 100px;clear: both;"></p> + </script> + <script type="text/javascript" src="movies-files/js/libs/all.min.js"></script> + <script type="text/javascript" src="movies-files/js/app.js"></script> + <script type="text/javascript" src="movies-files/data.js"></script> + </body> +</html> +<!-- +vim: tabstop=1 expandtab shiftwidth=1 softtabstop=1: +--> |