diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index ff8405db38..660ba23e8c 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -58,6 +58,7 @@ @import 'views/unit'; @import 'views/users'; @import 'views/checklists'; +@import 'views/textbooks'; // temp - inherited @import 'assets/content-types'; diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index 8c43934a44..2bddbbc0a0 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -133,6 +133,28 @@ } } +// blue small/inline button +.btn-flat-blue { + @extend .btn-flat; + color: $white; + background-color: $blue; + + &:hover, &:active { + background: $blue-l4; + color: $blue-s2; + } + + &.current, &.active { + border-color: $blue-l3; + background: $blue-l3; + color: $blue-d1; + + &:hover, &:active { + + } + } +} + // ==================== // simple dropdown button styling - should we move this elsewhere? diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss new file mode 100644 index 0000000000..26f4b1c4e1 --- /dev/null +++ b/cms/static/sass/views/_textbooks.scss @@ -0,0 +1,203 @@ +// studio - views - textbooks +// ==================== + +body.course.textbooks { + + form { + @include box-sizing(border-box); + @include box-shadow(0 1px 2px $shadow-l1); + @include border-radius(2px); + width: 100%; + border: 1px solid $gray-l2; + padding: $baseline ($baseline*1.5); + background: $white; + + .actions { + margin-top: $baseline; + + .action-add-chapter { + @extend .btn-flat-blue; + @extend .t-action2; + @include transition(all .15s); + display: block; + width: 100%; + margin-bottom: ($baseline*1.5); + padding: ($baseline/5) $baseline; + font-weight: 600; + } + + .action-primary { + @include blue-button; + @extend .t-action2; + @include transition(all .15s); + display: inline-block; + padding: ($baseline/5) $baseline ($baseline/4) $baseline; + font-weight: 600; + text-transform: uppercase; + } + + .action-secondary { + @include grey-button; + @extend .t-action2; + @include transition(all .15s); + display: inline-block; + padding: ($baseline/5) $baseline ($baseline/4) $baseline; + font-weight: 600; + text-transform: uppercase; + } + + + } + + .list-input { + margin: 0; + padding: 0; + list-style: none; + + .field { + margin: 0 0 ($baseline*0.75) 0; + + &:last-child { + margin-bottom: 0; + } + + &.required { + + label { + font-weight: 600; + } + + label:after { + margin-left: ($baseline/4); + content: "*"; + } + } + + label, input, textarea { + display: block; + } + + label { + @extend .t-copy-sub1; + @include transition(color, 0.15s, ease-in-out); + margin: 0 0 ($baseline/4) 0; + + &.is-focused { + color: $blue; + } + } + + input, textarea { + @extend .t-copy-base; + height: 100%; + width: 100%; + padding: ($baseline/2); + + &.long { + width: 100%; + } + + &.short { + width: 25%; + } + + ::-webkit-input-placeholder { + color: $gray-l4; + } + + :-moz-placeholder { + color: $gray-l3; + } + + ::-moz-placeholder { + color: $gray-l3; + } + + :-ms-input-placeholder { + color: $gray-l3; + } + + &:focus { + + + .tip { + color: $gray; + } + } + } + + textarea.long { + height: ($baseline*5); + } + + input[type="checkbox"] { + display: inline-block; + margin-right: ($baseline/4); + width: auto; + height: auto; + + & + label { + display: inline-block; + } + } + + .tip { + @extend .t-copy-sub2; + @include transition(color, 0.15s, ease-in-out); + display: block; + margin-top: ($baseline/4); + color: $gray-l3; + } + } + + .field-group { + @include clearfix(); + margin: 0 0 ($baseline/2) 0; + + .field { + display: block; + width: 46%; + border-bottom: none; + margin: 0 $baseline 0 0; + padding: ($baseline/4) 0 0 0; + float: left; + position: relative; + + input, textarea { + width: 100%; + } + + .action-uploadasset { + @extend .t-action4; + @extend .btn-flat-blue; + @include transition(all .15s); + font-weight: 600; + text-align: center; + position: absolute; + top: 0; + right: 0; + padding: ($baseline/5) ($baseline/2) ($baseline/10) ($baseline/2); + } + + } + + .action-close { + @include white-button; + @include font-size(18); + margin-top: ($baseline*2); + border: 0; + padding: 0; + background: transparent; + + &:hover { + color: $blue; + background: transparent; + box-shadow: none; + } + } + + } + } + } + + +} diff --git a/cms/templates/js/chapter.underscore b/cms/templates/js/chapter.underscore index 765a558b22..9cdf4fd76f 100644 --- a/cms/templates/js/chapter.underscore +++ b/cms/templates/js/chapter.underscore @@ -1,14 +1,14 @@ -
  • -
    - - " value="<%= name %>"> -

    <%= gettext("the title/name of the chapter that will be used in navigating") %>

    +
  • +
    + + " value="<%= name %>" type="text"> + <%= gettext("the title/name of the chapter that will be used in navigating") %>
    -
    - - " value="<%= asset_path %>"> -

    <%= gettext("provide the path for a file or asset already added to this course") %>

    +
    + + " value="<%= asset_path %>" type="text"> + <%= gettext("provide the path for a file or asset already added to this course") %> +
    - "> - close-button + delete chapter
    • diff --git a/cms/templates/js/textbook.underscore b/cms/templates/js/textbook.underscore index 9b43045d48..25dda42b26 100644 --- a/cms/templates/js/textbook.underscore +++ b/cms/templates/js/textbook.underscore @@ -1,14 +1,24 @@ -
    -
    - - value="<%= name %>"> -

    <%= gettext("the title/name of the text book as you would like your students to see it.") %> -

    -
      + +
      +
      + Required information to edit or add a textbook and chapters +
        +
      1. +
        + + " value="<%= name %>"> + <%= gettext("the title/name of the text book as you would like your students to see it.") %> +
        +
        2. +
      2. +
          +
          1. +

        <%= gettext("Note: It's best practice to break your course's textbook into multiple chapters to reduce loading times for students. Breaking up textbooks into chapters can also help with students more easily finding a concept or topic-based information.") %>

        - -
        - " /> - " /> +
        +
        + + +
        diff --git a/cms/templates/textbooks.html b/cms/templates/textbooks.html index a53ae35a91..774f9e26af 100644 --- a/cms/templates/textbooks.html +++ b/cms/templates/textbooks.html @@ -123,7 +123,7 @@ $(function() {

        Page Actions

        @@ -131,15 +131,18 @@ $(function() {
        +
        - Textbooks are happy. Textbooks are cool. This is the filler text - explaining why you should use a feature as happy and as cool as textbooks. - If you use textbooks, you will make friends and influence people. You will - lose weight and people will compliment you on your appearance. Children - around the world will sing praises to your name, and celebrities will - recongize you as a totally hip and groovy person. If you don't use textbooks, - your life will be forever incomplete, and you will die alone and unloved. - Make the right choice. Upload your first textbook now. +
        +

        Textbooks are happy. Textbooks are cool. This is the filler text explaining why you should use a feature as happy and as cool as textbooks. If you use textbooks, you will make friends and influence people. You will lose weight and people will compliment you on your appearance. Children around the world will sing praises to your name, and celebrities will recongize you as a totally hip and groovy person. If you don't use textbooks, your life will be forever incomplete, and you will die alone and unloved. Make the right choice. Upload your first textbook now.

        + + +
        +
        diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index e5548aeaaa..f947d05f1e 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -196,3 +196,21 @@ padding: ($baseline*0.75); } +// small/inline button +.btn-flat { + @extend .btn; + @extend .btn-rounded; + border-width: 0; + border-radius: $baseline; + padding:($baseline/5) $baseline/2; + line-height: 1.3; + text-align: center; + + &:hover, &:active { + + } + + &.current, &.active { + + } +}