base teams space (template) and create team form
This commit is contained in:
Frances Botsford
@@ -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";
|
||||
|
||||
@@ -69,3 +69,10 @@
|
||||
@include margin-left( ($baseline/2) );
|
||||
}
|
||||
}
|
||||
|
||||
// teams temporary
|
||||
.view-teams {
|
||||
.global-new, #global-navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
276
lms/static/sass/views/_teams.scss
Normal file
276
lms/static/sass/views/_teams.scss
Normal file
@@ -0,0 +1,276 @@
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
169
lms/templates/ux/reference/teams-base.html
Normal file
169
lms/templates/ux/reference/teams-base.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<%! 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> ▾</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 += " ";
|
||||
} 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>
|
||||
198
lms/templates/ux/reference/teams-create.html
Normal file
198
lms/templates/ux/reference/teams-create.html
Normal file
@@ -0,0 +1,198 @@
|
||||
<%! 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> ▾</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 += " ";
|
||||
} 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>
|
||||
Reference in New Issue
Block a user