fix: Add Weekdays, Correct Font Color #4836

maze-runnar · 2020-08-21T12:48:40Z

Add Weekdays, Correct Font Color
Since, the sessions page will look more like website generator schedule as mentioned in Scheduler: Public Sessions Page Enhance it and fix date bug #4808, we'll link to that page instead as mentioned in Speaker name too close to picture and text cannot be selected #4000

Checklist

I have read the Contribution & Best practices Guide.
My branch is up-to-date with the Upstream development branch.
The acceptance, integration, unit tests and linter pass locally with my changes
I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)

vercel · 2020-08-21T12:48:46Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/eventyay/open-event-frontend/pgjyqw4wo
✅ Preview: https://open-event-frontend-git-fork-maze-runnar-patch-1.eventyay.vercel.app

iamareebjamal · 2020-08-21T12:51:58Z

app/templates/components/public/speaker-item.hbs

              </strong>
            {{/if}}
          </p>
          <a href="{{href-to 'public.sessions.list' 'all'}}#session-id-{{session.id}}">
            <div class="ui fluid padded" style={{css color=session.track.fontColor background-color=session.track.color}}>
-              <h3 class="item" style={{css user-select='text'}}>
+              <h3 class="item" style={{css user-select='text' color='white'}}>


Should be dynamic with the help of isLight

Create a helper for this

iamareebjamal · 2020-08-21T12:53:06Z

app/templates/components/public/speaker-item.hbs

@@ -48,13 +48,13 @@
          <p>
            {{#if session.startsAt}}
              <strong>
-                {{moment-format session.startsAt 'DD MMM YY'}}


Use general-date helper and pass event timezone to get correct info

codecov · 2020-08-21T13:03:45Z

Codecov Report

Merging #4836 into development will decrease coverage by 0.00%.
The diff coverage is 50.00%.

@@               Coverage Diff               @@
##           development    #4836      +/-   ##
===============================================
- Coverage        23.48%   23.47%   -0.01%     
===============================================
  Files              481      482       +1     
  Lines             5085     5086       +1     
  Branches            16       16              
===============================================
  Hits              1194     1194              
- Misses            3887     3888       +1     
  Partials             4        4

Impacted Files	Coverage Δ
app/helpers/is-light.js	`0.00% <0.00%> (ø)`
app/utils/color.ts	`80.00% <100.00%> (ø)`

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 9a685be...16ff6bd. Read the comment docs.

maze-runnar · 2020-08-21T13:40:57Z

iamareebjamal · 2020-08-21T13:41:26Z

app/helpers/is-light.js

+    default:
+      return 'white';
+  }
+}


How does this help? It should take the background color as an argument and use the isLight utility function to decide the output color

it is taking background color as params, if background color is non-white then it returns white as text-color, otherwise black

No, if the color string is exactly white, you return black, otherwise white. color will never be white, it's a hex string. Use isLight utility function

What I am doing wrong in this helper , it is not working -

import { isLight } from 'open-event-frontend/utils/colors'; import Helper from '@ember/component/helper'; export function fonts(hex) { let x = isLight(hex,128); if(x){ return 'black'; } return 'white'; } export default Helper.helper(fonts);

iamareebjamal · 2020-08-21T13:41:57Z

app/templates/components/public/speaker-item.hbs

