From 3d01f870db54a615dce629a89b24b87632865571 Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@openerp.com>
Date: Mon, 2 Dec 2013 15:13:15 +0100
Subject: [PATCH] [IMP] website_event_track: sponsor layout

bzr revid: chm@openerp.com-20131202141315-0j2b5lj5rr7yar3u
---
 .../static/src/css/website_event_track.css    | 54 +++++++++++++++++++
 .../views/website_event.xml                   | 12 ++++-
 2 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 addons/website_event_track/static/src/css/website_event_track.css

diff --git a/addons/website_event_track/static/src/css/website_event_track.css b/addons/website_event_track/static/src/css/website_event_track.css
new file mode 100644
index 00000000000..7862175ec27
--- /dev/null
+++ b/addons/website_event_track/static/src/css/website_event_track.css
@@ -0,0 +1,54 @@
+.ribbon-wrapper {
+  width: 60px;
+  height: 60px;
+  z-index: 5;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.ribbon {
+  font: bold 13px Sans-Serif;
+  color: #404040;
+  text-align: center;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  position: relative;
+  padding: 5px 0;
+  left: -4px;
+  top: 8px;
+  width: 90px;
+  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
+}
+
+.ribbon.ribbon_Gold {
+  background-color: #FDE21B;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#E9CE0C), to(#FDE21B));
+  background-image: -webkit-linear-gradient(top, #E9CE0C, #FDE21B);
+  background-image: -moz-linear-gradient(top, #E9CE0C, #FDE21B);
+  background-image: -ms-linear-gradient(top, #E9CE0C, #FDE21B);
+  background-image: -o-linear-gradient(top, #E9CE0C, #FDE21B);
+}
+
+.ribbon.ribbon_Silver {
+  background-color: #CCCCCC;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(#CCCCCC));
+  background-image: -webkit-linear-gradient(top, #BBBBBB, #CCCCCC);
+  background-image: -moz-linear-gradient(top, #BBBBBB, #CCCCCC);
+  background-image: -ms-linear-gradient(top, #BBBBBB, #CCCCCC);
+  background-image: -o-linear-gradient(top, #BBBBBB, #CCCCCC);
+}
+
+.ribbon.ribbon_Bronze {
+  background-color: #DB9141;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#C2792A), to(#DB9141));
+  background-image: -webkit-linear-gradient(top, #C2792A, #DB9141);
+  background-image: -moz-linear-gradient(top, #C2792A, #DB9141);
+  background-image: -ms-linear-gradient(top, #C2792A, #DB9141);
+  background-image: -o-linear-gradient(top, #C2792A, #DB9141);
+}
diff --git a/addons/website_event_track/views/website_event.xml b/addons/website_event_track/views/website_event.xml
index 10ba00770a4..c11547941ec 100644
--- a/addons/website_event_track/views/website_event.xml
+++ b/addons/website_event_track/views/website_event.xml
@@ -36,6 +36,12 @@
     </template>
 
     <template name="Sponsors" id="event_sponsor" inherit_option_id="website_event.layout" inherit_id="website_event.layout">
+        <xpath expr="//t[@t-call='website.layout']" position="inside">
+            <t t-set="head">
+                <link rel='stylesheet' href='/website_event_track/static/src/css/website_event_track.css'/>
+                <t t-raw="head or ''"/>
+            </t>
+        </xpath>
         <xpath expr="//div[@id='wrap']" position="inside">
             <div class="container mt32 mb16" t-if="event.sponsor_ids">
                 <section data-snippet-id="title">
@@ -43,11 +49,13 @@
                 </section>
                 <div class="row">
                     <div t-attf-class="col-md-#{(len(event.sponsor_ids) > 6) and 2 or (12/ len(event.sponsor_ids))} text-center" t-foreach="event.sponsor_ids" t-as="sponsor">
-                        <a href="sponsor.partner_id.website or '#'">
+                        <a href="sponsor.partner_id.website or '#'" style="position: relative; display: inline-block;">
                             <span t-field="sponsor.partner_id.image"
                                 t-field-options='{"widget": "image", "class": "shadow"}'/>
+                            <div class="ribbon-wrapper">
+                                <div t-field="sponsor.sponsor_type_id" t-attf-class="ribbon ribbon_#{sponsor.sponsor_type_id.name}"/>
+                            </div>
                         </a>
-                        <span t-field="sponsor.sponsor_type_id"/>
                     </div>
                 </div>
             </div>