From 8d795ab78968a1f3e617fd4baba7fcb10e56a028 Mon Sep 17 00:00:00 2001
From: cdujeu <charles@ajaxplorer.info>
Date: Mon, 15 Sep 2014 19:46:02 +0200
Subject: [PATCH] Change tutorial look'n'feel. Use youtube thumbnail service to
 display thumb before playing videos.

---
 core/src/plugins/access.ajxp_home/home.css    | 26 ++++++++++---------
 .../src/plugins/access.ajxp_home/manifest.xml |  8 +++---
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/core/src/plugins/access.ajxp_home/home.css b/core/src/plugins/access.ajxp_home/home.css
index 3ce45022a9..02bba6d93b 100644
--- a/core/src/plugins/access.ajxp_home/home.css
+++ b/core/src/plugins/access.ajxp_home/home.css
@@ -292,18 +292,20 @@ div.legend_visible div#logo_div{
 }
 
 #videos_pane {
-    color: rgb(111,123,136);
-    background-color: #f8f8f8;
+    color: rgb(64, 68, 71);
+    background-color: rgba(248, 248, 248, 0.92);
     position: absolute;
-    top: 5%;
-    left: 5%;
-    width: 90%;
-    height: 90%;
-    border-radius: 10px;
+    top: 0;
+    right: 0;
+    width: 70%;
+    height: 100%;
+    border-radius: 0;
     overflow: auto;
-    opacity: 0.95;
-    box-shadow: 9px 6px 25px rgba(0,0,0,0.5);
+    opacity: 1;
+    box-shadow: -5px -8px 9px rgba(0, 0, 0, 0.36);
     display: none;
+    max-width: 930px;
+    -webkit-font-smoothing: antialiased;
 }
 
 #tutorials_pane h2{
@@ -321,15 +323,15 @@ div.legend_visible div#logo_div{
 .tutorial_legend{
     clear: left;
     float: left;
-    width: 30%;
+    width: 40%;
     margin-left: 5%;
     font-size: 14px;
     margin-top: 20px;
 }
 
 .tutorial_video{
-    width: 59%;
-    height: 350px;
+    width: 49%;
+    height: 300px;
     margin-top: 20px;
     margin-right: 5%;
     margin-bottom: 20px;
diff --git a/core/src/plugins/access.ajxp_home/manifest.xml b/core/src/plugins/access.ajxp_home/manifest.xml
index 6f994e1a2d..35241058d2 100644
--- a/core/src/plugins/access.ajxp_home/manifest.xml
+++ b/core/src/plugins/access.ajxp_home/manifest.xml
@@ -157,25 +157,25 @@
                         AJXP_MESSAGE[user_home.62]
                         <div class="tutorial_load_button"><i class="icon-youtube-play"></i> Play Video</div>
                     </div>
-                    <iframe class="tutorial_video" width="640" height="360" frameborder="0" src=""></iframe>
+                    <iframe class="tutorial_video" width="640" height="360" frameborder="0" allowfullscreen src="http://img.youtube.com/vi/C6L_9QT0lDE/0.jpg"></iframe>
 
                     <div class="tutorial_legend" data-videoSrc="//www.youtube.com/embed/Nj3d0AXfJXI?list=PLxzQJCqzktEYnIChsR5h3idjAxgBssnt5">
                         AJXP_MESSAGE[user_home.63]
                         <div class="tutorial_load_button"><i class="icon-youtube-play"></i> Play Video</div>
                     </div>
-                    <iframe class="tutorial_video" width="640" height="360" frameborder="0" src=""></iframe>
+                    <iframe class="tutorial_video" width="640" height="360" frameborder="0" allowfullscreen src="http://img.youtube.com/vi/Nj3d0AXfJXI/0.jpg"></iframe>
 
                     <div class="tutorial_legend" data-videoSrc="//www.youtube.com/embed/1o62QF_ATYA?list=PLxzQJCqzktEYnIChsR5h3idjAxgBssnt5">
                         AJXP_MESSAGE[user_home.64]
                         <div class="tutorial_load_button"><i class="icon-youtube-play"></i> Play Video</div>
                     </div>
-                    <iframe class="tutorial_video" width="640" height="360" frameborder="0" src=""></iframe>
+                    <iframe class="tutorial_video" width="640" height="360" frameborder="0" allowfullscreen src="http://img.youtube.com/vi/1o62QF_ATYA/0.jpg"></iframe>
 
                     <div class="tutorial_legend" src="//www.youtube.com/embed/ot2Nq-RAnYE?list=PLxzQJCqzktEYnIChsR5h3idjAxgBssnt5">
                         AJXP_MESSAGE[user_home.66]
                         <div class="tutorial_load_button"><i class="icon-youtube-play"></i> Play Video</div>
                     </div>
-                    <iframe width="640" height="360" class="tutorial_video" frameborder="0" allowfullscreen></iframe>
+                    <iframe width="640" height="360" class="tutorial_video" frameborder="0" allowfullscreen src="http://img.youtube.com/vi/ot2Nq-RAnYE/0.jpg"></iframe>
 
                     <div style="clear:left; text-align:center;">
                         <a href="http://pyd.io/end-user-tutorials/" target="_blank" style="text-align: center;font-size: 25px;background-color: #e35d52;padding: 10px;border-radius: 5px;color: white;display: inline-block;margin: 40px 0;"><i class="icon-youtube-play"></i> AJXP_MESSAGE[user_home.65]</a></div>