Skip to content

E
edx-platform
Commit 446e2aa7 by frances botsford
Options

Merge pull request #7859 from edx/frances/teams-ux 

UX templates for Teams
parents c1807c66 cf89f3a6
Showing with 651 additions and 0 deletions
lms/static/sass/_build-course.scss
......@@ -50,6 +50,7 @@
@import "course/rubric";
@import "course/open_ended_grading";
@import "course/student-notes";
@import "views/teams";
// course - instructor-only views
@import "course/instructor/instructor";
......
lms/static/sass/_developer.scss
......@@ -69,3 +69,10 @@
@include margin-left( ($baseline/2) );
}
}
// teams temporary
.view-teams {
.global-new, #global-navigation {
display: none;
}
}
lms/static/sass/views/_teams.scss 0 → 100644
.view-teams {
// resets for existing styles
div.course-wrapper section.course-content {
padding: 0;
p {
margin-bottom: ($baseline/4);
}
}
.icon {
font-family: "FontAwesome";
}
%button-reset {
box-shadow: none;
border: none;
background-image: none;
background-color: transparent;
font-weight: normal;
}
// layout
.page-header {
@include clearfix();
border-bottom: 1px solid $gray-l3;
padding: $baseline $baseline ($baseline/2) $baseline;
.page-title {
@extend %t-title4;
margin-bottom: ($baseline/4);
text-transform: none;
color: $black;
}
.page-description {
@extend %t-copy-sub1;
margin-bottom: ($baseline/4);
color: $gray;
}
}
.page-header.has-secondary {
.page-header-main {
display: inline-block;
width: flex-grid(8,12);
}
.page-header-secondary {
display: inline-block;
width: flex-grid(4,12);
@include text-align(right);
}
}
// ui bits
.breadcrumbs {
@extend %t-copy-sub1;
.nav-item {
@include margin-right($baseline/2);
display: inline-block;
}
.icon {
@include margin-right($baseline/4);
display: inline-block;
color: $gray-l2;
@include rtl {
@include transform(rotateY(180deg));
}
}
}
.page-header-search {
.search-label {
@extend %text-sr;
}
.search-field {
transition: all .25s ease-in-out;
border: 0;
border-bottom: 2px solid transparent;
padding: ($baseline/4) ($baseline/2);
font-family: inherit;
color: $gray;
@include text-align(right);
&:focus {
border-bottom: 2px solid $black;
color: $black;
}
}
.action-search {
@extend %button-reset;
padding: ($baseline/4) ($baseline/2);
.icon {
color: $gray-l3;
}
&:hover,
&:focus {
.icon {
color: $black;
}
}
}
}
// main content bits
.page-content {
padding: $baseline;
}
.page-content-nav {
margin-bottom: $baseline;
border-bottom: 2px solid $gray-l5;
.nav-item {
display: inline-block;
margin-bottom: -3px; // to match the border
border-bottom: 3px solid $gray-l5;
padding: ($baseline*.75);
color: $gray-d2;
&.is-active {
border-bottom: 3px solid $gray-d2;
color: $gray-d2;
}
&:hover,
&:focus {
border-bottom: 3px solid $link-color;
color: $link-color;
}
}
}
.intro {
@extend %t-weight4;
}
.create-team {
legend {
@extend %t-title6;
@extend %t-weight4;
margin-bottom: ($baseline/4);
}
.description {
@extend %t-copy-sub1;
margin-bottom: ($baseline/2);
color: $gray-l1;
}
.form-field {
margin: 0 0 ($baseline*0.75) 0;
.label {
display: block;
margin-bottom: ($baseline/4);
}
&.is-required {
@extend %t-weight4;
.label:after {
@include margin-left($baseline/4);
content: "*";
}
}
.input-text {
@extend %t-copy-base;
@include transition(all $tmg-f2 ease-in-out 0s);
display: block;
width: 90%;
height: 100%;
margin-bottom: ($baseline/4);
border: 1px solid $gray-l2;
padding: ($baseline/2);
}
.input-select {
@extend %t-copy-base;
width: 90%;
margin-bottom: ($baseline/4);
border: 1px solid $gray-l2;
}
.input-text,
.input-select {
&:focus {
border: 1px solid $blue;
+ .tip {
color: $blue;
}
}
}
&.has-errors {
.input-text,
.input-select {
border: 1px solid $alert-color;
+ .tip {
color: $alert-color;
}
}
}
.tip {
@extend %t-copy-sub1;
display: block;
color: $gray-l1;
}
}
.form-actions {
margin-top: $baseline;
}
.action {
@extend %t-copy;
@extend %t-action2;
@include margin-right ($baseline/2);
padding: ($baseline/2) $baseline;
}
.action-primary {
@extend %btn-primary-blue;
display: inline-block;
text-shadow: none;
}
.action-cancel {
@extend %button-reset;
display: inline-block;
border: 1px solid transparent;
color: $gray;
&:hover,
&:focus {
border: 1px solid $link-color;
color: $link-color;
}
}
.required-wrapper {
display: inline-block;
vertical-align: top;
width: 60%;
}
.optional-wrapper {
display: inline-block;
vertical-align: top;
width: 35%;
margin-left: 2%;
border-left: 2px solid $gray-l4;
padding-left: 2%;
}
}
}
lms/templates/ux/reference/teams-base.html 0 → 100644
<%! from django.utils.translation import ugettext as _ %>
<%! from django.template.defaultfilters import escapejs %>
<%! from microsite_configuration import page_title_breadcrumbs %>
<%! from edxnotes.helpers import is_feature_enabled as is_edxnotes_enabled %>
<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>
<%block name="bodyclass">in-course view-teams</%block>
<%block name="title"><title>
Teams | Course name
</title></%block>
<%block name="header_extras">
<header class="global slim" aria-label="Main" role="banner">
<div class="wrapper-header nav-container">
<h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="/" title="Home page" itemprop="url">
<img src="/static/images/edx-theme/edx-logo-77x36.png" alt="Your Platform Name Here" title="Your Platform Name Here" itemprop="url" />
<span class="sr">Home Page</span>
</a>
</h1>
<h2><span class="provider">PlantsX:</span> GAR_123 Wild Life</h2>
<ul class="user">
<li class="primary">
<a href="/dashboard" class="user-link">
<i class="icon fa fa-home" aria-hidden="true"></i>
<span class="sr">Dashboard for:</span>
<div>frances</div>
</a>
</li>
<li class="primary">
<a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">More options dropdown</span> &#9662;</a>
<ul class="dropdown-menu" aria-label="More Options" role="menu">
<li><a href="/account/settings">Account Settings</a></li>
<li><a href="/u/frances">My Profile</a></li>
<li><a href="/logout" role="menuitem">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</header>
<nav aria-label="Course Material" class="courseware wrapper-course-material">
<div class="course-material">
<ol class="course-tabs">
<li>
<a class="active" href="/courses/PlantsX/GAR_123/2014_T3/courseware">
Courseware
<span class="sr">, current location</span>
</a>
</li>
<li>
<a class="" href="/courses/PlantsX/GAR_123/2014_T3/info">
Course Info
</a>
</li>
<li>
<a class="" href="/courses/PlantsX/GAR_123/2014_T3/discussion/forum">
Discussion
</a>
</li>
<li>
<a class="" href="/courses/PlantsX/GAR_123/2014_T3/course_wiki">
Wiki
</a>
</li>
<li>
<a class="" href="/courses/PlantsX/GAR_123/2014_T3/progress">
Progress
</a>
</li>
<li>
<a class="" href="/courses/PlantsX/GAR_123/2014_T3/instructor">
Instructor
</a>
</li>
</ol>
</div>
</nav>
</%block>
<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
<%block name="nav_skip">${"#seq_content" if section_title else "#course-content"}</%block>
</%block>
<%block name="js_extra">
<script type="text/javascript">
$(function(){
$(".ui-accordion-header a, .ui-accordion-content .subtitle").each(function() {
var elemText = $(this).text().replace(/^\s+|\s+$/g,''); // Strip leading and trailing whitespace
var wordArray = elemText.split(" ");
var finalTitle = "";
if (wordArray.length > 0) {
for (i=0;i<=wordArray.length-1;i++) {
finalTitle += wordArray[i];
if (i == (wordArray.length-2)) {
finalTitle += "&nbsp;";
} else if (i == (wordArray.length-1)) {
// Do nothing
} else {
finalTitle += " ";
}
}
}
$(this).html(finalTitle);
});
});
</script>
</%block>
<div class="container">
<div class="course-wrapper">
<section class="course-content" id="course-content">
<header class="page-header has-secondary">
<div class="page-header-main">
<nav class="breadcrumbs">
<a class="nav-item" href="">Sustainable Energy</a> <span class="icon fa-angle-right" aria-hidden="true"></span>
<a class="nav-item" href="">Sample double nest</a> <span class="icon fa-angle-right" aria-hidden="true"></span>
</nav>
<h1 class="page-title">Solar Power</h1>
<p class="page-description">Teams working on projects related to Week 3 - 10 group activities</p>
</div>
<div class="page-header-secondary">
<div class="page-header-search wrapper-search-teams">
<form>
<label for="search-teams" class="search-label">Search teams</label>
<input id="search-teams" class="search-field" placeholder="Search teams" />
<button class="action action-search"><span class="icon fa-search" aria-hidden="true"></span><span class="sr">Search</span></button>
</form>
</div>
</div>
</header>
<div class="page-content">
<nav class="page-content-nav">
<a href="" class="nav-item is-active">My Teams</a>
<a href="" class="nav-item">Browse All Teams</a>
</nav>
<div class="page-content-main">
<p>Blah blah blah. Go Team!</p>
</div>
</div>
</section>
</div>
</div>
lms/templates/ux/reference/teams-create.html 0 → 100644
<%! from django.utils.translation import ugettext as _ %>
<%! from django.template.defaultfilters import escapejs %>
<%! from microsite_configuration import page_title_breadcrumbs %>
<%! from edxnotes.helpers import is_feature_enabled as is_edxnotes_enabled %>
<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>
<%block name="bodyclass">in-course view-teams</%block>
<%block name="title"><title>
Create New Team | [Course name]
</title></%block>
<%block name="header_extras">
<header class="global slim" aria-label="Main" role="banner">
<div class="wrapper-header nav-container">
<h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="/" title="Home page" itemprop="url">
<img src="/static/images/edx-theme/edx-logo-77x36.png" alt="Your Platform Name Here" title="Your Platform Name Here" itemprop="url" />
<span class="sr">Home Page</span>
</a>
</h1>
<h2><span class="provider">PlantsX:</span> GAR_123 Wild Life</h2>
<ul class="user">
<li class="primary">
<a href="/dashboard" class="user-link">
<i class="icon fa fa-home" aria-hidden="true"></i>
<span class="sr">Dashboard for:</span>
<div>frances</div>
</a>
</li>
<li class="primary">
<a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">More options dropdown</span> &#9662;</a>
<ul class="dropdown-menu" aria-label="More Options" role="menu">
<li><a href="/account/settings">Account Settings</a></li>
<li><a href="/u/frances">My Profile</a></li>
<li><a href="/logout" role="menuitem">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</header>
<nav aria-label="Course Material" class="courseware wrapper-course-material">
<div class="course-material">
<ol class="course-tabs">
<li>
<a class="active" href="/courses/PlantsX/GAR_123/2014_T3/courseware">
Courseware
<span class="sr">, current location</span>
</a>
</li>
<li>
<a class="" href="/courses/PlantsX/GAR_123/2014_T3/info">
Course Info
</a>
</li>
<li>
<a class="" href="/courses/PlantsX/GAR_123/2014_T3/discussion/forum">
Discussion
</a>
</li>
<li>
<a class="" href="/courses/PlantsX/GAR_123/2014_T3/course_wiki">
Wiki
</a>
</li>
<li>
<a class="" href="/courses/PlantsX/GAR_123/2014_T3/progress">
Progress
</a>
</li>
<li>
<a class="" href="/courses/PlantsX/GAR_123/2014_T3/instructor">
Instructor
</a>
</li>
</ol>
</div>
</nav>
</%block>
<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
<%block name="nav_skip">${"#seq_content" if section_title else "#course-content"}</%block>
</%block>
<%block name="js_extra">
<script type="text/javascript">
$(function(){
$(".ui-accordion-header a, .ui-accordion-content .subtitle").each(function() {
var elemText = $(this).text().replace(/^\s+|\s+$/g,''); // Strip leading and trailing whitespace
var wordArray = elemText.split(" ");
var finalTitle = "";
if (wordArray.length > 0) {
for (i=0;i<=wordArray.length-1;i++) {
finalTitle += wordArray[i];
if (i == (wordArray.length-2)) {
finalTitle += "&nbsp;";
} else if (i == (wordArray.length-1)) {
// Do nothing
} else {
finalTitle += " ";
}
}
}
$(this).html(finalTitle);
});
});
</script>
</%block>
<div class="container">
<div class="course-wrapper">
<section class="course-content" id="course-content">
<header class="page-header">
<div class="page-header-main">
<nav class="breadcrumbs">
<a class="nav-item" href="">Solar Energy</a> <span class="icon fa-angle-right" aria-hidden="true"></span>
</nav>
<h1 class="page-title">Create a New Team</h1>
<p class="page-description">If you cannot find an existing team to join or would like to team up with a group of friends, create a new team.</p>
</div>
</header>
<div class="page-content">
<form class="create-team">
<fieldset class="required-wrapper">
<legend class="sr">Required Information</legend>
<div class="form-field is-required">
<label for="team-name" class="label">Team Name (Required)</label>
<input id="team-name" aria-required="true" class="input-text" />
<span class="tip tip-input">The name that will identify your team</span>
</div>
<div class="form-field is-required has-errors">
<label for="team-description" class="label">Team Description (Required)</label>
<textarea id="team-description" aria-required="true" class="input-text input-text-large"></textarea>
<span class="tip tip-input">A short description of the team to help other students understand the goals or directives the team is pursuing</span>
</div>
</fieldset>
<fieldset class="optional-wrapper">
<legend>Optional Characteristics</legend>
<p class="description">Help other students find and join your team by specifying characteristics. The more limitations you add, the fewer students may be interested in joining, so choose carefully.</p>
<div class="form-field">
<label for="team-language" class="label">Language</label>
<select id="team-language" name="team-language" class="input-select">
<option value="">Select...</option>
<option>Swahili</option>
<option>Mandarin</option>
<option>English</option>
<option>Hobbitish</option>
</select>
<span class="tip tip-input">The primary language of the team</span>
</div>
<div class="form-field">
<label for="team-country" class="label">Country</label>
<select id="team-country" name="team-country" class="input-select">
<option value="">Select...</option>
<option>Timbuktoo</option>
<option>The Moon</option>
<option>Paris</option>
<option>JP</option>
</select>
<span class="tip tip-input">The primary country of the team</span>
</div>
</fieldset>
<div class="form-actions">
<button class="action action-primary">Create</button>
<button class="action action-cancel" href="">Cancel</button>
</div>
</form>
</div>
</section>
</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