Skip to content

E
edx-platform
Commit deced24b by Brian Talbot Committed by David Baumgold
Options

Studio: refactored form-based Sass and revised markup/copy for course team admin mgmt

parent e5ef5ef1
Showing with 160 additions and 126 deletions
cms/static/sass/elements/_forms.scss
......@@ -93,36 +93,47 @@ form {
}
}
// ====================
// forms - archetype - add a new X form
.new-form {
@extend .ui-window;
@include box-sizing(border-box);
position: relative;
width: 100%;
margin-bottom: ($baseline*2);
border-radius: 2px;
background: $white;
// ELEM: form wrapper
.wrapper-create-element {
height: 0;
margin-bottom: $baseline;
opacity: 0.0;
pointer-events: none;
overflow: hidden;
.wrapper-form {
padding: $baseline ($baseline*1.5);
&.animate {
@include transition(opacity $tmg-f1 ease-in-out 0s, height $tmg-f1 ease-in-out 0s);
}
&.is-shown {
height: auto; // define a specific height for the animating version of this UI to work properly
opacity: 1.0;
pointer-events: auto;
}
}
// ELEM: form
// form styling for creating a new content item (course, user, textbook)
form[class^="create-"] {
@extend .ui-window;
@include box-sizing(border-box);
border-radius: 2px;
width: 100%;
background: $white;
.title {
@extend .t-title4;
font-weight: 700;
margin-bottom: $baseline;
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
font-weight: 600;
padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
}
fieldset {
margin-bottom: $baseline;
padding: $baseline ($baseline*1.5);
}
// form elements - need to make this more universal
.form-fields {
.list-input {
@extend .cont-no-list;
.field {
......@@ -150,7 +161,7 @@ form {
label {
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
@include transition(color $tmg-f3 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0;
&.is-focused {
......@@ -158,8 +169,9 @@ form {
}
}
//this section is borrowed from _account.scss - we should clean up and unify later
input, textarea {
@include transition(all $tmg-f2 ease-in-out 0s);
@extend .t-copy-base;
height: 100%;
width: 100%;
......@@ -173,23 +185,8 @@ form {
width: 25%;
}
::-webkit-input-placeholder {
color: $gray-l4;
}
:-moz-placeholder {
color: $gray-l3;
}
::-moz-placeholder {
color: $gray-l3;
}
:-ms-input-placeholder {
color: $gray-l3;
}
&:focus {
+ .tip {
color: $gray;
}
......@@ -219,45 +216,111 @@ form {
color: $gray-l3;
}
&.error {
.tip-error {
display: none;
float: none;
}
&.error {
label {
color: $red;
}
.tip-error {
@extend .anim-fadeIn;
display: block;
color: $red;
}
input {
border-color: $red;
}
}
}
.field-inline {
input, textarea, select {
width: 62%;
display: inline-block;
}
.tip-stacked {
display: inline-block;
float: right;
width: 35%;
margin-top: 0;
}
&.error {
.tip-error {
}
}
}
.field-group {
@include clearfix();
margin: 0 0 ($baseline/2) 0;
.field {
display: block;
width: 47%;
border-bottom: none;
margin: 0 ($baseline*0.75) 0 0;
padding: ($baseline/4) 0 0 0;
float: left;
position: relative;
&:nth-child(odd) {
float: left;
}
&:nth-child(even) {
float: right;
margin-right: 0;
}
input, textarea {
width: 100%;
}
}
}
}
.actions {
border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) $baseline;
box-shadow: inset 0 1px 2px $shadow;
margin-top: ($baseline*0.75);
border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) ($baseline*1.5);
background: $gray-l6;
.action-primary {
@include blue-button;
@extend .t-action2;
@include transition(all $tmg-f2 linear 0);
@include transition(all .15s);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600;
text-transform: uppercase;
}
.action-secondary {
@include grey-button;
@extend .t-action2;
@include transition(all $tmg-f2 linear 0);
@include transition(all .15s);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600;
text-transform: uppercase;
}
}
}
// ====================
// forms - grandfathered
......
cms/static/sass/views/_users.scss
......@@ -3,7 +3,7 @@
body.course.users {
// page layout
// LAYOUT: page
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
......@@ -18,7 +18,7 @@ body.course.users {
width: flex-grid(3, 12);
}
// content
// ELEM: content
.content {
.introduction {
......@@ -28,60 +28,15 @@ body.course.users {
}
// new user form
.add-user {
@extend .new-form;
display: none;
// ELEM: new user form
.wrapper-create-user {
&.is-shown {
display: block;
height: ($baseline*15);
}
}
// new user form (old)
.new-user-form {
display: none;
padding: ($baseline*0.75) $baseline;
background-color: $lightBluishGrey2;
#result {
display: none;
float: left;
margin-bottom: ($baseline*0.75);
padding: 3px ($baseline*0.75);
border-radius: 3px;
background: $red;
font-size: 14px;
color: $white;
}
.form-elements {
clear: both;
}
label {
display: inline-block;
margin-right: ($baseline/2);
}
.email-input {
width: 350px;
padding: 8px 8px 10px;
border-color: $gray-d1;
}
.add-button {
@include blue-button;
padding: ($baseline/4) $baseline 9px;
}
.cancel-button {
@include white-button;
padding: ($baseline/4) $baseline 9px;
}
}
// listing of users
// ELEM: listing of users
.user-list, .user-item, .item-metadata, .item-actions {
@include box-sizing(border-box);
}
......@@ -94,7 +49,7 @@ body.course.users {
position: relative;
width: flex-grid(9, 9);
margin: 0 0 ($baseline/2) 0;
padding: $baseline ($baseline*1.5) $baseline ($baseline*1.5);
padding: ($baseline*1.25) ($baseline*1.5) $baseline ($baseline*1.5);
&:last-child {
margin-bottom: 0;
......@@ -105,7 +60,7 @@ body.course.users {
vertical-align: middle;
}
// item - flag
// ELEM: item - flag
.flag-role {
@extend .ui-badge;
color: $white;
......@@ -130,7 +85,7 @@ body.course.users {
}
}
// item - metadata
// ELEM: item - metadata
.item-metadata {
width: flex-grid(5, 9);
margin-right: flex-gutter();
......@@ -153,7 +108,7 @@ body.course.users {
}
}
// item - actions
// ELEM: item - actions
.item-actions {
width: flex-grid(4, 9);
position: static; // nasty reset needed due to base.scss
......@@ -170,20 +125,26 @@ body.course.users {
.action-delete {
// STATE: disabled
&.is-disabled {
opacity: 0.0;
visibility: hidden;
pointer-events: none;
}
}
.delete {
@extend .ui-btn-non;
}
// nasty reset needed due to base.scss
// HACK: nasty reset needed due to base.scss
.delete-button {
margin-right: 0;
float: none;
color: inherit;
}
// admin role controls
// ELEM: admin role controls
.toggle-admin-role {
&.add-admin-role {
......@@ -204,6 +165,11 @@ body.course.users {
font-weight: 600;
}
}
.notoggleforyou {
@extend .t-copy-sub2;
color: $gray-l2;
}
}
// STATE: hover
......
cms/templates/manage_users.html
......@@ -19,7 +19,7 @@
<ul>
%if allow_actions:
<li class="nav-item">
<a href="#" class="button new-button new-user-button"><i class="icon-plus"></i> ${_("New User")}</a>
<a href="#" class="button new-button create-user-button"><i class="icon-plus"></i> ${_("New User")}</a>
</li>
%endif
</ul>
......@@ -38,24 +38,28 @@
<article class="content-primary" role="main">
%if allow_actions:
<form class="new-form add-user" id="add-user-form" name="add-user-form">
<div class="wrapper-form">
<h3 class="title">${_("Add a User to Your Course's Team")}</h3>
<div class="wrapper-create-element animate wrapper-create-user">
<form class="create-user" id="create-user-form" name="create-user-form">
<div class="wrapper-form">
<h3 class="title">${_("Add a User to Your Course's Team")}</h3>
<fieldset class="form-fields">
<legend class="sr">${_("Textbook information")}</legend>
<div class="field text required add-user-email">
<label for="user-email-input">${_("User's Email Address")}</label>
<input id="user-email-input" name="user-email" type="text" placeholder="${_('e.g. jane.doe@gmail.com')}" value="">
<span class="tip tip-stacked">${_("Please provide the email address of the course staff member you'd like to add")}</span>
</div>
</fieldset>
</div>
<div class="actions">
<button class="action action-primary" type="submit">${_("Add User")}</button>
<button class="action action-secondary action-cancel">${_("Cancel")}</button>
</div>
</form>
<fieldset class="form-fields">
<legend class="sr">${_("Textbook information")}</legend>
<ol class="list-input">
<li class="field text required create-user-email">
<label for="user-email-input">${_("User's Email Address")}</label>
<input id="user-email-input" name="user-email" type="text" placeholder="${_('e.g. jane.doe@gmail.com')}" value="">
<span class="tip tip-stacked">${_("Please provide the email address of the course staff member you'd like to add")}</span>
</li>
</ol>
</fieldset>
</div>
<div class="actions">
<button class="action action-primary" type="submit">${_("Add User")}</button>
<button class="action action-secondary action-cancel">${_("Cancel")}</button>
</div>
</form>
</div>
%endif
<ol class="user-list">
......@@ -107,7 +111,7 @@
<ul class="item-actions user-actions">
<li class="action action-role">
% if is_instuctor and len(instructors) == 1:
<span class="admin-role sr">${_("Admin (Since you are the only team member, you cannot remove your admin status.)")}</span>
<span class="admin-role notoggleforyou">${_("Promote another member to remove admin access")}</span>
% else:
<a href="#" class="admin-role toggle-admin-role ${'remove' if is_instuctor else 'add'}-admin-role">${_("Remove Admin Access") if is_instuctor else _("Add Admin Access")}</a>
% endif
......@@ -150,8 +154,9 @@
))}"
$(document).ready(function() {
var $newUserForm = $('#add-user-form');
$newUserForm.bind('submit', function(e) {
var $createUserForm = $('#create-user-form');
var $createUserFormWrapper = $createUserForm.closest('.wrapper-create-user');
$createUserForm.bind('submit', function(e) {
e.preventDefault();
var url = tplUserURL.replace("@@EMAIL@@", $('#user-email-input').val().trim())
$.ajax({
......@@ -191,19 +196,19 @@
});
});
var $cancelButton = $newUserForm.find('.action-cancel');
var $cancelButton = $createUserForm.find('.action-cancel');
$cancelButton.bind('click', function(e) {
e.preventDefault();
$('.new-user-button').removeClass('is-disabled');
$newUserForm.toggleClass('is-shown');
$('.create-user-button').removeClass('is-disabled');
$createUserFormWrapper.toggleClass('is-shown');
$('#user-email-input').val('');
});
$('.new-user-button').bind('click', function(e) {
$('.create-user-button').bind('click', function(e) {
e.preventDefault();
$(this).addClass('is-disabled');
$newUserForm.toggleClass('is-shown');
$newUserForm.find('#user-email-input').focus();
$createUserFormWrapper.toggleClass('is-shown');
$createUserForm.find('#user-email-input').focus();
});
$('body').bind('keyup', function(e) {
......
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