Skip to content

E
edx-platform
Commit 66fe1c9a by Harry Rein Committed by GitHub
Options

Merge pull request #15812 from edx/HarryRein/LEARNER-2238-profile-tweaks 

Applying styling changes.
parents 6f81e382 23640ad2
Showing with 49 additions and 26 deletions
lms/static/js/views/image_field.js
...@@ -141,6 +141,7 @@ ...@@ -141,6 +141,7 @@
}, },
imageChangeSucceeded: function() { imageChangeSucceeded: function() {
this.$('.u-field-upload-button').removeClass('in-progress');
this.render(); this.render();
}, },
...@@ -182,7 +183,7 @@ ...@@ -182,7 +183,7 @@
}, },
showUploadInProgressMessage: function() { showUploadInProgressMessage: function() {
this.$('.u-field-upload-button').css('opacity', 1); this.$('.u-field-upload-button').addClass('in-progress');
this.$('.upload-button-icon').html(this.iconProgress); this.$('.upload-button-icon').html(this.iconProgress);
this.$('.upload-button-title').html(this.titleUploading); this.$('.upload-button-title').html(this.titleUploading);
}, },
......
lms/static/sass/features/_learner-profile.scss
...@@ -56,6 +56,7 @@ ...@@ -56,6 +56,7 @@
.u-field-upload-button { .u-field-upload-button {
position: absolute; position: absolute;
top: 0; top: 0;
opacity: 0;
width: $profile-image-dimension; width: $profile-image-dimension;
height: $profile-image-dimension; height: $profile-image-dimension;
border-radius: ($profile-image-dimension/2); border-radius: ($profile-image-dimension/2);
...@@ -75,6 +76,10 @@ ...@@ -75,6 +76,10 @@
@include show-hover-state(); @include show-hover-state();
border-color: $link-color; border-color: $link-color;
} }
&.in-progress {
opacity: 1;
}
} }
.button-visible { .button-visible {
...@@ -110,8 +115,16 @@ ...@@ -110,8 +115,16 @@
display: block; display: block;
width: $profile-image-dimension; width: $profile-image-dimension;
margin-top: ($baseline / 4); margin-top: ($baseline / 4);
padding: ($baseline / 5); padding: ($baseline / 5) 0 0;
text-align: center; text-align: center;
opacity: 0;
transition: opacity 0.5s;
}
&:hover, &:active {
.u-field-remove-button {
opacity: 1;
}
} }
} }
} }
...@@ -214,24 +227,26 @@ ...@@ -214,24 +227,26 @@
@extend %t-weight4; @extend %t-weight4;
@include padding(0, 0, 0, 3px); @include padding(0, 0, 0, 3px);
color: $base-font-color; color: $base-font-color;
margin-top: $baseline/5;
.u-field-value { .u-field-value, .u-field-title {
@extend %t-weight4; @extend %t-weight4;
width: calc(100% - 40px); width: calc(100% - 40px);
}
.u-field-value-readonly { .u-field-value-readonly {
@extend %t-weight3; @extend %t-weight3;
} font-family: $sans-serif;
color: $darkest-base-font-color;
} }
.u-field-title { .u-field-title {
color: $base-font-color; color: $lightest-base-font-color;
font-size: $body-font-size;
display: block; display: block;
} }
&.u-field-dropdown { &.u-field-dropdown {
margin-top: $baseline/5; position: relative;
&:not(.editable-never) { &:not(.editable-never) {
cursor: pointer; cursor: pointer;
...@@ -240,6 +255,11 @@ ...@@ -240,6 +255,11 @@
&:not(:last-child) { &:not(:last-child) {
padding-bottom: $baseline/4; padding-bottom: $baseline/4;
border-bottom: 1px solid $gray-lighter; border-bottom: 1px solid $gray-lighter;
&:hover.mode-placeholder {
padding-bottom: $baseline/5;
border-bottom: 2px dashed $link-color;
}
} }
} }
} }
...@@ -264,11 +284,10 @@ ...@@ -264,11 +284,10 @@
} }
.u-field-message { .u-field-message {
@include float(right); @include right(0);
position: absolute;
top: 0;
width: 20px; width: 20px;
display: inline-block;
vertical-align: baseline;
margin-top: 0;
.icon { .icon {
vertical-align: baseline; vertical-align: baseline;
...@@ -278,8 +297,9 @@ ...@@ -278,8 +297,9 @@
.wrapper-profile-section-container-two { .wrapper-profile-section-container-two {
@include float(left); @include float(left);
width: calc(100% - 380px); width: calc(100% - 360px);
max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap
padding-left: $baseline;
@media (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
width: 100%; width: 100%;
...@@ -288,7 +308,7 @@ ...@@ -288,7 +308,7 @@
.u-field-textarea { .u-field-textarea {
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
padding: 0 ($baseline*.75) ($baseline*.75) ($baseline*.75); padding: 0 ($baseline*.75) ($baseline*.75) ($baseline/4);
.u-field-header { .u-field-header {
position: relative; position: relative;
...@@ -318,7 +338,7 @@ ...@@ -318,7 +338,7 @@
.u-field-value { .u-field-value {
@extend %t-copy-base; @extend %t-copy-base;
width: 100%; width: 100%;
overflow: scroll; overflow: auto;
textarea { textarea {
width: 100%; width: 100%;
...@@ -368,13 +388,13 @@ ...@@ -368,13 +388,13 @@
@extend %t-copy-sub1; @extend %t-copy-sub1;
color: $base-font-color; color: $base-font-color;
} }
}
.u-field.mode-placeholder:hover { &:hover {
border: 2px dashed $link-color; border: 2px dashed $link-color;
.u-field-title,
i { .u-field-title, i {
color: $link-color; color: $link-color;
}
} }
} }
......
lms/static/sass/partials/base/_variables.scss
...@@ -407,10 +407,12 @@ $form-bg-color: $white !default; ...@@ -407,10 +407,12 @@ $form-bg-color: $white !default;
$body-font-size: em(14) !default; $body-font-size: em(14) !default;
$body-line-height: golden-ratio(.875em, 1) !default; $body-line-height: golden-ratio(.875em, 1) !default;
// font colors
$base-font-color: rgb(60,60,60) !default; $base-font-color: rgb(60,60,60) !default;
$baseFontColor: $base-font-color; $baseFontColor: $base-font-color !default;
$darkest-base-font-color: $black !default;
$lighter-base-font-color: rgb(100,100,100) !default; $lighter-base-font-color: rgb(100,100,100) !default;
$lightest-base-font-color: $gray; // Lightest font that can be used on a white background
$very-light-text: rgb(255,255,255) !default; $very-light-text: rgb(255,255,255) !default;
$text-color: rgb(51, 51, 51) !default; $text-color: rgb(51, 51, 51) !default;
......
lms/templates/fields/field_readonly.underscore
<% if (title) { %> <% if (title) { %>
<span class="u-field-title" aria-hidden="true"><%- title %></span> <label class="u-field-title" aria-hidden="true"><%- title %></label>
<% } %> <% } %>
<span class="sr" for="u-field-value-<%- id %>"><%- screenReaderTitle %></span> <span class="sr" for="u-field-value-<%- id %>"><%- screenReaderTitle %></span>
<span class="u-field-value" id="u-field-value-<%- id %>" aria-describedby="u-field-message-<%- id %>"><%- value %></span> <span class="u-field-value-readonly u-field-value" id="u-field-value-<%- id %>" aria-describedby="u-field-message-<%- id %>"><%- value %></span>
<span class="u-field-message" id="u-field-message-<%- id %>"> <span class="u-field-message" id="u-field-message-<%- id %>">
<span class="u-field-message-notification" aria-live="polite"></span> <span class="u-field-message-notification" aria-live="polite"></span>
<span class="u-field-message-help" id="u-field-help-message-<%- id %>"> <%- message %></span> <span class="u-field-message-help" id="u-field-help-message-<%- id %>"> <%- message %></span>
......
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