You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by GitBox <gi...@apache.org> on 2020/03/12 10:40:20 UTC

[GitHub] [camel-website] jyotiattri opened a new pull request #200: fixed issue for content wider than screen for pages

jyotiattri opened a new pull request #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200
 
 
   This adds a fix for  **Content wider than screen (16 pages)**  from [Mobile usability issues reported in Google search console]( https://issues.apache.org/jira/browse/CAMEL-13800)
   
   cc : @zregvart 

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


With regards,
Apache Git Services

[GitHub] [camel-website] zregvart commented on issue #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
zregvart commented on issue #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#issuecomment-599220667
 
 
   I'm not sure about using `vh` `font-size` unit inconsistently, at 626px this leads to quite a big difference between font sizes:
   
   ![Screenshot_2020-03-15 ActiveMQ Component - Apache Camel](https://user-images.githubusercontent.com/1306050/76703834-e1771880-66d4-11ea-9830-e0cdd2d098f1.png)
   
   I think it's best that we focus on `overflow-wrap` and `overflow` changes here and on changing font-sizes in a separate issue/pull request.

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


With regards,
Apache Git Services

[GitHub] [camel-website] zregvart commented on a change in pull request #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#discussion_r397037215
 
 

 ##########
 File path: antora-ui-camel/src/css/base.css
 ##########
 @@ -83,3 +83,11 @@ mark {
 .text-center {
   text-align: center;
 }
+
+@media screen (max-width: 1023px) and (min-width: 480px) {
+  code,
+  kbd,
+  pre {
+    overflow-wrap: break-word;
 
 Review comment:
   Does it make sense to remove the media query and put this in the existing rule regardless of the screen size?

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


With regards,
Apache Git Services

[GitHub] [camel-website] jyotiattri commented on issue #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
jyotiattri commented on issue #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#issuecomment-598158035
 
 
   Ok, I got it. I can change it.

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


With regards,
Apache Git Services

[GitHub] [camel-website] jyotiattri commented on issue #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
jyotiattri commented on issue #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#issuecomment-599399205
 
 
   Requested Changes are done in 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


With regards,
Apache Git Services

[GitHub] [camel-website] zregvart merged pull request #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
zregvart merged pull request #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200
 
 
   

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


With regards,
Apache Git Services

[GitHub] [camel-website] jyotiattri commented on issue #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
jyotiattri commented on issue #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#issuecomment-600405543
 
 
   Hi, @zregvart 
   Please let me know is there something to do in 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


With regards,
Apache Git Services

[GitHub] [camel-website] jyotiattri commented on a change in pull request #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
jyotiattri commented on a change in pull request #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#discussion_r397042475
 
 

 ##########
 File path: antora-ui-camel/src/css/base.css
 ##########
 @@ -83,3 +83,11 @@ mark {
 .text-center {
   text-align: center;
 }
+
+@media screen (max-width: 1023px) and (min-width: 480px) {
+  code,
+  kbd,
+  pre {
+    overflow-wrap: break-word;
 
 Review comment:
   Yes, it will work.

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


With regards,
Apache Git Services

[GitHub] [camel-website] zregvart commented on a change in pull request #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#discussion_r392132356
 
 

 ##########
 File path: antora-ui-camel/src/css/doc.css
 ##########
 @@ -40,6 +40,16 @@
   .doc > h1.page:first-child {
     margin-top: 2.5rem;
   }
+
+  .release dl {
+    overflow: scroll;
+  }
 
 Review comment:
   This needs to go to [antora-ui-camel/src/css/release.css](https://github.com/apache/camel-website/blob/master/antora-ui-camel/src/css/release.css)

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


With regards,
Apache Git Services

[GitHub] [camel-website] zregvart commented on issue #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
zregvart commented on issue #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#issuecomment-604331560
 
 
   I've rebased this on current master branch, I'm interested to see if there are any issues with this with other changes that have happened in the meantime. So let's wait for the new preview.

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


With regards,
Apache Git Services

[GitHub] [camel-website] jyotiattri commented on a change in pull request #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
jyotiattri commented on a change in pull request #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#discussion_r397055484
 
 

 ##########
 File path: antora-ui-camel/src/css/doc.css
 ##########
 @@ -634,3 +636,22 @@ kbd,
 .stretch {
   width: 100%;
 }
+
+/* for mobile screens */
+@media screen and (max-width: 626px) {
+  #preamble + .sect1,
+  .doc .sect1 + .sect1 {
+    overflow-wrap: break-word;
+  }
+}
+
+@media screen and (max-width: 1023px) and (min-width: 480px) {
+  .doc > h1.page:first-child,
+  .static > h1:first-child {
+    font-size: inherit;
+  }
+
+  .doc h2:not(.discrete) {
+    overflow-wrap: break-word;
+  }
+}
 
 Review comment:
   In this, we have a different font size so I use this media query for some targeted areas font size.
   I made changes in this and sent it again.

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


With regards,
Apache Git Services

[GitHub] [camel-website] jyotiattri commented on issue #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
jyotiattri commented on issue #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#issuecomment-604335851
 
 
   @zregvart, Ok 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


With regards,
Apache Git Services

[GitHub] [camel-website] zregvart commented on issue #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
zregvart commented on issue #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#issuecomment-604948428
 
 
   Preview is [here](https://builds.apache.org/job/Camel.website/job/PR-200/Preview/index.html).

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


With regards,
Apache Git Services

[GitHub] [camel-website] zregvart commented on a change in pull request #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#discussion_r397039704
 
 

 ##########
 File path: antora-ui-camel/src/css/release.css
 ##########
 @@ -11,3 +11,9 @@
   grid-column-start: 2;
   margin-left: 1rem;
 }
+
+@media screen and (max-width: 1023px) and (min-width: 480px) {
+  .release dl {
+    overflow: scroll;
+  }
+}
 
 Review comment:
   Why use a media query, could we put this in `.release dl` instead? What would be the downside of that?

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


With regards,
Apache Git Services

[GitHub] [camel-website] jyotiattri commented on a change in pull request #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
jyotiattri commented on a change in pull request #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#discussion_r397054423
 
 

 ##########
 File path: antora-ui-camel/src/css/release.css
 ##########
 @@ -11,3 +11,9 @@
   grid-column-start: 2;
   margin-left: 1rem;
 }
+
+@media screen and (max-width: 1023px) and (min-width: 480px) {
+  .release dl {
+    overflow: scroll;
+  }
+}
 
 Review comment:
   No, the downside of this. It will work fine without using the media query.

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


With regards,
Apache Git Services

[GitHub] [camel-website] zregvart commented on a change in pull request #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#discussion_r397039164
 
 

 ##########
 File path: antora-ui-camel/src/css/doc.css
 ##########
 @@ -634,3 +636,22 @@ kbd,
 .stretch {
   width: 100%;
 }
+
+/* for mobile screens */
+@media screen and (max-width: 626px) {
+  #preamble + .sect1,
+  .doc .sect1 + .sect1 {
+    overflow-wrap: break-word;
+  }
+}
+
+@media screen and (max-width: 1023px) and (min-width: 480px) {
+  .doc > h1.page:first-child,
+  .static > h1:first-child {
+    font-size: inherit;
+  }
+
+  .doc h2:not(.discrete) {
+    overflow-wrap: break-word;
+  }
+}
 
 Review comment:
   I think this needs to be rethought: these are some very targeted rules, I'd prefer if we came up with a principle rather than a fix for specific instances of text. This will be very difficult to maintain with the text changing.

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


With regards,
Apache Git Services

[GitHub] [camel-website] zregvart commented on issue #200: fixed issue for content wider than screen for pages

Posted by GitBox <gi...@apache.org>.
zregvart commented on issue #200: fixed issue for content wider than screen for pages
URL: https://github.com/apache/camel-website/pull/200#issuecomment-605998310
 
 
   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


With regards,
Apache Git Services