# HG changeset patch # User durandn # Date 1473778667 -7200 # Node ID d43988308765a63106ffeb66c580cdbdaca6cc8e # Parent 1b539c9480f9dd4e1c58fda5b98c407b87a9a3be design work on REMIE scenarii: pseudo-responsiveness (areas adjust to viewport size on page load), reworked AnnotationsList filter wording diff -r 1b539c9480f9 -r d43988308765 server/src/remie/static/remie/css/style.css --- 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, diff -r 1b539c9480f9 -r d43988308765 server/src/remie/static/remie/css/teacher.css --- 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 diff -r 1b539c9480f9 -r d43988308765 server/src/remie/static/remie/metadataplayer/AnnotationsList.js --- 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 @@ + '