@@ -48,13 +48,13 @@
          <p>
            {{#if session.startsAt}}
              <strong>
-                {{moment-format session.startsAt 'DD MMM YY'}}
+                {{general-date session.startsAt}}


You're neither passing event timezone nor the format

It is showing time correctly, that's why I think no need to pass format

Change the event timezone, then see what happens

mariobehling · 2020-08-21T14:13:06Z

You added the feature to the speakers page, but it should be on a "tracks" page. The tracks should be on a dedicated (new) tracks page, that is a kind of a subpage to the schedule. So, you need to publish a schedule first.

The idea is, that the tracks page can be accessed through an indented menu item which should show up below the schedule menu item.

Please

Create a new dedicated "tracks" page for the feature
Add an indented menu item "Tracks" below the "Schedule" menu item

iamareebjamal · 2020-08-21T16:38:03Z

@mariobehling The issue #4812 is about speaker page only

maze-runnar · 2020-08-21T16:39:34Z

@iamareebjamal why this helper is not working -

import { isLight } from 'open-event-frontend/utils/colors';
import Helper from '@ember/component/helper';

export function textColur(color) {
  textColor = isLight(color) ? '#000' : '#fff'
  return textColor;
}
export default Helper.helper(textColur);

iamareebjamal · 2020-08-21T16:41:04Z

Because you have written textColur as the helper name?

iamareebjamal · 2020-08-21T16:41:42Z

This should be it

import { isLight } from 'open-event-frontend/utils/colors';
import Helper from '@ember/component/helper';

export function textColor(color) {
  return isLight(color) ? '#000' : '#fff';
}
export default Helper.helper(textColor);

maze-runnar · 2020-08-21T17:23:15Z

This should be it

import { isLight } from 'open-event-frontend/utils/colors';
import Helper from '@ember/component/helper';

export function textColor(color) {
  return isLight(color) ? '#000' : '#fff';
}
export default Helper.helper(textColor);

After adding isLight util things are to working. I tested my helper, as soon as I removed isLight problem gone.

iamareebjamal · 2020-08-21T17:27:44Z

Well, see the console why is it failing

maze-runnar · 2020-08-21T17:53:46Z

@iamareebjamal now it's working, there was a prob in util fun itself.

maze-runnar · 2020-08-21T18:19:09Z

timezone is fixed now -

niranjan94 · 2020-08-21T18:20:09Z

Here is an overview of what got changed by this pull request:

Complexity increasing per file
==============================
- app/helpers/is-light.js  2

See the complete overview on Codacy

iamareebjamal · 2020-08-21T21:32:22Z

app/templates/components/public/speaker-item.hbs

              </strong>
            {{/if}}
          </p>
          <a href="{{href-to 'public.sessions.list' 'all'}}#session-id-{{session.id}}">
            <div class="ui fluid padded" style={{css color=session.track.fontColor background-color=session.track.color}}>
-              <h3 class="item" style={{css user-select='text'}}>
+              <h3 class="item" style={{css user-select='text' color=(is-light session.track.color)}}>


Helper name is textColor and here it is written is-light

For general-date helper name in file is generalDate but we use general-date, the name of file.

fix: Add Weekdays, Correct Font Color

ff0caf7

vercel bot deployed to Preview August 21, 2020 12:48 View deployment

auto-label bot added the fix label Aug 21, 2020

iamareebjamal reviewed Aug 21, 2020

View reviewed changes

create is-light helper

b561fab

vercel bot requested a deployment to Preview August 21, 2020 13:26 Pending

using helper for font-color and adding general date

a87dec1

iamareebjamal reviewed Aug 21, 2020

View reviewed changes

Update is-light.js

6588711

vercel bot deployed to Preview August 21, 2020 17:47 View deployment

resolving hex.substr is not a fun error

bab0a1e

vercel bot deployed to Preview August 21, 2020 17:52 View deployment

adding timezone

16ff6bd

vercel bot deployed to Preview August 21, 2020 18:18 View deployment

maze-runnar requested a review from iamareebjamal August 21, 2020 18:19

iamareebjamal reviewed Aug 21, 2020

View reviewed changes

iamareebjamal mentioned this pull request Aug 22, 2020

Scheduler: Public Sessions Page Enhance it and fix date bug #4808

Closed

iamareebjamal approved these changes Aug 22, 2020

View reviewed changes

iamareebjamal changed the title ~~fix: Add Weekdays, Correct Font Color~~ fix: Add Weekdays, Correct Font Color Aug 22, 2020

iamareebjamal merged commit 1d68722 into fossasia:development Aug 22, 2020

maze-runnar deleted the patch-1 branch August 22, 2020 08:51

fix: Add Weekdays, Correct Font Color #4836

fix: Add Weekdays, Correct Font Color #4836

Uh oh!

Conversation

maze-runnar commented Aug 21, 2020

Checklist

Uh oh!

vercel bot commented Aug 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Aug 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

maze-runnar commented Aug 21, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maze-runnar Aug 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mariobehling commented Aug 21, 2020

Uh oh!

iamareebjamal commented Aug 21, 2020

Uh oh!

maze-runnar commented Aug 21, 2020 • edited by iamareebjamal Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

iamareebjamal commented Aug 21, 2020

Uh oh!

iamareebjamal commented Aug 21, 2020

Uh oh!

maze-runnar commented Aug 21, 2020

Uh oh!

iamareebjamal commented Aug 21, 2020

Uh oh!

maze-runnar commented Aug 21, 2020

Uh oh!

maze-runnar commented Aug 21, 2020

Uh oh!

niranjan94 commented Aug 21, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

vercel bot commented Aug 21, 2020 •

edited

Loading

codecov bot commented Aug 21, 2020 •

edited

Loading

maze-runnar Aug 21, 2020 •

edited

Loading

maze-runnar commented Aug 21, 2020 •

edited by iamareebjamal

Loading