design work on REMIE scenarii: pseudo-responsiveness (areas adjust to viewport size on page load), reworked AnnotationsList filter wording
--- a/server/src/remie/static/remie/css/style.css Fri Sep 09 11:01:58 2016 +0200
+++ b/server/src/remie/static/remie/css/style.css Tue Sep 13 16:57:47 2016 +0200
@@ -5,12 +5,14 @@
html, body{
margin:0;
- padding:6px;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
#media_panel{
float:left;
+ width: calc(100% - 424px);
+ max-height: calc(100% - 12px);
+ padding: 6px;
}
.segment_title{
@@ -25,8 +27,7 @@
}
#player_container{
- height: 380px;
- width: 625px;
+ width: calc(100vw - 424px) !important;
}
.Ldt-Widget{
@@ -39,18 +40,13 @@
#info_panel{
float: left;
- height: 100%;
- margin-left: 15px;
- width: 512px;
+ padding: 6px;
+ width: 400px;
+ max-height: calc(100% - 12px);
}
/* -------- Override CurrentSegment style -------- */
-#LatestAnnotation_container{
- margin-top: 10px;
- margin-left: 40px;
-}
-
#CurrentSegmentInfobox_container .Ldt-CurrentSegmentInfobox,
#LatestAnnotation_container .Ldt-LatestAnnotation{
background: inherit;
@@ -60,6 +56,10 @@
display: table-cell;
}
+#CurrentSegmentInfobox_container .Ldt-CurrentSegmentInfobox{
+ width: 400px !important;
+}
+
#LatestAnnotation_container .Ldt-LatestAnnotation{
background-color: #F3F7F8;
}
@@ -80,6 +80,7 @@
.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Title{
color: #848484;
font-size:21px;
+ top: -1px;
}
.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Description{
font-weight: normal;
@@ -96,16 +97,14 @@
.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-NoSegment,
.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Title{
background-color: #F3F7F8 !important;
- position: relative;
border: none;
height: 40px;
line-height: 40px;
font-family: Open-Sans-Light;
- position: absolute;
- left: -655px;
- top: 437px;
- width: 560px;
- margin:0 0 0 40px;
+ position: relative;
+ top: -55px;
+ width: calc(100vw - 424px - 6px) !important;
+ margin:0px;
font-weight: normal;
text-indent:10px;
}
@@ -117,7 +116,11 @@
color: #ffffff;
}
-#CurrentSegmentInfobox_container.editing .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Title{
+.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-NoSegment{
+ border: solid 3px #C0C0C0 !important;
+}
+
+#CurrentSegmentInfobox-Title_container .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-TitleInput{
background: #ffffff !important;
border: 2px solid #848484;
}
@@ -128,7 +131,7 @@
bottom: 0;
height: 27px;
line-height: 27px;
- margin: 5px 5px 5px 0px
+ margin: 5px 5px 5px 0px;
width: 86px;
}
@@ -260,8 +263,15 @@
#LatestAnnotation_container{
- margin-top: 110px;
- width: 600px;
+ width: calc(100vw - 424px - 6px) !important;
+ position: relative;
+ top: -50px;
+}
+
+.Ldt-LatestAnnotation-Box{
+ margin: 0px !important;
+ padding: 3px !important;
+ width: calc(100vw - 424px) !important;
}
#LatestAnnotation_container .Ldt-LatestAnnotation-Box {
@@ -421,8 +431,8 @@
overflow: hidden;
}
li.Ldt-AnnotationsList-li.hash_selected{
- border-top: 2px solid #ffcc66;
- border-bottom: 2px solid #ffcc66;
+ border-top: 1px solid #ffcc66;
+ border-bottom: 1px solid #ffcc66;
background-color: #ffeecc !important;
}
@@ -489,19 +499,36 @@
.Ldt-AnnotationsList-li .Ldt-AnnotationsList-CreationDate{
float:left;
margin-right: 10px;
- width: 120px;
+}
+
+.Ldt-AnnotationsList-Filters{
+ height: 60px !important;
+ margin-bottom: 0;
+ font-family: Open-Sans-Light;
+ color: #848484;
+ font-weight: bold;
+ font-size: 13px;
+
+}
+
+.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-user-box{
+ display:inline-block;
+ float:left;
}
.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-dropdown{
border: 1px solid grey;
height: 25px;
- float: left;
margin: 0 1px;
width: 150px;
text-align: left;
text-indent: 5px;
}
+.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-latest-box{
+ display: inline-block;
+}
+
.Ldt-AnnotationsList-li h3.Ldt-AnnotationsList-Title {
display: inline-block;
float: right;
@@ -513,7 +540,7 @@
/* ----------------------------------------------- */
#player_container #player_container_widget_Segments_9{
- width: 560px !important;
+ width: calc(100vw - 424px - 80px) !important;
height: 50px !important;
margin: 8px 40px !important;
top: -55px;
@@ -552,7 +579,7 @@
#player_container_widget_Slider_3{
height: 15px;
margin: 5px 0 0 40px;
- width: 560px !important;
+ width: calc(100vw - 424px - 80px) !important;
}
#player_container_widget_Slider_3 .Ldt-Slider{
@@ -562,6 +589,7 @@
#player_container_widget_Controller_7 .Ldt-Ctrl{
background: none;
border: none;
+ width: calc(100vw - 424px) !important
}
.Ldt-Ctrl-Fullscreen-Button,
--- a/server/src/remie/static/remie/css/teacher.css Fri Sep 09 11:01:58 2016 +0200
+++ b/server/src/remie/static/remie/css/teacher.css Tue Sep 13 16:57:47 2016 +0200
@@ -78,19 +78,28 @@
/* ----- Filter style ----- */
.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-Filters{
- margin-top: 20px;
+ margin-top: 10px;
display: block;
padding-bottom: 38px;
}
-.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-date {
+.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-date-box{
+ display:inline-block;
+ float:left;
+ margin-left: 50px;
+}
+
+.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-date-label {
+ display:none;
+}
+
+.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-date-box {
background: rgba(0, 0, 0, 0) url("img/calendar.png") no-repeat scroll left center / 26px auto;
- text-indent: -100%;
white-space: nowrap;
display: inline-flex;
- padding-top: 1px;
height: 25px;
overflow: hidden;
+ padding-left: 30px;
}
.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-date .Ldt-AnnotationsList-dateFilter{
@@ -98,21 +107,25 @@
height: 25px;
}
+.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-text-box{
+ display:inline-block;
+ float:left;
+ margin: 5 0;
+}
+
.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-text{
- position: relative;
- float: right;
- top: 35px;
- background: rgba(0, 0, 0, 0) url("img/search.png") no-repeat scroll right center / 17px auto;
border: 1px solid grey;
height: 25px;
- width: 150px;
+ margin-left: 5px;
+ width: 150px;
}
-.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-checkbox {
- float: left;
- margin: 18px 0 0;
+.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-ignore-segments-box{
+ display:inline-block;
+ float:left;
+ margin: 5 0;
}
-.Ldt-AnnotationsList-filter-checkbox #Ldt-AnnotationsList-ignoreSegmentsFilter{
- margin-left: 0;
-}
+#Ldt-AnnotationsList-allSegmentFilter{
+ margin-left: 15px;
+}
\ No newline at end of file
--- a/server/src/remie/static/remie/metadataplayer/AnnotationsList.js Fri Sep 09 11:01:58 2016 +0200
+++ b/server/src/remie/static/remie/metadataplayer/AnnotationsList.js Tue Sep 13 16:57:47 2016 +0200
@@ -168,6 +168,7 @@
everyone: "Everyone",
header: "Annotations for this content",
segment_filter: "All cuttings",
+ segment_filter_active: "Segment actif",
latest_contributions: "Latest contributions",
close_widget: "Close",
confirm: "Confirm",
@@ -175,7 +176,11 @@
annotation_deletion_delete: "You will delete this annotation",
annotation_deletion_sending: "Your deletion request is being sent ... ",
annotation_deletion_success: "The annotation has been deleted.",
- annotation_deletion_error: "There was an error contacting the server. The annotation has not been deleted."
+ annotation_deletion_error: "There was an error contacting the server. The annotation has not been deleted.",
+ containing: "annotation containing",
+ from_user: "from",
+ filter_on: "filter on"
+
},
fr: {
voice_annotation: "Annotation Vocale",
@@ -191,9 +196,10 @@
confirm_publish_message: "Vous allez publier {{ annotation.title }}. Êtes-vous certain(e) ?",
tweet_annotation: "Tweeter l'annotation",
external_annotation: "Cette annotation a été postée sur un autre projet",
- everyone: "Tous",
+ everyone: "Tout le monde",
header: "Annotations sur ce contenu",
- segment_filter: "Tous les segments",
+ segment_filter: "tous les segments",
+ segment_filter_active: "segment actif",
latest_contributions: "Dernières contributions",
close_widget: "Fermer",
confirm: "Confirmer",
@@ -201,7 +207,10 @@
annotation_deletion_delete: "Vous allez supprimer cette annotation",
annotation_deletion_sending: "Votre demande de suppression est en cours d'envoi ... ",
annotation_deletion_success: "L'annotation a été supprimée.",
- annotation_deletion_error: "Une erreur s'est produite en contactant le serveur. L'annotation n'a pas été supprimée."
+ annotation_deletion_error: "Une erreur s'est produite en contactant le serveur. L'annotation n'a pas été supprimée.",
+ containing: "Filtrer annotation contenant",
+ from_user: "De",
+ filter_on: "Sur"
}
};
@@ -214,11 +223,11 @@
+ '<div class="Ldt-AnnotationsList-ScreenMain">'
+ '{{#show_filters}}'
+ '<div class="Ldt-AnnotationsList-Filters">'
- + '{{#keyword_filter}}<input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input>{{/keyword_filter}}'
- + '{{#user_filter}}<select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select>{{/user_filter}}'
- + '{{#date_filter}}<label class="Ldt-AnnotationsList-filter-date">Date: <input id="Ldt-AnnotationsList-dateFilter" type="text"></input></label>{{/date_filter}}'
- + '{{#segment_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-ignoreSegmentsFilter">{{l10n.segment_filter}}</label>{{/segment_filter}}'
- + '{{#latest_contributions_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-latestContributionsFilter">{{l10n.latest_contributions}}</label>{{/latest_contributions_filter}}'
+ + '{{#user_filter}}<div class="Ldt-AnnotationsList-filter-user-box"><label class="Ldt-AnnotationsList-filter-user-label">{{l10n.from_user}}</label> <select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select></div>{{/user_filter}}'
+ + '{{#date_filter}}<div class="Ldt-AnnotationsList-filter-date-box"><label class="Ldt-AnnotationsList-filter-date-label">Date: </label><input id="Ldt-AnnotationsList-dateFilter" type="text"></input></div>{{/date_filter}}'
+ + '{{#segment_filter}}<div class="Ldt-AnnotationsList-filter-ignore-segments-box"><label class="Ldt-AnnotationsList-ignore-segments-label">{{l10n.filter_on}}</label> <label class="Ldt-AnnotationsList-filter-checkbox"><input type="radio" name="ignoresegments" id="Ldt-AnnotationsList-activeSegmentsFilter" checked>{{l10n.segment_filter_active}}<input type="radio" name="ignoresegments" id="Ldt-AnnotationsList-allSegmentFilter">{{l10n.segment_filter}}</input></label></div>{{/segment_filter}}'
+ + '{{#keyword_filter}}<div class="Ldt-AnnotationsList-filter-text-box"><label class="Ldt-AnnotationsList-filter-text-label">{{l10n.containing}}</label><input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input></div>{{/keyword_filter}}'
+ + '{{#latest_contributions_filter}}<div class="Ldt-AnnotationsList-latest-box"><label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-latestContributionsFilter">{{l10n.latest_contributions}}</label></div>{{/latest_contributions_filter}}'
+ '</div>'
+ '{{/show_filters}}'
+ '{{#show_controls}}<div class="Ldt-AnnotationsList-Controls"><span class="Ldt-AnnotationsList-Control-Prev">{{ l10n.previous }}</span> | <span class="Ldt-AnnotationsList-Control-Next">{{ l10n.next }}</span></div>{{/show_controls}}'
@@ -426,7 +435,7 @@
return _annotation.found !== false;
});
- if ((this.filter_by_segments)&&(!(this.show_filters && this.segment_filter && this.ignoresegmentcheckbox_$[0].checked))) {
+ if ((this.filter_by_segments)&&(!(this.show_filters && this.segment_filter && this.allsegmentradio_$[0].checked))) {
/*
* A given annotation is considered "in" segment if the middle of it is between the segment beginning and the segment end.
* Note this is meant to be used for "markings" annotations (not segments)
@@ -1130,8 +1139,12 @@
}
if (this.segment_filter){
- this.ignoresegmentcheckbox_$ = this.$.find("#Ldt-AnnotationsList-ignoreSegmentsFilter");
- this.ignoresegmentcheckbox_$.click(function(){
+ this.allsegmentradio_$ = this.$.find("#Ldt-AnnotationsList-allSegmentFilter");
+ this.allsegmentradio_$.click(function(){
+ _this.player.trigger("AnnotationsList.refresh");
+ });
+ this.activesegmentradio_$ = this.$.find("#Ldt-AnnotationsList-activeSegmentFilter");
+ this.activesegmentradio_$.click(function(){
_this.player.trigger("AnnotationsList.refresh");
});
}
--- a/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js Fri Sep 09 11:01:58 2016 +0200
+++ b/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js Tue Sep 13 16:57:47 2016 +0200
@@ -18,13 +18,14 @@
show_headers: false,
custom_edit_text: false,
empty_description_placeholder: false,
+ custom_title_container: false,
};
IriSP.Widgets.CurrentSegmentInfobox.prototype.template =
'<div class="Ldt-CurrentSegmentInfobox">'
+ '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">'
+ '{{#editable_segments}}<div class="Ldt-CurrentSegmentInfobox-EditButton">{{edit}}</div>{{/editable_segments}}'
- + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>'
+ + '{{^custom_title_container}}<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>{{/custom_title_container}}'
+ '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>'
+ '{{^description}}{{^tags.length}}{{#description_placeholder}}<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description-placeholder">{{description_placeholder}}</div>{{/description_placeholder}}{{/tags.length}}{{/description}}'
+ '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
@@ -47,7 +48,7 @@
'<div class="Ldt-CurrentSegmentInfobox">'
+ '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">'
+ '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-FieldsHeader">{{fields_header}}</div>{{/headers}}'
- + '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>'
+ + '{{^custom_title_container}}<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>{{/custom_title_container}}'
+ '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>'
+ '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
+ '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-TagsHeader">{{tags_header}}</div>{{/headers}}'
@@ -102,9 +103,15 @@
this.segments = this.getWidgetAnnotations();
this.renderTemplate();
this.currentSegment = false;
+ console.log(this.custom_title_container)
+ if(this.custom_title_container){
+ this.title_$ = $("#"+this.custom_title_container)
+ console.log(this.title_$)
+ }
this.clearBox();
this.refresh();
this.onMediaEvent("timeupdate", "refresh");
+
this.onMediaEvent("settimerange", function(_timeRange){
var _segmentBegin = _timeRange[0],
_segmentEnd = _timeRange[1],
@@ -121,9 +128,13 @@
title: _this.currentSegment.title,
description : _this.currentSegment.description,
description_placeholder : _this.empty_description_placeholder,
- tags : _this.currentSegment.getTagTexts()
+ tags : _this.currentSegment.getTagTexts(),
+ custom_title_container : _this.custom_title_container
}
_this.$.html(Mustache.to_html(_this.template, _data))
+ if(_this.custom_title_container){
+ _this.title_$.html('<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">'+_this.currentSegment.title+'</div>');
+ }
if(_this.editable_segments&&_this.currentSegment){
_this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));
}
@@ -151,9 +162,13 @@
new_tag : this.l10n.new_tag,
delete_tag : this.l10n.delete_tag,
new_tag_button : this.new_tag_button,
+ custom_title_container : this.custom_title_container
}
this.$.toggleClass("editing", true);
this.$.html(Mustache.to_html(this.editTemplate, _data));
+ if(this.custom_title_container){
+ this.title_$.html('<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="'+_this.currentSegment.title+'"></input>');
+ }
this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(this.functionWrapper("disableEditMode"));
if (this.new_tag_button){
this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput"));
@@ -174,10 +189,14 @@
title: this.currentSegment.title,
description : this.currentSegment.description,
description_placeholder : this.empty_description_placeholder,
- tags : this.currentSegment.getTagTexts()
+ tags : this.currentSegment.getTagTexts(),
+ custom_title_container : this.custom_title_container
}
this.$.toggleClass("editing", false);
this.$.html(Mustache.to_html(this.template, _data));
+ if(this.custom_title_container){
+ this.title_$.html('<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">'+this.currentSegment.title+'</div>');
+ }
this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode"));
}
}
@@ -221,8 +240,13 @@
return $(this).val()
}
});
- new_title = this.$.find(".Ldt-CurrentSegmentInfobox-TitleInput").val()
- new_description = this.$.find(".Ldt-CurrentSegmentInfobox-DescriptionInput").val()
+ if(this.custom_title_container){
+ new_title = this.title_$.find(".Ldt-CurrentSegmentInfobox-TitleInput").val();
+ }
+ else {
+ new_title = this.$.find(".Ldt-CurrentSegmentInfobox-TitleInput").val();
+ }
+ new_description = this.$.find(".Ldt-CurrentSegmentInfobox-DescriptionInput").val();
var _this = this,
_exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* We create an Annotations List to send to the server */
@@ -279,9 +303,13 @@
title: _this.currentSegment.title,
description : _this.currentSegment.description,
description_placeholder : _this.empty_description_placeholder,
- tags : _this.currentSegment.getTagTexts()
+ tags : _this.currentSegment.getTagTexts(),
+ custom_title_container : _this.custom_title_container
}
_this.$.html(Mustache.to_html(_this.template, _data))
+ if(_this.custom_title_container){
+ _this.title_$.html('<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">'+_this.currentSegment.title+'</div>');
+ }
if(_this.editable_segments&&_this.currentSegment){
_this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));
}
@@ -310,9 +338,13 @@
title: this.currentSegment.title,
description : this.currentSegment.description,
description_placeholder : this.empty_description_placeholder,
- tags : this.currentSegment.getTagTexts()
+ tags : this.currentSegment.getTagTexts(),
+ custom_title_container: this.custom_title_container
}
this.$.html(Mustache.to_html(this.template, _data))
+ if(this.custom_title_container){
+ this.title_$.html('<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">'+this.currentSegment.title+'</div>');
+ }
if(this.editable_segments&&this.currentSegment){
this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode"));
}
@@ -330,5 +362,12 @@
if (this.empty_message) {
_empty_message = this.empty_message
}
- this.$.find(".Ldt-CurrentSegmentInfobox").html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>");
+ if (this.custom_title_container){
+ this.$.find(".Ldt-CurrentSegmentInfobox").html("");
+ this.title_$.html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>");
+ }
+ else {
+ this.$.find(".Ldt-CurrentSegmentInfobox").html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>");
+ }
+
}
\ No newline at end of file
--- a/server/src/remie/templates/remie/iframe_hash.html Fri Sep 09 11:01:58 2016 +0200
+++ b/server/src/remie/templates/remie/iframe_hash.html Tue Sep 13 16:57:47 2016 +0200
@@ -36,7 +36,7 @@
scenario_url = markers_preview_url;
break;
}
- final_url = "http://127.0.0.1:8001"+scenario_url+"?project_id={{project_id}}"+hash;
+ final_url = scenario_url+"?project_id={{project_id}}"+hash;
$("#remie_workunit_iframe").attr("src", final_url);
});
</script>
@@ -45,7 +45,7 @@
<div>
<h3>Passing hash to iframe</h3>
</div>
-<iframe id="remie_workunit_iframe" width="1191" height="625" src=""></iframe>
+<iframe id="remie_workunit_iframe" width="{{iframe_width}}" height="{{iframe_height}}" src=""></iframe>
</body>
</html>
\ No newline at end of file
--- a/server/src/remie/templates/remie/iframe_segments_group.html Fri Sep 09 11:01:58 2016 +0200
+++ b/server/src/remie/templates/remie/iframe_segments_group.html Tue Sep 13 16:57:47 2016 +0200
@@ -8,6 +8,7 @@
<div id="remie_player_container">
<div id="media_panel">
<div id="player_container"></div>
+ <div id="CurrentSegmentInfobox-Title_container"></div>
<div id="LatestAnnotation_container"></div>
</div>
<div id="info_panel">
@@ -66,8 +67,7 @@
default_type: "AdaptivePlayer",
autostart: false,
adapt_to_device: true,
- height: 360,
- width: 640
+ width: window.innerWidth - 424
},{
type: "Slider"
},{
@@ -150,7 +150,8 @@
segment_filter: false,
latest_contributions_filter: true,
show_header: true,
- custom_header: "Travail du groupe",
+ custom_header: "Lister les annotations",
+ annotations_count_header: false,
annotations_count_header_string: "annotations sur ce segment",
limit_count: false,
start_visible: false,
@@ -165,7 +166,7 @@
}
return display_string;
},
- widget_max_height: 350
+ widget_max_height: window.innerHeight - 25 - 38 - 39 - 12 - 5 - 150
},{
type: "LatestAnnotation",
annotation_type: "user_",
@@ -185,13 +186,17 @@
}
return display_string;
},
+ widget_max_height: window.innerHeight - 25 - 38 - 39 - 12 - 5 - 150
},{
type: "CurrentSegmentInfobox",
annotation_type: "découpage",
container: "CurrentSegmentInfobox_container",
empty_message: "Clique sur un segment pour ouvrir le chapitre",
pause_on_segment_end: true,
- empty_description_placeholder: "Pas de consigne sur ce segment ..."
+ empty_description_placeholder: "Pas de consigne sur ce segment ...",
+ custom_title_container: "CurrentSegmentInfobox-Title_container"
+ },{
+ type: "Mediafragment"
}
]
--- a/server/src/remie/templates/remie/iframe_segments_preview.html Fri Sep 09 11:01:58 2016 +0200
+++ b/server/src/remie/templates/remie/iframe_segments_preview.html Tue Sep 13 16:57:47 2016 +0200
@@ -8,6 +8,7 @@
<div id="remie_player_container">
<div id="media_panel">
<div id="player_container"></div>
+ <div id="CurrentSegmentInfobox-Title_container"></div>
<div id="LatestAnnotation_container"></div>
</div>
<div id="info_panel">
@@ -66,8 +67,7 @@
default_type: "AdaptivePlayer",
autostart: false,
adapt_to_device: true,
- height: 360,
- width: 640
+ width: window.innerWidth - 424
},{
type: "Slider"
},{
@@ -161,7 +161,7 @@
}
return display_string;
},
- widget_max_height: 350
+ widget_max_height: window.innerHeight - 25 - 38 - 39 - 12 - 5 - 150
},{
type: "LatestAnnotation",
annotation_type: "user_",
@@ -188,7 +188,8 @@
empty_message: "Clique sur un segment pour ouvrir le chapitre",
pause_on_segment_end: true,
empty_description_placeholder: "Pas de consigne sur ce segment ..."
- }{
+ custom_title_container: "CurrentSegmentInfobox-Title_container"
+ },{
type: "Mediafragment"
},
--- a/server/src/remie/templates/remie/iframe_segments_single.html Fri Sep 09 11:01:58 2016 +0200
+++ b/server/src/remie/templates/remie/iframe_segments_single.html Tue Sep 13 16:57:47 2016 +0200
@@ -8,6 +8,7 @@
<div id="remie_player_container">
<div id="media_panel">
<div id="player_container"></div>
+ <div id="CurrentSegmentInfobox-Title_container"></div>
<div id="LatestAnnotation_container"></div>
</div>
<div id="info_panel">
@@ -65,8 +66,7 @@
},
default_type: "AdaptivePlayer",
autostart: false,
- height: 360,
- width: 640
+ width: window.innerWidth - 424
},{
type: "Slider"
},{
@@ -160,7 +160,7 @@
}
return display_string;
},
- widget_max_height: 350
+ widget_max_height: window.innerHeight - 25 - 38 - 39 - 12 - 5 - 150
},{
type: "LatestAnnotation",
annotation_type: "user_{% if not group_mode %}{{current_user}}{% endif %}",
@@ -185,15 +185,18 @@
annotation_type: "découpage",
container: "CurrentSegmentInfobox_container",
empty_message: "Clique sur un segment pour ouvrir le chapitre",
- empty_description_placeholder: "Pas de consigne sur ce segment ..."
+ empty_description_placeholder: "Pas de consigne sur ce segment ...",
+ custom_title_container: "CurrentSegmentInfobox-Title_container"
}
]
}
-
+
_myPlayer = new IriSP.Metadataplayer(_config);
-
- </script>
+
+ </script>
</div>
+<script>
+</script>
</body>
</html>
\ No newline at end of file
--- a/server/src/remie/templates/remie/iframe_teacher.html Fri Sep 09 11:01:58 2016 +0200
+++ b/server/src/remie/templates/remie/iframe_teacher.html Tue Sep 13 16:57:47 2016 +0200
@@ -9,6 +9,7 @@
<div id="remie_player_container">
<div id="media_panel">
<div id="player_container"></div>
+ <div id="CurrentSegmentInfobox-Title_container"></div>
<div id="LatestAnnotation_container"></div>
</div>
<div id="info_panel">
@@ -65,8 +66,7 @@
},
default_type: "AdaptivePlayer",
autostart: false,
- height: 360,
- width: 640
+ width: window.innerWidth - 424
},{
type: "Slider"
},{
@@ -145,7 +145,8 @@
show_header: true,
show_title: false,
show_creator: true,
- custom_header: "Travail du groupe",
+ custom_header: "Lister les annotations",
+ annotations_count_header: false,
annotations_count_header_string: "annotations sur ce segment",
limit_count: false,
start_visible: false,
@@ -164,7 +165,7 @@
}
return display_string;
},
- widget_max_height: 350
+ widget_max_height: window.innerHeight - 25 - 38 - 39 - 12 - 5 - 150
},{
type: "LatestAnnotation",
annotation_type: "user_",
@@ -196,6 +197,7 @@
show_headers: true,
custom_edit_text : "Editer ce segment",
empty_description_placeholder: "Informations associées au segment (titre, consigne, mots-clés, ...)",
+ custom_title_container: "CurrentSegmentInfobox-Title_container"
}
]
--- a/server/src/remie/views.py Fri Sep 09 11:01:58 2016 +0200
+++ b/server/src/remie/views.py Tue Sep 13 16:57:47 2016 +0200
@@ -21,6 +21,16 @@
def get(self, request):
project_id = request.GET.get("project_id", "") # id of the project we're working on
scenario = request.GET.get("scenario", "segments_single") # scenario to put in iframe
+ iframe_width = request.GET.get("w", "1024")
+ if not iframe_width.isdigit():
+ iframe_width = 1024
+ else:
+ iframe_width = int(iframe_width)
+ iframe_height = request.GET.get("h", "768")
+ if not iframe_height.isdigit():
+ iframe_height = 768
+ else:
+ iframe_height = int(iframe_height)
if scenario not in ["segments_single", "segments_group", "teacher", "markers", "segments_preview", "markers_preview"]:
scenario = "segments_single"
current_user = request.user
@@ -28,6 +38,8 @@
"scenario": scenario,
"project_id": project_id,
"current_user": current_user.username,
+ "iframe_width": iframe_width,
+ "iframe_height": iframe_height
}
return render_to_response(self.template_name, render_data, context_instance=RequestContext(request))