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 144 additions and 110 deletions
cms/static/sass/elements/_forms.scss
...@@ -93,36 +93,47 @@ form { ...@@ -93,36 +93,47 @@ form {
} }
} }
// ====================
// forms - archetype - add a new X form // ELEM: form wrapper
.new-form { .wrapper-create-element {
height: 0;
margin-bottom: $baseline;
opacity: 0.0;
pointer-events: none;
overflow: hidden;
&.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; @extend .ui-window;
@include box-sizing(border-box); @include box-sizing(border-box);
position: relative;
width: 100%;
margin-bottom: ($baseline*2);
border-radius: 2px; border-radius: 2px;
width: 100%;
background: $white; background: $white;
.wrapper-form {
padding: $baseline ($baseline*1.5);
}
.title { .title {
@extend .t-title4; @extend .t-title4;
font-weight: 700; font-weight: 600;
margin-bottom: $baseline; padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
} }
fieldset { 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; @extend .cont-no-list;
.field { .field {
...@@ -150,7 +161,7 @@ form { ...@@ -150,7 +161,7 @@ form {
label { label {
@extend .t-copy-sub1; @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; margin: 0 0 ($baseline/4) 0;
&.is-focused { &.is-focused {
...@@ -158,8 +169,9 @@ form { ...@@ -158,8 +169,9 @@ form {
} }
} }
//this section is borrowed from _account.scss - we should clean up and unify later
input, textarea { input, textarea {
@include transition(all $tmg-f2 ease-in-out 0s);
@extend .t-copy-base; @extend .t-copy-base;
height: 100%; height: 100%;
width: 100%; width: 100%;
...@@ -173,23 +185,8 @@ form { ...@@ -173,23 +185,8 @@ form {
width: 25%; 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 { &:focus {
+ .tip { + .tip {
color: $gray; color: $gray;
} }
...@@ -219,45 +216,111 @@ form { ...@@ -219,45 +216,111 @@ form {
color: $gray-l3; color: $gray-l3;
} }
&.error { .tip-error {
display: none;
float: none;
}
&.error {
label { label {
color: $red; color: $red;
} }
.tip-error {
@extend .anim-fadeIn;
display: block;
color: $red;
}
input { input {
border-color: $red; 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 { .actions {
border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) $baseline;
box-shadow: inset 0 1px 2px $shadow; 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; background: $gray-l6;
.action-primary { .action-primary {
@include blue-button; @include blue-button;
@extend .t-action2; @extend .t-action2;
@include transition(all $tmg-f2 linear 0); @include transition(all .15s);
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline; padding: ($baseline/5) $baseline;
font-weight: 600; font-weight: 600;
text-transform: uppercase;
} }
.action-secondary { .action-secondary {
@include grey-button; @include grey-button;
@extend .t-action2; @extend .t-action2;
@include transition(all $tmg-f2 linear 0); @include transition(all .15s);
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline; padding: ($baseline/5) $baseline;
font-weight: 600; font-weight: 600;
text-transform: uppercase;
} }
} }
} }
// ==================== // ====================
// forms - grandfathered // forms - grandfathered
......
cms/static/sass/views/_users.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
body.course.users { body.course.users {
// page layout // LAYOUT: page
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; float: left;
...@@ -18,7 +18,7 @@ body.course.users { ...@@ -18,7 +18,7 @@ body.course.users {
width: flex-grid(3, 12); width: flex-grid(3, 12);
} }
// content // ELEM: content
.content { .content {
.introduction { .introduction {
...@@ -28,60 +28,15 @@ body.course.users { ...@@ -28,60 +28,15 @@ body.course.users {
} }
// new user form // ELEM: new user form
.add-user { .wrapper-create-user {
@extend .new-form;
display: none;
&.is-shown { &.is-shown {
display: block; height: ($baseline*15);
} }
} }
// new user form (old) // ELEM: listing of users
.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
.user-list, .user-item, .item-metadata, .item-actions { .user-list, .user-item, .item-metadata, .item-actions {
@include box-sizing(border-box); @include box-sizing(border-box);
} }
...@@ -94,7 +49,7 @@ body.course.users { ...@@ -94,7 +49,7 @@ body.course.users {
position: relative; position: relative;
width: flex-grid(9, 9); width: flex-grid(9, 9);
margin: 0 0 ($baseline/2) 0; 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 { &:last-child {
margin-bottom: 0; margin-bottom: 0;
...@@ -105,7 +60,7 @@ body.course.users { ...@@ -105,7 +60,7 @@ body.course.users {
vertical-align: middle; vertical-align: middle;
} }
// item - flag // ELEM: item - flag
.flag-role { .flag-role {
@extend .ui-badge; @extend .ui-badge;
color: $white; color: $white;
...@@ -130,7 +85,7 @@ body.course.users { ...@@ -130,7 +85,7 @@ body.course.users {
} }
} }
// item - metadata // ELEM: item - metadata
.item-metadata { .item-metadata {
width: flex-grid(5, 9); width: flex-grid(5, 9);
margin-right: flex-gutter(); margin-right: flex-gutter();
...@@ -153,7 +108,7 @@ body.course.users { ...@@ -153,7 +108,7 @@ body.course.users {
} }
} }
// item - actions // ELEM: item - actions
.item-actions { .item-actions {
width: flex-grid(4, 9); width: flex-grid(4, 9);
position: static; // nasty reset needed due to base.scss position: static; // nasty reset needed due to base.scss
...@@ -170,20 +125,26 @@ body.course.users { ...@@ -170,20 +125,26 @@ body.course.users {
.action-delete { .action-delete {
// STATE: disabled
&.is-disabled {
opacity: 0.0;
visibility: hidden;
pointer-events: none;
}
} }
.delete { .delete {
@extend .ui-btn-non; @extend .ui-btn-non;
} }
// nasty reset needed due to base.scss // HACK: nasty reset needed due to base.scss
.delete-button { .delete-button {
margin-right: 0; margin-right: 0;
float: none; float: none;
color: inherit; color: inherit;
} }
// admin role controls // ELEM: admin role controls
.toggle-admin-role { .toggle-admin-role {
&.add-admin-role { &.add-admin-role {
...@@ -204,6 +165,11 @@ body.course.users { ...@@ -204,6 +165,11 @@ body.course.users {
font-weight: 600; font-weight: 600;
} }
} }
.notoggleforyou {
@extend .t-copy-sub2;
color: $gray-l2;
}
} }
// STATE: hover // STATE: hover
......
cms/templates/manage_users.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<ul> <ul>
%if allow_actions: %if allow_actions:
<li class="nav-item"> <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> </li>
%endif %endif
</ul> </ul>
...@@ -38,17 +38,20 @@ ...@@ -38,17 +38,20 @@
<article class="content-primary" role="main"> <article class="content-primary" role="main">
%if allow_actions: %if allow_actions:
<form class="new-form add-user" id="add-user-form" name="add-user-form"> <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"> <div class="wrapper-form">
<h3 class="title">${_("Add a User to Your Course's Team")}</h3> <h3 class="title">${_("Add a User to Your Course's Team")}</h3>
<fieldset class="form-fields"> <fieldset class="form-fields">
<legend class="sr">${_("Textbook information")}</legend> <legend class="sr">${_("Textbook information")}</legend>
<div class="field text required add-user-email"> <ol class="list-input">
<li class="field text required create-user-email">
<label for="user-email-input">${_("User's Email Address")}</label> <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=""> <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> <span class="tip tip-stacked">${_("Please provide the email address of the course staff member you'd like to add")}</span>
</div> </li>
</ol>
</fieldset> </fieldset>
</div> </div>
<div class="actions"> <div class="actions">
...@@ -56,6 +59,7 @@ ...@@ -56,6 +59,7 @@
<button class="action action-secondary action-cancel">${_("Cancel")}</button> <button class="action action-secondary action-cancel">${_("Cancel")}</button>
</div> </div>
</form> </form>
</div>
%endif %endif
<ol class="user-list"> <ol class="user-list">
...@@ -107,7 +111,7 @@ ...@@ -107,7 +111,7 @@
<ul class="item-actions user-actions"> <ul class="item-actions user-actions">
<li class="action action-role"> <li class="action action-role">
% if is_instuctor and len(instructors) == 1: % 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: % 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> <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 % endif
...@@ -150,8 +154,9 @@ ...@@ -150,8 +154,9 @@
))}" ))}"
$(document).ready(function() { $(document).ready(function() {
var $newUserForm = $('#add-user-form'); var $createUserForm = $('#create-user-form');
$newUserForm.bind('submit', function(e) { var $createUserFormWrapper = $createUserForm.closest('.wrapper-create-user');
$createUserForm.bind('submit', function(e) {
e.preventDefault(); e.preventDefault();
var url = tplUserURL.replace("@@EMAIL@@", $('#user-email-input').val().trim()) var url = tplUserURL.replace("@@EMAIL@@", $('#user-email-input').val().trim())
$.ajax({ $.ajax({
...@@ -191,19 +196,19 @@ ...@@ -191,19 +196,19 @@
}); });
}); });
var $cancelButton = $newUserForm.find('.action-cancel'); var $cancelButton = $createUserForm.find('.action-cancel');
$cancelButton.bind('click', function(e) { $cancelButton.bind('click', function(e) {
e.preventDefault(); e.preventDefault();
$('.new-user-button').removeClass('is-disabled'); $('.create-user-button').removeClass('is-disabled');
$newUserForm.toggleClass('is-shown'); $createUserFormWrapper.toggleClass('is-shown');
$('#user-email-input').val(''); $('#user-email-input').val('');
}); });
$('.new-user-button').bind('click', function(e) { $('.create-user-button').bind('click', function(e) {
e.preventDefault(); e.preventDefault();
$(this).addClass('is-disabled'); $(this).addClass('is-disabled');
$newUserForm.toggleClass('is-shown'); $createUserFormWrapper.toggleClass('is-shown');
$newUserForm.find('#user-email-input').focus(); $createUserForm.find('#user-email-input').focus();
}); });
$('body').bind('keyup', function(e) { $('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