UI Issues Running List

[Vinubaba]

https://docs.google.com/spreadsheets/d/15nkI3ofkSvwy7tuztk70TY2XmUiUzUvG5_T7curjMCM/edit#gid=0

[JohnGallego]

This should probably be on the front end repo.

Some notes:

I do notice that you are changing fonts I have a couple of concerns. First we don't want to embed a lot of fonts into the web app, this will slow down initial download of the app considerably.

A few font changes do add a nice flair to the design, but maybe we should consider sticking to no more than 2 or 3 fonts?

Also we need to use open source fonts. Some of the fonts you've chose are proprietary and need to be purchased. Lucida Bright, for example costs $350 for our purposes.

A good source of open source fonts is google fonts.

[JohnGallego]

Hmm, yes just noticed the issue with the links. I think it's because the font weight changes, displacing the other elements. I'll fix that in a bit. I've made some of the changes on the sheet so far. Changes here:

https://teddy-care-project.firebaseapp.com/view-kids

Changes:

• Extended separator line the full width of the screen, made it 1 px.
• Increased gap between context and nav menu.
• Left aligned context menu on mobile.

[Vinubaba]

@JohnGallego (btw do i have to reference you again and again with the @ sign )

• i will look into the fonts. i dont understand what you meanby Increased gap between context and nav menu.
• the issues with the links moving around, how come the issue doesnt happen when you toggle between add and view. they change weight too. it onnly happens for the last 2 links when they are clicked.

[Vinubaba]

dont worry for lucidia bright. its a placeholder, like i mentioned, the logo and the product name font will change and will make sure its not propritary. I want to use the chalkboard font but its not for commercial use so thinking what to do. its free, but only for personal use. it gives a nice, kids look and feel for the product name like a child has crayoned it in.

[Vinubaba]

I am using avenir "next" for headers but you can use avenir which is free . everywhere else, i am using Roboto which is Google default for material design and free .

[Vinubaba]

The jumping around issue of the links is NOT happening in the phone version bTW. only desktop.

[JohnGallego]

Not sure if you intended for any sort of state transition/animations when hovering over student cards apart from the border color, but it looks like the shadow changes? I added a shadow animation for hover just in case. Update: https://teddy-care-project.firebaseapp.com/view-kids

With "increasing the gap between context and nav bar" I meant I've added more space between the kids, meal,s etc menu and the view, add etc, menu.

Since the chalk font is only used in select places, it might be a good idea to create an image or vector instead of using a font. Maybe with adobe illustrator, etc. I wouldn't be surprised if there are "chalk" effects available.

[Vinubaba]

• yes i intended for the hovered over card to have a border and a shadow. i see what you did. thanks. I hope you can already know the the font for the student name is different than the mockup, the card alignment is different from the left edge of the screen when compared to the tabs and not aligned etc. perhaps you are still working on all that. i am hoping its something you already noticed.

- With "increasing the gap between context and nav bar" I meant I've added more space between the kids, meal,s etc menu and the view, add etc, menu. This is not what i meant in the issue. I men the vertical distance between the purple line thick line and the text , e.g. kids. I'm talking about the height between the text and the line (the vertical white space). its 10- px between the thick underline line the text that the user is on and 15 between the light purple line and the text which the user is not on as height.

[JohnGallego]

Got it. I'll take a look. and yes, I'm still playing around with the cards. I've also fixed the moving links in the current build. Same link.

[Vinubaba]

you the man!

[JohnGallego]

Latest build: https://teddy-care-project.firebaseapp.com/view-kids

Thinking just on the header, let me know if I'm missing anything so far. I know you want the header to change color from the primary to white background. It looks like this should be happening whenever going from view to add, is that right?

[Vinubaba]

@JohnGallego no sir, the header design is fixed. the one i showed you with the white bg. but i am not able to see any changes on the screen.

[JohnGallego]

Ahh, ok, so we're not using the primary purple at all for the header. Let me make that change and re-upload.

[Vinubaba]

I'm not able to see any changes

[JohnGallego]

They're up now. Let me know. I'll start adding the searchbar now.

[Vinubaba]

