From d75bb87bdd0d7f806c3e2fdb53cc9aa8ce9734bd Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Wed, 29 Aug 2012 13:22:55 -0400 Subject: [PATCH] started adding updated styles --- lms/static/images/browse-icon.png | Bin 0 -> 1298 bytes lms/static/images/follow-dog-ear.png | Bin 4246 -> 4362 bytes lms/static/images/nested-icon.png | Bin 0 -> 1038 bytes lms/static/images/sidebar-resolved-icons.png | Bin 0 -> 1077 bytes lms/static/images/vote-plus-icon.png | Bin 0 -> 1101 bytes lms/static/sass/_discussion-old.scss | 477 ++++++++ lms/static/sass/_discussion.scss | 1065 ++++++++++++------ lms/static/sass/base/_base.scss | 1 + lms/templates/discussion/single_thread.html | 49 +- 9 files changed, 1213 insertions(+), 379 deletions(-) create mode 100644 lms/static/images/browse-icon.png create mode 100644 lms/static/images/nested-icon.png create mode 100644 lms/static/images/sidebar-resolved-icons.png create mode 100644 lms/static/images/vote-plus-icon.png create mode 100644 lms/static/sass/_discussion-old.scss diff --git a/lms/static/images/browse-icon.png b/lms/static/images/browse-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..25df634b4a9293210ed71a2031aa5e356027741a GIT binary patch literal 1298 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 b{{m(a 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 literal 0 HcmV?d00001 diff --git a/lms/static/images/sidebar-resolved-icons.png b/lms/static/images/sidebar-resolved-icons.png new file mode 100644 index 0000000000000000000000000000000000000000..4ade554454070aa681459b9de0218843a748fc5f GIT binary patch literal 1077 zcmaJ=O-$2J94~?jD27Br)L?v8jm)^U9jx0L1{>=pOXxDo)Ezw7wGY-nKWrava8N)G zV1jxvlIX>ch$aR-c{Im+`Tg-z5~xauJmM2*!HmM3 z+BIy!p5bI#9`2We3fa*P+6o*d&>)gPK^xF*t`H&@csaax%oGV0Tu^_AEQ!hpDG)U* z2z;Ivw@fn(U|A2->SI}EKk(9wm!k2@x|vqa$8ugjSbRtv%~EZ6!oFz9f2y>9H`wuf{i72LYLtIWVdTeegasfG?5Mk#9yq7aFdmQv8n zC0gBHEE6smRgg@I@z736Wk*5yzpJJ#dD}>Y%X(KNw$noNgO-dN*SpIJWpYsq zO31L%hA~jCVk&1K!_FBdi1x6cS&(E^cMPrtgdlJU-A0lw!vr59F^5N06)w(1Xm23O z#)2%vFfk^;`&mA~`h6|lmOz{dma)7c4{A_HWvsG{^{5s>PzRs1kl(5PQT1waey(*T%VkoDz|FpVn!t>*7mj)LfmPQ}yc-}2M z*l$1ldWSE?bb^nh3m>yrI!?7$ZkkT}`n&_gUWWgy*|+ob3{k9bJ*p_4>#9B2 zFx$WY*U>XGMAeqb$;sQBlXIdd-ZOts?71>EI<@&mbwl#SXr^lXb+%@@{=(&RWKH|C r#*Obc?45f4iTH8&)^+*K^BOQq?3|EqTEXmJw9vk}${vlZ` literal 0 HcmV?d00001 diff --git a/lms/static/images/vote-plus-icon.png b/lms/static/images/vote-plus-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..1b9f87ad19973028abe4213978d03a20ad6c94a9 GIT binary patch literal 1101 zcmaJ=O-$2J9Ix^bnWDt_eetCrQDkeov9dMHf$JtqEWvH+j0acR2Q<(R+lMP$LAb-?|mW_a8d%nviIa^%e-?s@Mh-P?Womj=(yC zD5y|UX_OZBa+0okL?N^YAniX z)LV;X30AQFuR zS%zVvOn|Rt`2bt%_j!GR7!%BKd0pyKp@wo?d5Ig#%XNl9HLzzMn#wUK$4p%Xb4hbb z{#YV;^%l5t{#f|DTnYz6Ij#Mx)j1QMA7{HbxcIO*`cT93ZsNf{HC*`-Uy7kP-;lCD zw3JL%y(Egy&NfUPFD}gVGnc?v_*zYQfvf(r?}U(%`!DwwmTfuo?r!~qRX4tdA9R76 z>9Jvc-uFUv{X@F1==aIV0s7pJ@RRB91(o)u>ocoIxNAkTC0Abbjqdx|JkarY z=nGqZAiBJ2*q-1Cy6VxL-mAa1Ho9)Ro^9JT(YqV3JP-?R z*qQleC7XCKqiwrzYklLlixr0lN7uY+U0dI~jF>9rmL)&+4muY+9&O_9@6Po70groS A=>Px# literal 0 HcmV?d00001 diff --git a/lms/static/sass/_discussion-old.scss b/lms/static/sass/_discussion-old.scss new file mode 100644 index 0000000000..01380faa77 --- /dev/null +++ b/lms/static/sass/_discussion-old.scss @@ -0,0 +1,477 @@ +@mixin blue-button { + display: block; + height: 33px; + margin: 12px; + padding: 0 15px; + border-radius: 3px; + border: 1px solid #4697c1; + background: -webkit-linear-gradient(top, #6dccf1, #38a8e5); + font-size: 13px; + font-weight: 700; + line-height: 30px; + color: #fff; + text-shadow: 0 1px 0 rgba(0, 0, 0, .4); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); + + &:hover { + border-color: #297095; + background: -webkit-linear-gradient(top, #4fbbe4, #2090d0); + } +} + +.discussion-body { + + .vote-btn { + float: right; + display: block; + height: 27px; + padding: 0 8px; + border-radius: 5px; + border: 1px solid #b2b2b2; + background: -webkit-linear-gradient(top, #fff 35%, #ebebeb); + box-shadow: 0 1px 1px rgba(0, 0, 0, .15); + font-size: 12px; + font-weight: 700; + line-height: 25px; + color: #333; + + .plus-icon { + float: left; + margin-right: 6px; + font-size: 18px; + color: #17b429; + } + + &.is-cast { + border-color: #379a42; + background: -webkit-linear-gradient(top, #50cc5e, #3db84b); + color: #fff; + text-shadow: 0 1px 0 rgba(0, 0, 0, .3); + box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px rgba(0, 0, 0, .2); + + .plus-icon { + color: #336a39; + text-shadow: 0 1px 0 rgba(255, 255, 255, .4); + } + } + } + + + .new-post-btn { + @include blue-button; + float: right; + } + + .new-post-icon { + display: block; + float: left; + width: 16px; + height: 17px; + margin: 7px 7px 0 0; + background: url(../images/new-post-icon.png) no-repeat; + } + + .post-search { + float: right; + } + + .post-search-field { + width: 280px; + height: 30px; + padding: 0 15px 0 30px; + margin-top: 14px; + border: 1px solid #acacac; + border-radius: 30px; + box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5); + background: url(../images/search-icon.png) no-repeat 8px center #fff; + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 13px; + line-height: 30px; + color: #333; + outline: 0; + -webkit-transition: border-color .1s; + + &:focus { + border-color: #4697c1; + } + } + + h1, ul, li, a, ol { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + ul, li { + list-style-type: none; + } + a { + text-decoration: none; + color: #009fe2; + } + + display: table; + table-layout: fixed; + width: 100%; + height: 500px; + background: #fff; + border-radius: 3px; + border: 1px solid #aaa; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + + .sidebar { + display: table-cell; + vertical-align: top; + width: 27.7%; + background: #f6f6f6; + border-radius: 3px 0 0 3px; + border-right: 1px solid #bcbcbc; + .post-list { + background-color: #ddd; + + li:last-child a { + border-bottom: 1px solid #ddd; + } + + a { + position: relative; + display: block; + height: 36px; + padding: 0 10px; + margin-bottom: 1px; + background: #fff; + font-size: 13px; + font-weight: 700; + line-height: 34px; + color: #333; + + &.read .title { + font-weight: 400; + color: #737373; + } + + &.followed:after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 12px; + height: 12px; + background: url(../images/following-flag.png) no-repeat; + } + + &.active { + background: -webkit-linear-gradient(top, #96e0fd, #61c7fc); + border-color: #4697c1; + box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1; + + .title { + color: #333; + } + + .votes-count, + .comments-count { + background: -webkit-linear-gradient(top, #3994c7, #4da7d3); + color: #fff; + + &:after { + color: #4da7d3; + } + } + + &.followed:after { + background-position: 0 -12px; + } + } + } + + .title { + display: block; + float: left; + width: 70%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .votes-count, + .comments-count { + display: block; + float: right; + width: 32px; + height: 16px; + margin-top: 9px; + border-radius: 2px; + background: -webkit-linear-gradient(top, #d4d4d4, #dfdfdf); + font-size: 9px; + font-weight: 700; + line-height: 16px; + text-align: center; + color: #767676; + } + + .comments-count { + position: relative; + margin-left: 4px; + + &:after { + content: '◥'; + display: block; + position: absolute; + top: 11px; + right: 3px; + font-size: 6px; + color: #dfdfdf; + } + + &.new { + background: -webkit-linear-gradient(top, #84d7fe, #99e0fe); + color: #333; + + &:after { + color: #99e0fe; + } + } + } + } + } + + .board-drop-btn { + display: block; + height: 60px; + border-bottom: 1px solid #a3a3a3; + border-radius: 3px 0 0 0; + background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9); + font-size: 16px; + font-weight: 700; + line-height: 58px; + text-align: center; + color: #333; + text-shadow: 0 1px 0 rgba(255, 255, 255, .8); + } + + .sort-bar { + height: 27px; + border-bottom: 1px solid #a3a3a3; + background: -webkit-linear-gradient(top, #cdcdcd, #b6b6b6); + box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset; + + a { + display: block; + float: right; + height: 27px; + margin-right: 10px; + font-size: 11px; + font-weight: bold; + line-height: 23px; + color: #333; + text-shadow: 0 1px 0 rgba(255, 255, 255, .5); + + .sort-label { + font-size: 9px; + text-transform: uppercase; + } + } + } +} + + + + + + + + + + + + +.global-discussion-actions { + height: 60px; + background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9); + border-radius: 0 3px 0 0; + border-bottom: 1px solid #bcbcbc; +} + + + + + + + + + + + +.discussion-article { + position: relative; + display: table-cell; + vertical-align: top; + width: 72.3%; + padding: 40px; + + h1 { + font-size: 28px; + font-weight: 700; + } + + .posted-details { + font-size: 12px; + font-style: italic; + color: #888; + } + + p + p { + margin-top: 20px; + } + + .dogear { + display: block; + position: absolute; + top: 0; + right: -1px; + width: 52px; + height: 51px; + background: url(../images/follow-dog-ear.png) 0 -51px no-repeat; + + &.is-followed { + background-position: 0 0; + } + } +} + +.discussion-post header, +.responses li header { + margin-bottom: 20px; +} + +.responses { + margin-top: 40px; + + > li { + margin: 0 -10px; + padding: 30px; + border-radius: 3px; + border: 1px solid #b2b2b2; + box-shadow: 0 1px 3px rgba(0, 0, 0, .15); + } + + .posted-by { + font-weight: 700; + } +} + +.endorse-btn { + display: block; + float: right; + width: 27px; + height: 27px; + margin-right: 10px; + border-radius: 27px; + border: 1px solid #a0a0a0; + background: -webkit-linear-gradient(top, #fff 35%, #ebebeb); + box-shadow: 0 1px 1px rgba(0, 0, 0, .1); + + .check-icon { + display: block; + width: 13px; + height: 12px; + margin: 8px auto; + background: url(../images/endorse-icon.png) no-repeat; + } + + &.is-endorsed { + border: 1px solid #4697c1; + background: -webkit-linear-gradient(top, #6dccf1, #38a8e5); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, .4) inset; + + .check-icon { + background-position: 0 -12px; + } + } +} + +.comments { + margin-top: 20px; + border-top: 1px solid #ddd; + + li { + background: #f6f6f6; + border-bottom: 1px solid #ddd; + } + + p { + font-size: 13px; + padding: 10px 20px; + + .posted-details { + font-size: 11px; + white-space: nowrap; + } + } +} + +.comment-form { + padding: 8px 20px; +} + +.comment-form-input { + width: 100%; + height: 31px; + padding: 0 10px; + box-sizing: border-box; + border: 1px solid #b2b2b2; + border-radius: 3px; + box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset; + -webkit-transition: border-color .1s; + outline: 0; + + &:focus { + border-color: #4697c1; + } +} + +.moderator-actions { + margin-top: 20px; + @include clearfix; + + li { + float: left; + margin-right: 8px; + } + + a { + display: block; + height: 26px; + padding: 0 12px; + border-radius: 3px; + border: 1px solid #b2b2b2; + background: -webkit-linear-gradient(top, #fff 35%, #ebebeb); + font-size: 13px; + line-height: 24px; + color: #737373; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + + .delete-icon { + display: block; + float: left; + width: 10px; + height: 10px; + margin: 8px 4px 0 0; + background: url(../images/moderator-delete-icon.png) no-repeat; + } + + .edit-icon { + display: block; + float: left; + width: 10px; + height: 10px; + margin: 7px 4px 0 0; + background: url(../images/moderator-edit-icon.png) no-repeat; + } + } +} diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 01380faa77..62c56cd921 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -1,14 +1,13 @@ @mixin blue-button { display: block; - height: 33px; - margin: 12px; + height: 35px; padding: 0 15px; border-radius: 3px; - border: 1px solid #4697c1; + border: 1px solid #2d81ad; background: -webkit-linear-gradient(top, #6dccf1, #38a8e5); font-size: 13px; font-weight: 700; - line-height: 30px; + line-height: 32px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); @@ -19,7 +18,523 @@ } } + + + +body.discussion { + .new-post-btn { + @include blue-button; + } + + .new-post-icon { + display: block; + float: left; + width: 16px; + height: 17px; + margin: 8px 7px 0 0; + background: url(../images/new-post-icon.png) no-repeat; + } +} + .discussion-body { + line-height: 1.4; + + .sidebar { + display: table-cell; + vertical-align: top; + width: 27.7%; + background: #f6f6f6; + border-radius: 3px 0 0 3px; + border-right: 1px solid #bcbcbc; + } + + .browse-search { + display: block; + position: relative; + height: 60px; + border-bottom: 1px solid #a3a3a3; + border-radius: 3px 0 0 0; + + + .browse, + .search { + position: relative; + float: left; + width: 20%; + height: 100%; + background: -webkit-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)) #dcdcdc; + -webkit-transition: all .2s ease-out; + + &:hover { + background-color: #e9e9e9; + } + + &.is-open { + width: 80%; + } + } + + .browse { + border-radius: 3px 0 0 0; + box-shadow: -1px 0 0 #aaa inset; + + &.is-open { + .board-drop-btn span { + opacity: 1; + } + + .board-drop-icon { + opacity: 0; + } + + &.is-dropped { + .board-drop-btn { + color: #fff; + text-shadow: none; + border-color: #4b4b4b; + } + } + } + + &.is-dropped { + .board-drop-btn { + background-color: #616161; + } + } + + &.is-dropped { + .board-drop-icon { + background-position: 0 -16px; + } + } + } + + .search { + cursor: pointer; + + &.is-open { + cursor: auto; + + .post-search { + padding: 0 10px; + max-width: 1000px; + } + + .post-search-field { + cursor: text; + pointer-events: auto; + + &::-webkit-input-placeholder { + opacity: 1; + } + } + } + } + + .board-drop-btn { + display: block; + position: absolute; + top: -1px; + left: -1px; + z-index: 50; + width: 100%; + height: 100%; + border-radius: 3px 0 0 0; + border: 1px solid transparent; + text-align: center; + overflow: hidden; + + .current-board { + white-space: nowrap; + } + + span { + font-size: 16px; + font-weight: 700; + line-height: 58px; + color: #333; + text-shadow: 0 1px 0 rgba(255, 255, 255, .8); + opacity: 0; + -webkit-transition: opacity .2s; + } + } + + .board-drop-icon { + display: block; + position: absolute; + top: 21px; + left: 50%; + z-index: 100; + width: 29px; + height: 16px; + margin-left: -12px; + background: url(../images/browse-icon.png) no-repeat; + opacity: 1; + -webkit-transition: opacity .2s; + } + + .board-drop-menu { + display: none; + position: absolute; + top: 60px; + left: -1px; + z-index: 9999; + width: 100%; + background: #737373; + border: 1px solid #4b4b4b; + border-radius: 0 0 3px 3px; + + > li:first-child a { + border-top: none; + } + + a { + display: block; + height: 50px; + padding: 0 20px; + border-top: 1px solid #5f5f5f; + font-size: 14px; + font-weight: 700; + line-height: 48px; + color: #fff; + + &:hover { + background-color: #636363; + } + + .unread { + float: right; + padding: 0 5px; + margin-top: 13px; + font-size: 11px; + line-height: 22px; + border-radius: 2px; + background: -webkit-linear-gradient(top, #4c4c4c, #5a5a5a); + } + } + + li li { + a { + padding-left: 44px; + background: url(../images/nested-icon.png) no-repeat 22px 14px; + } + } + + li li li { + a { + padding-left: 68px; + background: url(../images/nested-icon.png) no-repeat 46px 14px; + } + } + } + + .post-search { + width: 100%; + max-width: 30px; + margin: auto; + box-sizing: border-box; + -webkit-transition: all .2s; + } + + .post-search-field { + display: block; + width: 100%; + height: 30px; + padding: 0; + margin: 14px auto; + box-sizing: border-box; + border: 1px solid #acacac; + border-radius: 30px; + box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5); + background: url(../images/search-icon.png) no-repeat 7px center #fff; + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 13px; + line-height: 20px; + text-indent: 30px; + color: #333; + outline: 0; + cursor: pointer; + pointer-events: none; + -webkit-transition: all .2s ease-out; + + &::-webkit-input-placeholder { + opacity: 0; + -webkit-transition: opacity .2s; + } + + &:focus { + border-color: #4697c1; + } + } + } + + .sort-bar { + height: 27px; + border-bottom: 1px solid #a3a3a3; + background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #aeaeae; + box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; + font-size: 9px; + font-weight: bold; + line-height: 25px; + color: #333; + text-transform: uppercase; + text-shadow: 0 1px 0 rgba(255, 255, 255, .4); + + .sort-label { + display: block; + float: left; + margin: 0 10px; + } + + li { + float: left; + margin: 4px 4px 0 0; + } + + a { + display: block; + height: 18px; + padding: 0 9px; + border-radius: 19px; + color: #333; + line-height: 17px; + + &:hover { + background: -webkit-linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2)); + } + + &.active { + background: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) #999; + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, .2) inset; + } + } + } + + .post-list { + background-color: #ddd; + + li:last-child a { + border-bottom: 1px solid #ddd; + } + + a { + position: relative; + display: block; + height: 36px; + padding: 0 10px; + margin-bottom: 1px; + background: #fff; + font-size: 13px; + font-weight: 700; + line-height: 34px; + color: #333; + + &.read .title { + font-weight: 400; + color: #737373; + } + + &.resolved:before { + content: ''; + position: absolute; + top: 12px; + right: 75px; + width: 9px; + height: 8px; + background: url(../images/sidebar-resolved-icons.png) no-repeat; + } + + &.followed:after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 12px; + height: 12px; + background: url(../images/following-flag.png) no-repeat; + } + + &.active { + background: -webkit-linear-gradient(top, #96e0fd, #61c7fc); + border-color: #4697c1; + box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1; + + .title { + color: #333; + } + + .votes-count, + .comments-count { + background: -webkit-linear-gradient(top, #3994c7, #4da7d3); + color: #fff; + + &:after { + color: #4da7d3; + } + } + + &.followed:after { + background-position: 0 -12px; + } + + &.resolved:before { + background-position: 0 -8px; + } + } + } + + .title { + display: block; + float: left; + width: 70%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .votes-count, + .comments-count { + display: block; + float: right; + width: 32px; + height: 16px; + margin-top: 9px; + border-radius: 2px; + background: -webkit-linear-gradient(top, #d4d4d4, #dfdfdf); + font-size: 9px; + font-weight: 700; + line-height: 16px; + text-align: center; + color: #767676; + } + + .comments-count { + position: relative; + width: 25px; + margin-left: 4px; + + &:after { + content: '◥'; + display: block; + position: absolute; + top: 11px; + right: 3px; + font-size: 6px; + color: #dfdfdf; + } + + &.new { + background: -webkit-linear-gradient(top, #84d7fe, #99e0fe); + color: #333; + + &:after { + color: #99e0fe; + } + } + } + } + + + + + .discussion-column { + display: table-cell; + vertical-align: top; + width: 72.3%; + } + + .discussion-article { + position: relative; + padding: 40px; + + h1 { + margin-bottom: 10px; + font-size: 28px; + font-weight: 700; + line-height: 1.2; + } + + .posted-details { + font-size: 12px; + font-style: italic; + color: #888; + } + + p + p { + margin-top: 20px; + } + + .dogear { + display: block; + position: absolute; + top: -1px; + right: -1px; + width: 52px; + height: 51px; + background: url(../images/follow-dog-ear.png) 0 -52px no-repeat; + @include transition(none); + + &.is-followed { + background-position: 0 0; + } + } + } + + .discussion-post { + padding: 10px 20px; + + > header .vote-btn { + margin-top: 5px; + } + } + + .discussion-post header, + .responses li header { + margin-bottom: 20px; + } + + .responses { + list-style: none; + margin-top: 40px; + padding: 0; + + > li { + position: relative; + margin: 0 -10px 30px; + padding: 26px 30px 30px; + border-radius: 3px; + border: 1px solid #b2b2b2; + box-shadow: 0 1px 3px rgba(0, 0, 0, .15); + + &.staff { + padding-top: 38px; + border-color: #009fe2; + } + + .staff-banner { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 14px; + padding: 1px 5px; + box-sizing: border-box; + border-radius: 2px 2px 0 0; + background: #009fe2; + font-size: 9px; + font-weight: 700; + color: #fff; + text-transform: uppercase; + } + } + + .posted-by { + font-weight: 700; + } + } .vote-btn { float: right; @@ -37,9 +552,15 @@ .plus-icon { float: left; - margin-right: 6px; + display: block; + width: 10px; + height: 10px; + margin: 8px 6px 0 0; + background: url(../images/vote-plus-icon.png) no-repeat; font-size: 18px; + text-indent: -9999px; color: #17b429; + overflow: hidden; } &.is-cast { @@ -50,233 +571,203 @@ box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px rgba(0, 0, 0, .2); .plus-icon { + background-position: 0 -10px; color: #336a39; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); } } } - - .new-post-btn { - @include blue-button; - float: right; - } - - .new-post-icon { + .endorse-btn { display: block; - float: left; - width: 16px; - height: 17px; - margin: 7px 7px 0 0; - background: url(../images/new-post-icon.png) no-repeat; - } - - .post-search { float: right; + width: 27px; + height: 27px; + margin-right: 10px; + border-radius: 27px; + border: 1px solid #a0a0a0; + background: -webkit-linear-gradient(top, #fff 35%, #ebebeb); + box-shadow: 0 1px 1px rgba(0, 0, 0, .1); + + .check-icon { + display: block; + width: 13px; + height: 12px; + margin: 8px auto; + background: url(../images/endorse-icon.png) no-repeat; + } + + &.is-endorsed { + border: 1px solid #4697c1; + background: -webkit-linear-gradient(top, #6dccf1, #38a8e5); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, .4) inset; + + .check-icon { + background-position: 0 -12px; + } + } } - .post-search-field { - width: 280px; - height: 30px; - padding: 0 15px 0 30px; - margin-top: 14px; - border: 1px solid #acacac; - border-radius: 30px; - box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5); - background: url(../images/search-icon.png) no-repeat 8px center #fff; - font-family: 'Open Sans', sans-serif; - font-weight: 400; - font-size: 13px; - line-height: 30px; - color: #333; - outline: 0; + .comments { + list-style: none; + margin-top: 20px; + padding: 0; + border-top: 1px solid #ddd; + + li { + background: #f6f6f6; + border-bottom: 1px solid #ddd; + + &.new-comment-form { + background: #eee; + } + } + + p { + font-size: 13px; + padding: 10px 20px; + + .posted-details { + font-size: 11px; + white-space: nowrap; + } + } + + .staff-label { + margin-left: 2px; + padding: 0 4px; + border-radius: 2px; + background: #009FE2; + font-size: 9px; + font-weight: 700; + font-style: normal; + color: white; + text-transform: uppercase; + } + } + + .comment-form { + padding: 8px 20px; + } + + .comment-form-input { + width: 100%; + height: 31px; + padding: 0 10px; + box-sizing: border-box; + border: 1px solid #b2b2b2; + border-radius: 3px; + box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset; -webkit-transition: border-color .1s; + outline: 0; &:focus { border-color: #4697c1; } } - h1, ul, li, a, ol { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - } - ul, li { - list-style-type: none; - } - a { - text-decoration: none; - color: #009fe2; - } + .moderator-actions { + margin-top: 20px; + @include clearfix; - display: table; - table-layout: fixed; - width: 100%; - height: 500px; - background: #fff; - border-radius: 3px; - border: 1px solid #aaa; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - - .sidebar { - display: table-cell; - vertical-align: top; - width: 27.7%; - background: #f6f6f6; - border-radius: 3px 0 0 3px; - border-right: 1px solid #bcbcbc; - .post-list { - background-color: #ddd; - - li:last-child a { - border-bottom: 1px solid #ddd; - } - - a { - position: relative; - display: block; - height: 36px; - padding: 0 10px; - margin-bottom: 1px; - background: #fff; - font-size: 13px; - font-weight: 700; - line-height: 34px; - color: #333; - - &.read .title { - font-weight: 400; - color: #737373; - } - - &.followed:after { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 12px; - height: 12px; - background: url(../images/following-flag.png) no-repeat; - } - - &.active { - background: -webkit-linear-gradient(top, #96e0fd, #61c7fc); - border-color: #4697c1; - box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1; - - .title { - color: #333; - } - - .votes-count, - .comments-count { - background: -webkit-linear-gradient(top, #3994c7, #4da7d3); - color: #fff; - - &:after { - color: #4da7d3; - } - } - - &.followed:after { - background-position: 0 -12px; - } - } - } - - .title { - display: block; - float: left; - width: 70%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .votes-count, - .comments-count { - display: block; - float: right; - width: 32px; - height: 16px; - margin-top: 9px; - border-radius: 2px; - background: -webkit-linear-gradient(top, #d4d4d4, #dfdfdf); - font-size: 9px; - font-weight: 700; - line-height: 16px; - text-align: center; - color: #767676; - } - - .comments-count { - position: relative; - margin-left: 4px; - - &:after { - content: '◥'; - display: block; - position: absolute; - top: 11px; - right: 3px; - font-size: 6px; - color: #dfdfdf; - } - - &.new { - background: -webkit-linear-gradient(top, #84d7fe, #99e0fe); - color: #333; - - &:after { - color: #99e0fe; - } - } - } + li { + float: left; + margin-right: 8px; } - } - - .board-drop-btn { - display: block; - height: 60px; - border-bottom: 1px solid #a3a3a3; - border-radius: 3px 0 0 0; - background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9); - font-size: 16px; - font-weight: 700; - line-height: 58px; - text-align: center; - color: #333; - text-shadow: 0 1px 0 rgba(255, 255, 255, .8); - } - - .sort-bar { - height: 27px; - border-bottom: 1px solid #a3a3a3; - background: -webkit-linear-gradient(top, #cdcdcd, #b6b6b6); - box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset; a { display: block; - float: right; - height: 27px; - margin-right: 10px; - font-size: 11px; - font-weight: bold; - line-height: 23px; - color: #333; - text-shadow: 0 1px 0 rgba(255, 255, 255, .5); + height: 26px; + padding: 0 12px; + border-radius: 3px; + border: 1px solid #b2b2b2; + background: -webkit-linear-gradient(top, #fff 35%, #ebebeb); + font-size: 13px; + line-height: 24px; + color: #737373; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); - .sort-label { - font-size: 9px; - text-transform: uppercase; + .delete-icon { + display: block; + float: left; + width: 10px; + height: 10px; + margin: 8px 4px 0 0; + background: url(../images/moderator-delete-icon.png) no-repeat; + } + + .edit-icon { + display: block; + float: left; + width: 10px; + height: 10px; + margin: 7px 4px 0 0; + background: url(../images/moderator-edit-icon.png) no-repeat; } } } + + + + + + .tooltip { + position: absolute; + top: 0; + left: 0; + z-index: 99999; + padding: 0 10px; + border-radius: 3px; + background: rgba(0, 0, 0, .85); + font-size: 11px; + font-weight: 400; + line-height: 26px; + color: #fff; + pointer-events: none; + opacity: 0; + -webkit-transition: opacity .1s; + + &:after { + content: '▾'; + display: block; + position: absolute; + bottom: -14px; + left: 50%; + margin-left: -7px; + font-size: 20px; + color: rgba(0, 0, 0, .85); + } + } + + + + + .main-article.new { + display: none; + padding: 50px; + } + + .new-post-form { + margin-top: 20px; + @include clearfix; + } + + .new-post-form .submit { + @include blue-button; + float: left; + margin-top: 10px; + padding-bottom: 2px; + } + + .new-post-form .options { + float: right; + margin-top: 20px; + font-size: 14px; + + label { + margin-left: 4px; + } + } } @@ -288,8 +779,6 @@ - - .global-discussion-actions { height: 60px; background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9); @@ -307,171 +796,11 @@ -.discussion-article { - position: relative; - display: table-cell; - vertical-align: top; - width: 72.3%; - padding: 40px; - h1 { - font-size: 28px; - font-weight: 700; - } - .posted-details { - font-size: 12px; - font-style: italic; - color: #888; - } - p + p { - margin-top: 20px; - } - .dogear { - display: block; - position: absolute; - top: 0; - right: -1px; - width: 52px; - height: 51px; - background: url(../images/follow-dog-ear.png) 0 -51px no-repeat; - &.is-followed { - background-position: 0 0; - } - } -} -.discussion-post header, -.responses li header { - margin-bottom: 20px; -} -.responses { - margin-top: 40px; - > li { - margin: 0 -10px; - padding: 30px; - border-radius: 3px; - border: 1px solid #b2b2b2; - box-shadow: 0 1px 3px rgba(0, 0, 0, .15); - } - - .posted-by { - font-weight: 700; - } -} - -.endorse-btn { - display: block; - float: right; - width: 27px; - height: 27px; - margin-right: 10px; - border-radius: 27px; - border: 1px solid #a0a0a0; - background: -webkit-linear-gradient(top, #fff 35%, #ebebeb); - box-shadow: 0 1px 1px rgba(0, 0, 0, .1); - - .check-icon { - display: block; - width: 13px; - height: 12px; - margin: 8px auto; - background: url(../images/endorse-icon.png) no-repeat; - } - - &.is-endorsed { - border: 1px solid #4697c1; - background: -webkit-linear-gradient(top, #6dccf1, #38a8e5); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, .4) inset; - - .check-icon { - background-position: 0 -12px; - } - } -} - -.comments { - margin-top: 20px; - border-top: 1px solid #ddd; - - li { - background: #f6f6f6; - border-bottom: 1px solid #ddd; - } - - p { - font-size: 13px; - padding: 10px 20px; - - .posted-details { - font-size: 11px; - white-space: nowrap; - } - } -} - -.comment-form { - padding: 8px 20px; -} - -.comment-form-input { - width: 100%; - height: 31px; - padding: 0 10px; - box-sizing: border-box; - border: 1px solid #b2b2b2; - border-radius: 3px; - box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset; - -webkit-transition: border-color .1s; - outline: 0; - - &:focus { - border-color: #4697c1; - } -} - -.moderator-actions { - margin-top: 20px; - @include clearfix; - - li { - float: left; - margin-right: 8px; - } - - a { - display: block; - height: 26px; - padding: 0 12px; - border-radius: 3px; - border: 1px solid #b2b2b2; - background: -webkit-linear-gradient(top, #fff 35%, #ebebeb); - font-size: 13px; - line-height: 24px; - color: #737373; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); - - .delete-icon { - display: block; - float: left; - width: 10px; - height: 10px; - margin: 8px 4px 0 0; - background: url(../images/moderator-delete-icon.png) no-repeat; - } - - .edit-icon { - display: block; - float: left; - width: 10px; - height: 10px; - margin: 7px 4px 0 0; - background: url(../images/moderator-edit-icon.png) no-repeat; - } - } -} diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index ba0f47de52..ee46c08361 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -43,6 +43,7 @@ p { span { font: normal 1em/1.6em $sans-serif; } + /* Fix for CodeMirror: prevent top-level span from affecting deeply-embedded span in CodeMirror */ .CodeMirror span { font: inherit; diff --git a/lms/templates/discussion/single_thread.html b/lms/templates/discussion/single_thread.html index 59882a2443..757b33cf3a 100644 --- a/lms/templates/discussion/single_thread.html +++ b/lms/templates/discussion/single_thread.html @@ -17,16 +17,49 @@ <%include file="../courseware/course_navigation.html" args="active_page='discussion'" /> + +
-
- Homework / Week 1 ▾ -
+
+
+ + Homework / Week 1 ▾ +
+ +
+
+ +
- Sort by: most recent ▾ + Sort by: +
    @@ -34,13 +67,7 @@
-
-
- New Post -
- -
-
+
${content.decode('utf-8')}