Bug fixes after feedback from production push #80

grozdanowski · 2019-03-16T17:26:11Z

These commits take care of the following bugs:

lots of decimals in course progress display
dates not formatted right when displayed or not displaying at all
add +/- sign in front of delta of MAU's in MAU's by month table
nomenclature change - "Dashboard" -> "Overview"
average course progress displayed as a 0.x value, when it should display a percentage
users distribution across course section displaying wrong data - had to simply remove this graph. Turns out the backend still doesn't have an API endpoint that exposes this data.
weird color of user names in users list in single course page
UX issue - make the entire course card in course list clickable
add tooltips that display actual data to the graph that displays MAU's progress (header area)
fix an issue where "See history" displays a white graph that when hovered breaks the app (data type issue)
learner statistics graph not working - now it works, and loads straight away.
small accessibility issue - "Jump to content" accessibility link didn't work. Now it does.
nomenclature of card titles in Dashboard/Overview
set default SASS variables to Appsembler-preferred - we're doing this so the app plays great with Appsembler's theme codebase out of the box. In order for the app to display correctly parameters need to be passed when rebuilding code (to have correct font sizes: REM_BASE=16 yarn build)

codecov-io · 2019-03-16T17:29:59Z

Codecov Report

Merging #80 into develop will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop      #80   +/-   ##
========================================
  Coverage    89.34%   89.34%           
========================================
  Files           65       65           
  Lines         3435     3435           
========================================
  Hits          3069     3069           
  Misses         366      366

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 950d90f...62c8c5b. Read the comment docs.

johnbaldwin · 2019-03-17T03:14:36Z

@grozdanowski I just skimmed over. Will look over in more depth tomorrow. One thing we want to make sure is clear is when and how the custom yarn build needs to be done.

What command do you run to build the assets we will commit to a release? I want to add that to the makefile.

OmarIthawi

Thanks @grozdanowski! Looks good to me.

I hope that we can revert the Appsembler preferred SASS variables change. It's unfair to the community that we do such change.

Instead of letting everyone maintain their REM_* value, we should maintain our own.

OmarIthawi · 2019-03-17T18:31:49Z

frontend/src/views/MauDetailsContent.js