still not correct. the fonts size, color, gradient, etc. the line below it has a shadow in my mockup. same issues for the kids, meals etc bar. font issues.

[Vinubaba]

please check invision, roboto light, medium, regular etc.

[Vinubaba]

I dont want to come across as a dick , but I am sure if you are the business owner, you would care a lot too. pI hope you understand .

[JohnGallego]

No it's fine, I understand you want it done right and so do I, but maybe we need to be more specific so I'm sure of what I need to fix.

1. You mention font size, but I'm using 20px on the top menu and 18 px on the lower menu which is what's on invision. Let me know.

2. Font type is all Roboto. 300 weight for non highlighted and 500 for highlighted, also values from the mockup.

3. The lower line intensity - I don't think it's a subpixel issue, but rather the color chosen for it. It kind of fades into the background more. On the current build I've made it the primary purple color. let me know if that looks better. Maybe with a shadow under it like the one above it? Let me know.

Also, I've added the shadow under the top menu line. Don't mind the search bar, I'm still tweaking.

[JohnGallego]

I did find an issue just now. The selected menu item is supposed to be a slightly different shade, but bootstrap is overriding my styling. Fixing this now.

[Vinubaba]

1. OK. maybe its becase of issue 2.
2. instead of weights, can you check font is roboto light vs. medium. that might make a difference? also the link you are on, is not just mediu in weight but also has a gradient. see https://sketch.cloud/s/DPQbe/all/office-manager/manager-add-step-1
3. actually the shadow is different looking also please see the url above, maybe you can view its source versus invision and that can help? do you need me to send you a screenshot . ?

[Vinubaba]

visually compare https://sketch.cloud/s/DPQbe/all/office-manager/manager-add-step-1 with your test firbase screen. you can easily see what i am talking about.

[JohnGallego]

2. Light is 300 medium is 500 weight: https://fonts.google.com/specimen/Roboto?selection.family=Roboto

3. The shadow is a bit different, but no, the link is just a static image I can't view source on it.

I'm thinking the issue here is invision. It wasn't telling me that the text was a gradient. It makes sense because that's not a supported feature of HTML. We can fake it by adding a gradient to the background and clipping it to the text, but this is not supported in all browsers.

The shadow is the exact same values as in invision too, and yet it looks different in HTML. I'm going to try to match it by eye instead.

[Vinubaba]

[Vinubaba]

