From fa7d1745dcd0fa516482f605cb852ab3aabfb3ad Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 6 Aug 2012 17:03:49 -0400 Subject: [PATCH 01/12] removed extraneous elements (page title, search within) --- lms/templates/discussion/_forum.html | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/lms/templates/discussion/_forum.html b/lms/templates/discussion/_forum.html index 481c50838a..668c85e2f4 100644 --- a/lms/templates/discussion/_forum.html +++ b/lms/templates/discussion/_forum.html @@ -2,17 +2,9 @@
-
- Discussion -
<%include file="_search_bar.html" /> -
-
- - -
-
New Post
+
<%include file="_sort.html" />
From 0ec7e3d3cdaa3c8eed0989ab15d7454738a83bd1 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 6 Aug 2012 17:04:07 -0400 Subject: [PATCH 02/12] added "top" sort type --- lms/templates/discussion/_sort.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lms/templates/discussion/_sort.html b/lms/templates/discussion/_sort.html index f71fab2cc3..d8df1e7e3d 100644 --- a/lms/templates/discussion/_sort.html +++ b/lms/templates/discussion/_sort.html @@ -25,6 +25,8 @@
Sort by: + ${link_to_sort('top', 'top')} + | ${link_to_sort('date', 'date')} | ${link_to_sort('votes', 'votes')} From 43a70d899418dfc38c1c7fe623b3f7d64d6f2911 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 6 Aug 2012 17:04:24 -0400 Subject: [PATCH 03/12] a few main discussion page tweaks --- lms/static/sass/_discussion.scss | 80 +++++++++++++++++++++++++++++--- 1 file changed, 73 insertions(+), 7 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 47962bfdda..df58eae4fd 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -5,6 +5,12 @@ $comment_body_size: 0.9em; $comment_info_size: 0.75em; $discussion_input_width: 100%; +$tag_background_color: #e7ecdd; +$tag_border_color: #babdb3; +$tag_text_color: #5b614f; + + + @mixin discussion-font { font-family: inherit; } @@ -20,6 +26,7 @@ $discussion_input_width: 100%; .discussion-non-content { margin-left: flex-gutter(); } + //TITLE .discussion-title { @include discussion-font; @@ -29,6 +36,7 @@ $discussion_input_width: 100%; font-weight: bold; margin-bottom: flex-gutter(6); } + .discussion-title-wrapper { .discussion-watch-discussion, .discussion-unwatch-discussion { @include discussion-font; @@ -37,6 +45,7 @@ $discussion_input_width: 100%; margin-left: 5px; } } + //SORTING .discussion-sort { float: right; @@ -48,11 +57,13 @@ $discussion_input_width: 100%; text-decoration: none; } } + .discussion-sort-link.sorted { color: #1C71DD; font-weight: bold; } } + //SEARCH .search-wrapper-inline { display: inline-block; @@ -60,10 +71,16 @@ $discussion_input_width: 100%; margin-top: 3%; width: 80%; } + + .search-wrapper { + height: 100px; + } + .discussion-search-form { display: inline-block; margin-bottom: 1%; width: flex-grid(12); + .discussion-link { @include button; color: white; @@ -74,25 +91,32 @@ $discussion_input_width: 100%; padding-top: 9px; text-decoration: none; } + .discussion-search-text { @include discussion-font; } + .search-input { float: left; font: inherit; font-style: normal; - width: 72%; + // width: 72%; + width: flex-grid(8); + margin-left: flex-grid(1); } } + .search-within { display: block; margin-bottom: 3%; } + .discussion-search-within-board { font: inherit; font-size: $comment_body_size; font-style: normal; } + //BASIC BUTTON STYLES .control-button { @include button; @@ -117,6 +141,7 @@ $discussion_input_width: 100%; width: inherit; text-decoration: none; text-shadow: none; + &:hover { background-color: #A2A2A2; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A2A2A2),color-stop(100%, #7B7B7B)); @@ -134,6 +159,7 @@ $discussion_input_width: 100%; //FOLLOW BUTTON .follow-wrapper { float: right; + .discussion-link { @include button; background-color: #BEBEBE; @@ -147,6 +173,7 @@ $discussion_input_width: 100%; padding: 5px 8px; text-decoration: none; text-shadow: none; + &:hover { background-color: #AAA; background-image: none; @@ -163,25 +190,31 @@ $discussion_input_width: 100%; height: flex-grid(3); margin: 1% 2%; text-align: center; + .discussion-vote-count { @include discussion-font; font-size: $comment_body_size; } + a.discussion-vote { color: black; display: block; font-size: 15px; font-weight: bold; + &:hover { color: #1C71DD; text-decoration: none; } + &.discussion-vote-up { margin-bottom: 3px; } + &.discussion-vote-down { margin-top: 5px; } + &.voted { color: #1C71DD; } @@ -193,6 +226,7 @@ $discussion_input_width: 100%; min-height: 40px; width: 90%; } + .new-post-form, .discussion-thread-edit { .title-input, .body-input { display: block !important; @@ -200,14 +234,17 @@ $discussion_input_width: 100%; font-style: normal; width: $discussion_input_width !important; } + .discussion-errors { color: #8F0E0E; display: block; margin-left: -5%; } + .new-post-body { margin-top: flex-gutter(); } + .tagsinput { background: #FAFAFA; border: 1px solid #C8C8C8; @@ -227,19 +264,24 @@ $discussion_input_width: 100%; -webkit-font-smoothing: antialiased; } } + .discussion-content-edit, .discussion-reply-new, .new-post-form { margin: 10px 0 10px 0; + .new-post-control { margin-left: 80%; margin-top: 1%; } + .reply-post-control { margin-left: 73%; } + .edit-post-control { margin-left: 79%; margin-top: 1%; } + .control-button { @include button; @include discussion-font; @@ -253,71 +295,85 @@ $discussion_input_width: 100%; width: inherit; } } + .new-post-form { margin: 10px 0 40px 0; } + .discussion-reply-new { .discussion-auto-watch { margin-left: 2%; } } + //THREAD STYLES .thread { //display: none; + .thread-title { @include discussion-font; @include discussion-clickable; display: block; + margin-bottom: $body-line-height; font-size: $comment_title_size; font-weight: bold; } + .thread-body, .content-body { @include discussion-font; font-size: $comment_body_size; margin-bottom: 4px; margin-top: 3px; + p { @include discussion-font; - margin: 0; } } + .thread-tags { display: inline-block; + .thread-tag { @include discussion-font; - background: #CDE69C; - border: 1px solid #A5D24A; + background: $tag_background_color; + border: 1px solid $tag_border_color; -moz-border-radius: 2px; -webkit-border-radius: 2px; - color: #638421; + color: $tag_text_color; float: left; font-size: 13px; margin: 5px 7px 5px 0; padding: 5px 7px; text-decoration: none; + &:hover { - border-color: #1E4612; - color: #1E4612; + border-color: #7b8761; + color: #2f381c; } } } + .info { @include discussion-font; color: gray; font-size: $comment_info_size; font-style: italic; margin-top: 2%; + .comment-time { display: inline; float: right; margin-right: -4%; } + .comment-count { display: inline; } + .discussion-reply { margin-left: 4px; } + .discussion-link { @include discussion-font; color: #1d9dd9; @@ -325,13 +381,16 @@ $discussion_input_width: 100%; margin-left: 2px; } } + .discussion-content { border-top: lightgray 1px solid; overflow: hidden; padding: 1.5% 0; + .discussion-reply-new { @include discussion-font; margin-left: 5%; + .reply-body { @include discussion-font; display: block; @@ -341,11 +400,13 @@ $discussion_input_width: 100%; } } } + //COMMENT STYLES .comments { //display: none; margin-left: $comment_margin_left; overflow: hidden; + .comment { .comment-body, .content-body { @include discussion-font; @@ -354,6 +415,7 @@ $discussion_input_width: 100%; font-size: $comment_body_size; margin-top: 3px; } + &.endorsed { > .discussion-content { background-color: lightyellow; @@ -362,16 +424,19 @@ $discussion_input_width: 100%; } } } + //PAGES .discussion-paginator { font-size: $comment_body_size; margin-bottom: 10px; margin-top: 20px; text-align: center; + div { display: inline-block; font-weight: bold; margin: 0 5px; + a { background: #EEE; -webkit-border-radius: 3px; @@ -383,6 +448,7 @@ $discussion_input_width: 100%; font-weight: normal; padding: 4px 10px; text-decoration: none; + &:hover { background: #DDD; } From 6cdd3a7ec2040026a2c9fb324e0ac12e3aed937b Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 6 Aug 2012 18:17:21 -0400 Subject: [PATCH 04/12] started thread styles --- lms/static/sass/_discussion.scss | 11 +++++++++-- lms/templates/discussion/_thread.html | 4 ++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index df58eae4fd..e7504c9d17 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -187,15 +187,22 @@ $tag_text_color: #5b614f; //VOTES .discussion-votes { float: left; - height: flex-grid(3); - margin: 1% 2%; + width: flex-grid(1); text-align: center; + // height: flex-grid(3); + // margin: 1% 2%; + .discussion-vote-count { @include discussion-font; font-size: $comment_body_size; } + .discussion-votes-point { + font-size: 1em; + font-weight: bold; + } + a.discussion-vote { color: black; display: block; diff --git a/lms/templates/discussion/_thread.html b/lms/templates/discussion/_thread.html index bbe08ec352..269d65c608 100644 --- a/lms/templates/discussion/_thread.html +++ b/lms/templates/discussion/_thread.html @@ -111,8 +111,8 @@ <%def name="render_vote(content)">
- ${render_link("discussion-vote discussion-vote-up", "˄")} + ${render_link("discussion-vote discussion-vote-up", "▲")}
${content['votes']['point']}
- ${render_link("discussion-vote discussion-vote-down", "˅")} + ${render_link("discussion-vote discussion-vote-down", "▼")}
From 2135ed501599239f73fcf8409998bccc496be3dd Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 7 Aug 2012 10:16:08 -0400 Subject: [PATCH 05/12] added vote arrows --- lms/static/images/vote-arrows.png | Bin 0 -> 1580 bytes lms/static/sass/_discussion.scss | 74 +++++++++++++++++++----------- 2 files changed, 47 insertions(+), 27 deletions(-) create mode 100644 lms/static/images/vote-arrows.png diff --git a/lms/static/images/vote-arrows.png b/lms/static/images/vote-arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..6f84cdb271d0b492842eae90a6ee46b88b17b994 GIT binary patch literal 1580 zcmeAS@N?(olHy`uVBq!ia0vp^DL`z*!3HE(nbz$CQj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS=07??9MLn2Bde0{8v^Kf6`()~Xj@TAnpKdC8`Lf!&sHg;q@=(~U%$M( zT(8_%FTW^V-_X+15@d#vkuFe$ZgFK^Nn(X=Ua>OF1ees}t-3#_`hBq$Z(46Le)Ln;eW^@CE2 z^Gl18f$@>14ATq@JNy=b6armi^2lw4p!z%&SA!V^D`1J6FGdB8kV1k4<=mo}?2Ffc`Vx;TbZ+KX)EL7QZ#INvG#KnOS(k4 zrkh0ww`Ak8g|@uYx*zb&PSH9n(e9(;dKsQt=+&|PrkvC6SvBzziOXi5 zFgUl+>4c6+tF@K=$AoVZ9*GA9Lry4_h=;3rtTHfeOWE*{Ln%da7w_8u6OBX}k-I?= zg+D|$aoug&rY$!|%O_?sPnk?z%Nl2MPKCO|Zycs~q;7cfL3s(oUp2Wk`WX{{7)KQS z5PTFF-&iN)xaXnYw<#4HfFgI>mlOp5QE0NbzJ)*WxZsoZYfS21>~`v?>@|ugVzK43 zY}9+;wW48%L5a+vHs_-ge@V(coyO#Fg!fd!(S@&K!o(7}eD}QmHdCymRicwv6Ws_PkbUH-5t>FJ9<&Q|T}V``6mY%0GJN9`x)gd(&gqH-T+Ndi#0R zsBbbw->o Date: Tue, 7 Aug 2012 11:27:13 -0400 Subject: [PATCH 06/12] updated thread styles: voting, actions, comments, sort --- lms/static/sass/_discussion.scss | 88 +++++++++++++++++++-------- lms/templates/discussion/_sort.html | 12 ++-- lms/templates/discussion/_thread.html | 31 ++++++---- 3 files changed, 86 insertions(+), 45 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 2bad08a601..66ba6b4e57 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -1,8 +1,9 @@ $comment_margin_left: 30px; $discussion_title_size: 1.6em; $comment_title_size: 1.0em; -$comment_body_size: 0.9em; +$post_font_size: 0.9em; $comment_info_size: 0.75em; +$comment_font_size: 0.8em; $discussion_input_width: 100%; $tag_background_color: #e7ecdd; @@ -49,9 +50,22 @@ $tag_text_color: #5b614f; //SORTING .discussion-sort { float: right; - font-size: $comment_body_size; - margin-top: -2.5%; + font-size: 0.8em; + margin-top: -36px; + + .discussion-label { + display: block; + float: left; + padding: 0 14px; + line-height: 34px; + } + .discussion-sort-link { + display: block; + float: left; + padding: 0 14px; + line-height: 34px; + &:hover { color: #1C71DD; text-decoration: none; @@ -59,8 +73,8 @@ $tag_text_color: #5b614f; } .discussion-sort-link.sorted { - color: #1C71DD; - font-weight: bold; + color: #000; + border-bottom: 2px solid #000; } } @@ -113,7 +127,7 @@ $tag_text_color: #5b614f; .discussion-search-within-board { font: inherit; - font-size: $comment_body_size; + font-size: $post_font_size; font-style: normal; } @@ -188,12 +202,13 @@ $tag_text_color: #5b614f; .discussion-votes { float: left; width: flex-grid(1); + margin-top: 18px; text-align: center; .discussion-vote { display: block; width: 50px; - height: 19px; + height: 17px; margin: auto; background: url(../images/vote-arrows.png) no-repeat; font-size: 15px; @@ -204,23 +219,23 @@ $tag_text_color: #5b614f; } .discussion-vote-up { - margin-bottom: 3px; - background-position: -50px -1px; + margin-bottom: 5px; + background-position: -50px -3px; &:hover { - background-position: -50px -3px; + background-position: -50px -5px; @include transition-duration(0.05s); } &.voted { - background-position: 0 -1px; + background-position: 0 -3px; color: #1C71DD; @include transition-duration(0); } } .discussion-vote-down { - margin-top: 5px; + margin-top: 7px; background-position: -50px -30px; &:hover { @@ -233,25 +248,25 @@ $tag_text_color: #5b614f; color: #1C71DD; @include transition-duration(0); } - } - + } .discussion-vote-count { @include discussion-font; - font-size: $comment_body_size; + font-size: $post_font_size; } .discussion-votes-point { - font-size: 1em; + font-size: 1.1em; font-weight: bold; + color: #9a9a9a; } } //CREATE NEW AND EDIT POSTS .discussion-right-wrapper { float: left; min-height: 40px; - // width: 90%; width: flex-grid(11); + margin: 24px 0; } .new-post-form, .discussion-thread-edit { @@ -344,11 +359,12 @@ $tag_text_color: #5b614f; margin-bottom: $body-line-height; font-size: $comment_title_size; font-weight: bold; + line-height: 1.4em; } .thread-body, .content-body { @include discussion-font; - font-size: $comment_body_size; + font-size: $post_font_size; margin-bottom: 4px; margin-top: 3px; @@ -387,16 +403,31 @@ $tag_text_color: #5b614f; font-style: italic; margin-top: 2%; + a:hover { + text-decoration: none; + color: #1C71DD; + } + .comment-time { display: inline; float: right; - margin-right: -4%; } - .comment-count { + .comment-count { display: inline; } + .discussion-actions { + display: inline; + margin: 0; + padding: 0; + + li { + display: inline; + margin-left: 20px; + } + } + .discussion-reply { margin-left: 4px; } @@ -412,7 +443,7 @@ $tag_text_color: #5b614f; .discussion-content { border-top: lightgray 1px solid; overflow: hidden; - padding: 1.5% 0; + // padding: 1.5% 0; .discussion-reply-new { @include discussion-font; @@ -421,7 +452,7 @@ $tag_text_color: #5b614f; .reply-body { @include discussion-font; display: block; - font-size: $comment_body_size; + font-size: $post_font_size; margin-top: 10px; width: 95%; } @@ -431,21 +462,26 @@ $tag_text_color: #5b614f; //COMMENT STYLES .comments { //display: none; - margin-left: $comment_margin_left; + // margin-left: $comment_margin_left; + margin-left: flex-grid(1); overflow: hidden; + .discussion-right-wrapper { + margin: 10px 0; + } + .comment { .comment-body, .content-body { @include discussion-font; color: black; display: block; - font-size: $comment_body_size; + font-size: $comment_font_size; margin-top: 3px; } &.endorsed { > .discussion-content { - background-color: lightyellow; + background-color: #fcfcea; } } } @@ -454,7 +490,7 @@ $tag_text_color: #5b614f; //PAGES .discussion-paginator { - font-size: $comment_body_size; + font-size: $post_font_size; margin-bottom: 10px; margin-top: 20px; text-align: center; diff --git a/lms/templates/discussion/_sort.html b/lms/templates/discussion/_sort.html index d8df1e7e3d..b0c0b4b048 100644 --- a/lms/templates/discussion/_sort.html +++ b/lms/templates/discussion/_sort.html @@ -3,9 +3,9 @@ <%def name="link_to_sort(key, title)"> % if key == sort_key: % if sort_order.lower() == 'desc': - ${_link_to_sort(key, 'asc', title + ' ▼', 'sorted')} + ${_link_to_sort(key, 'asc', title + '', 'sorted')} % else: - ${_link_to_sort(key, 'desc', title + ' ▲', 'sorted')} + ${_link_to_sort(key, 'desc', title + '', 'sorted')} % endif % else: ${_link_to_sort(key, 'desc', title)} @@ -24,12 +24,12 @@
- Sort by: + Sort by: ${link_to_sort('top', 'top')} - | + ${link_to_sort('date', 'date')} - | + ${link_to_sort('votes', 'votes')} - | + ${link_to_sort('comments', 'comments')}
diff --git a/lms/templates/discussion/_thread.html b/lms/templates/discussion/_thread.html index 269d65c608..389105aee8 100644 --- a/lms/templates/discussion/_thread.html +++ b/lms/templates/discussion/_thread.html @@ -36,10 +36,11 @@ <%def name="render_content(content, type, **kwargs)">
- + ${render_vote(content)}
+ ${render_title(content, type, **kwargs)}
${content['body'] | h}
@@ -74,18 +75,22 @@ <%def name="render_bottom_bar(content, type, **kwargs)"> -
- ${render_info(content)} - ${render_link("discussion-link discussion-reply discussion-reply-" + type, "Reply")} - ${render_link("discussion-link discussion-edit", "Edit")} - % if type == "comment" and request.user.is_staff: - % if content['endorsed']: - - % else: - +
+ ${render_info(content)} +
    +
  • ${render_link("discussion-link discussion-reply discussion-reply-" + type, "Reply")}
    • +
  • ${render_link("discussion-link discussion-edit", "Edit")}
    • +
  • + % if type == "comment" and request.user.is_staff: + % if content['endorsed']: + + % else: + + % endif + % endif - - % endif +
    • +
From d5302a0bd02676af287a3256e815f5da3de37b56 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 7 Aug 2012 12:00:17 -0400 Subject: [PATCH 07/12] thread updates: follow/unfollow, grid tweaks --- lms/static/sass/_discussion.scss | 56 +++++++++------------------ lms/templates/discussion/_thread.html | 12 ++++-- 2 files changed, 28 insertions(+), 40 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 66ba6b4e57..8112f60afd 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -170,38 +170,16 @@ $tag_text_color: #5b614f; box-shadow: inset 0 1px 0 #BBB,0 0 3px #CCC; } } + //FOLLOW BUTTON .follow-wrapper { - float: right; - - .discussion-link { - @include button; - background-color: #BEBEBE; - background-image: none; - border: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - display: inline-block; - font-size: $comment_info_size; - padding: 5px 8px; - text-decoration: none; - text-shadow: none; - - &:hover { - background-color: #AAA; - background-image: none; - border: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - } - } + display: inline; } + //VOTES .discussion-votes { float: left; - width: flex-grid(1); + width: 60px; margin-top: 18px; text-align: center; @@ -263,10 +241,9 @@ $tag_text_color: #5b614f; } //CREATE NEW AND EDIT POSTS .discussion-right-wrapper { - float: left; min-height: 40px; - width: flex-grid(11); - margin: 24px 0; + // width: flex-grid(11); + margin: 24px 0 24px 68px; } .new-post-form, .discussion-thread-edit { @@ -415,6 +392,7 @@ $tag_text_color: #5b614f; .comment-count { display: inline; + margin-right: 20px; } .discussion-actions { @@ -424,19 +402,18 @@ $tag_text_color: #5b614f; li { display: inline; - margin-left: 20px; + margin-right: 20px; } } - .discussion-reply { - margin-left: 4px; - } - .discussion-link { @include discussion-font; color: #1d9dd9; display: inline; - margin-left: 2px; + + &.discussion-unfollow-thread { + color: #dea03e; + } } } @@ -463,11 +440,16 @@ $tag_text_color: #5b614f; .comments { //display: none; // margin-left: $comment_margin_left; - margin-left: flex-grid(1); + // margin-left: flex-grid(1); + margin-left: 68px; overflow: hidden; + .discussion-votes { + margin-top: 8px; + } + .discussion-right-wrapper { - margin: 10px 0; + margin: 10px 0 10px 68px; } .comment { diff --git a/lms/templates/discussion/_thread.html b/lms/templates/discussion/_thread.html index 389105aee8..ea2e24361a 100644 --- a/lms/templates/discussion/_thread.html +++ b/lms/templates/discussion/_thread.html @@ -39,8 +39,7 @@ ${render_vote(content)}
- + ${render_title(content, type, **kwargs)}
${content['body'] | h}
@@ -79,6 +78,7 @@ ${render_info(content)}
  • ${render_link("discussion-link discussion-reply discussion-reply-" + type, "Reply")}
    • +
  • ${render_link("discussion-link discussion-edit", "Edit")}
  • % if type == "comment" and request.user.is_staff: @@ -105,7 +105,13 @@
% if content.get('comments_count', -1) >= 0: - Show ${content['comments_count']} comment(s) + + % if content.get('comments_count', -1) >= 2: + Show ${content['comments_count']} comments + % else: + Show ${content['comments_count']} comment + % endif + % endif
From 8c366e2d5999918867c761a053ba08a0b37eed18 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 7 Aug 2012 14:25:05 -0400 Subject: [PATCH 08/12] tweaking the text editor --- lms/static/sass/_discussion.scss | 52 +++++++++++++++++++++------ lms/templates/discussion/_inline.html | 6 ++-- 2 files changed, 43 insertions(+), 15 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 8112f60afd..f63fa870e1 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -424,7 +424,7 @@ $tag_text_color: #5b614f; .discussion-reply-new { @include discussion-font; - margin-left: 5%; + margin-left: 68px; .reply-body { @include discussion-font; @@ -500,6 +500,14 @@ $tag_text_color: #5b614f; } } } + + &.inline-discussion { + .discussion-new-post-inline { + textarea { + + } + } + } } //EDITOR STYLES @@ -516,22 +524,44 @@ $tag_text_color: #5b614f; background-color: Silver; } -.wmd-input -{ +.wmd-input { height: 150px; width: 100%; - background-color: Gainsboro; - border: 1px solid DarkGray; - font: inherit; + background-color: #e9e9e9; + border: 1px solid #c8c8c8; + font-family: Monaco, 'Lucida Console', monospace; + font-style: normal; + font-size: 12px; + @include border-radius(3px 3px 0 0); + @include box-shadow(none); } -.wmd-preview -{ - background-color: #c0e0ff; +.wmd-preview { + position: relative; + font-family: $sans-serif; + padding: 25px 20px 10px 20px; + box-sizing: border-box; + border: 1px solid #c8c8c8; + border-top-width: 0; + @include border-radius(0 0 3px 3px); + + &:before { + content: 'PREVIEW'; + position: absolute; + top: 3px; + left: 5px; + font-size: 11px; + color: #bbb; + } + + + p { + font-family: $sans-serif; + } + background-color: #fafafa; } -.wmd-button-row -{ +.wmd-button-row { position: relative; margin-left: 5px; margin-right: 5px; diff --git a/lms/templates/discussion/_inline.html b/lms/templates/discussion/_inline.html index 66db888fe8..ccd9eb30c2 100644 --- a/lms/templates/discussion/_inline.html +++ b/lms/templates/discussion/_inline.html @@ -2,11 +2,9 @@
-
- <%include file="_search_bar.html" /> +
+
-
New Post
- <%include file="_sort.html" />
% for thread in threads: From 6295bc3bc5126163dc3bfccf297b1bc56d90923c Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 7 Aug 2012 14:41:20 -0400 Subject: [PATCH 09/12] label font changes --- lms/static/sass/_discussion.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index f63fa870e1..98b995cff9 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -313,6 +313,13 @@ $tag_text_color: #5b614f; text-decoration: none; width: inherit; } + + label { + font-family: $sans-serif; + font-size: .8em; + font-style: normal; + font-weight: 400; + } } .new-post-form { @@ -531,7 +538,8 @@ $tag_text_color: #5b614f; border: 1px solid #c8c8c8; font-family: Monaco, 'Lucida Console', monospace; font-style: normal; - font-size: 12px; + font-size: 0.8em; + line-height: 1.6em; @include border-radius(3px 3px 0 0); @include box-shadow(none); } @@ -540,6 +548,7 @@ $tag_text_color: #5b614f; position: relative; font-family: $sans-serif; padding: 25px 20px 10px 20px; + margin-bottom: 5px; box-sizing: border-box; border: 1px solid #c8c8c8; border-top-width: 0; From d6e969a8c0e20540bf374ed9c97ac226726ec311 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 7 Aug 2012 15:46:18 -0400 Subject: [PATCH 10/12] added collapsed state for text editor --- lms/static/sass/_discussion.scss | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 98b995cff9..190716eb5b 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -87,7 +87,7 @@ $tag_text_color: #5b614f; } .search-wrapper { - height: 100px; + height: 110px; } .discussion-search-form { @@ -287,13 +287,30 @@ $tag_text_color: #5b614f; .discussion-content-edit, .discussion-reply-new, .new-post-form { margin: 10px 0 10px 0; + &.collapsed { + .wmd-button-row { + height: 0; + } + + .wmd-input { + height: 100px; + @include border-radius(3px); + } + + .wmd-preview { + height: 0; + padding: 0; + border-width: 0; + } + } + .new-post-control { margin-left: 80%; margin-top: 1%; } .reply-post-control { - margin-left: 73%; + // margin-left: 73%; } .edit-post-control { @@ -541,7 +558,7 @@ $tag_text_color: #5b614f; font-size: 0.8em; line-height: 1.6em; @include border-radius(3px 3px 0 0); - @include box-shadow(none); + // @include box-shadow(none); } .wmd-preview { @@ -553,6 +570,8 @@ $tag_text_color: #5b614f; border: 1px solid #c8c8c8; border-top-width: 0; @include border-radius(0 0 3px 3px); + overflow: hidden; + @include transition(all, .1s, easeOut); &:before { content: 'PREVIEW'; @@ -578,6 +597,8 @@ $tag_text_color: #5b614f; margin-top: 10px; padding: 0px; height: 20px; + overflow: hidden; + @include transition(all, .1s, easeOut); } .wmd-spacer From 10ff6af3bb4837112cbdade043cd8dd5f8fb1691 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Wed, 8 Aug 2012 10:56:59 -0400 Subject: [PATCH 11/12] discussion sidebar additions; inline text editor example --- lms/static/sass/_discussion.scss | 156 +++++++++++++++++++---- lms/templates/discussion/_accordion.html | 44 ++++--- lms/templates/discussion/_inline.html | 28 +++- 3 files changed, 179 insertions(+), 49 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 190716eb5b..c848ab95cf 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -23,7 +23,95 @@ $tag_text_color: #5b614f; } } +@mixin standard-discussion-link { + text-decoration: none; + &:hover { + color: #1C71DD; + text-decoration: none; + } +} + .discussion { + #open_close_accordion { + display: none; + } + + .sidebar-module { + @include clearfix; + padding: 0 24px 24px 0; + margin-bottom: 24px; + border-bottom: 1px solid #d3d3d3; + font-size: 0.8em; + + header { + margin-bottom: 14px; + @include clearfix; + } + + h4 { + float: left; + font-size: 1.1em; + font-weight: bold; + } + + .sidebar-new-post-button { + @include button; + display: block; + box-sizing: border-box; + width: 100%; + margin: 20px 0; + padding: 11px; + font-size: 1.1em; + text-align: center; + + &:hover { + text-decoration: none; + } + } + + .sidebar-view-all { + float: right; + font-size: 0.9em; + line-height: 1.6em; + @include standard-discussion-link; + } + + .discussion-sidebar-following-list { + li { + @include clearfix; + margin-bottom: 8px; + } + + a { + @include standard-discussion-link; + } + } + + .discussion-sidebar-tags-list li { + @include clearfix; + } + + .sidebar-tag-count { + color: #9a9a9a; + font-size: .85em; + line-height: 3em; + } + + .sidebar-following-name { + float: left; + width: 80%; + } + + .sidebar-vote-count { + float: right; + width: 20%; + text-align: right; + color: #9a9a9a; + } + + + } + .discussion-non-content { margin-left: flex-gutter(); } @@ -239,6 +327,7 @@ $tag_text_color: #5b614f; color: #9a9a9a; } } + //CREATE NEW AND EDIT POSTS .discussion-right-wrapper { min-height: 40px; @@ -302,6 +391,14 @@ $tag_text_color: #5b614f; padding: 0; border-width: 0; } + + .post-options { + height: 0; + } + + .reply-post-control { + height: 0; + } } .new-post-control { @@ -321,12 +418,12 @@ $tag_text_color: #5b614f; .control-button { @include button; @include discussion-font; + margin-right: 16px; + padding-top: 9px; color: white; display: inline-block; font-size: inherit; font-weight: bold; - margin-left: 5%; - padding-top: 9px; text-decoration: none; width: inherit; } @@ -349,6 +446,25 @@ $tag_text_color: #5b614f; } } + .thread-tag { + background: $tag_background_color; + border: 1px solid $tag_border_color; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + color: $tag_text_color; + float: left; + font-size: 13px; + margin: 5px 7px 5px 0; + padding: 5px 7px; + text-decoration: none; + + &:hover { + border-color: #7b8761; + color: #2f381c; + text-decoration: none; + } + } + //THREAD STYLES .thread { //display: none; @@ -376,25 +492,6 @@ $tag_text_color: #5b614f; .thread-tags { display: inline-block; - - .thread-tag { - @include discussion-font; - background: $tag_background_color; - border: 1px solid $tag_border_color; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - color: $tag_text_color; - float: left; - font-size: 13px; - margin: 5px 7px 5px 0; - padding: 5px 7px; - text-decoration: none; - - &:hover { - border-color: #7b8761; - color: #2f381c; - } - } } .info { @@ -526,9 +623,16 @@ $tag_text_color: #5b614f; } &.inline-discussion { - .discussion-new-post-inline { - textarea { + .new-post-form { + margin: 24px 60px; + .post-options { + margin: 8px 0 16px 0; + overflow: hidden; + } + + .reply-post-control { + overflow: hidden; } } } @@ -558,7 +662,6 @@ $tag_text_color: #5b614f; font-size: 0.8em; line-height: 1.6em; @include border-radius(3px 3px 0 0); - // @include box-shadow(none); } .wmd-preview { @@ -571,7 +674,7 @@ $tag_text_color: #5b614f; border-top-width: 0; @include border-radius(0 0 3px 3px); overflow: hidden; - @include transition(all, .1s, easeOut); + @include transition(all, .2s, easeOut); &:before { content: 'PREVIEW'; @@ -581,7 +684,6 @@ $tag_text_color: #5b614f; font-size: 11px; color: #bbb; } - p { font-family: $sans-serif; @@ -598,7 +700,7 @@ $tag_text_color: #5b614f; padding: 0px; height: 20px; overflow: hidden; - @include transition(all, .1s, easeOut); + @include transition(all, .2s, easeOut); } .wmd-spacer diff --git a/lms/templates/discussion/_accordion.html b/lms/templates/discussion/_accordion.html index c072705d55..c5db48e43b 100644 --- a/lms/templates/discussion/_accordion.html +++ b/lms/templates/discussion/_accordion.html @@ -1,23 +1,29 @@ <%! from django.core.urlresolvers import reverse %> -<% -def url_for(commentable): - return reverse('django_comment_client.forum.views.forum_form_discussion', args=[course.id, commentable['discussion_id']]) -%> + -<%def name="make_category(category, commentables)"> -

${category}

+ - - - -% for category, commentables in discussion_info.items(): - ${make_category(category, commentables)} -% endfor + \ No newline at end of file diff --git a/lms/templates/discussion/_inline.html b/lms/templates/discussion/_inline.html index ccd9eb30c2..72bf6a0e9a 100644 --- a/lms/templates/discussion/_inline.html +++ b/lms/templates/discussion/_inline.html @@ -1,16 +1,36 @@ <%namespace name="renderer" file="_thread.html"/> + + + +
-
- -
+
+
% for thread in threads: ${renderer.render_thread(course_id, thread, show_comments=False)} % endfor
+ <%include file="_paginator.html" />
@@ -27,3 +47,5 @@ } $$annotated_content_info = $.extend($$annotated_content_info, JSON.parse("${annotated_content_info | escape_quotes}")); + + From dc5b8b51c43c314771f3604740cc79ad9386aea1 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Wed, 8 Aug 2012 11:08:58 -0400 Subject: [PATCH 12/12] placeholder and button color updates --- lms/static/sass/_discussion.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index c848ab95cf..c5a6658946 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -184,7 +184,7 @@ $tag_text_color: #5b614f; width: flex-grid(12); .discussion-link { - @include button; + @include button(simple, #999); color: white; display: inline-block; font-size: inherit; @@ -662,6 +662,10 @@ $tag_text_color: #5b614f; font-size: 0.8em; line-height: 1.6em; @include border-radius(3px 3px 0 0); + + &::-webkit-input-placeholder { + color: #888; + } } .wmd-preview {