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