search

hackforla / website

Hack for LA's website
https://www.hackforla.org
GNU General Public License v2.0
292 stars 724 forks source link

Toolkit page refinement #751

Closed ExperimentsInHonesty closed 3 years ago

ExperimentsInHonesty commented 3 years ago

Overview

The toolkit page needs some refinement to match our quality standards

Action Items

Resources/Instructions

https://www.hackforla.org/toolkit

KianBadie commented 3 years ago

1 week late, but adding this here for documentation purposes:

Pr #753 made the "Getting the Most Out of GitHub Issues" guide a coming soon guide. However, a weird bug was happening that required some other changes. Here is my note from the PR:

An important note: for the hotfix, I changed the image of the "Building a Survey Reporting Dashboard" because the image was causing some really weird bugs when I changed "Getting the Most Out of GitHub Issues" to coming soon (screenshots bellow). It was strange because when I changed the picture of the Survey Reporting guide to the 2FA image, things work as intended. It took me a while to figure out this image was causing an issue. Sundays are the days I try not to code after noon time, so I hope it is understandable that this temp fix of using different svg is preferred for me right now, and I will look more into it as I resume my work on this page.

Before

Screenshot from 2020-09-27 12-16-43

After changing image to 2FA one

Screenshot from 2020-09-27 12-35-26

KianBadie commented 3 years ago

Screenshots for changes below. I have made updates to the page that include:

Something in-between last week and this week made the text in the cards no longer overflow. It is even like that on the hackforla site.

Also, there are 2 bugs that I currently have. One displays the "Suggest A Guide" button strangely on small phones on landscape (iPhone 5/SE). The other is that inbetween ~1230px and ~1200px width screens, the guide cards/resource cards display in a single column list with lots of space to the right (I think this is because the list is still trying to be responsive in fitting as many cards as possible into a row, but because of the cards size it can only display one per row. At ~1200px the double column styling rules kick in). Screenshots below as well

I have a lot of screenshots, but do not want to flood this comment/issue and make it so long. So here is a link to drive with more screenshots of different cases.

Screenshots

Desktop

desktop

iPhone 6/7/8 Vertical

iphone678vertical

iPhone 6/7/8 Landscape

iphone678landscape

iPhone 5 landscape

iphone5landscape

~1230px - ~1200px bug

30pixelbug

KianBadie commented 3 years ago

From discussion with @ExperimentsInHonesty , I am going to try to experiment with reducing the card size to be smaller by reducing the font/size of the images. Will be using the project cards for reference, as they are determined to be already readable. Screenshot from 2020-10-05 18-19-00

KianBadie commented 3 years ago

