Skip to content

E
edx-platform
Commit 77a23a37 by marco
Options

reordered email settings checkbox to impact styling for icon and cleaned up… 

reordered email settings checkbox to impact styling for icon and cleaned up header navigation for discusisons
parent 820544c1
Showing with 115 additions and 102 deletions
lms/static/sass/_discussion.scss
...@@ -275,9 +275,9 @@ body.discussion { ...@@ -275,9 +275,9 @@ body.discussion {
} }
.edit-post-form { .edit-post-form {
width: 100%;
margin-bottom: $baseline*2;
@include clearfix; @include clearfix;
margin-bottom: $baseline*2;
width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
h1 { h1 {
...@@ -297,9 +297,9 @@ body.discussion { ...@@ -297,9 +297,9 @@ body.discussion {
.post-update { .post-update {
@include blue-button; @include blue-button;
float: left; float: left;
height: 37px;
margin-top: $baseline/2; margin-top: $baseline/2;
padding-bottom: 2px; padding-bottom: 2px;
height: 37px;
&:hover { &:hover {
border-color: #222; border-color: #222;
...@@ -307,28 +307,28 @@ body.discussion { ...@@ -307,28 +307,28 @@ body.discussion {
} }
.edit-post-title, .edit-post-tags { .edit-post-title, .edit-post-tags {
@include box-sizing(border-box);
padding: 0 $baseline/2;
width: 100%; width: 100%;
height: 40px; height: 40px;
padding: 0 $baseline/2;
@include box-sizing(border-box);
border-radius: 3px;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 3px;
box-shadow: 0 1px 3px $black-t0 inset;
color: #333;
font-size: 16px; font-size: 16px;
font-family: $sans-serif; font-family: $sans-serif;
color: #333;
box-shadow: 0 1px 3px $black-t0 inset;
} }
.tagsinput { .tagsinput {
padding: $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
padding: $baseline/2;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 3px; border-radius: 3px;
background: $white; background: $white;
font-family: 'Monaco', monospace; box-shadow: 0 1px 3px $black-t1 inset;
font-size: 13px; font-size: 13px;
font-family: 'Monaco', monospace;
line-height: 1.6; line-height: 1.6;
box-shadow: 0 1px 3px $black-t1 inset;
span.tag { span.tag {
margin-bottom: 0; margin-bottom: 0;
...@@ -337,13 +337,13 @@ body.discussion { ...@@ -337,13 +337,13 @@ body.discussion {
} }
.new-post-form { .new-post-form {
width: 100%; @include clearfix;
margin-bottom: $baseline; margin-bottom: $baseline;
width: 100%;
border-radius: 3px; border-radius: 3px;
background: rgba(0, 0, 0, .55); background: rgba(0, 0, 0, .55);
color: $white;
box-shadow: 0 1px 2px $black-t2 inset, 0 1px 0 $white-t2; box-shadow: 0 1px 2px $black-t2 inset, 0 1px 0 $white-t2;
@include clearfix; color: $white;
.form-row { .form-row {
margin-bottom: $baseline; margin-bottom: $baseline;
...@@ -351,31 +351,31 @@ body.discussion { ...@@ -351,31 +351,31 @@ body.discussion {
.new-post-body .wmd-input { .new-post-body .wmd-input {
@include discussion-wmd-input; @include discussion-wmd-input;
@include box-sizing(border-box);
position: relative; position: relative;
width: 100%;
height: 200px;
z-index: 1; z-index: 1;
padding: $baseline/2; padding: $baseline/2;
@include box-sizing(border-box); width: 100%;
height: 200px;
border: 1px solid #333; border: 1px solid #333;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
background: $white; background: $white;
font-family: 'Monaco', monospace; box-shadow: 0 1px 3px $black-t1 inset;
font-size: 13px; font-size: 13px;
font-family: 'Monaco', monospace;
line-height: 1.6; line-height: 1.6;
box-shadow: 0 1px 3px $black-t1 inset;
} }
.tagsinput { .tagsinput {
padding: $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
padding: $baseline/2;
border: 1px solid #333; border: 1px solid #333;
border-radius: 3px; border-radius: 3px;
background: $white; background: $white;
font-family: 'Monaco', monospace; box-shadow: 0 1px 3px $black-t1 inset;
font-size: 13px; font-size: 13px;
font-family: 'Monaco', monospace;
line-height: 1.6; line-height: 1.6;
box-shadow: 0 1px 3px $black-t1 inset;
span.tag { span.tag {
margin-bottom: 0; margin-bottom: 0;
...@@ -384,40 +384,40 @@ body.discussion { ...@@ -384,40 +384,40 @@ body.discussion {
.new-post-body .wmd-preview { .new-post-body .wmd-preview {
@include discussion-wmd-preview; @include discussion-wmd-preview;
@include box-sizing(border-box);
position: relative; position: relative;
width: 100%;
//height: 50px;
margin-top: -1px; margin-top: -1px;
padding: 25px $baseline $baseline/2 $baseline; padding: 25px $baseline $baseline/2 $baseline;
@include box-sizing(border-box); width: 100%;
border: 1px solid #333; border: 1px solid #333;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
background: #e6e6e6; background: #e6e6e6;
color: #333;
box-shadow: 0 1px 3px $black-t1 inset; box-shadow: 0 1px 3px $black-t1 inset;
color: #333;
//height: 50px;
} }
.new-post-preview-label { .new-post-preview-label {
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 4px; left: 4px;
font-size: 11px;
color: #aaa; color: #aaa;
text-transform: uppercase; text-transform: uppercase;
font-size: 11px;
} }
.new-post-title, .new-post-title,
.new-post-tags { .new-post-tags {
@include box-sizing(border-box);
padding: 0 $baseline/2;
width: 100%; width: 100%;
height: 40px; height: 40px;
padding: 0 $baseline/2;
@include box-sizing(border-box);
border-radius: 3px;
border: 1px solid #333; border: 1px solid #333;
border-radius: 3px;
box-shadow: 0 1px 3px $black-t1 inset;
color: #333;
font-size: 16px; font-size: 16px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
color: #333;
box-shadow: 0 1px 3px $black-t1 inset;
} }
.new-post-title { .new-post-title {
...@@ -427,9 +427,9 @@ body.discussion { ...@@ -427,9 +427,9 @@ body.discussion {
.submit { .submit {
@include blue-button; @include blue-button;
float: left; float: left;
height: 37px;
margin-top: $baseline/2; margin-top: $baseline/2;
padding-bottom: 2px; padding-bottom: 2px;
height: 37px;
border-color: #333; border-color: #333;
&:hover { &:hover {
...@@ -439,9 +439,9 @@ body.discussion { ...@@ -439,9 +439,9 @@ body.discussion {
.new-post-cancel { .new-post-cancel {
@include white-button; @include white-button;
border-color: #444;
float: left; float: left;
margin: $baseline/2 0 0 15px; margin: $baseline/2 0 0 15px;
border-color: #444;
} }
.options { .options {
...@@ -450,9 +450,9 @@ body.discussion { ...@@ -450,9 +450,9 @@ body.discussion {
label { label {
display: inline; display: inline;
margin-left: 8px; margin-left: 8px;
font-size: 15px;
color: $white; color: $white;
text-shadow: none; text-shadow: none;
font-size: 15px;
} }
} }
} }
...@@ -466,19 +466,19 @@ body.discussion { ...@@ -466,19 +466,19 @@ body.discussion {
.thread-tag { .thread-tag {
margin-right: 5px; margin-right: 5px;
padding: 3px $baseline/2 6px; padding: 3px $baseline/2 6px;
border: 1px solid #90c4d7;
border-radius: 3px; border-radius: 3px;
color: #333;
background: #c5eeff; background: #c5eeff;
border: 1px solid #90c4d7; color: #333;
font-size: 13px; font-size: 13px;
} }
.thread-title { .thread-title {
display: block; display: block;
margin-bottom: $baseline; margin-bottom: $baseline;
font-size: 21px;
color: #333; color: #333;
font-weight: 700; font-weight: 700;
font-size: 21px;
} }
...@@ -498,14 +498,14 @@ body.discussion { ...@@ -498,14 +498,14 @@ body.discussion {
} }
.sidebar-username { .sidebar-username {
font-size: 18px;
font-weight: 700; font-weight: 700;
font-size: 18px;
} }
.sidebar-user-roles { .sidebar-user-roles {
margin-top: 6px; margin-top: 6px;
font-size: 13px;
font-style: italic; font-style: italic;
font-size: 13px;
} }
.sidebar-threads-count { .sidebar-threads-count {
...@@ -519,8 +519,8 @@ body.discussion { ...@@ -519,8 +519,8 @@ body.discussion {
.sidebar-toggle-moderator-button { .sidebar-toggle-moderator-button {
@include blue-button; @include blue-button;
text-align: center;
margin-top: $baseline; margin-top: $baseline;
text-align: center;
} }
} }
...@@ -528,8 +528,8 @@ body.discussion { ...@@ -528,8 +528,8 @@ body.discussion {
.wmd-panel { .wmd-panel {
width: 100%;
min-width: 500px; min-width: 500px;
width: 100%;
} }
.wmd-button-bar { .wmd-button-bar {
...@@ -538,15 +538,15 @@ body.discussion { ...@@ -538,15 +538,15 @@ body.discussion {
} }
.wmd-input { .wmd-input {
height: 150px;
width: 100%; width: 100%;
background-color: #e9e9e9; height: 150px;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
font-family: Monaco, 'Lucida Console', monospace; border-radius: 3px 3px 0 0;
background-color: #e9e9e9;
font-style: normal; font-style: normal;
font-size: 0.8em; font-size: 0.8em;
font-family: Monaco, 'Lucida Console', monospace;
line-height: 1.6em; line-height: 1.6em;
border-radius: 3px 3px 0 0;
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: #888; color: #888;
...@@ -554,16 +554,16 @@ body.discussion { ...@@ -554,16 +554,16 @@ body.discussion {
} }
.wmd-preview { .wmd-preview {
@include box-sizing(border-box);
@include transition(all .2s ease-out 0s);
position: relative; position: relative;
font-family: $sans-serif; overflow: hidden;
padding: 25px $baseline $baseline/2 $baseline;
margin-bottom: 5px; margin-bottom: 5px;
@include box-sizing(border-box); padding: 25px $baseline $baseline/2 $baseline;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
border-top-width: 0; border-top-width: 0;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
overflow: hidden; font-family: $sans-serif;
@include transition(all .2s ease-out 0s);
&:before { &:before {
content: 'PREVIEW'; content: 'PREVIEW';
...@@ -581,46 +581,46 @@ body.discussion { ...@@ -581,46 +581,46 @@ body.discussion {
} }
.wmd-button-row { .wmd-button-row {
@include transition(all .2s ease-out 0s);
position: relative; position: relative;
margin-left: 5px; overflow: hidden;
margin-top: $baseline/2;
margin-right: 5px; margin-right: 5px;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: $baseline/2; margin-left: 5px;
padding: 0px; padding: 0px;
height: 20px; height: 20px;
overflow: hidden;
@include transition(all .2s ease-out 0s);
} }
.wmd-spacer { .wmd-spacer {
width: 1px;
height: 20px;
margin-left: 14px;
position: absolute; position: absolute;
background-color: Silver;
display: inline-block; display: inline-block;
margin-left: 14px;
width: 1px;
height: 20px;
background-color: Silver;
list-style: none; list-style: none;
} }
.wmd-button { .wmd-button {
width: 20px;
height: 20px;
padding-left: 2px;
padding-right: 3px;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
padding-right: 3px;
padding-left: 2px;
width: 20px;
height: 20px;
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
} }
.wmd-button > span { .wmd-button > span {
display: inline-block; display: inline-block;
background-image: url('/static/images/wmd-buttons.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 20px; width: 20px;
height: 20px; height: 20px;
background-image: url('/static/images/wmd-buttons.png');
background-position: 0px 0px;
background-repeat: no-repeat;
} }
.wmd-spacer1 { .wmd-spacer1 {
...@@ -662,8 +662,8 @@ body.discussion { ...@@ -662,8 +662,8 @@ body.discussion {
> form > input[type="button"] { > form > input[type="button"] {
border: 1px solid #888; border: 1px solid #888;
font-family: $sans-serif;
font-size: 14px; font-size: 14px;
font-family: $sans-serif;
} }
> form > input[type="file"] { > form > input[type="file"] {
...@@ -681,15 +681,15 @@ body.discussion { ...@@ -681,15 +681,15 @@ body.discussion {
@include clearfix; @include clearfix;
.sidebar { .sidebar {
float: left;
@include box-sizing(border-box); @include box-sizing(border-box);
float: left;
width: 31%; width: 31%;
height: 550px; height: 550px;
border: 1px solid #aaa; border: 1px solid #aaa;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
background: #f6f6f6;
border-radius: 3px;
border-right: 1px solid #bcbcbc; border-right: 1px solid #bcbcbc;
border-radius: 3px;
background: #f6f6f6;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
&.fixed { &.fixed {
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -701,8 +701,8 @@ body.discussion { ...@@ -701,8 +701,8 @@ body.discussion {
} }
.browse-search { .browse-search {
display: block;
position: relative; position: relative;
display: block;
height: 60px; height: 60px;
border-bottom: 1px solid #a3a3a3; border-bottom: 1px solid #a3a3a3;
border-radius: 3px 0 0 0; border-radius: 3px 0 0 0;
...@@ -710,13 +710,13 @@ body.discussion { ...@@ -710,13 +710,13 @@ body.discussion {
.home, .browse, .home, .browse,
.search { .search {
@include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
@include transition(all .2s ease-out);
position: relative; position: relative;
float: left; float: left;
width: 20%; width: 20%;
height: 100%; height: 100%;
@include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
background-color: $gray-l4; background-color: $gray-l4;
@include transition(all .2s ease-out);
&:hover { &:hover {
background-color: $white; background-color: $white;
...@@ -724,14 +724,15 @@ body.discussion { ...@@ -724,14 +724,15 @@ body.discussion {
} }
.icon { .icon {
display: block; @include transition(all .2s ease-out);
position: absolute;
padding: 15px 23px;
color: $gray;
font-size: 28px;
z-index: 100; z-index: 100;
display: inline-block;
width: 100%;
color: $gray-l2;
text-align: center;
font-size: 28px;
line-height: 60px;
opacity: 1; opacity: 1;
@include transition(all .2s ease-out);
} }
.home { .home {
...@@ -740,6 +741,12 @@ body.discussion { ...@@ -740,6 +741,12 @@ body.discussion {
cursor: pointer; cursor: pointer;
} }
.home-icon {
width: 100%;
height: 100%;
display: block;
}
.browse { .browse {
border-radius: 3px 0 0 0; border-radius: 3px 0 0 0;
box-shadow: -1px 0 0 #aaa inset; box-shadow: -1px 0 0 #aaa inset;
...@@ -811,18 +818,18 @@ body.discussion { ...@@ -811,18 +818,18 @@ body.discussion {
} }
.browse-topic-drop-btn { .browse-topic-drop-btn {
display: block; @include transition(none);
position: absolute; position: absolute;
padding-top: 10%;
top: -1px; top: -1px;
left: -1px; left: -1px;
z-index: 50; z-index: 50;
display: block;
overflow: hidden;
padding-top: 10%;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid transparent; border: 1px solid transparent;
text-align: center; text-align: center;
overflow: hidden;
@include transition(none);
.current-board { .current-board {
white-space: normal; white-space: normal;
...@@ -830,13 +837,13 @@ body.discussion { ...@@ -830,13 +837,13 @@ body.discussion {
} }
span { span {
font-size: 14px; @include transition(opacity .1s linear 0s);
font-weight: 400;
line-height: 1.2;
color: #333; color: #333;
text-shadow: 0 1px 0 $white-t3; text-shadow: 0 1px 0 $white-t3;
font-weight: 400;
font-size: 14px;
line-height: 1.2;
opacity: 0.0; opacity: 0.0;
@include transition(opacity .1s linear 0s);
} }
.drop-arrow { .drop-arrow {
font-size: 16px; font-size: 16px;
...@@ -853,11 +860,7 @@ body.discussion { ...@@ -853,11 +860,7 @@ body.discussion {
display: block; display: block;
z-index: 100; z-index: 100;
opacity: 1.0; opacity: 1.0;
@include transition(none); @include transition(none);
.icon{
padding: 15px 24px;
}
} }
.browse-topic-drop-menu-wrapper { .browse-topic-drop-menu-wrapper {
...@@ -1369,15 +1372,14 @@ body.discussion { ...@@ -1369,15 +1372,14 @@ body.discussion {
.row-title { .row-title {
padding: 30px $baseline; padding: 30px $baseline;
//width: 15%; background-color: $gray-l6;
background-color: $gray-l4;
font-size: 12px; font-size: 12px;
} }
.row-item-full, .row-item { .row-item-full, .row-item {
font-size: 12px; font-size: 12px;
padding-left: $baseline/2; padding: 0px $baseline/2;
width: 30%; width: 26%;
vertical-align: middle; vertical-align: middle;
.icon { .icon {
...@@ -1399,13 +1401,24 @@ body.discussion { ...@@ -1399,13 +1401,24 @@ body.discussion {
.row-item-full { .row-item-full {
.row-setting { .email-setting {
display: table-cell; display: inline-block;
text-align: center;
vertical-align: middle; vertical-align: middle;
margin-left: $baseline/2;
}
.icon {
display: inline-block;
}
.email-setting:checked ~ .icon {
color: $green;
} }
.row-description { .row-description {
padding-left: 15px; display: inline-block;
width:80%;
} }
} }
} }
...@@ -1424,7 +1437,7 @@ body.discussion { ...@@ -1424,7 +1437,7 @@ body.discussion {
.helpgrid-row-notification { .helpgrid-row-notification {
.icon-sign-blank {color: $green;} .icon-sign-blank {color: $green;}
.icon-envelope {color: $gray;} .icon-envelope {color: $light-gray;}
} }
.discussion-article { .discussion-article {
......
lms/templates/discussion/index.html
...@@ -85,8 +85,8 @@ ...@@ -85,8 +85,8 @@
<tr class="helpgrid-row helpgrid-row-notification"> <tr class="helpgrid-row helpgrid-row-notification">
<td class="row-title">Receive updates</td> <td class="row-title">Receive updates</td>
<td class="row-item-full" colspan="3"> <td class="row-item-full" colspan="3">
<input type="checkbox" class="email-setting" name="email-notification"></input>
<i class="icon icon-envelope"></i> <i class="icon icon-envelope"></i>
<span class="row-setting"><input type="checkbox" name="email-notification"></input></span>
<span class="row-description"> If enabled, you will receive an email digest once a day notifying you about new, unread activity from posts you are following. </span> <span class="row-description"> If enabled, you will receive an email digest once a day notifying you about new, unread activity from posts you are following. </span>
</td> </td>
</tr> </tr>
......
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