add new unit page title TNL-5623

new bookmark button placement and look TNL-5625

common/lib/xmodule/xmodule/vertical_block.py

@@ -65,6 +65,7 @@ class VerticalBlock(SequenceFields, XModuleFields, StudioEditableBlock, XmlParse
         fragment.add_content(self.system.render_template('vert_module.html', {
             'items': contents,
             'xblock_context': context,
+            'unit_title': self.display_name_with_default,
             'show_bookmark_button': True,
             'bookmarked': child_context['bookmarked'],
             'bookmark_id': "{},{}".format(child_context['username'], unicode(self.location))

common/test/acceptance/pages/lms/courseware.py

@@ -267,6 +267,10 @@ class CoursewarePage(CoursePage):
         """ Return the course tree breadcrumb shown above the sequential bar """
         return [part.strip() for part in self.q(css='.path').text[0].split('>')]
 
+    def unit_title_visible(self):
+        """ Check if unit title is visible """
+        return self.q(css='.unit-title').visible
+
     def bookmark_button_visible(self):
         """ Check if bookmark button is visible """
         EmptyPromise(lambda: self.q(css='.bookmark-button').visible, "Bookmark button visible").fulfill()

lms/static/js/bookmarks/views/bookmark_button.js

@@ -6,7 +6,9 @@
                 errorMessage: gettext('An error has occurred. Please try again.'),
 
                 srAddBookmarkText: gettext('Click to add'),
+                bookmarkText: gettext('Bookmark this page'),
                 srRemoveBookmarkText: gettext('Click to remove'),
+                bookmarkedText: gettext('Bookmarked'),
 
                 events: {
                     'click': 'toggleBookmark'
@@ -85,10 +87,12 @@
                     if (bookmarked) {
                         this.$el.addClass('bookmarked');
                         this.$el.attr('aria-pressed', 'true');
+                        this.$el.find('.bookmark-text').text(this.bookmarkedText);
                         this.$el.find('.bookmark-sr').text(this.srRemoveBookmarkText);
                     } else {
                         this.$el.removeClass('bookmarked');
                         this.$el.attr('aria-pressed', 'false');
+                        this.$el.find('.bookmark-text').text(this.bookmarkText);
                         this.$el.find('.bookmark-sr').text(this.srAddBookmarkText);
                     }
                 },

lms/static/js/fixtures/bookmarks/bookmark_button.html

@@ -7,7 +7,7 @@
         aria-pressed="false"
         data-bookmark-id="bilbo,usage_1">
          <span class="sr bookmark-sr"></span>&nbsp;
-         Bookmark
+         <span class="bookmark-text">Bookmark this page</span>
         </button>
     </div>
 </div>

lms/static/sass/base/_headings.scss

@@ -121,5 +121,12 @@ $headings-base-color:                       $gray-d2;
         font-weight: $headings-font-weight-normal;
         // override external modules and xblocks that use inline CSS
         text-transform: initial;
+
+        &.unit-title {
+            margin-bottom: 0;
+            font-size: 1.5em;
+        }
     }
 }
+
+

lms/static/sass/course/courseware/_courseware.scss

@@ -22,9 +22,8 @@ html.video-fullscreen {
   overflow: hidden;
 
   &.studio-view {
-    position: relative;
-    top: -($baseline/2);
     margin: 0;
+    display: inline;
   }
 
   .instructor-info-action {

lms/static/sass/views/_bookmarks.scss

@@ -1,3 +1,6 @@
+$bookmark-icon: "\f097"; // .fa-bookmark-o
+$bookmarked-icon: "\f02e"; // .fa-bookmark
+
 // Rules for placing bookmarks and search button side by side
 .wrapper-course-modes {
   border-bottom: 1px solid $gray-l3;
@@ -25,7 +28,7 @@
     padding: ($baseline/4) ($baseline/2);
 
     &:before {
-      content: "\f02e";
+      content: $bookmarked-icon;
       font-family: FontAwesome;
     }
 
@@ -80,7 +83,7 @@
   }
 
   .bookmarks-results-list-item:before {
-    content: "\f02e";
+    content: $bookmarked-icon;
     position: relative;
     top: -7px;
     font-family: FontAwesome;
@@ -133,42 +136,34 @@
 .course-content {
 
    .bookmark-icon.bookmarked {
+    @include left($baseline / 4);
     top: -3px;
     position: absolute;
-    left: ($baseline/4);
   }
 
 
   // Rules for bookmark button's different styles
   .bookmark-button-wrapper {
-    text-align: right;
-    margin-bottom: 10px;
+    margin-bottom: ($baseline * 1.5);
   }
 
   .bookmark-button {
-    @extend %ui-clear-button;
-    @extend %btn-pl-default-base;
-    @include font-size(13);
-    padding: ($baseline/4) ($baseline/2);
 
     &:before {
-      content: "\f02e";
+      content: $bookmark-icon;
       font-family: FontAwesome;
     }
 
-    &.is-active {
-      background-color: lighten($action-primary-bg,10%);
-      color: $white;
-    }
-
     &.bookmarked {
-      background-color: lighten($action-primary-bg,10%);
-      color: $white;
-
       &:before {
-        content: "\f097";
-        font-family: FontAwesome;
+        content: $bookmarked-icon;
       }
     }
+
   }
+
+  .bookmark-sr {
+    @include margin-right($baseline / 4);
+  }
+
 }

lms/templates/bookmark_button.html

@@ -1,11 +1,11 @@
+<%page expression_filter="h" args="bookmark_id, is_bookmarked" />
 <%! from django.utils.translation import ugettext as _ %>
-<%page args="bookmark_id, is_bookmarked" />
 
 <div class="bookmark-button-wrapper">
-  <button class="btn bookmark-button ${"bookmarked" if is_bookmarked else ""}"
+  <button class="btn btn-link bookmark-button ${"bookmarked" if is_bookmarked else ""}"
     aria-pressed="${"true" if is_bookmarked else "false"}"
     data-bookmark-id="${bookmark_id}">
-     <span class="sr bookmark-sr">${_("Click to remove") if is_bookmarked else _("Click to add")}</span>&nbsp;
-     ${_("Bookmark")}
+     <span class="sr bookmark-sr">${_("Click to remove") if is_bookmarked else _("Click to add")}</span>
+     <span class="bookmark-text">${_("Bookmarked") if is_bookmarked else _("Bookmark this page")}</span>
     </button>
 </div>

lms/templates/vert_module.html

@@ -1,4 +1,8 @@
 <%page expression_filter="h"/>
+<%! from openedx.core.djangolib.markup import HTML %>
+%if unit_title:
+  <h3 class="unit-title">${unit_title}</h3>
+% endif
 
 % if show_bookmark_button:
     <%include file='bookmark_button.html' args="bookmark_id=bookmark_id, is_bookmarked=bookmarked"/>
@@ -7,7 +11,7 @@
 <div class="vert-mod">
 % for idx, item in enumerate(items):
   <div class="vert vert-${idx}" data-id="${item['id']}">
-    ${item['content'] | n, unicode}
+    ${HTML(item['content'])}
   </div>
 % endfor
 </div>