@ExperimentsInHonesty I have put the template for the "coming soon" guide cards below. On the live site, the 3 guides that have the same description/short-description are "Create a Kanban Project Board from Our Template", "Getting the Most Out of GitHub Issues", and "Using Kanban Project Boards for Team Effectiveness (#209)". I could not find the issues for the other 2 guides. These might be them (Open issue #188 and closed issue #514)

If these descriptions get made before the refinement for this page is done, I'll create a pr to merge those descriptions/short-descriptions in so it can be done asap. Is there anything else you needed @ExperimentsInHonesty? I apologize, I forgot from the meeting if you mentioned any other resources you needed.

---
title:
description: 
short-description: 
card-type: guide-page
status: coming-soon
display: true
category: project management
svg: svg/toolkit-default-card-image.svg
alt-text: default-toolkit-image
provider-link: ''
---
KianBadie commented 3 years ago

Posting this hear to get some feedback even though it is still a WIP. @ExperimentsInHonesty, what do you think about the max size for the resource cards being this big? (screenshot below)

This is only the desktop view. I have not really implemented this on smaller screens. Right now, if you start to minimize the page the list goes into a 2 column grid and the cards get even bigger. But if you like these sized cards, I can make this the max size for them.

desktop

alexandrastubbs commented 3 years ago

@KianBadie yes, let's try this

KianBadie commented 3 years ago

Merged an update for toolkit that did these things:

I added some screenshots to the bottom of this comment that are not ideal (iPhone 5 zoom logo on landscape is large compared to the size of the card and iPad pro width still tries to left justify cards). Also, I want to try to fix the bug I mentioned here by investigating the svg's involved.

Some sample screenshots

Desktop

desktop

iPhone 6/7/8 Vertical

iphone678

iPhone 6/7/8 Landscape

iphone678mobile

Not ideal

iPhone 5 landscape large zoom logo

Screenshot from 2020-10-08 17-35-24

iPad Pro width still left justifies cards

Screenshot from 2020-10-08 17-35-50

KianBadie commented 3 years ago

All screenshots for mobile on this comment are taken on my actual phone, so it might not be able to be replicated using chrome dev tools

I did not have much time to fiddle around with this bug. But from my brief fiddling I found some really interesting things. Unfortunately, I was not able to solve it.

So I deleted some elements in the survey-reporting-image.svg and the bug was fixed on desktop! (Screen shots below). However on my phone, the picture for the Survey reporting and the 2 following cards would appear to blank! Interestingly enough, it seems that the mvp version would display a blank card for "Survey reporting", but would display correctly for the following 2 cards. (screenshots below as well)

The survey-reporting-image.svg does not seem to be as hi-res as the other images. I'm not sure if that was from my modifications to it. I rolled back my fork to the mvp of this page and saw the the picture was still not as hi-res (screenshots below as well).

I will not be able to work on this for the rest of the week unfortunately.

Screenshots

Fix on desktop

new

Broken on phones with fix

newiphonevertical newIphone

MVP version of page to compare resolution

old

MVP version of mobile to show that it was blank. Following 2 cards were not blank

oldiphonevertical

KianBadie commented 3 years ago

@ExperimentsInHonesty structure for a guide card. Short-description and description has the chances of being the same. It is used in the case when description is too long for a guide card and a shorter summarized description works better.


---
title:
description: 
short-description: 
card-type: guide-page
status: coming-soon
display: true
category: project management
svg: svg/toolkit-default-card-image.svg
alt-text: default-toolkit-image
provider-link: ''
---
ExperimentsInHonesty commented 3 years ago

@KianBadie here is the file detail for all the coming soon guides

File name: showing-civictech-experience-on-linkedin
---
title: Displaying your Civic Tech - Open Source - Volunteer Experience on LinkedIn
description: 
short-description: Make the most of your volunteer work experience at Hack for LA by using our resume template.
card-type: guide-page
status: coming-soon
display: true
category: professional development
svg: svg/toolkit-default-card-image.svg
alt-text: default-toolkit-image
provider-link: ''
---

File name: setting-up-1password-on-opensource-project
---
title: Setting up 1password for your Open Source Project 
description: 
short-description: Open Source Civic Tech volunteer projects need a safe place to store passwords to create continuity.  This guide will help you setup 1Password for your project. 
card-type: guide-page
status: coming-soon
display: true
category: project management
svg: svg/toolkit-default-card-image.svg
alt-text: default-toolkit-image
provider-link: ''
---

File name: figma-for-opensource-projects
---
title: How to use Figma effectively on Open Source Volunteer Teams
description: 
short-description: See an effective model for creating and sharing designs from ideation to execution with desktop and mobile responsiveness.
card-type: guide-page
status: coming-soon
display: true
category: design
svg: svg/toolkit-default-card-image.svg
alt-text: default-toolkit-image
provider-link: ''
---

File name: responsible-use-of-images-on-opensource-projects
---
title: Responsible use of images on HfLA websites
description: 
short-description: How to find and store images, benefits of image formats, sizing best practices and how to comply with attribution requirements.
card-type: guide-page
status: coming-soon
display: true
category: design
svg: svg/toolkit-default-card-image.svg
alt-text: default-toolkit-image
provider-link: ''
---

File name: updates-team-pages-on-hflasite
---
title: Updating Team Pages on HackforLA.org Website
description: 
short-description: All project teams can benefit from keeping their project page up to date.  Getting changes made is easy with this guide.
card-type: guide-page
status: coming-soon
display: true
category: project management
svg: svg/toolkit-default-card-image.svg
alt-text: default-toolkit-image
provider-link: ''
---
alexandrastubbs commented 3 years ago

Any updates on this @KianBadie ?

alexandrastubbs commented 3 years ago

Getting the Most Out of GitHub Issues: Each of Hack for LA’s GitHub project repositories (repos) use issues to track and organize ideas, enhancements, and tasks. All team members will use GitHub issues to communicate in our multifunctional teams.

Create a Kanban Project Board from Our Template: We have created simple templates that work for all types of projects, from initiatives to software development

Using Kanban Project Boards for Team Effectiveness: Learn why Kanban suits our organization and how to leverage it to maximize efficiency and increase collaboration

KianBadie commented 3 years ago

@ExperimentsInHonesty @alexandrastubbs The only concerns I have left regarding the issue are 3 things:

  1. iPhone 5 on landscape has a large "Zoom" logo
  2. iPad Pro screen widths attempts to left justify cards because it is just slightly large than the screen width used where the cards become a more centered 2 column list. I am using a predefined width created on the site, $bp-below-desktop, which seems to be slightly smaller than iPad Pro screen widths.
  3. Original svg image for "Building a Survey Reporting Dashboard" is still bugged, so we are currently using the same one as the "2FA Guide"

If you want me to fix any of these, please let me know. They are minor fixes, so I plan on working on them if there aren't other urgent issues to work on. If they are higher on the urgency list, please let me know and I will make them a priority.

Screenshots

Issue 1: iPhone 5 Zoom Logo

Screenshot from 2020-10-08 17-35-24

Issue 2: iPad Pro Left Justified

Screenshot from 2020-10-08 17-35-50

Issue 3: Survey Dashboard SVG

Initial SVG

old

Current SVG

Screenshot from 2020-10-16 15-24-24

KianBadie commented 3 years ago

Discussed with @alexandrastubbs that issues 1 and 2 in the above comment are ok and we can move on from those. Issue number 3 is something to work on, however. I can work on this tomorrow 10/19 and I am confident I can have a pr open tomorrow that will close this issue!

KianBadie commented 3 years ago

@alexandrastubbs sorry for not following through with my promised delivery time; I will not have a pr to fix this tonight. I did work on it, and I do have a fix of sorts. There were some last things I was double checking and I ended up not wrapping all of it up tonight. I will try to have a pr for this tomorrow though, as the last things I have to wrap up are quick/short.