Download as
Browse Code »

Commit 32de32912fb53326a9556def3a86e4991de9c4ab

Authored by Leonardo Merlin
1 parent bc16df93
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Add featured event styles

Showing 3 changed files with 118 additions and 7 deletions   Show diff stats
src/app/pages/inicio/inicio.html
  Diff comments   View file @32de329
... ... @@ -2,7 +2,7 @@
2 2 <section class="section-video">
3 3 <div class="container">
4 4 <div class="row">
5   - <div class="col-sm-8" ng-class="{'col-sm-offset-2': !pageInicio.featuredEvent}">
  5 + <div class="col-md-8" ng-class="{'col-md-offset-2': !pageInicio.featuredEvent}">
6 6 <div class="video-player js-youtube">
7 7 <div class="embed-responsive embed-responsive-16by9">
8 8 <div class="js-iframe" ng-if="pageInicio.article.videoIsLoaded" ng-bind-html="pageInicio.article.abstractTrusted"></div>
... ... @@ -15,9 +15,25 @@
15 15 </div>
16 16 </div>
17 17 </div>
18   - <div class="col-sm-2" ng-if="pageInicio.featuredEvent">
19   - <div class="featured-event--box">
20   - Evento em destaque
  18 + <div class="col-md-4" ng-if="pageInicio.featuredEvent">
  19 + <div class="row">
  20 + <div class="featured-event--box">
  21 + <div class="box-top col-xs-12 col-sm-4 col-md-12">
  22 + <h2 class="box-title">Bate papo com <b>MINISTR@S</b></h2>
  23 + </div>
  24 + <div class="box-middle col-xs-12 col-sm-4 col-md-12">
  25 + <div class="video" style="background-image: url(/assets/images/event-video-area.png)">
  26 + </div>
  27 + </div>
  28 + <div class="box-bottom col-xs-12 col-sm-4 col-md-12">
  29 + <div class="date">DD/MM/YYYY</div>
  30 + <div class="live">AO VIVO</div>
  31 + <p>
  32 + Lorem ipsum dolor sit amet, mei at facete constituto partiendo et.
  33 + </p>
  34 + </div>
  35 + <div class="clearfix"></div>
  36 + </div>
21 37 </div>
22 38 </div>
23 39 </div>
... ...
src/app/pages/inicio/inicio.scss
  Diff comments   View file @32de329
... ... @@ -38,6 +38,97 @@
38 38 .input-group-btn {
39 39 background-color: #fff;
40 40 }
  41 +
  42 + .featured-event--box {
  43 + display: block;
  44 + position: relative;
  45 + background-color: #545454;
  46 + color: #fff;
  47 + border-radius: 5px;
  48 +
  49 + .box-top {
  50 + text-transform: uppercase;
  51 +
  52 + .box-title {
  53 + font-size: 28px;
  54 + }
  55 +
  56 + b {
  57 + color: #FFB91C;
  58 + }
  59 + }
  60 +
  61 + .box-middle {
  62 + margin: 0;
  63 + padding: 0;
  64 +
  65 + .video {
  66 + width: 100%;
  67 + min-height: 125px;
  68 + background-color: #4A4A0E;
  69 + background-size: cover;
  70 + background-position: center;
  71 + }
  72 + }
  73 +
  74 + .box-bottom {
  75 + position: relative;
  76 + padding: 10px 20px;
  77 +
  78 + .date {
  79 + font-weight: bold;
  80 + text-transform: uppercase;
  81 + }
  82 +
  83 + .live {
  84 + position: absolute;
  85 + top: 10px;
  86 + right: 10px;
  87 + width: 80px;
  88 + text-align: center;
  89 + font-weight: bold;
  90 +
  91 + color: #545454;
  92 + background-color: #FFB91C;
  93 +
  94 + border-radius: 20px;
  95 + }
  96 +
  97 + p { padding: 10px 0;}
  98 + }
  99 +
  100 + @media screen and (min-width: $screen-lg) {
  101 +
  102 + }
  103 +
  104 + @media screen and (min-width: $screen-md) {
  105 + // width: 223px;
  106 + width: 100%;
  107 + height: 338px;
  108 + }
  109 +
  110 + @media screen and (min-width: $screen-sm) and (max-width: $screen-md) {
  111 + width: 100%;
  112 + height: 125px;
  113 + margin: 30px 0 10px 0;
  114 + }
  115 +
  116 + @media screen and (min-width: $screen-xs) and (max-width: $screen-sm) {
  117 + margin: 30px 30px 10px 30px;
  118 +
  119 + .video {
  120 + height: 290px;
  121 + }
  122 + }
  123 +
  124 + @media screen and (max-width: $screen-xs) {
  125 + margin: 15px;
  126 +
  127 + .video {
  128 + height: 290px;
  129 + }
  130 + }
  131 + }
41 132 }
42 133  
43 134 .section-gray {
... ... @@ -60,6 +151,8 @@
60 151 .video-player {
61 152 position: relative;
62 153 border: 1px solid #333;
  154 + width: 600px;
  155 + margin: 0 auto;
63 156  
64 157 .video-background {
65 158 text-align: center;
... ... @@ -124,8 +217,10 @@
124 217 }
125 218 }
126 219  
127   - @media screen and (min-width: 992px) {
128   - width: 80%;
129   - margin: 0 auto;
  220 + // @media screen and ( min-width: $screen-md ) {
  221 + // width: 480px;
  222 + // }
  223 + @media screen and (max-width: $screen-md) {
  224 + width: 100%;
130 225 }
131 226 }
... ...
src/assets/images/event-video-area.png 0 → 100644
View file @32de329

174 KB