Mercurial > public > bravenewsurf
annotate bns_website/static/css/bx_styles.css @ 60:a0d3bc630ebd
For issue #8, create a videos application to randomize videos in the playlist.
This commit now adds a dependency to the Google Python GData library.
The admin enters a playlist URL in the admin. Then the admin uses an admin action to synchronize the playlist with YouTube. This reads the playlist title and retrieves the video list from YouTube. The view function reads all the playlist objects to get the complete list of videos, then shuffles them up. The template generates Javascript to create a YouTube player with the shuffled list.
A fixture is included for convenience and for the tests.
I also committed a test tool I wrote to prove out this idea in case it is useful for future enhancements or experimentation.
| author | Brian Neal <bgneal@gmail.com> |
|---|---|
| date | Sat, 19 Nov 2011 14:19:00 -0600 |
| parents | 98cc19041d8f |
| children | aaac975df679 |
| rev | line source |
|---|---|
| ckridgway@53 | 1 /* |
| ckridgway@53 | 2 * To change the color scheme of slider change each |
| ckridgway@53 | 3 * background property for each of the five styles below |
| ckridgway@53 | 4 */ |
| ckridgway@53 | 5 |
| ckridgway@53 | 6 /*next button*/ |
| ckridgway@53 | 7 .bx-next { |
| ckridgway@53 | 8 position:absolute; |
| ckridgway@53 | 9 top:40%; |
| ckridgway@53 | 10 right:-50px; |
| ckridgway@53 | 11 z-index:999; |
| ckridgway@53 | 12 width: 30px; |
| ckridgway@53 | 13 height: 30px; |
| ckridgway@53 | 14 text-indent: -999999px; |
| ckridgway@53 | 15 background: url(../images/gray_next.png) no-repeat 0 -30px; |
| ckridgway@53 | 16 } |
| ckridgway@53 | 17 |
| ckridgway@53 | 18 /*previous button*/ |
| ckridgway@53 | 19 .bx-prev { |
| ckridgway@53 | 20 position:absolute; |
| ckridgway@53 | 21 top:40%; |
| ckridgway@53 | 22 left:-50px; |
| ckridgway@53 | 23 z-index:999; |
| ckridgway@53 | 24 width: 30px; |
| ckridgway@53 | 25 height: 30px; |
| ckridgway@53 | 26 text-indent: -999999px; |
| ckridgway@53 | 27 background: url(../images/gray_prev.png) no-repeat 0 -30px; |
| ckridgway@53 | 28 } |
| ckridgway@53 | 29 |
| ckridgway@53 | 30 /*pager links*/ |
| ckridgway@53 | 31 .bx-pager a { |
| ckridgway@53 | 32 margin-right: 5px; |
| ckridgway@53 | 33 color: #fff; |
| ckridgway@53 | 34 padding: 3px 8px 3px 6px; |
| ckridgway@53 | 35 font-size: 12px; |
| ckridgway@53 | 36 zoom:1; |
| ckridgway@53 | 37 background: url(../images/gray_pager.png) no-repeat 0 -20px; |
| ckridgway@53 | 38 } |
| ckridgway@53 | 39 |
| ckridgway@53 | 40 /*auto start button*/ |
| ckridgway@53 | 41 .bx-auto .start { |
| ckridgway@53 | 42 background: url(../images/gray_auto.png) no-repeat 0 2px; |
| ckridgway@53 | 43 padding-left: 13px; |
| ckridgway@53 | 44 } |
| ckridgway@53 | 45 |
| ckridgway@53 | 46 /*auto stop button*/ |
| ckridgway@53 | 47 .bx-auto .stop { |
| ckridgway@53 | 48 background: url(../images/gray_auto.png) no-repeat 0 -14px; |
| ckridgway@53 | 49 padding-left: 13px; |
| ckridgway@53 | 50 } |
| ckridgway@53 | 51 |
| ckridgway@53 | 52 /* |
| ckridgway@53 | 53 * End color scheme styles |
| ckridgway@53 | 54 */ |
| ckridgway@53 | 55 |
| ckridgway@53 | 56 |
| ckridgway@53 | 57 /*next/prev button hover state*/ |
| ckridgway@53 | 58 .bx-next:hover, |
| ckridgway@53 | 59 .bx-prev:hover { |
| ckridgway@53 | 60 background-position: 0 0; |
| ckridgway@53 | 61 } |
| ckridgway@53 | 62 |
| ckridgway@53 | 63 /*pager links hover and active states*/ |
| ckridgway@53 | 64 .bx-pager .pager-active, |
| ckridgway@53 | 65 .bx-pager a:hover { |
| ckridgway@53 | 66 background-position: 0 0; |
| ckridgway@53 | 67 } |
| ckridgway@53 | 68 |
| ckridgway@53 | 69 /*pager wrapper*/ |
| ckridgway@53 | 70 .bx-pager { |
| ckridgway@53 | 71 text-align:center; |
| ckridgway@53 | 72 padding-top: 7px; |
| ckridgway@53 | 73 font-size:12px; |
| ckridgway@53 | 74 color:#666; |
| ckridgway@53 | 75 } |
| ckridgway@53 | 76 |
| ckridgway@53 | 77 /*captions*/ |
| ckridgway@53 | 78 .bx-captions { |
| ckridgway@53 | 79 text-align:center; |
| ckridgway@53 | 80 font-size: 12px; |
| ckridgway@53 | 81 padding: 7px 0; |
| ckridgway@53 | 82 color: #666; |
| ckridgway@53 | 83 } |
| ckridgway@53 | 84 |
| ckridgway@53 | 85 /*auto controls*/ |
| ckridgway@53 | 86 .bx-auto { |
| ckridgway@53 | 87 text-align: center; |
| ckridgway@53 | 88 padding-top: 7px; |
| ckridgway@53 | 89 } |
| ckridgway@53 | 90 |
| ckridgway@53 | 91 .bx-auto a { |
| ckridgway@53 | 92 color: #666; |
| ckridgway@53 | 93 font-size: 12px; |
| ckridgway@53 | 94 } |
| ckridgway@53 | 95 |
| ckridgway@53 | 96 |
| ckridgway@53 | 97 |
| ckridgway@53 | 98 |
| ckridgway@53 | 99 |
| ckridgway@53 | 100 |
| ckridgway@53 | 101 |
| ckridgway@53 | 102 |
| ckridgway@53 | 103 |
| ckridgway@53 | 104 |