You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by GitBox <gi...@apache.org> on 2022/03/30 11:37:56 UTC
[GitHub] [apisix-website] RaiIsNotYourGuy opened a new pull request #992: fix: skewed images for right-pane
RaiIsNotYourGuy opened a new pull request #992:
URL: https://github.com/apache/apisix-website/pull/992
Resized images in right-pane to no longer skew and centered.
Fixes: #983
### Changes:
File: features.jsx
- Changed ```right-pane``` height from ```100vh``` to ```70vh``` to give the image an approx. 1:1 scaling.
- Added ```top: 60px``` to ```right-pane``` center the image closer to the middle due to resizing causing the image to position closer to the top of the page & to allow for the images to have extra room for the bottom portion of the images, due to the drop-shadow being cut off.
File: customTheme.css
- Added ```bottom: 20px``` to ```.imagePosition``` to remove the cutting of the drop-shadow at the bottom of the images.
These changes do not affect the layout on mobile.
Screenshots of the change:
### Before:
### After:
<img width="1462" alt="Screenshot at Mar 30 11-17-39" src="https://user-images.githubusercontent.com/2664520/160823269-a93d15c3-49d5-4e24-8871-06c44f2fd6d7.png">
<img width="1330" alt="Screenshot at Mar 30 11-18-13" src="https://user-images.githubusercontent.com/2664520/160823285-818c3270-ff94-4378-9e5a-774363ce3a9d.png">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] netlify[bot] commented on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
netlify[bot] commented on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1083025578
### <span aria-hidden="true">👷</span> Deploy Preview for *apache-apisix* processing.
| Name | Link |
|---------------------------------|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | ce92ec6be49737e250cc5dcf34ef3e89a41f688d |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/apache-apisix/deploys/6244410f3650f30009f36287 |
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] RaiIsNotYourGuy edited a comment on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
RaiIsNotYourGuy edited a comment on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1084480265
Reverted size changes and added ```max-width``` to ```.imagePosition```
Fixes: #983
### Changes:
File: features.jsx
- Reverted changes for ```height``` in ```right-pane```
File: customTheme.css
- Reverted changes for ```.imagePositon``` ```bottom```
- Added ```max-width: none``` to ```.imagePosition
These changes reverted the changes that made the images smaller. The new changes keep the same height while allowing the width of each image to not condense, removing the skewing effect.
Edit:
Also, this change was also tested on smaller width screen sizes. The left and right panes do not overlap each other or cause any issues.
Screenshots of the change:
### Before:
### After:
<img width="1512" alt="Screen Shot 2022-03-31 at 11 38 34" src="https://user-images.githubusercontent.com/2664520/161048162-c529199a-d41d-4c26-9e3e-067a5e1e8058.png">
<img width="1512" alt="Screen Shot 2022-03-31 at 11 38 57" src="https://user-images.githubusercontent.com/2664520/161048178-7d803fb3-3087-4902-8204-494fbe225bf6.png">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] RaiIsNotYourGuy edited a comment on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
RaiIsNotYourGuy edited a comment on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1084480265
Reverted size changes and added ```max-width``` to ```.imagePosition```
Fixes: #983
### Changes:
File: features.jsx
- Reverted changes for ```height``` in ```right-pane```
File: customTheme.css
- Reverted changes for ```.imagePosition``` ```bottom```
- Added ```max-width: none``` to ```.imagePosition```
These changes reverted the changes that made the images smaller. The new changes keep the same height while allowing the width of each image to not condense, removing the skewing effect.
Edit:
Also, this change was also tested on smaller width screen sizes. The left and right panes do not overlap each other or cause any issues.
Screenshots of the change:
### Before:
### After:
<img width="1512" alt="Screen Shot 2022-03-31 at 11 38 34" src="https://user-images.githubusercontent.com/2664520/161048162-c529199a-d41d-4c26-9e3e-067a5e1e8058.png">
<img width="1512" alt="Screen Shot 2022-03-31 at 11 38 57" src="https://user-images.githubusercontent.com/2664520/161048178-7d803fb3-3087-4902-8204-494fbe225bf6.png">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] RaiIsNotYourGuy commented on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
RaiIsNotYourGuy commented on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1084480265
Resized images in right-pane to no longer skew and is centered.
Fixes: #983
### Changes:
File: features.jsx
- Reverted changes for ```height``` in ```right-pane```
File: customTheme.css
- Reverted changes for ```.imagePositon``` ```bottom```
- Added ```max-width: none``` to ```.imagePosition
These changes reverted the changes that made the images smaller. The new changes keep the same height, while allowing the width of each image to not condense, removing the skewing effect.
Screenshots of the change:
### Before:
### After:
<img width="1512" alt="Screen Shot 2022-03-31 at 11 38 34" src="https://user-images.githubusercontent.com/2664520/161048162-c529199a-d41d-4c26-9e3e-067a5e1e8058.png">
<img width="1512" alt="Screen Shot 2022-03-31 at 11 38 57" src="https://user-images.githubusercontent.com/2664520/161048178-7d803fb3-3087-4902-8204-494fbe225bf6.png">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] RaiIsNotYourGuy commented on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
RaiIsNotYourGuy commented on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1084307386
> > Resized images in right-pane to no longer skew and is centered. Fixes: #983
>
> Not the right way to solve this issue, IMO.
>
> The composition here was purposely implemented by me to leave enough head space to the images and no space below. This was to make sure they don't look like they are floating around as they are right now.
>
> Now, the issue I understand is that that the image are not scaled in proportion to their aspect ratio.
>
> So, what I recommend as fix is to fix the width and height of these images on lesser wide screens. Play with the width of the images and keep the height as is.
Gotcha. Yeah, I'll reattack on the skewing issue, thanks for the feedback!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] netlify[bot] edited a comment on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
netlify[bot] edited a comment on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1083025578
### <span aria-hidden="true">✅</span> Deploy Preview for *apache-apisix* ready!
| Name | Link |
|---------------------------------|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | ce92ec6be49737e250cc5dcf34ef3e89a41f688d |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/apache-apisix/deploys/6244410f3650f30009f36287 |
|<span aria-hidden="true">😎</span> Deploy Preview | https://deploy-preview-992--apache-apisix.netlify.app |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br /><br /><br />_Use your smartphone camera to open QR code link._</details> |
---
_To edit notification comments on pull requests, go to your [Netlify site settings](https://app.netlify.com/sites/apache-apisix/settings/deploys#deploy-notifications)._
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] RaiIsNotYourGuy edited a comment on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
RaiIsNotYourGuy edited a comment on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1084480265
Reverted size changes and added ```max-width``` to ```.imagePosition```
Fixes: #983
### Changes:
File: features.jsx
- Reverted changes for ```height``` in ```right-pane```
File: customTheme.css
- Reverted changes for ```.imagePositon``` ```bottom```
- Added ```max-width: none``` to ```.imagePosition
These changes reverted the changes that made the images smaller. The new changes keep the same height, while allowing the width of each image to not condense, removing the skewing effect.
Screenshots of the change:
### Before:
### After:
<img width="1512" alt="Screen Shot 2022-03-31 at 11 38 34" src="https://user-images.githubusercontent.com/2664520/161048162-c529199a-d41d-4c26-9e3e-067a5e1e8058.png">
<img width="1512" alt="Screen Shot 2022-03-31 at 11 38 57" src="https://user-images.githubusercontent.com/2664520/161048178-7d803fb3-3087-4902-8204-494fbe225bf6.png">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] leslie-tsang commented on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
leslie-tsang commented on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1085553164
@navendu-pottekkat Please take a look if it work as expected. :)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] netlify[bot] edited a comment on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
netlify[bot] edited a comment on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1083025578
### <span aria-hidden="true">👷</span> Deploy Preview for *apache-apisix* processing.
| Name | Link |
|---------------------------------|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 597b066d2d8cd629108ded5b0aa02b79879d48b6 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/apache-apisix/deploys/624593aa66a93d000823fbb3 |
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] 1502shivam-singh commented on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
1502shivam-singh commented on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1084279070
> Resized images in right-pane to no longer skew and is centered. Fixes: #983
Not the right way to solve this issue, IMO.
The composition here was purposely implemented by me to leave enough head space to the images and no space below. This was to make sure they don't look like they are floating around as they are right now.
Now, the issue I understand is that that the image are not scaled in proportion to their aspect ratio.
So, what I recommend as fix is to fix the width and height of these images on lesser wide screens.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] RaiIsNotYourGuy edited a comment on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
RaiIsNotYourGuy edited a comment on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1084480265
Reverted size changes and added ```max-width``` to ```.imagePosition```
Fixes: #983
### Changes:
File: features.jsx
- Reverted changes for ```height``` in ```right-pane```
File: customTheme.css
- Reverted changes for ```.imagePositon``` ```bottom```
- Added ```max-width: none``` to ```.imagePosition```
These changes reverted the changes that made the images smaller. The new changes keep the same height while allowing the width of each image to not condense, removing the skewing effect.
Edit:
Also, this change was also tested on smaller width screen sizes. The left and right panes do not overlap each other or cause any issues.
Screenshots of the change:
### Before:
### After:
<img width="1512" alt="Screen Shot 2022-03-31 at 11 38 34" src="https://user-images.githubusercontent.com/2664520/161048162-c529199a-d41d-4c26-9e3e-067a5e1e8058.png">
<img width="1512" alt="Screen Shot 2022-03-31 at 11 38 57" src="https://user-images.githubusercontent.com/2664520/161048178-7d803fb3-3087-4902-8204-494fbe225bf6.png">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] netlify[bot] edited a comment on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
netlify[bot] edited a comment on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1083025578
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] 1502shivam-singh edited a comment on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
1502shivam-singh edited a comment on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1084279070
> Resized images in right-pane to no longer skew and is centered. Fixes: #983
Not the right way to solve this issue, IMO.
The composition here was purposely implemented by me to leave enough head space to the images and no space below. This was to make sure they don't look like they are floating around as they are right now.
Now, the issue I understand is that that the image are not scaled in proportion to their aspect ratio.
So, what I recommend as fix is to fix the width and height of these images on lesser wide screens.
Play with the width and keep the height as is.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] SkyeYoung commented on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
SkyeYoung commented on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1083973067
<img width="607" alt="Snipaste_2022-03-31_09-46-01" src="https://user-images.githubusercontent.com/48400568/160959840-6718fee0-9438-491b-a27e-8b406e9be8f3.png">
Maybe it's better to keep 1 and 2 centered vertically?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] 1502shivam-singh edited a comment on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
1502shivam-singh edited a comment on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1084279070
> Resized images in right-pane to no longer skew and is centered. Fixes: #983
Not the right way to solve this issue, IMO.
The composition here was purposely implemented by me to leave enough head space to the images and no space below. This was to make sure they don't look like they are floating around as they are right now.
Now, the issue I understand is that that the image are not scaled in proportion to their aspect ratio.
So, what I recommend as fix is to fix the width and height of these images on lesser wide screens.
Play with the width of the images and keep the height as is.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] netlify[bot] edited a comment on pull request #992: fix: skewed images for right-pane
Posted by GitBox <gi...@apache.org>.
netlify[bot] edited a comment on pull request #992:
URL: https://github.com/apache/apisix-website/pull/992#issuecomment-1083025578
### <span aria-hidden="true">✅</span> Deploy Preview for *apache-apisix* ready!
| Name | Link |
|---------------------------------|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | afb20f5eb8b75ebba1a529799fa14ce6cf3026d2 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/apache-apisix/deploys/6245942ff9d88000087155fe |
|<span aria-hidden="true">😎</span> Deploy Preview | https://deploy-preview-992--apache-apisix.netlify.app |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br /><br /><br />_Use your smartphone camera to open QR code link._</details> |
---
_To edit notification comments on pull requests, go to your [Netlify site settings](https://app.netlify.com/sites/apache-apisix/settings/deploys#deploy-notifications)._
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org