[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...

[guozhangwang]

Github user guozhangwang commented on the issue:

https://github.com/apache/kafka-site/pull/92
  
Merged to asf-site.


---

[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...

[furyus]

Github user furyus commented on the issue:

https://github.com/apache/kafka-site/pull/92
  
Please @ mention me when this gets merged - thanks for your hard work!


---

[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...

[manjuapu]

Github user manjuapu commented on the issue:

https://github.com/apache/kafka-site/pull/92
  
@derrickdoo I have made changes. Please review and let me know if I need to 
make any more changes.
Thanks!!


---

[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...

[derrickdoo]

Github user derrickdoo commented on the issue:

https://github.com/apache/kafka-site/pull/92
  
@manjuapu to fix the video clipping issue you need to switch over to 
relative sizing when you viewport gets smaller than the full size embed (525px) 
+ the total left/right padding/margin (20px) on your content area. Here's the 
CSS you need:

`
@media only screen and (max-width: 545px) {
  .yt_series {
width: 100%;
  }
}
`

There's also a few more tweaks you should make to get things synced up with 
the design comps.

1. Remove the default borders on your video embeds:

`
.yt_series{
  border: none;
}
` 

2. At 1125px wide, you're folding the video selector items down to just the 
1-4 clickable bullets below the video embed. You should center the video and 
clickable bullets to be consistent with the rest of layout

`
@media only screen and (max-width: 1125px) {
.yt_series {
margin: 0 auto;
}
.video__list {
text-align: center;
}
}
`

Last thing just for readability I'd consider grouping all your media 
queries together. For instance you're looking for 

`
@media only screen and (max-width: 1125px)
`

In 4 places in style.css. Just group all that stuff up. 


---

[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...

[manjuapu]

Github user manjuapu commented on the issue:

https://github.com/apache/kafka-site/pull/92
  
@derrickdoo  I have made changes as per your feedback, but need help with 
video clipping off.


---

[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...

[derrickdoo]

Github user derrickdoo commented on the issue:

https://github.com/apache/kafka-site/pull/92
  
@manjuapu I'm running your branch locally and I noticed some layout/display 
issues that should eb sorted out.

DESKTOP:
1. Clipping content on the right at certain browser widths:

![image](https://user-images.githubusercontent.com/271961/31293205-441f64f0-aa8b-11e7-9b5d-ba46ac23d0bb.png)

2. Unnecessary padding appears to the left of the main content area at 
certain browser widths:

![image](https://user-images.githubusercontent.com/271961/31293400-f18ad66a-aa8b-11e7-893c-51ca2d5b652c.png)

3. Horizontal nav should keep the same color scheme when you vertically 
scroll down the page. Can you just apply a white background with maybe 10px of 
padding-bottom to the nav to make it appear as if content is scrolling 
underneath the nav?

![image](https://user-images.githubusercontent.com/271961/31293485-322a7284-aa8c-11e7-8dd0-7d47fb3880aa.png)

MOBILE:
1. Content is getting clipped on mobile

![image](https://user-images.githubusercontent.com/271961/31293522-539e260e-aa8c-11e7-8d6e-e249ffd0a2ba.png)

2. Video embed is getting clipped on mobile

![image](https://user-images.githubusercontent.com/271961/31293592-7fa78c5e-aa8c-11e7-9eed-8e7f1450a51a.png)

3. "write your first app" cta should be at the top of the list

![image](https://user-images.githubusercontent.com/271961/31293652-af2fc02c-aa8c-11e7-83f0-6c30ab473e68.png)

4. (not because of your changes) do you mind reducing the text size for the 
code examples for mobile
![Uploading image.png…]()





---