Skip to content

E
edx-platform
Commit 4b419b6f by kaishin
Options

Redesigned the sidebar in the question list view

parent 3c43f514
Showing with 308 additions and 208 deletions
sass/base/_extends.scss
...@@ -36,6 +36,8 @@ h1.top-header { ...@@ -36,6 +36,8 @@ h1.top-header {
font: bold $body-font-size $body-font-family; font: bold $body-font-size $body-font-family;
cursor: pointer; cursor: pointer;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-shadow: none;
text-decoration: none;
&:hover, &:focus { &:hover, &:focus {
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc); @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
...@@ -107,6 +109,10 @@ h1.top-header { ...@@ -107,6 +109,10 @@ h1.top-header {
} }
} }
} }
a.button {
text-decoration: none;
}
} }
.topbar { .topbar {
......
sass/discussion/_askbot-original.scss
...@@ -396,27 +396,27 @@ body.anon #searchBar { ...@@ -396,27 +396,27 @@ body.anon #searchBar {
text-align: right; text-align: right;
margin: 0; } } margin: 0; } }
h2 { h2 {
padding-left: 0; // padding-left: 0;
/*background: #eceeeb;*/ // /*background: #eceeeb;*/
height: 30px; // height: 30px;
line-height: 30px; // line-height: 30px;
/*text-align: right;*/ // /*text-align: right;*/
/*font-size: 18px !important;*/ // /*font-size: 18px !important;*/
font-weight: normal; // // font-weight: normal;
color: #656565; // // color: #656565;
/*padding-right: 10px;*/ // /*padding-right: 10px;*/
/*margin-bottom: 10px;*/ // /*margin-bottom: 10px;*/
/*font-family: 'Yanone Kaffeesatz',sans-serif;*/ // /*font-family: 'Yanone Kaffeesatz',sans-serif;*/
} }
h3 { // h3 {
/*color: #4a757f;*/ // /*color: #4a757f;*/
/*font-size: 18px;*/ // /*font-size: 18px;*/
text-align: left; // text-align: left;
font-weight: normal; // font-weight: normal;
/*font-family: 'Yanone Kaffeesatz',sans-serif;*/ // /*font-family: 'Yanone Kaffeesatz',sans-serif;*/
padding-left: 0px; } // padding-left: 0px; }
.contributorback { // .contributorback {
background: #eceeeb url(../images/contributorsback.png) no-repeat center left; } // background: #eceeeb url(../images/contributorsback.png) no-repeat center left; }
// label { // label {
// color: #707070; // color: #707070;
// font-size: 15px; // font-size: 15px;
...@@ -428,23 +428,23 @@ body.anon #searchBar { ...@@ -428,23 +428,23 @@ body.anon #searchBar {
// margin-right: 18px; } // margin-right: 18px; }
// #displayTagFilterControl label { // #displayTagFilterControl label {
// width: 160px; } // width: 160px; }
ul { // ul {
margin-left: 22px; } // margin-left: 22px; }
li { // li {
list-style-type: disc; // list-style-type: disc;
font-size: 13px; // font-size: 13px;
line-height: 20px; // line-height: 20px;
margin-bottom: 10px; // margin-bottom: 10px;
color: #707070; } // color: #707070; }
ul.tags { // ul.tags {
list-style: none; // list-style: none;
margin: 0; // margin: 0;
padding: 0; // padding: 0;
line-height: 170%; // line-height: 170%;
display: block; } // display: block; }
#displayTagFilterControl p label { // #displayTagFilterControl p label {
color: #707070; // color: #707070;
font-size: 15px; } // font-size: 15px; }
/*.inputs { /*.inputs {
#interestingTagInput, #ignoredTagInput { #interestingTagInput, #ignoredTagInput {
width: 153px; width: 153px;
...@@ -474,47 +474,47 @@ body.anon #searchBar { ...@@ -474,47 +474,47 @@ body.anon #searchBar {
box-shadow: 1px 1px 2px #808080; } box-shadow: 1px 1px 2px #808080; }
#interestingTagAdd:hover, #ignoredTagAdd:hover { #interestingTagAdd:hover, #ignoredTagAdd:hover {
background: url(../images/small-button-blue.png) repeat-x bottom; } }*/ background: url(../images/small-button-blue.png) repeat-x bottom; } }*/
img.gravatar { // img.gravatar {
margin: 1px; } // margin: 1px; }
a { // a {
&.followed, &.follow { // &.followed, &.follow {
background: url(../images/medium-button.png) top repeat-x; // background: url(../images/medium-button.png) top repeat-x;
height: 34px; // height: 34px;
line-height: 34px; // line-height: 34px;
text-align: center; // text-align: center;
border: 0; // border: 0;
font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'Yanone Kaffeesatz',sans-serif;
color: #4a757f; // color: #4a757f;
font-weight: normal; // font-weight: normal;
font-size: 21px; // font-size: 21px;
margin-top: 3px; // margin-top: 3px;
display: block; // display: block;
width: 120px; // width: 120px;
text-decoration: none; // text-decoration: none;
border-radius: 4px; // border-radius: 4px;
-ms-border-radius: 4px; // -ms-border-radius: 4px;
-moz-border-radius: 4px; // -moz-border-radius: 4px;
-webkit-border-radius: 4px; // -webkit-border-radius: 4px;
-khtml-border-radius: 4px; // -khtml-border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #636363; // -webkit-box-shadow: 1px 1px 2px #636363;
-moz-box-shadow: 1px 1px 2px #636363; // -moz-box-shadow: 1px 1px 2px #636363;
box-shadow: 1px 1px 2px #636363; // box-shadow: 1px 1px 2px #636363;
margin: 0 auto; // margin: 0 auto;
padding: 0; } // padding: 0; }
&.followed:hover, &.follow:hover { // &.followed:hover, &.follow:hover {
text-decoration: none; // text-decoration: none;
background: url(../images/medium-button.png) bottom repeat-x; // background: url(../images/medium-button.png) bottom repeat-x;
text-shadow: 0px 1px 0px #c6d9dd; // text-shadow: 0px 1px 0px #c6d9dd;
-moz-text-shadow: 0px 1px 0px #c6d9dd; // -moz-text-shadow: 0px 1px 0px #c6d9dd;
-webkit-text-shadow: 0px 1px 0px #c6d9dd; } // -webkit-text-shadow: 0px 1px 0px #c6d9dd; }
&.followed { // &.followed {
div.unfollow { // div.unfollow {
display: none; } // display: none; }
&:hover div { // &:hover div {
display: none; // display: none;
&.unfollow { // &.unfollow {
display: inline; // display: inline;
color: #a05736; } } } } // color: #a05736; } } } }
.favorite-number { .favorite-number {
padding: 5px 0 0 5px; padding: 5px 0 0 5px;
font-size: 100%; font-size: 100%;
...@@ -839,35 +839,35 @@ body.anon #searchBar { ...@@ -839,35 +839,35 @@ body.anon #searchBar {
.paginator-container-left { .paginator-container-left {
padding: 5px 0 10px 0; } } padding: 5px 0 10px 0; } }
.tag-size-1 { // .tag-size-1 {
font-size: 12px; } // font-size: 12px; }
.tag-size-2 { // .tag-size-2 {
font-size: 13px; } // font-size: 13px; }
.tag-size-3 { // .tag-size-3 {
font-size: 14px; } // font-size: 14px; }
.tag-size-4 { // .tag-size-4 {
font-size: 15px; } // font-size: 15px; }
.tag-size-5 { // .tag-size-5 {
font-size: 16px; } // font-size: 16px; }
.tag-size-6 { // .tag-size-6 {
font-size: 17px; } // font-size: 17px; }
.tag-size-7 { // .tag-size-7 {
font-size: 18px; } // font-size: 18px; }
.tag-size-8 { // .tag-size-8 {
font-size: 19px; } // font-size: 19px; }
.tag-size-9 { // .tag-size-9 {
font-size: 20px; } // font-size: 20px; }
.tag-size-10 { // .tag-size-10 {
font-size: 21px; } // font-size: 21px; }
// ul { // ul {
// &.tags { // &.tags {
...@@ -895,29 +895,29 @@ body.anon #searchBar { ...@@ -895,29 +895,29 @@ body.anon #searchBar {
// padding: 0; // padding: 0;
// height: 20px; } } // height: 20px; } }
.wildcard-tags { // .wildcard-tags {
clear: both; } // clear: both; }
ul.tags.marked-tags li, .wildcard-tags ul.tags li { // ul.tags.marked-tags li, .wildcard-tags ul.tags li {
margin-bottom: 5px; } // margin-bottom: 5px; }
#tagSelector div.inputs { // #tagSelector div.inputs {
clear: both; // clear: both;
float: none; // float: none;
margin-bottom: 10px; } // margin-bottom: 10px; }
.tags-page ul.tags li { // .tags-page ul.tags li {
width: 160px; // width: 160px;
margin: 5px; } // margin: 5px; }
ul { // ul {
&#ab-user-tags li { // &#ab-user-tags li {
width: 160px; // width: 160px;
margin: 5px; } // margin: 5px; }
&#related-tags li { // &#related-tags li {
margin: 0 5px 8px 0; // margin: 0 5px 8px 0;
float: left; // float: left;
clear: left; } } // clear: left; } }
// .tag-left { // .tag-left {
// cursor: pointer; // cursor: pointer;
...@@ -949,28 +949,28 @@ ul { ...@@ -949,28 +949,28 @@ ul {
// font-family: Arial; // font-family: Arial;
// color: #717179; } // color: #717179; }
.deletable-tag { // .deletable-tag {
margin-right: 3px; // margin-right: 3px;
white-space: nowrap; // white-space: nowrap;
border-top-right-radius: 4px; // border-top-right-radius: 4px;
border-bottom-right-radius: 4px; // border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px; // -moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px; // -moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px; // -webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px; } // -webkit-border-top-right-radius: 4px; }
.tags { // .tags {
a.tag-right, span.tag-right { // a.tag-right, span.tag-right {
color: #585858; // color: #585858;
text-decoration: none; } // text-decoration: none; }
a:hover { // a:hover {
color: #1A1A1A; } } // color: #1A1A1A; } }
.users-page h1, .tags-page h1 { // .users-page h1, .tags-page h1 {
float: left; } // float: left; }
.main-page h1 { // .main-page h1 {
margin-right: 5px; } // margin-right: 5px; }
// .delete-icon { // .delete-icon {
// margin-top: -1px; // margin-top: -1px;
...@@ -997,22 +997,22 @@ ul { ...@@ -997,22 +997,22 @@ ul {
// &:hover { // &:hover {
// background: #b32f2f; } } // background: #b32f2f; } }
.tag-number { // .tag-number {
font-weight: normal; // font-weight: normal;
float: left; // float: left;
font-size: 16px; // font-size: 16px;
color: #5d5d5d; } // color: #5d5d5d; }
.badges .tag-number { // .badges .tag-number {
float: none; // float: none;
display: inline; // display: inline;
padding-right: 15px; } // padding-right: 15px; }
.section-title { // .section-title {
color: #7ea9b3; // color: #7ea9b3;
font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'Yanone Kaffeesatz',sans-serif;
font-weight: bold; // font-weight: bold;
font-size: 24px; } // font-size: 24px; }
// #fmask { // #fmask {
// margin-bottom: 30px; // margin-bottom: 30px;
...@@ -1841,9 +1841,9 @@ ul { ...@@ -1841,9 +1841,9 @@ ul {
margin-right: 4px; margin-right: 4px;
display: inline; } } display: inline; } }
.tabBar-tags { // .tabBar-tags {
width: 270px; // width: 270px;
margin-bottom: 15px; } // margin-bottom: 15px; }
a { a {
&.medal { &.medal {
...@@ -2100,10 +2100,10 @@ a { ...@@ -2100,10 +2100,10 @@ a {
font-weight: bold; font-weight: bold;
font-family: sans-serif; } } font-family: sans-serif; } }
del { // del {
color: #C34719; // color: #C34719;
.post-tag { // .post-tag {
color: #C34719; } } // color: #C34719; } }
ins { ins {
.post-tag, p { .post-tag, p {
...@@ -2274,8 +2274,8 @@ label.retag-error { ...@@ -2274,8 +2274,8 @@ label.retag-error {
font-weight: bold; font-weight: bold;
text-decoration: none; } text-decoration: none; }
.narrow .tags { // .narrow .tags {
float: left; } // float: left; }
.user-action-1 { .user-action-1 {
font-weight: bold; font-weight: bold;
...@@ -2518,25 +2518,25 @@ ul.form-horizontal-rows { ...@@ -2518,25 +2518,25 @@ ul.form-horizontal-rows {
font-weight: bold; font-weight: bold;
vertical-align: top; } vertical-align: top; }
ul { // ul {
&.post-tags { // &.post-tags {
margin-left: 3px; // margin-left: 3px;
li { // li {
margin-top: 4px; // margin-top: 4px;
margin-bottom: 3px; } } // margin-bottom: 3px; } }
&.post-retag { // &.post-retag {
margin-bottom: 0px; // margin-bottom: 0px;
margin-left: 5px; } } // margin-left: 5px; } }
#question-controls .tags { // #question-controls .tags {
margin: 0 0 3px 0; } // margin: 0 0 3px 0; }
#tagSelector { // #tagSelector {
padding-bottom: 2px; // padding-bottom: 2px;
margin-bottom: 0; } // margin-bottom: 0; }
#related-tags { // #related-tags {
padding-left: 3px; } // padding-left: 3px; }
#hideIgnoredTagsControl { #hideIgnoredTagsControl {
margin: 5px 0 0 0; margin: 5px 0 0 0;
...@@ -2666,8 +2666,8 @@ a.edit { ...@@ -2666,8 +2666,8 @@ a.edit {
.pln { .pln {
color: #000; } color: #000; }
.tag { // .tag {
color: #008; } // color: #008; }
.atn { .atn {
color: #606; } color: #606; }
......
sass/discussion/_questions.scss
...@@ -72,30 +72,6 @@ div.question-list-header { ...@@ -72,30 +72,6 @@ div.question-list-header {
div.tags-list { div.tags-list {
ul.tags {
display: inline;
li {
span.delete-icon, div.delete-icon {
@include border-radius(0 4px 4px 0);
background: #555;
color: #eee;
cursor: pointer;
float: none;
display: inline;
clear: none;
left: 10px;
padding: 3px 6px;
position: relative;
top: 1px;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
}
}
} }
} }
} }
......
sass/discussion/_sidebar.scss
div.discussion-wrapper aside { div.discussion-wrapper aside {
@extend .sidebar; @extend .sidebar;
@include box-shadow(inset 1px 0 0 #f6f6f6); @include box-shadow(inset 1px 0 0 #f6f6f6);
...@@ -7,8 +8,13 @@ div.discussion-wrapper aside { ...@@ -7,8 +8,13 @@ div.discussion-wrapper aside {
padding: lh(); padding: lh();
width: flex-grid(3); width: flex-grid(3);
h2 { h2 {
font-size: 16px; color: #4D4D4D;
&.first {
margin-top: 0px;
}
} }
h3 { h3 {
...@@ -20,14 +26,60 @@ div.discussion-wrapper aside { ...@@ -20,14 +26,60 @@ div.discussion-wrapper aside {
width: 76%; width: 76%;
} }
div.box {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
display: block;
padding-bottom: 20px;
overflow: hidden;
&:last-child {
@include box-shadow(none);
border: 0;
}
&.contributors {
a {
@include border-radius(3px);
border: 1px solid #888;
cursor: pointer;
display: inline-block;
margin-right: 6px;
position: relative;
&:before {
@include border-radius(3px);
@include box-shadow(inset 0 0 1px 1px rgba(255,255,255,.4));
top: 1px; left: 1px; bottom: 1px; right: 1px;
content: '';
position: absolute;
}
}
img.gravatar {
@include border-radius(3px);
}
}
&.tag-selector {
ul {
margin-bottom: 10px;
display: block;
}
}
}
#displayTagFilterControl { #displayTagFilterControl {
margin-top: 10px; margin-top: 10px;
} }
div.search-box { div.search-box {
input { input {
@include box-sizing(border-box);
display: inline; display: inline;
} }
input[type='submit'] { input[type='submit'] {
@include box-shadow(none); @include box-shadow(none);
opacity: 0.5; opacity: 0.5;
...@@ -49,7 +101,37 @@ div.discussion-wrapper aside { ...@@ -49,7 +101,37 @@ div.discussion-wrapper aside {
input#keywords { input#keywords {
padding-left: 30px; padding-left: 30px;
padding-right: 30px;
width: 100%;
}
input#clear {
@include box-shadow(none);
@include border-radius(5px);
border: none;
background: $mit-red;
color: #fff;
display: inline;
font-size: 10px;
margin-left: -25px;
padding: 2px 5px;
}
}
// Question view sopecific
div.follow-buttons {
margin: 20px 0;
display: block;
a.button {
@include box-sizing(border-box);
display: block;
text-align: center;
width: 100%;
} }
} }
} }
sass/discussion/_tags.scss
ul.tags { ul.tags {
list-style: none; list-style: none;
display: inline;
li, a { li, a {
position: relative; position: relative;
} }
...@@ -7,21 +8,56 @@ ul.tags { ...@@ -7,21 +8,56 @@ ul.tags {
@include border-radius(4px); @include border-radius(4px);
background: #eee; background: #eee;
color: #555; color: #555;
display: inline; display: inline-block;
font-size: 12px; font-size: 12px;
margin-left: 15px; margin-left: 15px;
padding: 3px 10px 5px 5px; padding: 3px 10px 5px 5px;
margin-bottom: 5px;
&:before { &:before {
border-color:transparent #eee transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
content:""; content:"";
height:0;
left:-11px;
position:absolute; position:absolute;
top:0; top:0;
left:-11px;
width:0; width:0;
height:0; }
border-color:transparent #eee transparent transparent;
border-style:solid; span.delete-icon, div.delete-icon {
border-width:12px 12px 12px 0; @include border-radius(0 4px 4px 0);
background: #555;
clear: none;
color: #eee;
cursor: pointer;
display: inline;
float: none;
left: 10px;
opacity: 0.5;
padding: 3px 6px;
position: relative;
top: 1px;
&:hover {
opacity: 1;
} }
} }
a {
color: #555;
text-decoration: none;
}
}
}
span.tag-number {
@include border-radius(3px);
background: #555;
font-size: 10px;
margin: 0 3px;
padding: 2px 5px;
color: #eee;
opacity: 0.5;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment