Merge pull request #13587 from edx/alisan/bookmark-btn-TNl-5625-unit-title-TNL-5623

add new unit title and renew bookmark button

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);
+  }
+
 }