Merge pull request #204 from munen/feature/71926460/vr_ad_banner

Feature/71926460/vr ad banner

app/assets/stylesheets/talks.scss

@@ -600,6 +600,56 @@
       }
     }
   }
+  .vr-banner{
+    position: absolute;
+    padding: 16px 19px 20px 19px;
+    width: 210px;
+    right: -220px;
+    top: 0;
+    background: $brand-color-red;
+    @include box-shadow(2px, 2px, 2px, rgba(0,0,0,0.2));
+    @include transition(all, 0.1s, ease-in-out);
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.2),-1px -1px 2px rgba(0,0,0,0.2);
+    &:hover{
+      @include box-shadow(2px, 2px, 16px, rgba(0,0,0,0.8));
+      text-shadow: 1px 1px 2px rgba(0,0,0,0.4),-1px -1px 2px rgba(0,0,0,0.4);
+    }
+    a{
+      text-align: left;
+      h3{
+        display: inline-block;
+        border-bottom: 2px solid white;
+        color: white;
+        font-size: rem-calc(13);
+      }
+      p{
+        line-height: 1.4;
+        color:white;
+        margin-bottom: 0;
+        font-size: rem-calc(12);
+      }
+      span{
+        text-decoration:underline;
+      }
+    }
+    .close-x{
+      position: absolute;
+      top: 2px;
+      right: 6px;
+      color: white
+    }
+  }
+
+  #vr-banner-modal{
+    padding: 0;
+    img{
+      width: 100%;
+    }
+    .close-reveal-modal{
+      color: white;
+    }
+  }
+
 }
 
 // EXPLORE TALKS

app/views/talks/show.html.haml

@@ -1,3 +1,5 @@
+-# find states under angular/controllers/livepage.js.coffee
+
 - content_for :head do
   = render 'shared/social_meta_tags'
 - content_for :title do
@@ -11,14 +13,6 @@
 
 .layout-talk(ng-controller='Livepage' ng-cloak)
   .header-block(style="background-image: url(#{@talk.image.url})")
-
-    .talk-state.text-center
-      .span(ng-show='talkIsPrelive()')
-        = t('.talk_is_prelive')
-        .onHold(ng-show="countdownInSeconds < 0") talk is on hold, waiting to start
-      .span(ng-show='talkIsLive()') talk is live
-      .span(ng-show='talkIsPostlive()') talk is postlive
-
     .row.alert-box.alert.round(ng-show='!hasFlash() && talkIsLive()')
       #flash_error= t('require_flash')
     - if @talk.related_talk
@@ -112,7 +106,21 @@
                 = link_to '#', title: t('.plays', count: @talk.play_count) do
                   %span.icon-play
                   = @talk.play_count
+      - if current_user.guest?
+        .vr-banner.hide-for-small
+          = link_to '#', 'data-reveal-id' => "vr-banner-modal" do
+            %h3
+              = t('.banner_title')
+            %p
+              = raw t('.banner_text')
+
+          %a.close-x(data-toggle-stuff=".vr-banner")
+            = raw '&times;'
 
+        #vr-banner-modal.reveal-modal(data-reveal)
+          = image_tag 'vr_infografic.png'
+          = link_to '#', class: "close-reveal-modal" do 
+            &#215;
 
     .talk-countdown.row(ng-show='talkIsPrelive()')
       .medium-12.columns.text-center

config/locales/en.yml

@@ -794,6 +794,14 @@ en:
       participants: Participants
       plays: '%{count} plays'
       edit_talk: Edit Talk
+      banner_title: WHAT IS VOICE REPUBLIC?
+      banner_text: |
+        Voice Republic is a tool for the creation and distribution of audio content on the Internet.
+        <br />
+        Users are invited not just to listen to talks and debates, but also to talk to each other and get involved.
+        <br />
+        We want to encourage the free exchange of ideas, knowledge and opinions on the Net.
+        <span>More...</span>
     new:
       title: "VR New Talk"
       new_talk: New Talk

db/schema.rb

@@ -199,8 +199,8 @@
     t.integer  "duration",           default: 30
     t.string   "image_uid"
     t.text     "session"
-    t.text     "audio_formats",      default: "--- []\n"
     t.datetime "featured_from"
+    t.text     "audio_formats",      default: "--- []\n"
     t.string   "state"
     t.datetime "started_at"
     t.datetime "processed_at"