Studio: refactored form-based Sass and revised markup/copy for course team admin mgmt
This commit is contained in:
Brian Talbot
committed by
David Baumgold
David Baumgold
parent
e5ef5ef1a0
commit
deced24b32
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user