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 2021/02/26 22:29:01 UTC

[GitHub] [apisix-website] 1502shivam-singh opened a new pull request #213: fix #212

1502shivam-singh opened a new pull request #213:
URL: https://github.com/apache/apisix-website/pull/213


   Fixes: #212 
   
   Changes:
   
   In this pull request I fixed the UI breaks that occurred when accessing the website on mobile (i.e. text animation breaking into two lines breaking the layout, unnecessary extra space in word leading the text animation) Replaced PNG logo on navbar with custom made SVG logo (Choice 2 set in this pull request) and increased size of CTA buttons with more padding and increased spacing. 
   
   Screenshots of the change:
   
   New SVG logo on navbar with matching size of text.
   
   ![Apache_After_mobile_nav](https://user-images.githubusercontent.com/57267960/109361699-76a3fa80-78af-11eb-9b1f-b5be59d11269.png)
   
   Fix for leading space after animation text
   
   ![Apache_After_mobile1](https://user-images.githubusercontent.com/57267960/109361834-c8e51b80-78af-11eb-95e9-270287206cfd.png)
   
   Fix for overflowing animation text 
   
   ![Apache_After_mobile2](https://user-images.githubusercontent.com/57267960/109361863-d7cbce00-78af-11eb-8eb7-3737f369109c.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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] 1502shivam-singh commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

1502shivam-singh commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787080835


   @qier222 This looks fine, just added minimal padding
   ![test3](https://user-images.githubusercontent.com/57267960/109390114-b1e90c80-7935-11eb-8ad1-17c25997a776.png)
   
   @juzhiyuan Is this with your work course
   ![test2](https://user-images.githubusercontent.com/57267960/109390120-b9101a80-7935-11eb-879f-24293927ce05.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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] qier222 commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

qier222 commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787082551


   > Also, is this intentional - for some ahead work ?
   > 
   > 
   > 
   > ![version_issue](https://user-images.githubusercontent.com/57267960/109390273-a64a1580-7936-11eb-89aa-74ae501bb243.jpg)
   > 
   > 
   > 
   > Just asking as it looks weird as it is 🙄
   
   This is a issue I haven't fixed yet 


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] 1502shivam-singh commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

1502shivam-singh commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787053912


   This looks good -
   
   ![test](https://user-images.githubusercontent.com/57267960/109385192-139a7e00-7918-11eb-863f-036f838e2953.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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] 1502shivam-singh commented on a change in pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

1502shivam-singh commented on a change in pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#discussion_r584141022



##########
File path: website/src/css/customTheme.css
##########
@@ -57,9 +57,22 @@ header h2 {
   color: var(--color-primary);
 }
 
+.navbar__title{
+  font-size: 18px;
+  height: 30px;
+}
+
 /* home splash */
 .home-splash {
-  margin-top: 8px;
+  margin-top: 0px;
+  margin-bottom: -50px;
+}
+@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+  .home-splash {
+    /* margin-top: 8px; Original*/

Review comment:
       Yes cleared them just now 😅.




----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] juzhiyuan commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

juzhiyuan commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787075855


   ![image](https://user-images.githubusercontent.com/2106987/109389083-c6cd9c00-7945-11eb-891b-43efd486a232.png)
   
   Hi, please take a look at other pages, the menu button gets wider. https://apisix.apache.org/docs/ingress-controller/design


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] juzhiyuan commented on a change in pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

juzhiyuan commented on a change in pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#discussion_r584123827



##########
File path: website/src/css/customTheme.css
##########
@@ -57,9 +57,22 @@ header h2 {
   color: var(--color-primary);
 }
 
+.navbar__title{
+  font-size: 18px;
+  height: 30px;
+}
+
 /* home splash */
 .home-splash {
-  margin-top: 8px;
+  margin-top: 0px;
+  margin-bottom: -50px;
+}
+@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+  .home-splash {
+    /* margin-top: 8px; Original*/

Review comment:
       We could remove those unused styles




----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] juzhiyuan commented on pull request #213: fix #212

Posted by GitBox <gi...@apache.org>.

juzhiyuan commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-786933806


   cc @qier222 @guoqqqi to review this PR :)


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] 1502shivam-singh commented on a change in pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

1502shivam-singh commented on a change in pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#discussion_r584140899



##########
File path: website/src/css/customTheme.css
##########
@@ -260,11 +274,12 @@ header h2 {
 /* button */
 .button {
   margin: 0 10px;
-  padding: 8px 18px;
+  padding: 18px 18px;
   font-size: 18px;
   font-weight: 600;
   border-radius: 10px;
   border: none;
+  width: 224px;

Review comment:
       Yes that was the issue for the wide buttons I have fixed it already. Will make PR when that "version issue" is done. Thanks. 




----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] juzhiyuan merged pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

juzhiyuan merged pull request #213:
URL: https://github.com/apache/apisix-website/pull/213


   


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] qier222 commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

qier222 commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787089090


   > Okay, so what exactly did you want here can you tell me ?
   > 
   > Might as well slide it in my next fixing PR, if you like 😄 @qier222
   
   I expect "Version: Next" display inside the docs menu, same as it on desktop.
   
   ![CleanShot 2021-02-27 at 23 19 13@2x](https://user-images.githubusercontent.com/68148142/109391509-6db83500-7952-11eb-9fac-ece8b7140b7a.png)
   ![CleanShot 2021-02-27 at 23 19 41@2x](https://user-images.githubusercontent.com/68148142/109391516-74df4300-7952-11eb-9be7-8ce474cda77c.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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] 1502shivam-singh commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

1502shivam-singh commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787052781


   @qier222  Yes keeping the main head in one single line is a good idea 👍👍, will make changes to heading font size for this.
   
   @guoqqqi Well centering the buttons, breaks the alignment and flow of the whole section (which is left for this section). 
   Also, it's a good practice to place CTA buttons in alignment with the text above it, as then the eye movement is minimal and a straight downward read is enough. Also we have to stay uniform with the alignments of elements in this section for this matter.  


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] guoqqqi commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

guoqqqi commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787033730


   LGTM, and how about making the button centered?


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] juzhiyuan commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

juzhiyuan commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-786988145


   Agree, and how about other codes?


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] qier222 commented on a change in pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

qier222 commented on a change in pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#discussion_r584027096



##########
File path: website/src/css/customTheme.css
##########
@@ -260,11 +274,12 @@ header h2 {
 /* button */
 .button {
   margin: 0 10px;
-  padding: 8px 18px;
+  padding: 18px 18px;
   font-size: 18px;
   font-weight: 600;
   border-radius: 10px;
   border: none;
+  width: 224px;

Review comment:
       Please don't set button width to fixed size, this is global button styles.




----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] 1502shivam-singh commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

1502shivam-singh commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787081656


   Also, is this intentional - for some ahead work ?
   
   ![version_issue](https://user-images.githubusercontent.com/57267960/109390273-a64a1580-7936-11eb-89aa-74ae501bb243.jpg)
   
   Just asking as it looks weird as it 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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] qier222 commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

qier222 commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-786980214


   I think "Apache" and "APISIX™️" should stay in one line, the fonts size can shrink down a little bit.


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] 1502shivam-singh commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

1502shivam-singh commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787053319


   Also while we are at, did you guys check out the SVG variants I made for the original logo (at [figma](https://www.figma.com/file/LeICU6ikwITGemfw8lBRs3/APISIX-Apache-swf?node-id=0%3A1)) ? If you are unable to view, tell me and I will add some screenshots.
   Do tell which one you like more @juzhiyuan @qier222  @guoqqqi.
   I will add that one as logo. 


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] qier222 edited a comment on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

qier222 edited a comment on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787082551


   > Also, is this intentional - for some ahead work ?
   > 
   > 
   > 
   > ![version_issue](https://user-images.githubusercontent.com/57267960/109390273-a64a1580-7936-11eb-89aa-74ae501bb243.jpg)
   > 
   > 
   > 
   > Just asking as it looks weird as it is 🙄
   
   This is an issue I haven't fixed yet 


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] 1502shivam-singh commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

1502shivam-singh commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787083489


   Okay, so what exactly did you want here can you tell me ?
   
   Might as well slide it in my next fixing PR, if you like 😄 @qier222 


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [apisix-website] qier222 commented on pull request #213: fix: #212

Posted by GitBox <gi...@apache.org>.

qier222 commented on pull request #213:
URL: https://github.com/apache/apisix-website/pull/213#issuecomment-787079369


   The content inside "View on GitHub" button is not horizontally centered.


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org