Single-column
authorveltr
Wed, 26 Jun 2013 11:13:10 +0200
changeset 64 3f480bb52daa
parent 63 e33b023002b2
child 65 1da0c1382b07
Single-column
player/css/styles.css
player/index.html
player/js/player.js
--- a/player/css/styles.css	Tue Jun 25 13:34:53 2013 +0200
+++ b/player/css/styles.css	Wed Jun 26 11:13:10 2013 +0200
@@ -85,6 +85,22 @@
     background: #000000; font-family: 'OpenSans'; font-weight: 400;
 }
 
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar:hover {
+    background: rgba(128,128,128,.2);
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(128,128,128,.4); width: 10px; border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(128,128,128,.6);
+}
+
 /* Top Bar */
 
 .top-bar {
@@ -320,7 +336,7 @@
 }
 
 .annotation {
-    position: absolute;
+    position: absolute; left: 50%;
 }
 
 .annotation-title {
@@ -332,7 +348,7 @@
 }
 
 .annotation {
-    left: 45px; top: 800px; right: 35px;
+    top: 800px; width: 920px; margin-left: -455px;
     transition: top 0.5s; -webkit-transition: top 0.5s;
 }
 
@@ -343,13 +359,13 @@
 /* Narrow annotations */
 
 .narrow-annotation {
-    left: 210px; right: 200px;
+    width: 590px; margin-left: -290px;
 }
 
 /* White annotations */
 
 .white-annotation {
-    background: #ffffff; max-height: 522px; overflow: auto;
+    background: #ffffff;
 }
 
 .white-annotation {
@@ -365,7 +381,7 @@
 }
 
 .white-annotation .annotation-title {
-    font-size: 23px; margin: 24px 0;
+    font-size: 23px; margin: 24px; line-height: 24px;
 }
 
 /* Black annotations */
@@ -393,10 +409,13 @@
 
 /* Text annotation */
 
-.text-contents {
+.text-contents, .link-contents {
     font-family: Georgia, 'Times New Roman', serif;
-    margin: 0 45px 35px; font-size: 15px;
-    
+    overflow: auto;
+}
+
+.text-contents {
+    margin: 0 25px 35px; font-size: 15px; padding: 0 20px 0;
 }
 
 .text-contents p, .text-contents ul, .text-contents ol {
@@ -459,7 +478,7 @@
 
 .link-contents {
     font-family: Georgia, 'Times New Roman', serif;
-    margin: 40px 80px 80px;
+    margin: 40px 60px 60px; padding: 0 20px 0;
 }
 
 .link-contents p {
--- a/player/index.html	Tue Jun 25 13:34:53 2013 +0200
+++ b/player/index.html	Wed Jun 26 11:13:10 2013 +0200
@@ -83,7 +83,7 @@
                     </ul>
                 </div>
                 
-                <div class="annotation text-annotation white-annotation">
+                <div class="annotation text-annotation white-annotation narrow-annotation">
                     <a href="#" class="close-annotation"></a>
                     <h2 class="annotation-title"></h2>
                     <div class="text-contents"></div>
--- a/player/js/player.js	Tue Jun 25 13:34:53 2013 +0200
+++ b/player/js/player.js	Wed Jun 26 11:13:10 2013 +0200
@@ -29,6 +29,14 @@
         }
     );
     
+    function preventRightClick(selector) {
+        selector.on("contextmenu", function() {
+            return false;
+        });
+    }
+    
+    preventRightClick($(".video-container video"));
+        
     $(".media-duration").text(myMedia.duration);
     
     myMedia.on("timeupdate", function(t) {
@@ -329,6 +337,7 @@
                         }).join("")
                     );
                     imgel.fadeTo(400, 1);
+                    preventRightClick(imgel);
                 }
                 
                 var nextImage = function() {
@@ -452,7 +461,7 @@
                             positionDiv();
                         }
                     });
-                    return;
+                    break;
                 }
                 
                 if (/^(https?:\/\/)?(www\.)?dailymotion/.test(src)) {
@@ -470,7 +479,7 @@
                             positionDiv();
                         }
                     });
-                    return;
+                    break;
                 }
                 
                 if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(src)) {
@@ -490,7 +499,7 @@
                             positionDiv();
                         }
                     });
-                    return;
+                    break;
                 }
                 
                 var extension = (src.match(/\.([\d\w]+)$/) || ["",""])[1],
@@ -514,8 +523,9 @@
                     positionDiv();
                 });
                 
+                preventRightClick(media);
+                
                 annotationDiv.find(".media-frame").html(media);
-                return;
                 
             break;
             
@@ -526,26 +536,6 @@
                 switch (annotationinfo.annotation.content.markup) {
                     case "html":
                         annotationDiv.find(".text-contents").html(text);
-
-                        var ps = annotationDiv.find(".text-contents>p"),
-                            groups = [],
-                            last, group;
-                        ps.each(function(i, e) {
-                            if (last && group && last.nextElementSibling === e) {
-                                group.contents.push(e);
-                            } else {
-                                group = {
-                                    master: e,
-                                    contents: [e.cloneNode(true)]
-                                }
-                                groups.push(group);
-                            }
-                            last = e;
-                        });
-                        groups.forEach(function(g) {
-                            $(g.master).replaceWith($('<div class="column-group">').append(g.contents));
-                        });
-
                     break;
                     default:
                         annotationDiv.find(".text-contents").html(
@@ -556,6 +546,10 @@
                     break;
                 }
                 annotationDiv.find(".text-contents a").attr("target","_blank");
+                annotationDiv.find(".text-contents").css({
+                    "max-height":
+                    $(".main-video").height() - 140
+                });
                 
             break;
             
@@ -565,12 +559,15 @@
                 
                 annotationDiv.find(".link-contents").html(
                     annotationinfo.annotation.content.links.map(linkTemplate).join("")
-                );
+                ).css({
+                    "max-height":
+                    $(".main-video").height() - 140
+                });
                 
             break;
         }
         
-        positionDiv(true);
+        positionDiv();
         
     }