franzz/ugc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new film bg

Browse Source
This commit is contained in:
Franzz
2015-08-17 22:22:08 +02:00
parent 5b300d8eb3
commit 05a7a0cd28
3 changed files with 39 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
masks/index.html
View File

@@ -25,10 +25,8 @@
</script> </script>
</head> </head>
<body> <body>
<header><!-- <i class="fa fa-icon fa-date"></i> --><time id="date"></time></header> <header><div class="title"><time id="date"></time></div></header>
<main> <main><i id="buffer" class="fa fa-spinner fa-spin"></i></main>
<div id="buffer"><i class="fa fa-spinner fa-spin"></i></div>
</main>
<div id="feedback"> <div id="feedback">
<h1><i class="fa fa-icon fa-feedback"></i>Filtered films</h1> <h1><i class="fa fa-icon fa-feedback"></i>Filtered films</h1>
<div id="feed_content"></div> <div id="feed_content"></div>

2
script/film.js
View File

@@ -90,7 +90,7 @@ function Film()
this._anchor = $('<div>', {'class':'film', 'id':'film_'+this.getRank()}) this._anchor = $('<div>', {'class':'film', 'id':'film_'+this.getRank()})
.data('rank', this.getRank()) .data('rank', this.getRank())
.data('id', this.id()) .data('id', this.id())
//.append($('<img>', {'class':'bg', 'src':this.poster()})) .append($('<img>', {'class':'bg', 'src':this.poster()}))
.append($('<img>', {'class':'poster', 'src':this.poster()})) .append($('<img>', {'class':'poster', 'src':this.poster()}))
.append($('<div>', {'class':'info'}) .append($('<div>', {'class':'info'})
.append($('<p>', {'class':'title'}) .append($('<p>', {'class':'title'})

53
style/ugc.css
View File

@@ -7,14 +7,14 @@ body {
padding:1em; padding:1em;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 1em; font-size: 1em;
color:#333; color:#222;
background:#DDD; background:white;
min-width: 30em; min-width: 30em;
} }
a { a {
text-decoration: none; text-decoration: none;
color:#333; color:#222;
} }
a:hover { a:hover {
color:#08288B; color:#08288B;
@@ -62,12 +62,22 @@ h1 {
/* Section - Header */ /* Section - Header */
header { header {
padding:1em 0 1em calc(113px + 0.5em); margin:0;
visibility:hidden;
text-align: center;
}
header .title {
display:inline-block;
padding-left:113px;
background:url(../images/logo_ugc.png) 0 50% no-repeat; background:url(../images/logo_ugc.png) 0 50% no-repeat;
margin:0 0 0 0.5em; }
header .title time {
display:inline-block;
font-size: 2em; font-size: 2em;
color:#08288B; color:#08288B;
visibility:hidden; padding:1.5em 0 1.5em 0.75em;
} }
/* Section - Main */ /* Section - Main */
@@ -97,21 +107,35 @@ main {
position:relative; position:relative;
background:white; background:white;
margin-bottom:1em; margin-bottom:1em;
overflow: hidden;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
} }
.film:nth-child(even) { .film:nth-child(even) {
} }
.film .bg { .film img.bg {
position:absolute; position:absolute;
width:1000%; top:50%;
opacity:0.3; margin-top:-25%;
z-index: -1; left:152px;
display:none; right:0;
bottom:0;
width:calc(100% - 152px);
opacity:0.25;
}
.film img.poster {
width:152px;
display: block;
z-index:2;
} }
.film .info { .film .info {
z-index:2;
position:absolute; position:absolute;
top:0; top:0;
left:152px; left:152px;
@@ -130,12 +154,7 @@ main {
.film .title .edito { .film .title .edito {
font-style: italic; font-style: italic;
margin-left:1em; margin-left:1em;
color:#999; color:#777;
}
.film img.poster {
width:152px;
display: block;
} }
.film .trailer { .film .trailer {