@@ -19,7 +19,7 @@ class MauDetailsContent extends Component {
        <li key={index} className={styles['content-row']}>
          <span className={styles['period']}>{period.period}</span>
          <span className={styles['mau-count']}>{period.value}</span>
-          <span className={cx({ 'difference': true, 'positive': (difference > 0), 'negative': (difference < 0)})}>{difference}</span>
+          <span className={cx({ 'difference': true, 'positive': (difference > 0), 'negative': (difference < 0)})}>{(difference > 0) ? "+" : ""}{difference}</span>


Can we make this sign an emoji like 🔼 and 🔽

@OmarIthawi we can, but I'd rather do it in FontAwesome than (ugly) emoji :) Let's keep this off for now - I don't think it's a priority.

OmarIthawi · 2019-03-17T18:33:03Z

frontend/src/components/header-views/header-content-course/HeaderContentCourse.js

@@ -39,6 +39,8 @@ class HeaderContentCourse extends Component {

  render() {

+    const displayCourseHeaderGraph = false;


Yes please! The graph is broken in my opinion, thanks for removing it!

I should've reported the bug earlier, but for whatever reason I didn't.

OmarIthawi · 2019-03-17T18:33:35Z

frontend/src/components/courses-list/CoursesListItem.js

@@ -24,7 +24,7 @@ class CoursesListItem extends Component {
    });

    return (
-      <div className={styles['course-list-item']} key={this.props.courseId}>
+      <Link to={'/figures/course/' + this.props.courseId} className={styles['course-list-item']} key={this.props.courseId}>


OmarIthawi · 2019-03-17T18:35:39Z

frontend/src/App.js

@@ -26,7 +26,7 @@ class App extends Component {
      <LoadingSpinner
        displaySpinner = {!(this.props.activeApiFetches === 0)}
      >
-        <main className={styles['layout-root']}>
+        <main id="main" className={styles['layout-root']}>


I'm sure @MHaton is happier now 😃

OmarIthawi · 2019-03-17T18:36:22Z

frontend/src/sass/base/_variables.scss

@@ -1,14 +1,14 @@
 @import '~base/sass/base/functions';

-$rem-base-size: 16 !default;
+$rem-base-size: 10 !default;


Will this break when the community uses them on vanilla Open edX?

@OmarIthawi If this does break for vanilla, I'll work out an interim solution. Not for now, but for later, is there a reason why an external css that defines the rem-base-size? from which Figures uses. I mean, this is part of the cascade in CSS, right? That and we really want to move away from building the assets and including them in the repo, instead building the assets into the deployable python bundle we push to PyPI

Thanks @johnbaldwin! I did use the wrong word here. I don't think it will "break break", and Matej explained that this is a temporary solution, which I think is OK.

I simply worried that the font will look very small on Open edX deployments to the point that forces community members to fork and recompile, which is anti-opensource.

we really want to move away from building the assets and including them in the repo, instead building the assets into the deployable python bundle we push to PyPI

Yes please! I really like that you're working on keeping PyPI as the no. 1 installation option.

If this does break for vanilla, I'll work out an interim solution. Not for now, but for later, is there a reason why an external css that defines the rem-base-size?

Yes, rem is all about cascade/inheritance as far as I know. @grozdanowski knows better than I do, but I think it's more like saying font-size: 100%. It's not just cascaded, it is also depends on what the parent font-size value is.

@johnbaldwin @OmarIthawi To clarify - there's no need to fork. One can pass on env variables and rebuild on the fly. This is also a convenient tool for other purposes (if someone wants to brand their Figures intance for themselves using font sizes or colours).
And yes - it is an issue in regards to cascading nature of CSS - rem is defined by the first ever definition of font size in the rendered document.

johnbaldwin

I looked over again. Don't have anything more to add. Thanks for reviewing @OmarIthawi ?

johnbaldwin · 2019-03-17T21:56:46Z

@grozdanowski Thanks for jamming this out this weekend!

OmarIthawi · 2019-03-18T08:47:25Z

@grozdanowski I took the liberty to reword the title of this pull request 🙈

grozdanowski · 2019-03-19T17:09:09Z

Thanks for reviewing this - merging.

* limit course progress decimals number * fix how dates are displayed * add “+” or “-“ sign in front of difference figure on mau history * rename “Dashboard” to “Overview” * Display avg course progress as percentage * temporarily remove the graph that displays users progress through course * fix the color of user name link in learners list item * make entire course card in courses list clickable * add tooltips to mau graph * fix the history graph breakage * fix the learner statistics widget data display * add “main” ID to app main div so accessibility link works * set SASS variables defaults to Appsembler-preferred values * Rename cards on Dashboard, remove Courses enumeration card * remove a console.log * recompile assets

* Re-added the method filter update for django-filter 1.0.4 * Added 'start' and 'end' to the CourseOverview migration

grozdanowski added 16 commits March 16, 2019 12:26

limit course progress decimals number

1bbb728

fix how dates are displayed

b820565

add “+” or “-“ sign in front of difference figure on mau history

eaa4811

rename “Dashboard” to “Overview”

e27ad81

Display avg course progress as percentage

663b4a3

temporarily remove the graph that displays users progress through course

f99dad1

fix the color of user name link in learners list item

ccf992d

make entire course card in courses list clickable

fb9882d

add tooltips to mau graph

f7afef3

fix the history graph breakage

8442cee

fix the learner statistics widget data display

dbb720b

add “main” ID to app main div so accessibility link works

27db900

set SASS variables defaults to Appsembler-preferred values

2e27e52

Rename cards on Dashboard, remove Courses enumeration card

2bd32cf

remove a console.log

de9791b

recompile assets

62c8c5b

grozdanowski requested review from johnbaldwin and OmarIthawi March 16, 2019 17:26

OmarIthawi approved these changes Mar 17, 2019

View reviewed changes

johnbaldwin approved these changes Mar 17, 2019

View reviewed changes

OmarIthawi changed the title ~~Feature/bugfixes per feedback~~ Bug fixes after feedback from production push Mar 18, 2019

grozdanowski merged commit 8b870f0 into develop Mar 19, 2019

johnbaldwin added a commit that referenced this pull request Mar 24, 2019

Bug fixes after Bugfest #80 merge to Hawthorn upgrade branch

1a01770

* Re-added the method filter update for django-filter 1.0.4 * Added 'start' and 'end' to the CourseOverview migration

johnbaldwin deleted the feature/bugfixes-per-feedback branch November 18, 2019 14:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug fixes after feedback from production push #80

Bug fixes after feedback from production push #80

grozdanowski commented Mar 16, 2019

codecov-io commented Mar 16, 2019 •

edited

johnbaldwin commented Mar 17, 2019

OmarIthawi left a comment

OmarIthawi Mar 17, 2019

grozdanowski Mar 19, 2019

OmarIthawi Mar 17, 2019

OmarIthawi Mar 17, 2019

OmarIthawi Mar 17, 2019

OmarIthawi Mar 17, 2019

johnbaldwin Mar 17, 2019 •

edited

OmarIthawi Mar 18, 2019

grozdanowski Mar 19, 2019

johnbaldwin left a comment

johnbaldwin commented Mar 17, 2019

OmarIthawi commented Mar 18, 2019

grozdanowski commented Mar 19, 2019

		@@ -39,6 +39,8 @@ class HeaderContentCourse extends Component {

		render() {

		const displayCourseHeaderGraph = false;

Bug fixes after feedback from production push #80

Bug fixes after feedback from production push #80

Conversation

grozdanowski commented Mar 16, 2019

codecov-io commented Mar 16, 2019 • edited

Codecov Report

johnbaldwin commented Mar 17, 2019

OmarIthawi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnbaldwin Mar 17, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnbaldwin left a comment

Choose a reason for hiding this comment

johnbaldwin commented Mar 17, 2019

OmarIthawi commented Mar 18, 2019

grozdanowski commented Mar 19, 2019

codecov-io commented Mar 16, 2019 •

edited

johnbaldwin Mar 17, 2019 •

edited