Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Minor Styling Fixed for Learner Profile

Browse Source 
LEARNER-2238

- Assure change image only shows on hover
- Better UX for delete image, only shows on hover
- Fixing issue with bottom border when user does not have a country set
- Issues with location of pencil icon in dropdown edit modeApplying styling changes.
This commit is contained in:
Harry Rein
2017-08-14 14:53:00 -04:00
parent c9e8fc371c
commit 23640ad20d
4 changed files with 49 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
lms/static/js/views/image_field.js
View File

@@ -141,6 +141,7 @@
},
imageChangeSucceeded: function() {
this.$('.u-field-upload-button').removeClass('in-progress');
this.render();
},
@@ -182,7 +183,7 @@
},
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-title').html(this.titleUploading);
},

62
lms/static/sass/features/_learner-profile.scss
View File

@@ -56,6 +56,7 @@
.u-field-upload-button {
position: absolute;
top: 0;
opacity: 0;
width: $profile-image-dimension;
height: $profile-image-dimension;
border-radius: ($profile-image-dimension/2);
@@ -75,6 +76,10 @@
@include show-hover-state();
border-color: $link-color;
}
&.in-progress {
opacity: 1;
}
}
.button-visible {
@@ -110,8 +115,16 @@
display: block;
width: $profile-image-dimension;
margin-top: ($baseline / 4);
padding: ($baseline / 5);
padding: ($baseline / 5) 0 0;
text-align: center;
opacity: 0;
transition: opacity 0.5s;
}
&:hover, &:active {
.u-field-remove-button {
opacity: 1;
}
}
}
}
@@ -214,24 +227,26 @@
@extend %t-weight4;
@include padding(0, 0, 0, 3px);
color: $base-font-color;
margin-top: $baseline/5;
.u-field-value {
.u-field-value, .u-field-title {
@extend %t-weight4;
width: calc(100% - 40px);
}
.u-field-value-readonly {
@extend %t-weight3;
}
.u-field-value-readonly {
@extend %t-weight3;
font-family: $sans-serif;
color: $darkest-base-font-color;
}
.u-field-title {
color: $base-font-color;
font-size: $body-font-size;
color: $lightest-base-font-color;
display: block;
}
&.u-field-dropdown {
margin-top: $baseline/5;
position: relative;
&:not(.editable-never) {
cursor: pointer;
@@ -240,6 +255,11 @@
&: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;
}
}
}
}
@@ -264,11 +284,10 @@
}
.u-field-message {
@include float(right);
@include right(0);
position: absolute;
top: 0;
width: 20px;
display: inline-block;
vertical-align: baseline;
margin-top: 0;
.icon {
vertical-align: baseline;
@@ -278,8 +297,9 @@
.wrapper-profile-section-container-two {
@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
padding-left: $baseline;
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
width: 100%;
@@ -288,7 +308,7 @@
.u-field-textarea {
margin-bottom: ($baseline/2);
padding: 0 ($baseline*.75) ($baseline*.75) ($baseline*.75);
padding: 0 ($baseline*.75) ($baseline*.75) ($baseline/4);
.u-field-header {
position: relative;
@@ -318,7 +338,7 @@
.u-field-value {
@extend %t-copy-base;
width: 100%;
overflow: scroll;
overflow: auto;
textarea {
width: 100%;
@@ -368,13 +388,13 @@
@extend %t-copy-sub1;
color: $base-font-color;
}
}
.u-field.mode-placeholder:hover {
border: 2px dashed $link-color;
.u-field-title,
i {
color: $link-color;
&:hover {
border: 2px dashed $link-color;
.u-field-title, i {
color: $link-color;
}
}
}

6
lms/static/sass/partials/base/_variables.scss
View File

@@ -407,10 +407,12 @@ $form-bg-color: $white !default;
$body-font-size: em(14) !default;
$body-line-height: golden-ratio(.875em, 1) !default;
// font colors
$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;
$lightest-base-font-color: $gray; // Lightest font that can be used on a white background
$very-light-text: rgb(255,255,255) !default;
$text-color: rgb(51, 51, 51) !default;

4
lms/templates/fields/field_readonly.underscore
View File

@@ -1,9 +1,9 @@
<% 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="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-notification" aria-live="polite"></span>
<span class="u-field-message-help" id="u-field-help-message-<%- id %>"> <%- message %></span>