Skip to content

E
edx-platform
Commit 15b91044 by Frances Botsford
Options

generic and Team card/listing FED 

adjusting styles for teams cards
parent 033d36c8
Showing with 429 additions and 10 deletions
lms/static/sass/elements/_controls.scss
......@@ -294,8 +294,8 @@
@extend %btn-primary;
border: 1px solid darken($action-primary-bg,10%);
border-radius: 3px;
padding: ($baseline/2) $baseline;
background-color: $action-primary-fg;
padding: 8px $baseline;
background-color: transparent;
color: darken($action-primary-bg,10%);
text-align: center;
......@@ -339,6 +339,19 @@
}
}
%btn-pl-secondary-base {
@extend %btn-pl-default-base;
@include transition(border $tmg-f2 ease-in-out);
border: 1px solid transparent;
color: $action-primary-bg;
&:hover {
border: 1px solid $gray-l2;
background-color: transparent;
color: $action-primary-bg;
}
}
// ====================
// application: canned actions
......
lms/static/sass/views/_teams.scss
......@@ -9,8 +9,14 @@
}
}
p, span {
color: inherit;
font-weight: inherit;
}
.icon {
font-family: "FontAwesome";
color: inherit;
}
%button-reset {
......@@ -82,7 +88,7 @@
}
.search-field {
transition: all .25s ease-in-out;
transition: all $tmg-f2 ease-in-out;
border: 0;
border-bottom: 2px solid transparent;
padding: ($baseline/4) ($baseline/2);
......@@ -105,6 +111,7 @@
color: $gray-l3;
}
// STATE: hover and focus
&:hover,
&:focus {
......@@ -122,7 +129,7 @@
.page-content-nav {
margin-bottom: $baseline;
border-bottom: 2px solid $gray-l5;
border-bottom: 3px solid $gray-l5;
.nav-item {
display: inline-block;
......@@ -136,6 +143,7 @@
color: $gray-d2;
}
// STATE: hover and focus
&:hover,
&:focus {
border-bottom: 3px solid $link-color;
......@@ -148,6 +156,196 @@
@extend %t-weight4;
}
.listing-tools {
@extend %t-copy-sub1;
margin: ($baseline/10) $baseline;
color: $gray-l1;
label { // override
color: inherit;
font-size: inherit;
}
.listing-sort-select {
@extend %t-copy-sub1;
@extend %t-regular;
border: 0;
}
}
.card {
@include clearfix();
transition: all $tmg-f2 ease-in-out;
position: relative;
display: inline-block;
vertical-align: top;
width: 30%; // TODO: susy grid
margin: ($baseline) 1.2%;
border: 1px solid $gray-l4;
border-bottom: 2px solid $gray-l3;
border-radius: 3px;
background-color: $white;
color: $black;
// STATE: hover, active, and focus
&:hover,
&:active,
&:focus {
box-shadow: 0 0 5px 1px $m-blue-t1;
.card-description {
color: $base-font-color;
}
}
.wrapper-card-core {
@include clearfix();
padding: ($baseline);
}
.card-type {
@extend %t-copy-sub2;
text-transform: uppercase;
color: $gray;
}
.card-title {
@extend %t-title5;
@extend %t-strong;
margin-bottom: rem(.5);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-description {
@extend %t-copy-sub1;
color: $gray;
}
.card-actions {
@include clearfix();
.action-view {
@extend %btn-pl-default-base;
float: right;
margin: ($baseline/4) 0;
}
}
.wrapper-card-meta {
@include clearfix();
@extend %t-copy-sub1;
padding: ($baseline/2) $baseline;
background-color: $gray-l5;
color: $gray;
.meta-detail {
margin-top: ($baseline/4);
margin-right: ($baseline*.75);
color: $gray;
.icon {
margin-right: ($baseline/4);
}
}
.list-member-thumbs {
@extend %ui-no-list;
display: inline-block;
vertical-align: text-bottom;
.item-member-thumb {
display: inline-block;
}
img {
width: $baseline;
height: $baseline;
margin: 0 ($baseline/4);
}
}
}
&.square-card {
.card-description { // replace with js or char limit
height: 4rem;
overflow: hidden;
}
.wrapper-card-meta {
&.has-actions {
.card-meta,
.card-actions {
display: inline-block;
width: 48%; // TODO: susy grid
vertical-align: middle;
}
}
}
}
&.list-card {
width: auto;
display: block;
.card-core {
display: inline-block;
vertical-align: middle;
width: 84%; // TODO: susy grid
}
.card-meta {
@include clearfix();
}
.meta-detail {
display: inline-block;
}
.team-activity {
float: right;
}
.card-actions {
display: inline-block;
vertical-align: middle;
width: 15%; // TODO: susy grid
}
}
&.has-pennant {
.wrapper-card-core {
padding-top: ($baseline*2);
}
.pennant {
@extend %t-copy-sub2;
@extend %t-strong;
display: block;
position: absolute;
top: ($baseline/2);
left: -($baseline/4);
box-shadow: 1px 1px 1px 0 $blue-d1;
background-color: $m-blue-l2;
padding: ($baseline/10) ($baseline*.75);
text-transform: uppercase;
color: $white;
}
}
&.is-unavailable {
background-color: $gray-l5;
.wrapper-card-meta {
background-color: $gray-l4;
}
}
}
.create-team {
legend {
......@@ -181,7 +379,7 @@
.input-text {
@extend %t-copy-base;
@include transition(all $tmg-f2 ease-in-out 0s);
transition: all $tmg-f2 ease-in-out 0s;
display: block;
width: 90%;
height: 100%;
......@@ -251,6 +449,7 @@
border: 1px solid transparent;
color: $gray;
// STATE: hover and focus
&:hover,
&:focus {
border: 1px solid $link-color;
......@@ -261,13 +460,13 @@
.required-wrapper {
display: inline-block;
vertical-align: top;
width: 60%;
width: 60%; // TODO: susy grid
}
.optional-wrapper {
display: inline-block;
vertical-align: top;
width: 35%;
width: 35%; // TODO: susy grid
margin-left: 2%;
border-left: 2px solid $gray-l4;
padding-left: 2%;
......
lms/templates/ux/reference/teams-base.html
......@@ -153,13 +153,220 @@ Teams | Course name
</header>
<div class="page-content">
<nav class="page-content-nav">
<nav class="page-content-nav" aria-label="Team">
<a href="" class="nav-item is-active">My Teams</a>
<a href="" class="nav-item">Browse All Teams</a>
<a href="" class="nav-item">Browse</a>
</nav>
<div class="page-content-main">
<p>Blah blah blah. Go Team!</p>
<!-- may need a form with submit here -->
<div class="listing-tools">
<span class="listing-count">1-10 of 24 topics</span> |
<span class="field listing-sort">
<label class="field-label" for="select_01">Sorted by</label>
<select id="select_01" name="select_01" class="field-input input-select listing-sort-select">
<option>number of teams</option>
<option>alphabetically</option>
<option>latest activity</option>
</select>
</span>
</div>
<div class="wrapper-card-list">
<div class="card square-card topic-card">
<div class="wrapper-card-core">
<div class="card-core">
<small class="card-type">Topic</small>
<h3 class="card-title">Renewable Energy</h3>
<p class="card-description">Explore how changes in renewable energy production will change our day-to-day lives</p>
</div>
</div>
<div class="wrapper-card-meta has-actions">
<div class="card-meta">
<p class="meta-detail team-count">34 Teams</p>
</div>
<div class="card-actions">
<a class="action action-view" href=""><span class="sr">View Teams in the Renewable Energy Topic </span><i class="icon fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="card square-card topic-card">
<div class="wrapper-card-core">
<div class="card-core">
<small class="card-type">Topic</small>
<h3 class="card-title">Solar Power Cells</h3>
<p class="card-description">Discuss the current technology trajectory of solar power cells</p>
</div>
</div>
<div class="wrapper-card-meta has-actions">
<div class="card-meta">
<p class="meta-detail team-count">34 Teams</p>
</div>
<div class="card-actions">
<a class="action action-view" href=""><span class="sr">View Teams in the Solar Power Cells Topic </span><i class="icon fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="card square-card topic-card">
<div class="wrapper-card-core">
<div class="card-core">
<small class="card-type">Topic</small>
<h3 class="card-title">Wind Energy</h3>
<p class="card-description">Explore how we can harness wind energy, either through large turbine farms, mid-ocean wind farms, and other types of wind energy that would be cut off from this listing because it is so long</p>
</div>
</div>
<div class="wrapper-card-meta has-actions">
<div class="card-meta">
<p class="meta-detail team-count">34 Teams</p>
</div>
<div class="card-actions">
<a class="action action-view" href=""><span class="sr">View Teams in the Wind Energy Topic </span><i class="icon fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="card square-card topic-card">
<div class="wrapper-card-core">
<div class="card-core">
<small class="card-type">Topic</small>
<h3 class="card-title">Renewable Energy</h3>
<p class="card-description">Explore how changes in renewable energy production will change our day-to-day lives</p>
</div>
</div>
<div class="wrapper-card-meta has-actions">
<div class="card-meta">
<p class="meta-detail team-count">34 Teams</p>
</div>
<div class="card-actions">
<a class="action action-view" href=""><span class="sr">View Teams in the Renewable Energy Topic </span><i class="icon fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="card square-card topic-card">
<div class="wrapper-card-core">
<div class="card-core">
<small class="card-type">Topic</small>
<h3 class="card-title">Solar Power Cells</h3>
<p class="card-description">Discuss the current technology trajectory of solar power cells</p>
</div>
</div>
<div class="wrapper-card-meta has-actions">
<div class="card-meta">
<p class="meta-detail team-count">34 Teams</p>
</div>
<div class="card-actions">
<a class="action action-view" href=""><span class="sr">View Teams in the Solar Power Cells Topic </span><i class="icon fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="card square-card topic-card">
<div class="wrapper-card-core">
<div class="card-core">
<small class="card-type">Topic</small>
<h3 class="card-title">Wind Energy</h3>
<p class="card-description">Explore how we can harness wind energy, either through large turbine farms, mid-ocean wind farms, and other types of wind energy that would be cut off from this listing because it is so long</p>
</div>
</div>
<div class="wrapper-card-meta has-actions">
<div class="card-meta">
<p class="meta-detail team-count">34 Teams</p>
</div>
<div class="card-actions">
<a class="action action-view" href=""><span class="sr">View Teams in the Wind Energy Topic </span><i class="icon fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="wrapper-card-list">
<div class="card list-card team-card">
<div class="wrapper-card-core">
<div class="card-core">
<h3 class="card-title">Wind Energy</h3>
<p class="card-description">Explore how we can harness wind energy, either through large turbine farms, mid-ocean wind farms, and other types of wind energy that would be cut off from this listing because it is so long</p>
</div>
<div class="card-actions">
<a class="action action-view" href="">View<span class="sr"> Wind Energy Team</span></a>
</div>
</div>
<div class="wrapper-card-meta">
<div class="card-meta">
<div class="meta-detail team-members">
<span class="member-count">12 / 15 Members</span>
<ul class="list-member-thumbs">
<li class="item-member-thumb"><img alt="AlexeiK" src="" /></li>
<li class="item-member-thumb"><img alt="Assam-S" src="" /></li>
<li class="item-member-thumb"><img alt="SadieDearest" src="" /></li>
</ul>
</div>
<p class="meta-detail team-activity">Last activity: 10 minutes ago</p>
</div>
</div>
</div>
<div class="card list-card team-card">
<div class="wrapper-card-core">
<div class="card-core">
<h3 class="card-title">Team Solar</h3>
<p class="card-description">Team description that may need to be capped at 140 chars or so.</p>
</div>
<div class="card-actions">
<a class="action action-view" href="">View<span class="sr"> Team Solar Team</span></a>
</div>
</div>
<div class="wrapper-card-meta">
<div class="card-meta">
<div class="meta-detail team-members">
<span class="member-count">12 / 15 Members</span>
<ul class="list-member-thumbs">
<li class="item-member-thumb"><img alt="AlexeiK" src="" /></li>
<li class="item-member-thumb"><img alt="Assam-S" src="" /></li>
<li class="item-member-thumb"><img alt="SadieDearest" src="" /></li>
</ul>
</div>
<p class="meta-detail project-relation"><span class="icon fa-list"></span> Project 1</p>
<p class="meta-detail team-location"><span class="icon fa-globe"></span> North America</p>
<p class="meta-detail team-language"><span class="icon fa-chat"></span> English</p>
<p class="meta-detail team-activity">Last activity: 10 minutes ago</p>
</div>
</div>
</div>
<div class="card list-card team-card is-unavailable">
<div class="wrapper-card-core">
<div class="card-core">
<h3 class="card-title">Team Solar</h3>
<p class="card-description">Team description that may need to be capped at 140 chars or so.</p>
</div>
<div class="card-actions">
<a class="action action-view" href="">View<span class="sr"> Team Solar Team</span></a>
</div>
</div>
<div class="wrapper-card-meta">
<div class="card-meta">
<div class="meta-detail team-members">
<span class="member-count">15 / 15 Members</span>
<ul class="list-member-thumbs">
<li class="item-member-thumb"><img alt="AlexeiK" src="" /></li>
<li class="item-member-thumb"><img alt="Assam-S" src="" /></li>
<li class="item-member-thumb"><img alt="SadieDearest" src="" /></li>
</ul>
</div>
<p class="meta-detail project-relation"><span class="icon fa-list"></span> Project 1</p>
<p class="meta-detail team-location"><span class="icon fa-globe"></span> North America</p>
<p class="meta-detail team-language"><span class="icon fa-chat"></span> English</p>
<p class="meta-detail team-activity">Last activity: 10 minutes ago</p>
</div>
</div>
</div>
</div>
</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