9f88427f9b
LEARNER-1859 Added fields to add social links to the user account settings file. Added icons to the user profile when these links are set, only shown when users show their entire profile. Added jasmine tests for account settings and learner profile pages. Added python unit tests to test validation on the user account.
644 lines
18 KiB
SCSS
644 lines
18 KiB
SCSS
// lms - application - learner profile
|
|
// ====================
|
|
|
|
// Table of Contents
|
|
// * +Container - Learner Profile
|
|
// * +Main - Header
|
|
// * +Settings Section
|
|
|
|
.view-profile {
|
|
$profile-image-dimension: 120px;
|
|
|
|
.window-wrap,
|
|
.content-wrapper {
|
|
background-color: $white;
|
|
}
|
|
|
|
.ui-loading-indicator {
|
|
@extend .ui-loading-base;
|
|
padding-bottom: $baseline;
|
|
|
|
// center horizontally
|
|
@include margin-left(auto);
|
|
@include margin-right(auto);
|
|
width: ($baseline*5);
|
|
}
|
|
|
|
.profile-image-field {
|
|
button {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
padding: 0;
|
|
}
|
|
|
|
.u-field-image {
|
|
padding-top: 0;
|
|
padding-bottom: ($baseline/4);
|
|
}
|
|
|
|
.image-wrapper {
|
|
width: $profile-image-dimension;
|
|
position: relative;
|
|
margin: auto;
|
|
|
|
.image-frame {
|
|
display: block;
|
|
position: relative;
|
|
width: $profile-image-dimension;
|
|
height: $profile-image-dimension;
|
|
border-radius: ($profile-image-dimension/2);
|
|
overflow: hidden;
|
|
border: 3px solid $gray-lightest;
|
|
margin-top: $baseline*-0.75;
|
|
background: $white;
|
|
}
|
|
|
|
.u-field-upload-button {
|
|
position: absolute;
|
|
top: 0;
|
|
opacity: 0;
|
|
width: $profile-image-dimension;
|
|
height: $profile-image-dimension;
|
|
border-radius: ($profile-image-dimension/2);
|
|
border: 2px dashed transparent;
|
|
background: rgba(229,241,247, .8);
|
|
color: $link-color;
|
|
text-shadow: none;
|
|
@include transition(all $tmg-f1 ease-in-out 0s);
|
|
z-index: 6;
|
|
|
|
i {
|
|
color: $link-color;
|
|
}
|
|
|
|
&:focus,
|
|
&:hover {
|
|
@include show-hover-state();
|
|
border-color: $link-color;
|
|
}
|
|
|
|
&.in-progress {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.button-visible {
|
|
@include show-hover-state();
|
|
}
|
|
|
|
.upload-button-icon,
|
|
.upload-button-title {
|
|
display: block;
|
|
margin-bottom: ($baseline/4);
|
|
@include transform(translateY(35px));
|
|
line-height: 1.3em;
|
|
text-align: center;
|
|
z-index: 7;
|
|
color: $base-font-color;
|
|
}
|
|
|
|
.upload-button-input {
|
|
position: absolute;
|
|
top: 0;
|
|
@include left(0);
|
|
width: $profile-image-dimension;
|
|
border-radius: ($profile-image-dimension/2);
|
|
height: 100%;
|
|
cursor: pointer;
|
|
z-index: 5;
|
|
outline: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.u-field-remove-button {
|
|
position: relative;
|
|
display: block;
|
|
width: $profile-image-dimension;
|
|
margin-top: ($baseline / 4);
|
|
padding: ($baseline / 5) 0 0;
|
|
text-align: center;
|
|
opacity: 0;
|
|
transition: opacity 0.5s;
|
|
}
|
|
|
|
&:hover, &:active {
|
|
.u-field-remove-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrapper-profile {
|
|
min-height: 200px;
|
|
background-color: $gray-lightest;
|
|
|
|
.ui-loading-indicator {
|
|
margin-top: 100px;
|
|
}
|
|
}
|
|
|
|
.profile-self {
|
|
.wrapper-profile-field-account-privacy {
|
|
@include clearfix();
|
|
@include box-sizing(border-box);
|
|
width: 100%;
|
|
margin: 0 auto 0;
|
|
border: 1px solid $gray-l3;
|
|
background-color: $gray-l4;
|
|
padding: ($baseline*0.75) 0;
|
|
|
|
.u-field-account_privacy {
|
|
@extend .container;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 0 ($baseline*3);
|
|
}
|
|
|
|
.u-field-title {
|
|
@extend %t-strong;
|
|
width: auto;
|
|
color: $base-font-color;
|
|
cursor: text;
|
|
text-shadow: none; // override bad lms styles on labels
|
|
}
|
|
|
|
.u-field-value {
|
|
width: auto;
|
|
@include margin-left($baseline/2);
|
|
}
|
|
|
|
.u-field-message {
|
|
@include float(left);
|
|
width: 100%;
|
|
padding: 0;
|
|
color: $base-font-color;
|
|
|
|
.u-field-message-notification {
|
|
color: $gray-d2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrapper-profile-sections {
|
|
@extend .container;
|
|
@include padding($baseline*1.5, $baseline*1.5, $baseline*1.5, 0);
|
|
min-width: 0;
|
|
|
|
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
|
|
@include margin-left(0);
|
|
@include padding($baseline*1.5, 0, $baseline*1.5, 0);
|
|
}
|
|
}
|
|
|
|
.profile-header {
|
|
@include padding(0, $baseline*2, $baseline, $baseline*3);
|
|
|
|
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
|
|
@include padding(0, $baseline*2, $baseline, $baseline*0.75);
|
|
}
|
|
|
|
.header {
|
|
@extend %t-title4;
|
|
@extend %t-ultrastrong;
|
|
display: inline-block;
|
|
}
|
|
|
|
.subheader {
|
|
@extend %t-title6;
|
|
}
|
|
}
|
|
|
|
.wrapper-profile-section-one {
|
|
@include float(left);
|
|
@include margin-left($baseline*3);
|
|
width: 300px;
|
|
background-color: $white;
|
|
border-top: 5px solid $blue;
|
|
padding-bottom: $baseline;
|
|
|
|
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
|
|
@include margin-left(0);
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.profile-section-one-fields {
|
|
@include margin(0, $baseline/2, 0, $baseline*0.75);
|
|
|
|
.social-links {
|
|
font-size: 2rem;
|
|
padding-top: $baseline/4;
|
|
|
|
& > span {
|
|
color: $gray-l4;
|
|
}
|
|
|
|
a {
|
|
.fa-facebook-square {
|
|
color: $facebook-blue;
|
|
}
|
|
|
|
.fa-twitter-square {
|
|
color: $twitter-blue;
|
|
}
|
|
|
|
.fa-linkedin-square {
|
|
color: $linkedin-blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-field {
|
|
@extend %t-weight4;
|
|
padding: 0;
|
|
color: $base-font-color;
|
|
margin-top: $baseline/5;
|
|
|
|
.u-field-value, .u-field-title {
|
|
@extend %t-weight4;
|
|
width: calc(100% - 40px);
|
|
}
|
|
|
|
.u-field-value-readonly {
|
|
font-weight: 500;
|
|
font-family: $sans-serif;
|
|
color: $darkest-base-font-color;
|
|
}
|
|
|
|
.u-field-title {
|
|
color: $lightest-base-font-color;
|
|
display: block;
|
|
}
|
|
|
|
&:not(.u-field-readonly):not(:last-child) {
|
|
padding-bottom: $baseline/4;
|
|
border-bottom: 1px solid $gray-lighter;
|
|
|
|
&:hover.mode-placeholder {
|
|
padding-bottom: $baseline/5;
|
|
border-bottom: 2px dashed $link-color;
|
|
}
|
|
}
|
|
&.u-field-dropdown {
|
|
position: relative;
|
|
|
|
&:not(.editable-never) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
&>.u-field {
|
|
&:not(:first-child) {
|
|
font-size: $body-font-size;
|
|
color: $base-font-color;
|
|
font-weight: $font-light;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:first-child {
|
|
@extend %t-title4;
|
|
@extend %t-weight4;
|
|
font-size: em(24);
|
|
}
|
|
}
|
|
|
|
select {
|
|
width: 85%
|
|
}
|
|
|
|
.u-field-message {
|
|
@include right(0);
|
|
position: absolute;
|
|
top: 0;
|
|
width: 20px;
|
|
|
|
.icon {
|
|
vertical-align: baseline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrapper-profile-section-container-two {
|
|
@include float(left);
|
|
@include padding-left($baseline);
|
|
width: calc(100% - 380px);
|
|
max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap
|
|
|
|
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
|
|
@include padding-left(0);
|
|
width: 100%;
|
|
margin-top: $baseline;
|
|
}
|
|
|
|
.u-field-textarea {
|
|
margin-bottom: ($baseline/2);
|
|
@include padding(0, ($baseline*.75), ($baseline*.75), ($baseline/4));
|
|
|
|
.u-field-header {
|
|
position: relative;
|
|
|
|
.u-field-message {
|
|
@include right(0);
|
|
top: $baseline/4;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
&.editable-toggle {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.u-field-title {
|
|
@extend %t-title6;
|
|
@extend %t-weight5;
|
|
display: inline-block;
|
|
margin-top: 0;
|
|
margin-bottom: ($baseline/4);
|
|
color: $gray-dark;
|
|
width: 100%;
|
|
}
|
|
|
|
.u-field-value {
|
|
@extend %t-copy-base;
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
textarea {
|
|
width: 100%;
|
|
background-color: transparent;
|
|
border-radius: 5px;
|
|
border-color: $gray-d1;
|
|
resize: none;
|
|
white-space: pre-line;
|
|
outline: 0;
|
|
box-shadow: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.u-field-message {
|
|
@include float(right);
|
|
width: auto;
|
|
|
|
.message-can-edit {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.u-field.mode-placeholder {
|
|
padding: $baseline;
|
|
margin: $baseline * 0.75;
|
|
border: 2px dashed $gray-l3;
|
|
|
|
i {
|
|
font-size: 12px;
|
|
@include padding-right(5px);
|
|
vertical-align: middle;
|
|
color: $base-font-color;
|
|
}
|
|
.u-field-title {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.u-field-value {
|
|
text-align: center;
|
|
line-height: 1.5em;
|
|
@extend %t-copy-sub1;
|
|
color: $base-font-color;
|
|
}
|
|
|
|
&:hover {
|
|
border: 2px dashed $link-color;
|
|
|
|
.u-field-title, i {
|
|
color: $link-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrapper-u-field {
|
|
font-size: $body-font-size;
|
|
color: $base-font-color;
|
|
|
|
.u-field-header .u-field-title{
|
|
color: $base-font-color;
|
|
}
|
|
|
|
.u-field-footer {
|
|
.field-textarea-character-count {
|
|
@extend %t-weight1;
|
|
@include float(right);
|
|
margin-top: $baseline/4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.profile-private-message {
|
|
@include padding-left($baseline*0.75);
|
|
line-height: 3.0em;
|
|
}
|
|
}
|
|
|
|
.badge-paging-header {
|
|
padding-top: $baseline;
|
|
}
|
|
|
|
.page-content-nav {
|
|
@extend %page-content-nav;
|
|
}
|
|
|
|
.badge-set-display {
|
|
@extend .container;
|
|
padding: 0 0;
|
|
|
|
.badge-list {
|
|
// We're using a div instead of ul for accessibility, so we have to match the style
|
|
// used by ul.
|
|
margin: 1em 0;
|
|
padding: 0 0 0 40px;
|
|
}
|
|
|
|
.badge-display {
|
|
width: 50%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: 2em 0;
|
|
.badge-image-container {
|
|
padding-right: $baseline;
|
|
margin-left: 1em;
|
|
width: 20%;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
img.badge {
|
|
width: 100%;
|
|
}
|
|
.accomplishment-placeholder {
|
|
border: 4px dotted $gray-l4;
|
|
border-radius: 50%;
|
|
display: block;
|
|
width: 100%;
|
|
padding-bottom: 100%;
|
|
}
|
|
}
|
|
.badge-details {
|
|
@extend %t-copy-sub1;
|
|
@extend %t-regular;
|
|
max-width: 70%;
|
|
display: inline-block;
|
|
color: $gray-d1;
|
|
.badge-name {
|
|
@extend %t-strong;
|
|
@extend %t-copy-base;
|
|
color: $gray-d3;
|
|
}
|
|
.badge-description {
|
|
padding-bottom: $baseline;
|
|
line-height: 1.5em;
|
|
}
|
|
.badge-date-stamp{
|
|
@extend %t-copy-sub1;
|
|
}
|
|
.find-button-container {
|
|
border: 1px solid $blue-l1;
|
|
padding: ($baseline / 2) $baseline ($baseline / 2) $baseline;
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
font-weight: bold;
|
|
color: $blue-s3;
|
|
}
|
|
.share-button {
|
|
@extend %t-action3;
|
|
@extend %button-reset;
|
|
background: $gray-l6;
|
|
color: $gray-d1;
|
|
padding: ($baseline / 4) ($baseline / 2);
|
|
margin-bottom: ($baseline / 2);
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
border: 2px solid $gray-d1;
|
|
cursor: pointer;
|
|
transition: background .5s;
|
|
.share-prefix {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.share-icon-container {
|
|
display: inline-block;
|
|
img.icon-mozillaopenbadges {
|
|
max-width: 1.5em;
|
|
margin-right: .25em;
|
|
}
|
|
}
|
|
&:hover {
|
|
background: $gray-l4;
|
|
}
|
|
&:active {
|
|
box-shadow: inset 0 4px 15px 0 $black-t2;
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.badge-placeholder {
|
|
background-color: $gray-l7;
|
|
box-shadow: inset 0 0 4px 0 $gray-l4;
|
|
}
|
|
}
|
|
|
|
// ------------------------------
|
|
// #BADGES MODAL
|
|
// ------------------------------
|
|
.badges-overlay {
|
|
@extend %ui-depth1;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: $dark-trans-bg; /* dim the background */
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
|
|
.badges-modal {
|
|
@extend %t-copy-lead1;
|
|
@extend %ui-depth2;
|
|
color: $lighter-base-font-color;
|
|
box-sizing: content-box;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 80%;
|
|
max-width: 700px;
|
|
max-height: calc(100% - 100px);
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
border-top: rem(10) solid $blue-l2;
|
|
background: $light-gray3;
|
|
padding-right: ($baseline * 2);
|
|
padding-left: ($baseline * 2);
|
|
padding-bottom: ($baseline);
|
|
overflow-x: hidden;
|
|
|
|
.modal-header {
|
|
margin-top: ($baseline / 2);
|
|
margin-bottom: ($baseline / 2);
|
|
}
|
|
|
|
.close {
|
|
@extend %button-reset;
|
|
@extend %t-strong;
|
|
color: $lighter-base-font-color;
|
|
position: absolute;
|
|
right: ($baseline);
|
|
top: $baseline;
|
|
cursor: pointer;
|
|
padding: ($baseline / 4) ($baseline / 2);
|
|
@include transition(all $tmg-f2 ease-in-out 0s);
|
|
&:focus, &:hover {
|
|
background-color: $blue-d2;
|
|
border-radius: 3px;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.badges-steps {
|
|
display: table;
|
|
}
|
|
|
|
.image-container{
|
|
// Lines the image up with the content of the above list.
|
|
@include ltr {
|
|
@include padding-left(2em);
|
|
}
|
|
@include rtl {
|
|
@include padding-right(1em);
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.backpack-logo {
|
|
@include float(right);
|
|
@include margin-left($baseline);
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-hr {
|
|
display: block;
|
|
border: none;
|
|
background-color: $light-gray;
|
|
height: rem(2);
|
|
width: 100%;
|
|
}
|
|
}
|