BugFix :

+ Corrects a bug when there are both video chapters and enrichments, causing chapter being masked by enrichments. + Corrects a bug causing rich text lists (li) inside enrichments behing hidden by css Accessibility : + correct colors used for enrichments types (replace yellow by orange, and add contrast to blue and green. now use css --vars) + correct some tables (add scopes on th and titles on empty th) Other : + some code formatting + remove unwanted </style> in video_edit.html
EsupPortail · May 11, 2021 · be823bc · be823bc
1 parent f6d65a8
commit be823bc
Show file tree

Hide file tree

Showing 19 changed files with 208 additions and 181 deletions.
diff --git a/manage.py b/manage.py
@@ -1,4 +1,21 @@
 #!/usr/bin/env python
+"""Esup-Pod management program."""
+
+# This file is part of Esup-Pod.
+#
+# Esup-Pod is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Lesser General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# Esup-Pod is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+# See the GNU Lesser General Public License for more details.
+#
+# You should have received a copy of the GNU Lesser General Public License
+# along with Esup-Pod. If not, see <https://www.gnu.org/licenses/>.
+
 import os
 import sys
 

diff --git a/pod/chapter/forms.py b/pod/chapter/forms.py
@@ -35,7 +35,7 @@ def __init__(self, *args, **kwargs):
                     'class'] = 'form-control required'
                 label_unicode = u'{0}'.format(self.fields[myField].label)
                 self.fields[myField].label = mark_safe(
-                    '{0} <span class=\"special_class\">*</span>'.format(
+                    '{0} <span class=\"required_star\">*</span>'.format(
                         label_unicode))
             else:
                 self.fields[myField].widget.attrs['class'] = 'form-control'

diff --git a/pod/chapter/static/css/chapters.css b/pod/chapter/static/css/chapters.css
@@ -1,7 +1,3 @@
-.form-help-inline,
-.special_class {
-	color: red;
-}
 
 /*** Table scroll ***/
 table.scroll {

diff --git a/pod/chapter/static/css/videojs-chapters.css b/pod/chapter/static/css/videojs-chapters.css
@@ -5,10 +5,12 @@
 	top: 0;
 	height: 100%;
 	width: 20%;
-	background-color: rgba(43,51,63,0.7);
+	background-color: rgba(43,51,63,.7);
 	overflow-y: auto;
 	/*border: 2px solid black;*/
 	cursor: default;
+	z-index: 2;
+
 }
 .chapters-list.inactive {
 	display: none;

diff --git a/pod/chapter/static/js/videojs-chapters.js b/pod/chapter/static/js/videojs-chapters.js
@@ -18,7 +18,7 @@
 		 */
 		var MenuButton = videojs.getComponent('MenuButton');
 		var ChapterMenuButton = videojs.extend(MenuButton, {
-			constructor: function(player, options){ 
+			constructor: function(player, options){
 				options.label = gettext('Chapters');
 				MenuButton.call(this, player, options);
 				this.el().setAttribute('aria-label', gettext('Chapters'));
@@ -70,7 +70,7 @@
 						var newA = document.createElement('a');
 						newA.setAttribute('id', "chapter"+chapId);
 						newA.setAttribute('start', chapTime);
-						
+
 						var newTitle = document.createTextNode(chapTitle);
 						newA.appendChild(newTitle);
 						newLi.appendChild(newA);
@@ -83,7 +83,7 @@
 					var oldList  = document.getElementById('chapters');
 					var newList = document.getElementsByClassName('chapters-list inactive');
 					oldList.parentNode.removeChild(oldList);
-					$(newList).appendTo('#'+player.id());	
+					$(newList).appendTo('#'+player.id());
 				};
 
 				/**
@@ -149,7 +149,7 @@
 		videoJsChapters.prototype.dispose = function() {
 			Plugin.prototype.dispose.call(this);
 		};
-			
+
 		// Register the plugin
 		videojs.registerPlugin('videoJsChapters', videoJsChapters);
 	})(window, videojs);

diff --git a/pod/enrichment/static/css/videojs-slides.css b/pod/enrichment/static/css/videojs-slides.css
@@ -2,176 +2,176 @@
 .vjs-poster {z-index:2}
 .video-js .vjs-tech {padding:0 10px 0 10px}
 .vjs-slides {
-	display: block;
+  display: block;
 }
 .video-slides {
-	display: flex;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	bottom: 0px;
-	padding:0;
-}
-.video-slides li {
+  display: flex;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  bottom: 0;
+  padding:0;
+}
+.video-slides>li {
   background-size: contain;
-	background-position: center center;
-	background-repeat: no-repeat;
-	/*background-attachment: fixed;*/
-	display: none;
-	position: absolute;
-	left: 50%;
-	top: 15%;
-	bottom: 15%;
-	width: 50%;
-	padding: 0;
-	border-right:8px solid transparent;/*make margin for contain background-attachment*/
-	/*padding-bottom: 35px;*//*Works but maybe not usable because plyer menu is hidden duriong playing */
-}
-.video-slides li div {
-	height: 100%;
-	background-color: #fff;
-	color: #000;
-}
-.video-slides li img {
-	max-width: 100%;
-	-webkit-user-select: none;
+  background-position: center center;
+  background-repeat: no-repeat;
+  /*background-attachment: fixed;*/
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 15%;
+  bottom: 15%;
+  width: 50%;
+  padding: 0;
+  border-right:8px solid transparent;/*make margin for contain background-attachment*/
+  /*padding-bottom: 35px;*//*Works but maybe not usable because plyer menu is hidden duriong playing */
+}
+.video-slides>li>div {
+  height: 100%;
+  background-color: #fff;
+  color: #000;
+  padding: 1em;
+}
+.video-slides>li>img {
+  max-width: 100%;
+  -webkit-user-select: none;
 }
 /* Normal screen size */
 
 /********* Default *********/
 .vjs-tech {
-	width:50% !important;
-	height:100%;
+  width:50% !important;
+  height:100%;
 }
 
 /********* Pip slide -> pip-slide *********/
 .vjs-tech.pip-slide {
-	width:80% !important;
-	height:100%;
+  width:80% !important;
+  height:100%;
 }
 .video-slides li.pip-slide {
-	left: 80% !important;
-	top: 35% !important;
-	bottom: 35% !important;
-	width:20%;
+  left: 80% !important;
+  top: 35% !important;
+  bottom: 35% !important;
+  width:20%;
 }
 /*.pip-slide img {
-	height: 30% !important;
+  height: 30% !important;
 }
 .pip-slide div {
-	height: 50% !important;
+  height: 50% !important;
 }*/
 .video-slides li.pip-slide embed {
-	position: absolute;
-	right: 0;
-	width: 150%;
-	/*height: 50%;*/
+  position: absolute;
+  right: 0;
+  width: 150%;
+  /*height: 50%;*/
 }
 
 /********* Pip video -> big-slides *********/
 .vjs-tech.big-slide {
-	width:20% !important;
-	height:100%;
+  width:20% !important;
+  height:100%;
 }
 .video-slides li.big-slide {
-	position: relative !important;
-	width: 80%;
-	left: 20% !important;
-	top: 0 !important;
-	bottom: 0 !important;
+  position: relative !important;
+  width: 80%;
+  left: 20% !important;
+  top: 0 !important;
+  bottom: 0 !important;
 }
 .video-slides li.big-slide img {
-	height: 100%;
-	width: 100%;
-	/*padding-right: 5%;*/
+  height: 100%;
+  width: 100%;
+  /*padding-right: 5%;*/
 }
 .video-slides li.big-slide embed {
-	position: absolute;
-	height: 100%;
-	width: 90%;
-	left: 25px;
+  position: absolute;
+  height: 100%;
+  width: 90%;
+  left: 25px;
 }
 /********* Video off -> full-slide *********/
 .vjs-tech.full-slide {
-	display:none;
+  display:none;
 }
 .video-slides li.full-slide {
-	position: relative !important;
-	left: 0 !important;
-	top: 0 !important;
-	bottom: 0 !important;
-	padding: 0 !important;
-	width: 100%;
+  position: relative !important;
+  left: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  padding: 0 !important;
+  width: 100%;
 }
 .video-slides li.full-slide img {
-	height: 100%;
-	width: 100%;
+  height: 100%;
+  width: 100%;
 }
 .video-slides li.full-slide embed {
-	position: absolute;
-	height: 100%;
-	width: 90%;
-	left: 25px;
+  position: absolute;
+  height: 100%;
+  width: 90%;
+  left: 25px;
 }
 
 /********* Slide off -> no-slide *********/
 .vjs-tech.no-slide {
-	width:100% !important;
-	height:100%;
-	z-index: 1;
+  width:100% !important;
+  height:100%;
+  z-index: 1;
 }
 .video-slides li.no-slide {
-	z-index:-1;
+  z-index:-1;
 }
 
 /* Fullscreen */
 /*.vjs-fullscreen .video-slides img,
 .vjs-fullscreen .video-slides embed {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 .vjs-fullscreen li.pip-slide embed {
-	width: 150%;
-	height: 50%;
+  width: 150%;
+  height: 50%;
 }
 .vjs-fullscreen li.big-slide img {
-	height: 100%;
-	width: 100%;
+  height: 100%;
+  width: 100%;
 }
 .vjs-fullscreen li.big-slide embed {
-	position: absolute;
-	height: 100%;
-	width: 90%;
-	left: 50px;
+  position: absolute;
+  height: 100%;
+  width: 90%;
+  left: 50px;
 }
 .vjs-fullscreen li.full-slide img {
-	height: 100%;
-	width: 100%;
+  height: 100%;
+  width: 100%;
 }
 .vjs-fullscreen li.full-slide embed {
-	position: absolute;
-	height: 100%;
-	width: 90%;
-	left: 50px;
+  position: absolute;
+  height: 100%;
+  width: 90%;
+  left: 50px;
 }*/
 /* Slide bar */
 .vjs-chapbar {
-	color: red;
-	top: -0.5rem;
-	height: 100%;
-	position: relative;
-	background: rgba(100, 100, 100, 0.5);
+  color: red;
+  top: -0.5rem;
+  height: 100%;
+  position: relative;
+  background: rgba(100, 100, 100, 0.5);
 }
 .vjs-chapbar-holder {
-	height: 100%;
+  height: 100%;
 }
 .vjs-chapbar-chap {
-	height: 100%;
-	float: left;
-	width: 100%;
-	left: 0;
-	right: 0;
-	position: absolute;
-	background-color: #ffe800;
+  height: 100%;
+  float: left;
+  width: 100%;
+  left: 0;
+  right: 0;
+  position: absolute;
+  background-color: #ffe800;
 }
-
diff --git a/pod/enrichment/static/js/enrichment.js b/pod/enrichment/static/js/enrichment.js
@@ -2,9 +2,9 @@ var id_form = 'form_enrich';
 function show_form(data) {
     $('#'+id_form).hide().html(data).fadeIn();
     $("input#id_start")
-        .before("&nbsp;<span class='getfromvideo pull-right' style='margin-bottom:4px'><a id='getfromvideo_start' class='btn btn-primary btn-sm'>" + gettext('Get time from the player') + "</a><span class='timecode'></span></span>");
+        .before("&nbsp;<div class='getfromvideo pull-right mb-1'><a href='' id='getfromvideo_start' class='btn btn-primary btn-sm'>" + gettext('Get time from the player') + "</a><span class='timecode'></span></div>");
     $("input#id_end")
-        .before("&nbsp;<span class='getfromvideo pull-right' style='margin-bottom:4px'><a id='getfromvideo_end' class='btn btn-primary btn-sm'>" + gettext('Get time from the player') + "</a><span class='timecode'></span></span>");
+        .before("&nbsp;<div class='getfromvideo pull-right mb-1'><a href='' id='getfromvideo_end' class='btn btn-primary btn-sm'>" + gettext('Get time from the player') + "</a><span class='timecode'></span></div>");
     enrich_type();
 };
 
@@ -203,7 +203,7 @@ $(document).on('change','#page-video input#id_start',function() {
 $(document).on('change','#page-video input#id_end',function() {
     $(this).parent().find("span.getfromvideo span.timecode").html(" "+parseInt($(this).val()).toHHMMSS());
 });
-$(document).on('click','#page-video span.getfromvideo a',function(e) {
+$(document).on('click','#page-video .getfromvideo a',function(e) {
     e.preventDefault();
     if(!(typeof player === 'undefined')) {
         if($(this).attr('id') == "getfromvideo_start"){
@@ -336,4 +336,4 @@ function overlaptest(){
         return msg;
     }
     return true;
-};
+};