Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

reordered email settings checkbox to impact styling for icon and cleaned up header navigation for discusisons

Browse Source
This commit is contained in:
marco
2013-07-23 15:43:12 -04:00
parent 820544c1c4
commit 77a23a37d0
2 changed files with 120 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
lms/static/sass/_discussion.scss
View File

@@ -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;
font-size: 13px;
line-height: 1.6;
box-shadow: 0 1px 3px $black-t1 inset;
font-size: 13px;
font-family: 'Monaco', monospace;
line-height: 1.6;
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;
font-size: 13px;
line-height: 1.6;
box-shadow: 0 1px 3px $black-t1 inset;
font-size: 13px;
font-family: 'Monaco', monospace;
line-height: 1.6;
}
.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;
font-size: 13px;
line-height: 1.6;
box-shadow: 0 1px 3px $black-t1 inset;
font-size: 13px;
font-family: 'Monaco', monospace;
line-height: 1.6;
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-radius: 3px;
color: #333;
background: #c5eeff;
border: 1px solid #90c4d7;
border-radius: 3px;
background: #c5eeff;
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 {
position: relative;
font-family: $sans-serif;
padding: 25px $baseline $baseline/2 $baseline;
margin-bottom: 5px;
@include box-sizing(border-box);
@include transition(all .2s ease-out 0s);
position: relative;
overflow: hidden;
margin-bottom: 5px;
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 {

2
lms/templates/discussion/index.html
View File

@@ -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>