Skip to content

Instantly share code, notes, and snippets.

@danishsatkut
Created May 6, 2014 05:27
Show Gist options
  • Select an option

  • Save danishsatkut/11553779 to your computer and use it in GitHub Desktop.

Select an option

Save danishsatkut/11553779 to your computer and use it in GitHub Desktop.
Profile Widget
/**
* Profile Widget
*/
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, b, address, cite, code, em, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, footer, header, nav, section, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.rinema-widget-grid {
background: #FFF!important;
box-shadow: 0 0 3px #AAA!important;
border-radius: 3px!important;
font-size: 12px;
font-family: Helvetica;
display: inline-block!important;
margin: 0!important;
padding: 10px 0!important;
position: relative!important;
text-align: center;
}
.rinema-widget-grid-header {
display: block!important;
margin: 0 10px!important;
padding: 0!important;
height: 45px!important;
position: relative!important;
background: #FFF;
}
.rinema-widget-grid-user {
position: absolute!important;
top: 0!important;
left: 0!important;
height: 30px!important;
width: 30px!important;
}
.rinema-widget-grid-user-image {
position: relative!important;
height: 30px!important;
width: 30px!important;
margin: 0!important;
padding: 0!important;
border-radius: 3px!important;
border: none!important;
}
.rinema-widget-grid-user-name {
top: 12px!important;
font-family: helvetica, sans-serif!important;
font-weight: bold!important;
color: #333!important;
font-size: 14px!important;
line-height: 16px!important;
vertical-align: middle;
}
/* This is where the widget size will be applied */
.rinema-widget-grid-body {
/* width: 300px; /* Calculate this from image width and provided width. without exceeding it */
/* height: 300px; /* Provided height */
display: block!important;
margin: 0 10px!important;
border-radius: 2px!important;
position: relative!important;
overflow: hidden;
}
.rinema-widget-grid-container {
height: 1200px; /* This is the total height of the elements. Dont know if we can calculate it. */
display: block!important;
position: relative!important;
overflow: hidden!important;
}
.rinema-widget-grid-movie {
/* Movie Style */
cursor: pointer!important;
display: inline-block!important;
position: absolute!important;
overflow: hidden!important;
}
.rinema-widget-grid-movie::before {
position: absolute!important;
content: ""!important;
z-index: 2!important;
top: 0!important;
left: 0!important;
right: 0!important;
bottom: 0!important;
box-shadow: inset 0 0 2px #888!important;
}
.rinema-widget-grid-movie img{
/* Calculated Styles */
/* height: 120.21px; */
/* width: 80px; */
border: none!important;
}
<span class="rinema-widget-grid">
<span class="rinema-widget-grid-header">
<a class="rinema-widget-grid-user" href="http://localhost:3000/hits-mera-naam">
<img class="rinema-widget-grid-user-image" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/photos/4/thumb.jpg">
</a>
<a class="rinema-widget-grid-user-name" href="http://localhost:3000/hits-mera-naam">Hits Mera Naam</a>
</span>
<span class="rinema-widget-grid-body" style="width: 328px; height: 400px;">
<span class="rinema-widget-grid-container">
<a class="rinema-widget-grid-movie" height="107.19999999999999" style="width: 80px; height: 107.19999999999999px; top: 0px; left: 0px;">
<img class="rinema-widget-grid-poster" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/movies_posters/images/2/thumb.jpg" style="width: 80px; height: 107.19999999999999px;">
</a>
<a class="rinema-widget-grid-movie" height="114.4" style="width: 80px; height: 114.4px; top: 0px; left: 80px;">
<img class="rinema-widget-grid-poster" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/movies_posters/images/4/thumb.jpg" style="width: 80px; height: 114.4px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 107px; left: 0px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 0px; left: 160px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 114px; left: 80px;">
<img class="rinema-widget-grid-poster" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/movies_posters/images/479/thumb.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 241px; left: 0px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 0px; left: 240px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 134px; left: 160px;">
<img class="rinema-widget-grid-poster" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/movies_posters/images/1402/thumb.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="120" style="width: 80px; height: 120px; top: 248px; left: 80px;">
<img class="rinema-widget-grid-poster" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/movies_posters/images/17/thumb.jpg" style="width: 80px; height: 120px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 134px; left: 240px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 268px; left: 160px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 368px; left: 80px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 375px; left: 0px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 268px; left: 240px;">
<img class="rinema-widget-grid-poster" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/movies_posters/images/1724/thumb.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 402px; left: 160px;">
<img class="rinema-widget-grid-poster" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/movies_posters/images/956/thumb.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 502px; left: 80px;">
<img class="rinema-widget-grid-poster" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/movies_posters/images/1930/thumb.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 509px; left: 0px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 402px; left: 240px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 536px; left: 160px;">
<img class="rinema-widget-grid-poster" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/movies_posters/images/95/thumb.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 636px; left: 80px;">
<img class="rinema-widget-grid-poster" src="http://s3-ap-southeast-1.amazonaws.com/rinema-storage-prod/movies_posters/images/576/thumb.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 643px; left: 0px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 536px; left: 240px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 670px; left: 160px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 770px; left: 80px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 777px; left: 0px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 670px; left: 240px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 804px; left: 160px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 904px; left: 80px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 911px; left: 0px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
<a class="rinema-widget-grid-movie" height="134" style="width: 80px; height: 134px; top: 804px; left: 240px;">
<img class="rinema-widget-grid-poster" src="//localhost:3000/assets/no_movie_poster.jpg" style="width: 80px; height: 134px;">
</a>
</span>
</span>
</span>
// alert('Hello world!');
{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment