Took a look around OC and found some things that can be fixed:
1 and 2 where fixed in the branch micro-fixes.
3 is a improvement, not a fix.
4 is polish, and
5 is a weird bug, I am not sure if you will be able to recreate it, let me know plz
1) A frivolous console.log
All where removed except for those that are console.errors
2) A disabled button in the MailChimp section should not have a hover effect.
3) The Discover page should have a loading indicator as you scroll and when filtering results.
A loader at the end of the results that hides when results are finished loading and shows when scrolling to the bottom should be enough.
If a user does not have fast internet or it is lagging, they will see a blank page for a few seconds, and for those few seconds, the user may feel confused as they are presented with nothing until the results are loaded and displayed.
In a nutshell: A loader gif image under the div that shows the results, some padding, and some js code during the api requests to hide and show the loader.
4) CollectiveCards have a "Halo"
It is easier to notice in the website instead of this image.
In digital editing like Photoshop, when you crop out a section in a image and the edges from the original background can still be seen, this is called a "halo".
The issue lies in that the parent element is white, when it really should be transparent. Also the child elements (the head, the body and the footer) are spaced out vertically, so setting the parent element to transparent is not enough to fix this. This is my fault, I could have structured this component better.
When fixing this component one must keep in mind that the component changes when adding another class name (.sponsor for example), so these alternate versions will also need to be revised.
5) CSS Table Bug in Blog causes horizontal scrolling
Upon inspection, this is one of those weird display: table quirks/bugs. A table element is rendered much differently than block and inline elements, if you are not careful really weird quirks pop up, heck they tend to show up, even when you are careful. Heisen-quirks
So you can scroll up and down without any issues? Hmmm ok, now try scrolling up and down while holding the mouse (or in my case the trackpad) with a slight tilt in the right direction. You have a better chance of seeing this if you scroll up and down while hiding and showing the topbar.
The culprit appears to be the .collectionHeader-aspectRatioTable, a table element with its width set to 200%. Unfortunately overflow-hidden will not fix this (to its parent, or wherever you wanna put it).
I believe the original code had the element set to 100% width, but, setting it back to 100%, changes the look of the component. However, I believe setting this table element to 100% is the best way to solve this problem. Along with some adjustments:
Set the table width to 100%
It should shrink vertically and align the text to the left.
Remove the second table-cell
The table element has two child table-cell elements, only the first one has children, the second one is empty and can be removed in order to align the text to the center.
Add padding
To mimic the "grow-relative-to-screen" effect that is lost when setting the table element to 100%, media queries will have to be used here :(
BTW: You can go to the blog, open dev tools and remove the overflow: hidden in the body element to see the horizontal bar.
Whats up!
Took a look around OC and found some things that can be fixed:
1 and 2 where fixed in the branch
micro-fixes. 3 is a improvement, not a fix. 4 is polish, and 5 is a weird bug, I am not sure if you will be able to recreate it, let me know plz1) A frivolous console.log
All where removed except for those that are console.errors
2) A disabled button in the MailChimp section should not have a hover effect.
3) The Discover page should have a loading indicator as you scroll and when filtering results.
A loader at the end of the results that hides when results are finished loading and shows when scrolling to the bottom should be enough.
If a user does not have fast internet or it is lagging, they will see a blank page for a few seconds, and for those few seconds, the user may feel confused as they are presented with nothing until the results are loaded and displayed.
In a nutshell: A loader gif image under the div that shows the results, some padding, and some js code during the api requests to hide and show the loader.
4) CollectiveCards have a "Halo"
It is easier to notice in the website instead of this image.
In digital editing like Photoshop, when you crop out a section in a image and the edges from the original background can still be seen, this is called a "halo".
The issue lies in that the parent element is white, when it really should be transparent. Also the child elements (the head, the body and the footer) are spaced out vertically, so setting the parent element to transparent is not enough to fix this. This is my fault, I could have structured this component better.
When fixing this component one must keep in mind that the component changes when adding another class name (.sponsor for example), so these alternate versions will also need to be revised.
5) CSS Table Bug in Blog causes horizontal scrolling
Upon inspection, this is one of those weird
display: tablequirks/bugs. A table element is rendered much differently than block and inline elements, if you are not careful really weird quirks pop up, heck they tend to show up, even when you are careful. Heisen-quirksSo you can scroll up and down without any issues? Hmmm ok, now try scrolling up and down while holding the mouse (or in my case the trackpad) with a slight tilt in the right direction. You have a better chance of seeing this if you scroll up and down while hiding and showing the topbar.
The culprit appears to be the
.collectionHeader-aspectRatioTable, a table element with its width set to 200%. Unfortunatelyoverflow-hiddenwill not fix this (to its parent, or wherever you wanna put it).I believe the original code had the element set to 100% width, but, setting it back to 100%, changes the look of the component. However, I believe setting this table element to 100% is the best way to solve this problem. Along with some adjustments:
Set the table width to 100% It should shrink vertically and align the text to the left.
Remove the second table-cell The table element has two child
table-cellelements, only the first one has children, the second one is empty and can be removed in order to align the text to the center.Add padding To mimic the "grow-relative-to-screen" effect that is lost when setting the table element to 100%, media queries will have to be used here :(
BTW: You can go to the blog, open dev tools and remove the
overflow: hiddenin thebodyelement to see the horizontal bar.