Redesign of Diff Viewer

[bwreid]

We should redesign the Diff Viewer a bit as it's currently somewhat cluttered. Some general notes on how to improve this:

• The article title should stand out
• The three buttons on the right-hand side of the modal are a bit too clustered
• The section for adding a Salesforce record isn't differentiated from the rest of the navigation

Let's improve this as much as possible so it's fun to use!

[ananyaarun]

@bwreid , i would like to take this up. Can u give me more info on how to reproduce this ?

[bwreid]

@ananyaarun Probably the easiest way to get this view is to run bundle exec rake dev:populate. That will set up three courses for you.

Once you've run that, go to the "Ragesoss" test course: http://localhost:3000/courses/test/Ragesoss_(test)

Click the "Article" sub navigation and then click the +/- button under "Assessment tools:"

That will bring up the diff viewer. Alternatively, you can follow the instructions here.

Let me know if you need additional help!

[mariahajmal]

@ananyaarun are you still working on this?

[bwreid]

@mariahajmal If you don't hear from @ananyaarun in the next day or so, please feel free to work on this.

[hardy1334]

@mariahajmal @ananyaarun @bwreid if u r not working on this shall i take this issue

[ragesoss]

The latest version improves on the title, and moves the previous/next buttons next to each other:

Remaining areas for improvement include:

• clustered buttons at the top left... we should probably just get rid of the 'how did it work' link, as it's not a new feature by any means
• layout when there is nothing on one of the columns
• Salesforce section (admin-only) layout
• placement and display styling of the edit summary and timestampe
• timestamp jumps position after diff loads

[Kirsty21]

Hi there! Is this still open? I would like to work on it

[ragesoss]

@Kirsty21 yes, it's still open. Go for it. :-)

[Kirsty21]

I'm hoping this is not a stupid question, but this is my first time joining the program and I see no direct links so, I want to ensure I am firstly on the right path. How can I go about accessing the stylesheet?

[ragesoss]

Do you already have a development environment set up? Let me know if you'd like an invitation to the project's Slack chat.

The short answer:

• The stylesheets are build from the stylus (.styl) files in the app/assets/stylesheets directory. You can make changes to a .styl file, and then recompile the assets, which will build your changes into the CSS files that gets served. (yarn start is used for watch mode, so that each time you save a change to a stylus file, the stylesheets are automatically updated.)

[Kirsty21]

No I do not have a dev environment set up yet so I'll do that now. Also, I would love a Slack invite for sure.

[ragesoss]

@Kirsty21 please email me (sage @ wikiedu.org) so that I can send you an invite.

[fillingtothemomo]

@bwreid @ragesoss do we have to be in wiki_education = true for this as i populated the db and and navigated to the link and it shows course not found.

[ragesoss]

@fillingtothemomo the populate script is different now, but you should be able to find any of the courses that do have data in your dev environment, and then access the diff viewer from the Articles tab.