Skip to content

E
edx-platform
Commit 8f2ab522 by Brian Talbot
Options

in progress form styling of course info

parent 3b42ea7e
Showing with 102 additions and 13 deletions
cms/static/sass/_settings.scss
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
label { label {
display: inline-block; display: inline-block;
vertical-align: top;
width: 200px; width: 200px;
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
...@@ -37,6 +38,12 @@ ...@@ -37,6 +38,12 @@
} }
} }
.label-micro {
display: block;
margin-top: 5px;
font-size: 13px;
}
input, textarea { input, textarea {
font-size: 15px; font-size: 15px;
...@@ -55,6 +62,61 @@ ...@@ -55,6 +62,61 @@
&.date { &.date {
width: 140px; width: 140px;
} }
&:focus {
border-color: $blue;
outline: 0;
}
}
.field {
background: #b6eab1;
display: inline-block;
vertical-align: top;
min-width: 400px;
input {
display: block;
}
.input-list {
.element {
position: relative;
width: 100%;
@include clearfix();
div {
float: left;
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
.delete-icon {
position: absolute;
right: 10px;
top: 10px;
}
}
&.element-stacked {
}
&.element-multi {
}
}
.new-item {
margin-top: 20px;
padding-bottom: 10px;
@include grey-button;
@include box-sizing(border-box);
}
} }
.settings-page-section { .settings-page-section {
...@@ -82,6 +144,13 @@ ...@@ -82,6 +144,13 @@
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.tip {
color: $mediumGrey;
display: inline-block;
margin-left: 10px;
font-size: 13px;
}
} }
&:last-child { &:last-child {
...@@ -89,12 +158,34 @@ ...@@ -89,12 +158,34 @@
} }
> section { > section {
padding-bottom: 40px; padding-bottom: 60px;
margin-bottom: 40px; margin-bottom: 40px;
border-radius: 3px; border-radius: 3px;
border-bottom: 1px solid $mediumGrey; border-bottom: 1px solid $lightGrey;
@include clearfix; @include clearfix;
header {
@include clearfix;
border-bottom: 1px solid $mediumGrey;
margin-bottom: 20px;
padding-bottom: 10px;
h3 {
color: $darkGrey;
float: left;
margin: 0 40px 0 0;
text-transform: uppercase;
}
.detail {
float: right;
marign-top: 3px;
color: $mediumGrey;
font-size: 13px;
}
}
&:last-child { &:last-child {
padding-bottom: 0; padding-bottom: 0;
border-bottom: none; border-bottom: none;
......
cms/templates/settings.html
...@@ -150,23 +150,22 @@ ...@@ -150,23 +150,22 @@
<div class="field"> <div class="field">
<ol class="input-list course-milestone-list"> <ol class="input-list course-milestone-list">
<li class="course-milestone-list-element"> <li class="element element-multi course-milestone-list-element">
<div class="course-milestone-date"> <div class="course-milestone-date">
<input type="text" class="course-milestone-date-input date"> <input type="text" class="course-milestone-date-input date">
<span class="label-micro">Milestone Date</span> <span class="label-micro">Milestone Date</span>
</div> </div>
<div class="course-milestone-name"> <div class="course-milestone-name">
<input type="text" class="course-milestone-name-input short"> <input type="text" class="course-milestone-name-input">
<span class="label-micro">Milestone Name</span> <span class="label-micro">Milestone Name</span>
</div> </div>
<a href="#" class="delete-icon remove-milestone-data"></a>
</li> </li>
</ol> </ol>
<a href="#" class="new-item new-course-milestone-item add-milestone-data"> <a href="#" class="new-item new-course-milestone-item add-milestone-data">
<span class="plus-icon-small"></span>New Class Milestone <span class="plus-icon"></span>New Class Milestone
</a> </a>
</div> </div>
</div> </div>
...@@ -213,7 +212,7 @@ ...@@ -213,7 +212,7 @@
<input type="text" class="long course-prerequisites-links"> <input type="text" class="long course-prerequisites-links">
<a href="#" class="new-item new-course-prerequisites-links-item add-links-data"> <a href="#" class="new-item new-course-prerequisites-links-item add-links-data">
<span class="plus-icon-small"></span>New Link <span class="plus-icon"></span>New Link
</a> </a>
</div> </div>
</div> </div>
...@@ -233,7 +232,7 @@ ...@@ -233,7 +232,7 @@
<div class="field"> <div class="field">
<ol class="input-list course-textbook-list"> <ol class="input-list course-textbook-list">
<li class="course-textbook-list-element"> <li class="element element-stacked course-textbook-list-element">
<div class="course-textbook-name"> <div class="course-textbook-name">
<input type="text" class="long course-textbook-name-input"> <input type="text" class="long course-textbook-name-input">
<span class="label-micro">Textbook Name</span> <span class="label-micro">Textbook Name</span>
...@@ -244,12 +243,12 @@ ...@@ -244,12 +243,12 @@
<span class="label-micro">Textbook URL</span> <span class="label-micro">Textbook URL</span>
</div> </div>
<a href="#" class="delete-icon remove-textbook-data"></a> <!-- <a href="#" class="delete-icon remove-textbook-data"></a> -->
</li> </li>
</ol> </ol>
<a href="#" class="new-item new-course-textbook-item add-textbook-data"> <a href="#" class="new-item new-course-textbook-item add-textbook-data">
<span class="plus-icon-small"></span>New Textbook <span class="plus-icon"></span>New Textbook
</a> </a>
</div> </div>
</div> </div>
...@@ -266,7 +265,7 @@ ...@@ -266,7 +265,7 @@
<div class="field"> <div class="field">
<ol class="input-list course-faq-list"> <ol class="input-list course-faq-list">
<li class="course-faq-list-element"> <li class="element course-faq-list-element">
<div class="course-faq-question"> <div class="course-faq-question">
<input type="text" class="long course-faq-question-input"> <input type="text" class="long course-faq-question-input">
<span class="label-micro">Question</span> <span class="label-micro">Question</span>
...@@ -277,12 +276,11 @@ ...@@ -277,12 +276,11 @@
<span class="label-micro">Answer</span> <span class="label-micro">Answer</span>
</div> </div>
<a href="#" class="delete-icon remove-faq-data"></a>
</li> </li>
</ol> </ol>
<a href="#" class="new-item new-course-faq-item add-faq-data"> <a href="#" class="new-item new-course-faq-item add-faq-data">
<span class="plus-icon-small"></span>New Question &amp; Answer <span class="plus-icon"></span>New Question &amp; Answer
</a> </a>
</div> </div>
</div> </div>
......
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