ok so gradient color text is not possible? then let it go. i think you are using too dark of a shadow see my screenshot. and please use the color in the second line too. the light color shows heirarchy versus the darker line on top below the logo. i dont know why your light font is looking SO DIFFERENT than mine :-(.

[JohnGallego]

It does seem like my menu items are using a slightly higher font weight, but they are definitely not... I wonder if the different icons make the font seem more weighty?

Let me give this one more pass. brb.

[Vinubaba]

see light font specifics

[Vinubaba]

im sorry man, i worked on these screens very hard so i dont need perfection but 95 % would be nice. i promise it will get easier once one is done.

[JohnGallego]

Yeah once we have these little issues ironed out everything should go smoother. Hmmm, I even tried a lighter Roboto, 100, but it looks way too thin.

[Vinubaba]

maybe your styles are . being overwritten? and did you see my screenshots?

[JohnGallego]

Yeah, I'm using the same exact settings. I'm double checking that nothign is being overwritten.

[Vinubaba]

this is what . my tool tells me for thr light font

/ View: / font-family: Roboto-Light; font-size: 20px; color: #673AB8; letter-spacing: 1px;

trying using that font style , istead of the 300 weight.

[Vinubaba]

whatever you did, it has made a difference. phew.

[JohnGallego]

I've updated the current build to use just what I get from invision so we have a starting spot to work from. You can follow the link to see it. I've softened the shadow a bit too.

Now look at the images below:

As you can see I'm using the same settings. And notice the last mockup I made. I think the icon actually makes a difference, don't you?

Now, going from here, what direction should I take. First off, there's not much noticeable difference between the selected item and the ones not selected. Maybe an opacity change?

[Vinubaba]

I think whatever you did has made a difference. The icons that are not selected should be outline only as per mockup, i cant do it as it is from your font awesome but i think you should delete the fill color. I think tat will make a difference. also its not in my mockup but maybe the icon and link that is selected is 20 px and the others are 18 will also make a difference.

[Vinubaba]

so what was the bug?

[Vinubaba]

i know youre not feeling well, sorry to bother you man

[JohnGallego]

No prob 😀 I think the issue was bootstrap changing the opacity. The only thing that sucks about working with it is that they like to use important in their styles sometimes. It’s bad practice and can confuse people.

[Vinubaba]

what does this mean?

that they like to use important in their styles sometimes. It’s bad practice and can confuse people.

[JohnGallego]

CSS styles have certain specificity. It's one of things that determines when a style applies to an element or doesn't.

So you can have something like this:

p {
  font-size: 20px;
}

.small {
  font-size: 15px;
}

<p class="small"></p>

A class is considered more specific than just an element tag so the paragraph will have a 15px font size. This is pretty standard. But you can override this by adding !important to a property. And then it doesn't matter how specific you are being, that styling is going to still override everything and anything else, with only one exception. So you're stuck wondering why this style isn't working or miss that it isn't being applied properly. It's why it's good practice NOT to use !important.

Nice catch on the small screen alignment, I'll have that fixed tomorrow.

[Vinubaba]

Thanks. The mofo important tag cost is several hours.

[JohnGallego]

Ok, latest build fixes the alignment issue, as well as the jiggling menu text issue, and adds icon transition changes. Let me know if this is ok to close or if you want further changes.

I was thinking maybe subtle animations for the icons as the color fills in? Let me know.

https://teddy-care-project.firebaseapp.com/view-kids

[Vinubaba]

I will look but I think I mentioned the icons that the user is not on should be just outlines in ourple and the font for the text is 18 but the one user is on the icon is filledf and it is 20. with kids, typos,

Regards,

Vinu Singh 972-523-0729

On Tue, Feb 6, 2018 at 7:41 PM, John Gallego notifications@github.com wrote:

Ok, latest build fixes the alignment issue, as well as the jiggling menu text issue, and adds icon transition changes. Let me know if this is ok to close or if you want further changes.

I was thinking maybe subtle animations for the icons as the color fills in? Let me know.

https://teddy-care-project.firebaseapp.com/view-kids

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/DigitalFrameworksLLC/teddycare/issues/3#issuecomment-363626986, or mute the thread https://github.com/notifications/unsubscribe-auth/Aia-_w94I5UWCSB_KnuOi2MhbJszEN4Vks5tSP89gaJpZM4R6Dmf .

[Vinubaba]

I was thinking maybe subtle animations for the icons as the color fills in? Let me know.

yes but can i see it first before you put in the effort?

[Vinubaba]

Let us not forget the new notification indicator - small circle near the envelope icon https://sketch.cloud/s/DPQbe/all/office-manager/office-manager-view-kids

is there an update on this

[JohnGallego]

Check out the open envelope icon: https://fontawesome.com/icons/envelope-open?style=light

Do you think the small circle + the open envelope would look good?

[Vinubaba]

yes are you able to show that plus the small circle whenever there is an unread notification. i texted you, can you hope on a quick call so i can show and talk screens , typing takes too much time.

[JohnGallego]

Cool if the existing button with a border is good enough that's great. Should the Student's name be in the button, or just the icon?

[JohnGallego]

Latest changes are reflected on the link: https://teddy-care-project.firebaseapp.com/view-kids

Let me know if you need any other changes. I just need to add a small state change to support the login and email change. Not sure how you want to trigger it. I guess I can cycle it every few seconds maybe?

[Vinubaba]

The drop downs are filters. so the first drop down has the menu items like Class Name, Teacher Name, Student Name

The default menu drop down text is View by

and for the second drop down its Select one

The second drop down is disabled until the first one 's selection is made. Then it populates with class names for example, or alphabetically lists student names or teacher names for the daycare centre.

Then if and when the office manager selects something from that second drop down, the page is refershed and only the relevant card(s) are shown.

By default, the screen shows all kids cards if no filters are used.

does that answer you?>