Skip to content

E
edx-platform
Commit 4b419b6f by kaishin
Options

Redesigned the sidebar in the question list view

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