From bbe94325080f6c3a9c23553c6ea2892ea2221caa Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 14 Aug 2012 13:58:18 -0400 Subject: [PATCH 1/4] Lots of askbot fixes --- .../templates/question/question_controls.html | 3 +- lms/askbot/skins/mitx/templates/base.html | 7 +- .../templates/meta/html_head_stylesheets.html | 1 - lms/static/sass/course/base/_base.scss | 6 +- .../sass/course/discussion/_answers.scss | 4 - .../sass/course/discussion/_modals.scss | 1 - .../course/discussion/_question-view.scss | 1 - .../sass/course/discussion/_questions.scss | 75 +++++++-------- .../sass/course/discussion/_sidebar.scss | 93 +++++++++---------- lms/static/sass/course/discussion/_tags.scss | 32 +------ 10 files changed, 90 insertions(+), 133 deletions(-) diff --git a/lms/askbot/skins/common/templates/question/question_controls.html b/lms/askbot/skins/common/templates/question/question_controls.html index af30d43419..2409371c65 100644 --- a/lms/askbot/skins/common/templates/question/question_controls.html +++ b/lms/askbot/skins/common/templates/question/question_controls.html @@ -40,6 +40,5 @@ {% endif %} {% if request.user|can_delete_post(question) %}{{ pipe() }} - {% if question.deleted %}{% trans %}undelete{% endtrans %}{% else %}✖{% endif %} - + {% if question.deleted %}{% trans %}undelete{% endtrans %}{% else %}delete{% endif %} {% endif %} diff --git a/lms/askbot/skins/mitx/templates/base.html b/lms/askbot/skins/mitx/templates/base.html index a344009c60..4c5a36bd46 100644 --- a/lms/askbot/skins/mitx/templates/base.html +++ b/lms/askbot/skins/mitx/templates/base.html @@ -18,11 +18,14 @@ {% include "widgets/system_messages.html" %} {% include "debug_header.html" %} {% include "widgets/header.html" %} {# Logo, user tool navigation and meta navitation #} - {# include "widgets/secondary_header.html" #} {# Scope selector, search input and ask button #} -
+
+ {# include "widgets/secondary_header.html" #} {# Scope selector, search input and ask button #} + +
{% block body %} {% endblock %} +
{% if settings.FOOTER_MODE == 'default' %} diff --git a/lms/askbot/skins/mitx/templates/meta/html_head_stylesheets.html b/lms/askbot/skins/mitx/templates/meta/html_head_stylesheets.html index 3ec11b59fd..a6a3d3cd46 100644 --- a/lms/askbot/skins/mitx/templates/meta/html_head_stylesheets.html +++ b/lms/askbot/skins/mitx/templates/meta/html_head_stylesheets.html @@ -1,4 +1,3 @@ {% load extra_filters_jinja %} - {{ 'application' | compressed_css }} {{ 'course' | compressed_css }} diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 034e047754..90c8fdc3e2 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -2,7 +2,7 @@ body { min-width: 980px; } -body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a { +body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label { text-align: left; font-family: $sans-serif; } @@ -27,6 +27,10 @@ form { } } +img { + max-width: 100%; +} + ::selection, ::-moz-selection, ::-webkit-selection { background:#444; color:#fff; diff --git a/lms/static/sass/course/discussion/_answers.scss b/lms/static/sass/course/discussion/_answers.scss index 8ab22aa833..27043be68d 100644 --- a/lms/static/sass/course/discussion/_answers.scss +++ b/lms/static/sass/course/discussion/_answers.scss @@ -141,10 +141,6 @@ div.answer-actions { a { cursor: pointer; text-decoration: none; - - &.question-delete { - color: $mit-red; - } } } diff --git a/lms/static/sass/course/discussion/_modals.scss b/lms/static/sass/course/discussion/_modals.scss index 5a7e6db1e5..f1d1fd78cf 100644 --- a/lms/static/sass/course/discussion/_modals.scss +++ b/lms/static/sass/course/discussion/_modals.scss @@ -1,5 +1,4 @@ // Style for modal boxes that pop up to notify the user of various events - .vote-notification { background-color: darken($mit-red, 7%); @include border-radius(4px); diff --git a/lms/static/sass/course/discussion/_question-view.scss b/lms/static/sass/course/discussion/_question-view.scss index 4c2acaf9be..1bee024607 100644 --- a/lms/static/sass/course/discussion/_question-view.scss +++ b/lms/static/sass/course/discussion/_question-view.scss @@ -90,7 +90,6 @@ div.question-header { a { &.question-delete { - color: $mit-red; text-decoration: none; cursor: pointer; } diff --git a/lms/static/sass/course/discussion/_questions.scss b/lms/static/sass/course/discussion/_questions.scss index 4f855cd092..a699dc6c5e 100644 --- a/lms/static/sass/course/discussion/_questions.scss +++ b/lms/static/sass/course/discussion/_questions.scss @@ -9,6 +9,7 @@ div.question-list-header { h1 { margin: 0; + font-size: 1em; > a.light-button { float: right; @@ -49,8 +50,11 @@ div.question-list-header { nav { @extend .action-link; float: right; + font-size: em(16, 24); a { + font-size: 1em; + &.on span{ font-weight: bold; } @@ -103,26 +107,15 @@ div.question-list-header { ul.question-list, div#question-list { width: flex-grid(9,9); + padding-left: 0; + margin: 0; li.single-question { border-bottom: 1px solid #eee; list-style: none; - padding: 10px lh(); - margin-left: (-(lh())); + padding: lh() 0; width: 100%; - &:hover { - background: #F3F3F3; - - ul.tags li { - background: #ddd; - - &:before { - border-color: transparent #ddd transparent transparent; - } - } - } - &:first-child { border-top: 0; } @@ -133,14 +126,19 @@ ul.question-list, div#question-list { &.question-body { @include box-sizing(border-box); margin-right: flex-gutter(); - width: flex-grid(5.5,9); + width: flex-grid(5,9); h2 { - font-size: 16px; + font-size: em(20); font-weight: bold; letter-spacing: 0; - margin: 0px 0 15px 0; + margin: 0 0 lh() 0; text-transform: none; + line-height: lh(); + + a { + line-height: lh(); + } } p.excerpt { @@ -151,40 +149,40 @@ ul.question-list, div#question-list { div.user-info { display: inline-block; vertical-align: top; - margin-bottom: 10px; + margin: lh() 0 0 0; + line-height: lh(); span.relative-time { font-weight: normal; } - - a { - color: $mit-red; - } } ul.tags { display: inline-block; + margin: lh() 0 0 0; + padding: 0; } } &.question-meta { float: right; - margin-top: 10px; - width: flex-grid(3.5,9); - + width: flex-grid(3,9); ul { - text-align: right; + @include clearfix; + margin: 0; + padding: 0; + list-style: none; li { - border: 1px solid #ddd; + border: 1px solid lighten($border-color, 10%); + @include box-sizing(border-box); @include box-shadow(0 1px 0 #fff); - display: inline-block; height:60px; - @include linear-gradient(#fff, #f5f5f5); - margin-right: 10px; - width: 60px; + float: left; + margin-right: flex-gutter(3); + width: flex-grid(1,3); &:last-child { margin-right: 0px; @@ -196,31 +194,22 @@ ul.question-list, div#question-list { } } - &.views { - } - &.answers { &.accepted { - - @include linear-gradient(#fff, lighten( #c4dfbe, 12% )); - border-color: #c4dfbe; + border-color: lighten($border-color, 10%); span, div { color: darken(#c4dfbe, 35%); } } + &.no-answers { - - span, div { - color: lighten($mit-red, 20%); + color: $pink; } } } - &.votes { - } - span, div { @include box-sizing(border-box); color: #888; diff --git a/lms/static/sass/course/discussion/_sidebar.scss b/lms/static/sass/course/discussion/_sidebar.scss index 5ff8ce2c55..947f8eb722 100644 --- a/lms/static/sass/course/discussion/_sidebar.scss +++ b/lms/static/sass/course/discussion/_sidebar.scss @@ -2,11 +2,8 @@ div.discussion-wrapper aside { @extend .sidebar; - border-left: 1px solid #d3d3d3; - @include border-radius(0 4px 4px 0); - border-right: 1px solid #f6f6f6; - @include box-shadow(inset 1px 0 0 #f6f6f6); - padding: lh(); + border-left: 1px solid $border-color; + border-right: 0; width: flex-grid(3); &.main-sidebar { @@ -15,12 +12,16 @@ div.discussion-wrapper aside { h1 { @extend .bottom-border; - margin: (-(lh())) (-(lh())) 0; padding: lh(.5) lh(); + margin-bottom: em(16, 20); } h2 { - color: #4D4D4D; + color: #3C3C3C; + font-size: 1em; + font-style: normal; + font-weight: bold; + margin-bottom: 1em; &.first { margin-top: 0px; @@ -36,6 +37,9 @@ div.discussion-wrapper aside { input[type="submit"] { width: 27%; float: right; + text-align: center; + padding-left: 0; + padding-right: 0; } input[type="text"] { @@ -45,24 +49,24 @@ div.discussion-wrapper aside { div.box { display: block; - margin: lh(.5) 0; + padding: lh(.5) lh(); + border-top: 1px solid lighten($border-color, 10%); - &:last-child { - @include box-shadow(none); - border: 0; + &:first-child { + border-top: 0; } - h2 { - text-transform: uppercase; - font-weight: bold; - font-size: 14px; - letter-spacing: 1px; + ul#related-tags { + position: relative; + left: -10px; - &:not(.first) { - @include box-shadow(inset 0 1px 0 #eee); - border-top: 1px solid #d3d3d3; - margin: 0 (-(lh())) 0; - padding: lh(.5) lh(); + li { + border-bottom: 0; + background: #eee; + + a:hover { + background: transparent; + } } } @@ -85,9 +89,6 @@ div.discussion-wrapper aside { } } - img.gravatar { - @include border-radius(3px); - } } &.tag-selector { @@ -100,17 +101,18 @@ div.discussion-wrapper aside { div.search-box { margin-top: lh(.5); + input { @include box-sizing(border-box); display: inline; } input[type='submit'] { - @include box-shadow(none); - opacity: 0.5; background: url(../images/askbot/search-icon.png) no-repeat center; border: 0; + @include box-shadow(none); margin-left: 3px; + opacity: 0.5; position: absolute; text-indent: -9999px; width: 24px; @@ -144,17 +146,6 @@ div.discussion-wrapper aside { } div#tagSelector { - h2 { - @include box-shadow(inset 0 1px 0 #eee); - border-top: 1px solid #d3d3d3; - margin: 0 (-(lh())) 0; - padding: lh(.5) lh(); - text-transform: uppercase; - font-weight: bold; - font-size: 14px; - letter-spacing: 1px; - } - ul { margin: 0; } @@ -167,11 +158,17 @@ div.discussion-wrapper aside { p.choice { @include inline-block(); margin-right: lh(.5); + margin-top: 0; } } + + label { + font-style: normal; + font-weight: 400; + } } - // Question view sopecific + // Question view specific div.follow-buttons { margin-top: 20px; @@ -187,12 +184,15 @@ div.discussion-wrapper aside { div.question-stats { + border-top: 0; + ul { color: #777; list-style: none; li { padding: 7px 0 0; + border: 0; &:last-child { @include box-shadow(none); @@ -273,6 +273,7 @@ div.discussion-wrapper aside { margin-left: 8%; } } + div.markdown ul li { margin: 20px 0; @@ -286,19 +287,15 @@ div.discussion-wrapper aside { } div.view-profile { - h2 { - border-top: 0; - @include box-shadow(none); - } + border-top: 0; a { - width: 100%; - @include box-sizing(border-box); - text-align: center; - padding: 10px; - display: block; - margin-top: 10px; @extend .light-button; + @include box-sizing(border-box); + display: block; + text-align: center; + width: 100%; + margin-top: lh(.5); &:first-child { margin-top: 0; diff --git a/lms/static/sass/course/discussion/_tags.scss b/lms/static/sass/course/discussion/_tags.scss index a8d4d0f034..fd05ed0df0 100644 --- a/lms/static/sass/course/discussion/_tags.scss +++ b/lms/static/sass/course/discussion/_tags.scss @@ -10,19 +10,17 @@ ul.tags { li { background: #eee; - @include border-radius(4px); - @include box-shadow(0px 1px 0px #ccc); color: #555; display: inline-block; font-size: 12px; margin-bottom: 5px; margin-left: 15px; - padding: 3px 10px 5px 5px; + padding: 6px 10px 6px 5px; &:before { border-color:transparent #eee transparent transparent; border-style:solid; - border-width:12px 12px 12px 0; + border-width:12px 10px 12px 0; content:""; height:0; left:-10px; @@ -31,25 +29,6 @@ ul.tags { width:0; } - span.delete-icon, div.delete-icon { - background: #555; - @include border-radius(0 4px 4px 0); - clear: none; - color: #eee; - cursor: pointer; - display: inline; - float: none; - left: 10px; - opacity: 0.5; - padding: 4px 6px; - position: relative; - top: 1px; - - &:hover { - opacity: 1; - } - } - a { color: #555; text-decoration: none; @@ -61,11 +40,4 @@ ul.tags { span.tag-number { display: none; - // @include border-radius(3px); - // background: #555; - // font-size: 10px; - // margin: 0 3px; - // padding: 2px 5px; - // color: #eee; - // opacity: 0.5; } From 0804ff7a75908a50f4414333d243067763137868 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 14 Aug 2012 15:33:55 -0400 Subject: [PATCH 2/4] Added styles for single question and profile view --- .../templates/question/answer_controls.html | 2 +- lms/static/images/askbot/comment-vote-up.png | Bin 191 -> 0 bytes .../{ => old}/vote-arrow-down-activate.png | Bin .../images/askbot/old/vote-arrow-down.png | Bin 0 -> 216 bytes .../{ => old}/vote-arrow-up-activate.png | Bin .../images/askbot/old/vote-arrow-up.png | Bin 0 -> 200 bytes lms/static/images/askbot/vote-arrow-down.png | Bin 216 -> 1155 bytes lms/static/images/askbot/vote-arrow-up.png | Bin 200 -> 1138 bytes .../sass/course/discussion/_profile.scss | 28 +++------ .../course/discussion/_question-view.scss | 57 +++++++++--------- .../sass/course/discussion/_questions.scss | 1 + .../sass/course/discussion/_sidebar.scss | 17 +++--- lms/static/sass/course/discussion/_tags.scss | 1 + 13 files changed, 51 insertions(+), 55 deletions(-) delete mode 100644 lms/static/images/askbot/comment-vote-up.png rename lms/static/images/askbot/{ => old}/vote-arrow-down-activate.png (100%) create mode 100644 lms/static/images/askbot/old/vote-arrow-down.png rename lms/static/images/askbot/{ => old}/vote-arrow-up-activate.png (100%) create mode 100644 lms/static/images/askbot/old/vote-arrow-up.png diff --git a/lms/askbot/skins/common/templates/question/answer_controls.html b/lms/askbot/skins/common/templates/question/answer_controls.html index 52c4836e1e..f1896e0d95 100644 --- a/lms/askbot/skins/common/templates/question/answer_controls.html +++ b/lms/askbot/skins/common/templates/question/answer_controls.html @@ -31,7 +31,7 @@ {% spaceless %} - {% if answer.deleted %}{% trans %}undelete{% endtrans %}{% else %}✖{% endif %} + {% if answer.deleted %}{% trans %}undelete{% endtrans %}{% else %}delete{% endif %} {% endspaceless %} {% endif %} diff --git a/lms/static/images/askbot/comment-vote-up.png b/lms/static/images/askbot/comment-vote-up.png deleted file mode 100644 index 05dc84e12e306a2cedc65c3835669bc4199a1fb6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 191 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`ZJsWUAr-gYUQ*<14&Z5cXg{NJ zUBeAewFxnd*M7-1H5at*OidDU-NDJUcWt$b>xLHbX^}_Ne=qm#n)x@C--YRkOu#x0 zUD22C85cSlmNQQ}%Q(e5f#ZFr`zv3@b8`gdeSRQQ^uwN67#H diff --git a/lms/static/images/askbot/vote-arrow-down-activate.png b/lms/static/images/askbot/old/vote-arrow-down-activate.png similarity index 100% rename from lms/static/images/askbot/vote-arrow-down-activate.png rename to lms/static/images/askbot/old/vote-arrow-down-activate.png diff --git a/lms/static/images/askbot/old/vote-arrow-down.png b/lms/static/images/askbot/old/vote-arrow-down.png new file mode 100644 index 0000000000000000000000000000000000000000..e67524077a4650997d321967e4f0b62833ecad6a GIT binary patch literal 216 zcmeAS@N?(olHy`uVBq!ia0vp^!a&T!!3HE7F0?fPsrjBRjv*DdmYy->YBrEKTBxYN zF_$ZrJ2tkubIw8LFLLt^hQ0`}X_)+gmn+iyxtv1q@+N`#52Bee&piJSFSjTD*__k& zo?TSjzPPNgL-v9Kn@Em?fFo|KA{Et9+p$gh#o; z&5WV;!o~jr+>KJca$lUUA83ydSY!KU+nXStg@vu}?x;!}6n+(`c;Lxdqkr2zFyA*a Q2RfC()78&qol`;+09svAV*mgE literal 0 HcmV?d00001 diff --git a/lms/static/images/askbot/vote-arrow-up-activate.png b/lms/static/images/askbot/old/vote-arrow-up-activate.png similarity index 100% rename from lms/static/images/askbot/vote-arrow-up-activate.png rename to lms/static/images/askbot/old/vote-arrow-up-activate.png diff --git a/lms/static/images/askbot/old/vote-arrow-up.png b/lms/static/images/askbot/old/vote-arrow-up.png new file mode 100644 index 0000000000000000000000000000000000000000..a35946cc5100ad2fcf91e7f5aea14eb79633864f GIT binary patch literal 200 zcmV;(05|`MP)`OK?rd?H-2_k7H;8p0jHme>iJDc8m_3{GrBzBHEL4Z+pnV2uU1K^_l;mRJcH zRKH?5M#!l67E94V3-ma;u@Eh^!V~d4c7`^%h|UBw%z;zdsUGeC0000O>EOv95*dWp&}}*Orwm$lgp|hEphBLPGcJCGpf-2nS2RpfoxAno6rNJv6I9EH!T=NX44beiYIwx6p;|>4Orx@Hrs>D$7ipkt zY5HJ7i79p#RrCY%4w{(H7uETyn$qZzePGxVh=74G1fDTtx`LOcS9Jxl56lb=Rw1~W zre6d#rHq5Dd#&S%I+j#-!Eq6Sh`4hmhF-*U`&$YUa#csSv2K|lP=wRg zEKbuT(ibTh_PVU;u9b-tjPan&u+dnMQVXakuZ9}NI@-kr^fKQ66?ThrHew3MwPqca zG_KSixUz+;gCMq?qGiprsyJS;u;o@P8)PSV@U{X~-3$zSRvC&SIIhK{#%urI6<0*D5%O#~)D&FEsmO5)76Suh9OYTrxZZHgnO*~7; z(ceefm}41WHEBU_A4{UG-WpeH9}C}>%aCB0ptb*Lb<0HNC)lnJE;+1^J~GL?J7lmO z{n~T#Q9R2@nWA@Z`uWPrNas1~YE!*@wzQ-7bgApXR_?DisV4t3{7t;@TBBS)^6vMU zZ^VU7jl(y>hr4_z?&|Wts(ZqPt-rV^341eVq`{B06`MS6B zwhXSGgz+sK^HlS#tuFQF32;01^@s6fY6450001=Nkli=EADSr z1<%~X^wgl##FWaylc_cg49qH-ArU1JzCKpT`MG+DAT@dwxdlMo3=B5*6$OdO*{LN8 zNvY|XdA3ULckfqH$V{%1*XSQL?vFu&J;D8jzb> zlBiITo0C^;Rbi_HHrEQs1_|pcDS(xfWZNo192Makpx~Tel&WB=XRMoSU}&gdW~OIo zVrph)sH0$HU}&Uo07PcGh9*{~W>!Y#3Q(W~w5=#5%__*n4QdyVXRDM^Qc_^0uU}qX zu2*iXmtT~wZ)j<02{OaTNEfI=x41H|B(Xv_uUHvof=g;~a#3bMNoIbY0?5R~r2Ntn zTP2`NAzsKWfE$}v3=Jk=fazBx7U&!58GyV5Q|Rl9UukYGTy=3tP%6T`SPd=?sVqp< z4@xc0FD*(2MqHXQ$f^P>=c3falKi5O{QMkPC z!8&|>tvvIJOA_;vQ$1a5m4IgGWoD*W89TW;8@rksxVV~`7#g}7I$D^!x*A&=x;Yz} zyBJs+!}Pl3Czs}?=9R$orXchh;?xUD47mkBn_W_iGRsm^+=}vZ6~Lah%EaOpS3?UY zb5jdTpm|2v-2%~@g2gRRy^c8b>H{644~kl(sD=pv(+`LVPq;u1Jn5(A0n>XCFk!p* z?<@soiYJ~fjv*DdlK%YvZ_m7y;q=Dj<15l6gqcMd6%Si9{xA|L4osRMA|TI}uE zBC34TfLXzg^9Yke4%-p6fN!2FWG=S-bd3GN(4pJ#LrUO&!zOu$r++#P*NAjnXa2~h zP{#Pk+@mOeL6XAG(txciJej>VGkr8s@MC+FrSOg+DTniey1;R#*xQ^(vK;2H9@#&U zH=6CpJqH=KBiS7utZyA^q&vhJHwp-_D@%uQABlCSnbnfQy6KCeK)u`dXS_z2HM^en zTsbql&xY delta 185 zcmV;q07n1v2*?4D7k>;01^@s6fY6450001wNkl`OK?rd?H-2_k7H; z8p0jHme>iJDc8m_3{GrBzBHEL4Z+pnV2uU1K^_l;mRJcHR5HI}IY!8+_!djiK@0Ra ny0H)~w89hdJa&dQxQNaKG|Yih+NmDy00000NkvXXu0mjfQ1(zD diff --git a/lms/static/sass/course/discussion/_profile.scss b/lms/static/sass/course/discussion/_profile.scss index 010a03ffd6..f20b51b72b 100644 --- a/lms/static/sass/course/discussion/_profile.scss +++ b/lms/static/sass/course/discussion/_profile.scss @@ -9,9 +9,9 @@ body.user-profile-page { } ul.sub-info { - // border-top: 1px solid #ddd; margin-top: lh(); list-style: none; + padding: 0; > li { display: table-cell; @@ -57,6 +57,7 @@ body.user-profile-page { ul { list-style: none; + padding: 0; &.user-stats-table { list-style: none; @@ -72,37 +73,28 @@ body.user-profile-page { margin-bottom: 30px; li { - background-position: 10px center; + background-position: 10px -10px; background-repeat: no-repeat; - @include border-radius(4px); display: inline-block; - height: 20px; - padding: 10px 10px 10px 40px; + padding: 2px 10px 2px 40px; + margin-bottom: lh(.5); + border: 1px solid lighten($border-color, 10%); &.up { - background-color:#d1e3a8; - background-image: url(../images/askbot/vote-arrow-up-activate.png); + background-image: url(../images/askbot/vote-arrow-up.png); margin-right: 6px; - - span.vote-count { - color: #3f6c3e; - } } &.down { - background-image: url(../images/askbot/vote-arrow-down-activate.png); - background-color:#eac6ad; - - span.vote-count { - color: $mit-red; - } - + background-image: url(../images/askbot/vote-arrow-down.png); } } } &.badges { @include inline-block(); + padding: 0; + margin: 0; a { background-color: #e3e3e3; diff --git a/lms/static/sass/course/discussion/_question-view.scss b/lms/static/sass/course/discussion/_question-view.scss index 1bee024607..b369ceabe0 100644 --- a/lms/static/sass/course/discussion/_question-view.scss +++ b/lms/static/sass/course/discussion/_question-view.scss @@ -1,15 +1,16 @@ // Styles for the single question view div.question-header { + @include clearfix(); div.official-stamp { background: $mit-red; color: #fff; font-size: 12px; + margin-left: -1px; margin-top: 10px; padding: 2px 5px; text-align: center; - margin-left: -1px; } div.vote-buttons { @@ -19,40 +20,40 @@ div.question-header { width: flex-grid(0.7,9); ul { - li { - background-position: center; - background-repeat: no-repeat; - cursor: pointer; - font-weight: bold; - height: 20px; - list-style: none; - padding: 10px; - text-align: center; - width: 70%; + padding: 0; + margin: 0; - &.post-vote { - @include border-radius(4px); - @include box-shadow(inset 0 1px 0px #fff); - } + li { + background-repeat: no-repeat; + color: #999; + font-size: em(20); + font-weight: bold; + list-style: none; + text-align: center; &.question-img-upvote, &.answer-img-upvote { background-image: url(../images/askbot/vote-arrow-up.png); - @include box-shadow(inset 0 1px 0px rgba(255, 255, 255, 0.5)); + background-position: center 0; + cursor: pointer; + height: 12px; + margin-bottom: lh(.5); &:hover, &.on { - background-color:#d1e3a8; - border-color: darken(#D1E3A8, 20%); - background-image: url(../images/askbot/vote-arrow-up-activate.png); + background-image: url(../images/askbot/vote-arrow-up.png); + background-position: center -22px; } } &.question-img-downvote, &.answer-img-downvote { + cursor: pointer; background-image: url(../images/askbot/vote-arrow-down.png); + background-position: center 0; + height: 12px; + margin-top: lh(.5); &:hover, &.on { - background-color:#EAC6AD; - border-color: darken(#EAC6AD, 20%); - background-image: url(../images/askbot/vote-arrow-down-activate.png); + background-image: url(../images/askbot/vote-arrow-down.png); + background-position: center -22px; } } } @@ -66,6 +67,11 @@ div.question-header { h1 { margin-top: 0; + font-weight: 100; + + a { + font-weight: 100; + } } div.meta-bar { @@ -89,10 +95,8 @@ div.question-header { width: flex-grid(4,8); a { - &.question-delete { - text-decoration: none; - cursor: pointer; - } + @extend a:link; + cursor: pointer; } span.sep { @@ -333,7 +337,6 @@ div.question-header { } div.controls { - border-top: 1px solid #efefef; text-align: right; a { diff --git a/lms/static/sass/course/discussion/_questions.scss b/lms/static/sass/course/discussion/_questions.scss index a699dc6c5e..9b7335e62b 100644 --- a/lms/static/sass/course/discussion/_questions.scss +++ b/lms/static/sass/course/discussion/_questions.scss @@ -10,6 +10,7 @@ div.question-list-header { h1 { margin: 0; font-size: 1em; + font-weight: 100; > a.light-button { float: right; diff --git a/lms/static/sass/course/discussion/_sidebar.scss b/lms/static/sass/course/discussion/_sidebar.scss index 947f8eb722..cac219b8cf 100644 --- a/lms/static/sass/course/discussion/_sidebar.scss +++ b/lms/static/sass/course/discussion/_sidebar.scss @@ -216,19 +216,20 @@ div.discussion-wrapper aside { } div.karma { - background: #eee; - border: 1px solid #D3D3D3; - @include border-radius(3px); + border: 1px solid $border-color; @include box-sizing(border-box); - @include box-shadow(inset 0 0 0 1px #fff, 0 1px 0 #fff); padding: lh(.4) 0; text-align: center; width: flex-grid(1, 3); float: right; - strong { - display: block; - font-style: 20px; + p { + text-align: center; + + strong { + display: block; + font-style: 20px; + } } } @@ -255,8 +256,6 @@ div.discussion-wrapper aside { overflow: visible; ul { - font-size: 14px; - h2 { margin:0 (-(lh())) 5px (-(lh())); padding: lh(.5) lh(); diff --git a/lms/static/sass/course/discussion/_tags.scss b/lms/static/sass/course/discussion/_tags.scss index fd05ed0df0..5cf78a4816 100644 --- a/lms/static/sass/course/discussion/_tags.scss +++ b/lms/static/sass/course/discussion/_tags.scss @@ -3,6 +3,7 @@ ul.tags { list-style: none; display: inline; + padding: 0; li, a { position: relative; From ff1f090737d1e6377bd5ced1ac4e6b71886022a8 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Aug 2012 12:48:14 -0400 Subject: [PATCH 3/4] Added more fixes for askbot also fixed some of the extra padding --- lms/static/sass/course/_textbook.scss | 4 +-- lms/static/sass/course/base/_extends.scss | 7 +++-- .../sass/course/courseware/_courseware.scss | 3 +- .../sass/course/discussion/_answers.scss | 18 ++++++++--- .../sass/course/discussion/_badges.scss | 21 ++++++++----- .../sass/course/discussion/_discussion.scss | 2 +- lms/static/sass/course/discussion/_forms.scss | 11 ++++++- .../course/discussion/_question-view.scss | 30 ++++++++++--------- .../sass/course/discussion/_questions.scss | 19 +++++++----- .../sass/course/discussion/_sidebar.scss | 22 +++++--------- lms/static/sass/shared/_forms.scss | 1 + 11 files changed, 83 insertions(+), 55 deletions(-) diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss index 8e88f8befd..8bbfa67b1c 100644 --- a/lms/static/sass/course/_textbook.scss +++ b/lms/static/sass/course/_textbook.scss @@ -10,7 +10,6 @@ div.book-wrapper { font-size: em(14); .chapter-number { - } .chapter { @@ -81,9 +80,8 @@ div.book-wrapper { section.book { @extend .content; - padding-bottom: 0; padding-right: 0; - padding-top: 0; + padding-left: lh(); nav { @extend .clearfix; diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 04eaf73094..a438b93150 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -12,10 +12,13 @@ h1.top-header { @include box-shadow(inset 0 1px 0 #fff); color: #666; cursor: pointer; - font: normal $body-font-size $body-font-family; + font: 400 $body-font-size $body-font-family; @include linear-gradient(#fff, lighten(#888, 40%)); padding: 4px 8px; text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: 0; -webkit-font-smoothing: antialiased; &:hover, &:focus { @@ -28,7 +31,7 @@ h1.top-header { .content { @include box-sizing(border-box); display: table-cell; - padding: lh(); + padding-right: lh(); vertical-align: top; width: flex-grid(9) + flex-gutter(); diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 198902c146..24bea4dd84 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -12,7 +12,8 @@ div.course-wrapper { section.course-content { @extend .content; - @include border-radius(0 4px 4px 0); + padding-right: 0; + padding-left: lh(); h1 { margin: 0 0 lh(); diff --git a/lms/static/sass/course/discussion/_answers.scss b/lms/static/sass/course/discussion/_answers.scss index 27043be68d..73660dd336 100644 --- a/lms/static/sass/course/discussion/_answers.scss +++ b/lms/static/sass/course/discussion/_answers.scss @@ -7,9 +7,16 @@ div.answer-controls { padding-left: flex-grid(1.1); width: 100%; + div.answer-count { display: inline-block; float: left; + + h1 { + margin-bottom: 0; + font-size: em(24); + font-weight: 100; + } } div.answer-sort { @@ -18,7 +25,7 @@ div.answer-controls { nav { float: right; - margin-top: 34px; + margin-top: 10px; a { &.on span{ @@ -44,8 +51,9 @@ div.answer-block { width: 100%; img.answer-img-accept { - margin: 10px 0px 10px 16px; + margin: 10px 0px 10px 11px; } + div.answer-container { @extend div.question-container; @@ -130,17 +138,19 @@ div.answer-own { div.answer-actions { margin: 0; - padding:8px 8px 8px 0; + padding:8px 0 8px 8px; text-align: right; border-top: 1px solid #efefef; span.sep { - color: #EDDFAA; + color: $border-color; } a { cursor: pointer; text-decoration: none; + @extend a:link; + font-size: em(14); } } diff --git a/lms/static/sass/course/discussion/_badges.scss b/lms/static/sass/course/discussion/_badges.scss index d74dd93d13..65d8cbf513 100644 --- a/lms/static/sass/course/discussion/_badges.scss +++ b/lms/static/sass/course/discussion/_badges.scss @@ -22,6 +22,8 @@ div#award-list{ } ul.badge-list { + padding-left: 0; + li.badge { border-bottom: 1px solid #eee; @extend .clearfix; @@ -70,12 +72,17 @@ ul.badge-list { .bronze, .badge3 { color: #cc9933; } -div.badge-desc { - > div { - margin-bottom: 20px; - span { - font-size: 18px; - @include border-radius(10px); - } + +div.discussion-wrapper aside { + div.badge-desc { + border-top: 0; + + > div { + margin-bottom: 20px; + span { + font-size: 18px; + @include border-radius(10px); + } + } } } diff --git a/lms/static/sass/course/discussion/_discussion.scss b/lms/static/sass/course/discussion/_discussion.scss index 7b0aa601d9..e12f308ae2 100644 --- a/lms/static/sass/course/discussion/_discussion.scss +++ b/lms/static/sass/course/discussion/_discussion.scss @@ -8,7 +8,7 @@ body.askbot { @include box-sizing(border-box); display: table-cell; min-width: 650px; - padding: lh(); + padding-right: lh(); vertical-align: top; width: flex-grid(9) + flex-gutter(); diff --git a/lms/static/sass/course/discussion/_forms.scss b/lms/static/sass/course/discussion/_forms.scss index ae02ab3b20..43ba07df19 100644 --- a/lms/static/sass/course/discussion/_forms.scss +++ b/lms/static/sass/course/discussion/_forms.scss @@ -5,6 +5,11 @@ form.answer-form { border-top: 1px solid #ddd; overflow: hidden; padding-left: flex-grid(1.1); + padding-top: lh(); + + p { + margin-bottom: lh(); + } textarea { @include box-sizing(border-box); @@ -121,7 +126,6 @@ form.question-form { border: none; padding: 15px 0 0 0; - input[type="text"] { @include box-sizing(border-box); width: flex-grid(6); @@ -131,6 +135,11 @@ form.question-form { margin-top: 10px; } + input[value="Cancel"] { + @extend .light-button; + float: right; + } + div#question-list { background-color: rgba(255,255,255,0.95); @include box-sizing(border-box); diff --git a/lms/static/sass/course/discussion/_question-view.scss b/lms/static/sass/course/discussion/_question-view.scss index b369ceabe0..f7657dbf97 100644 --- a/lms/static/sass/course/discussion/_question-view.scss +++ b/lms/static/sass/course/discussion/_question-view.scss @@ -68,16 +68,18 @@ div.question-header { h1 { margin-top: 0; font-weight: 100; + line-height: 1.1em; a { font-weight: 100; + line-height: 1.1em; } } div.meta-bar { border-bottom: 1px solid #eee; display: block; - margin: 10px 0; + margin: lh(.5) 0 lh(); overflow: hidden; padding: 5px 0 10px; @@ -158,7 +160,7 @@ div.question-header { } div.change-date { - font-size: 12px; + font-size: em(14); margin-bottom: 2px; } @@ -182,13 +184,13 @@ div.question-header { display: inline-block; padding: 0 0 3% 0; width: 100%; + margin-top: lh(2); div.comments-content { - font-size: 13px; - background: #efefef; + border-top: 1px solid lighten($border-color, 10%); .block { - border-top: 1px solid #ddd; + border-top: 1px solid lighten($border-color, 10%); padding: 15px; display: block; @@ -200,10 +202,10 @@ div.question-header { padding-top: 10px; span.official-comment { - background: $mit-red; + background: $pink; color: #fff; display: block; - font-size: 12px; + font-size: em(12); margin: 0 0 10px -5%; padding:2px 5px 2px 5%; text-align: left; @@ -215,6 +217,10 @@ div.question-header { form.post-comments { padding: 15px; + button { + color: #fff; + } + button:last-child { margin-left: 10px; @extend .light-button; @@ -235,7 +241,6 @@ div.question-header { border: none; @include box-shadow(none); display: inline-block; - margin-top: -8px; padding:0 2% 0 0; text-align: center; width: 5%; @@ -281,16 +286,14 @@ div.question-header { } div.comment-delete { - // display: inline; - color: $mit-red; + @extend a:link; cursor: pointer; - font-size: 15px; } div.comment-edit { @include transform(rotate(50deg)); cursor: pointer; - font-size: 16px; + a.edit-icon { color: #555; text-decoration: none; @@ -308,13 +311,13 @@ div.question-header { div.comment-meta { text-align: right; + margin-top: lh(.5); a.author { font-weight: bold; } a.edit { - font-size: 12px; padding: 2px 10px; } } @@ -341,7 +344,6 @@ div.question-header { a { display: inline-block; - font-size: 12px; margin: 10px 10px 10px 0; } } diff --git a/lms/static/sass/course/discussion/_questions.scss b/lms/static/sass/course/discussion/_questions.scss index 9b7335e62b..1b77231bba 100644 --- a/lms/static/sass/course/discussion/_questions.scss +++ b/lms/static/sass/course/discussion/_questions.scss @@ -1,19 +1,24 @@ // Styles for the default question list view div.question-list-header { + @extend h1.top-header; display: block; margin-bottom: 0px; + padding-bottom: lh(.5); overflow: hidden; width: flex-grid(9,9); - @extend h1.top-header; h1 { margin: 0; font-size: 1em; font-weight: 100; + padding-bottom: lh(.5); > a.light-button { float: right; + font-size: em(14, 24); + letter-spacing: 0; + font-weight: 400; } } @@ -87,6 +92,7 @@ div.question-list-header { a { color: #555; + font-size: em(14, 24); } } @@ -95,12 +101,10 @@ div.question-list-header { } ul.tags { - li { - background: #fff; - - &:before { - border-color: transparent #fff transparent transparent; - } + span, div { + line-height: 1em; + margin-left: 6px; + cursor: pointer; } } } @@ -155,6 +159,7 @@ ul.question-list, div#question-list { span.relative-time { font-weight: normal; + line-height: lh(); } } diff --git a/lms/static/sass/course/discussion/_sidebar.scss b/lms/static/sass/course/discussion/_sidebar.scss index cac219b8cf..2418792b4f 100644 --- a/lms/static/sass/course/discussion/_sidebar.scss +++ b/lms/static/sass/course/discussion/_sidebar.scss @@ -264,24 +264,16 @@ div.discussion-wrapper aside { } div.question-tips, div.markdown { - ul { - margin-left: 8%; - } - + ul, ol { - margin-left: 8%; - } - } - - div.markdown ul li { - margin: 20px 0; - - &:first-child { margin: 0; - } + padding: 0; - ol li { - margin: 0; + li { + border-bottom: 0; + line-height: lh(); + margin-bottom: em(8); + } } } diff --git a/lms/static/sass/shared/_forms.scss b/lms/static/sass/shared/_forms.scss index 842ffb0086..d6a5f482e3 100644 --- a/lms/static/sass/shared/_forms.scss +++ b/lms/static/sass/shared/_forms.scss @@ -42,6 +42,7 @@ textarea { input[type="submit"], input[type="button"], +button, .button { @include border-radius(3px); @include button(shiny, $blue); From 6d7225bebb9396f4fbcb351704a1cd6a1f9e96d7 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 15 Aug 2012 13:50:37 -0400 Subject: [PATCH 4/4] Added some final touches to askbot --- .../sass/course/discussion/_sidebar.scss | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/lms/static/sass/course/discussion/_sidebar.scss b/lms/static/sass/course/discussion/_sidebar.scss index 2418792b4f..7ee435f8af 100644 --- a/lms/static/sass/course/discussion/_sidebar.scss +++ b/lms/static/sass/course/discussion/_sidebar.scss @@ -63,9 +63,15 @@ div.discussion-wrapper aside { li { border-bottom: 0; background: #eee; + padding: 6px 10px 6px 5px; - a:hover { - background: transparent; + a { + padding: 0; + line-height: 12px; + + &:hover { + background: transparent; + } } } } @@ -113,6 +119,7 @@ div.discussion-wrapper aside { @include box-shadow(none); margin-left: 3px; opacity: 0.5; + padding: 6px 0 0; position: absolute; text-indent: -9999px; width: 24px; @@ -133,15 +140,22 @@ div.discussion-wrapper aside { } input#clear { - @include box-shadow(none); - @include border-radius(15px); + background: none; border: none; - background: #bbb; - color: #fff; + @include border-radius(0); + @include box-shadow(none); + color: #999; display: inline; - font-size: 10px; - margin-left: -25px; + font-size: 12px; + font-weight: bold; + height: 19px; + line-height: 1em; + margin: { + left: -25px; + top: 8px; + } padding: 2px 5px; + text-shadow: none; } }