[PATCH] improve mobile view with viewport and css media query

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

[PATCH] improve mobile view with viewport and css media query

Martin von Zweigbergk via Mercurial-devel
# HG changeset patch
# User nabbisen <[hidden email]>
# Date 1617325695 -32400
#      Fri Apr 02 10:08:15 2021 +0900
# Node ID f269688339206a9f7c85fb089cd9adb9c8215a92
# Parent  5284da57c604bc5a36ac74b36001ce3d6e0be1d3
improve mobile view with viewport and css media query

diff -r 5284da57c604 -r f26968833920 static/css/styles.css
--- a/static/css/styles.css Mon Oct 26 14:55:33 2020 +0100
+++ b/static/css/styles.css Fri Apr 02 10:08:15 2021 +0900
@@ -205,3 +205,20 @@
 .wrap {
     white-space: pre-wrap;
 }
+
+/** todo: 876px? */
+@media (max-width: 876px) {
+    body { width: 100vw; padding: 0; margin: 0; }
+    
+    .row { padding: 0.3rem 0.7rem; }
+    .col { float: unset; display: block; width: 100%; padding: 0.3rem 0.7rem; margin: 0; }
+    .big { float: unset; width: 100%; }
+
+    #nav { position: static; width: 100vw; height: auto; padding: 0.3rem 0; line-height: 1.25em; }
+
+    #content { padding: 0.4rem 0.2rem; }
+    #content .table-of-contents { font-size: 100%; }
+    #content .table-of-contents li { line-height: 2.4em; }
+
+    pre, .output { overflow-x: auto; }
+}
diff -r 5284da57c604 -r f26968833920 templates/base.html
--- a/templates/base.html Mon Oct 26 14:55:33 2020 +0100
+++ b/templates/base.html Fri Apr 02 10:08:15 2021 +0900
@@ -1,8 +1,9 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-       "http://www.w3.org/TR/html4/loose.dtd">
-<html>
+<!DOCTYPE html>
+<html lang="en">
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        
         <link href="{{ url_for('static', filename='css/styles.css') }}" type="text/css" rel="stylesheet">
         <script type="text/javascript" src="{{ url_for('static', filename='js/common.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='sources.js') }}"></script>
_______________________________________________
Mercurial-devel mailing list
[hidden email]
https://www.mercurial-scm.org/mailman/listinfo/mercurial-devel
Reply | Threaded
Open this post in threaded view
|

Re: [PATCH] improve mobile view with viewport and css media query

Martin von Zweigbergk via Mercurial-devel

I send 2 kinds of diff images on mobile for your reference.

876px in diff is around where the blue button "Download now" starts to be covered by modifying width of window.

Thank you for your reading and reviewing.


On 2021/04/02 10:14, Heddi Nabbisen wrote:

> # HG changeset patch
> # User nabbisen <[hidden email]>
> # Date 1617325695 -32400
> #      Fri Apr 02 10:08:15 2021 +0900
> # Node ID f269688339206a9f7c85fb089cd9adb9c8215a92
> # Parent  5284da57c604bc5a36ac74b36001ce3d6e0be1d3
> improve mobile view with viewport and css media query
>
> diff -r 5284da57c604 -r f26968833920 static/css/styles.css
> --- a/static/css/styles.css Mon Oct 26 14:55:33 2020 +0100
> +++ b/static/css/styles.css Fri Apr 02 10:08:15 2021 +0900
> @@ -205,3 +205,20 @@
>   .wrap {
>       white-space: pre-wrap;
>   }
> +
> +/** todo: 876px? */
> +@media (max-width: 876px) {
> +    body { width: 100vw; padding: 0; margin: 0; }
> +
> +    .row { padding: 0.3rem 0.7rem; }
> +    .col { float: unset; display: block; width: 100%; padding: 0.3rem 0.7rem; margin: 0; }
> +    .big { float: unset; width: 100%; }
> +
> +    #nav { position: static; width: 100vw; height: auto; padding: 0.3rem 0; line-height: 1.25em; }
> +
> +    #content { padding: 0.4rem 0.2rem; }
> +    #content .table-of-contents { font-size: 100%; }
> +    #content .table-of-contents li { line-height: 2.4em; }
> +
> +    pre, .output { overflow-x: auto; }
> +}
> diff -r 5284da57c604 -r f26968833920 templates/base.html
> --- a/templates/base.html Mon Oct 26 14:55:33 2020 +0100
> +++ b/templates/base.html Fri Apr 02 10:08:15 2021 +0900
> @@ -1,8 +1,9 @@
> -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> -       "http://www.w3.org/TR/html4/loose.dtd">
> -<html>
> +<!DOCTYPE html>
> +<html lang="en">
>       <head>
> -        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> +        <meta charset="utf-8">
> +        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
> +
>           <link href="{{ url_for('static', filename='css/styles.css') }}" type="text/css" rel="stylesheet">
>           <script type="text/javascript" src="{{ url_for('static', filename='js/common.js') }}"></script>
>           <script type="text/javascript" src="{{ url_for('static', filename='sources.js') }}"></script>
--
Best regards,
Heddi Nabbisen [ 鍋谷 英憲 ]


_______________________________________________
Mercurial-devel mailing list
[hidden email]
https://www.mercurial-scm.org/mailman/listinfo/mercurial-devel

01-home-01-bef.jpg (345K) Download Attachment
01-home-02-aft.jpg (245K) Download Attachment
02-about-01-bef.jpg (430K) Download Attachment
02-about-02-aft.jpg (322K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: [PATCH] improve mobile view with viewport and css media query

Augie Fackler-2
In reply to this post by Martin von Zweigbergk via Mercurial-devel
(+pulkitg because it’s website-related)

> On Apr 1, 2021, at 9:14 PM, Heddi Nabbisen via Mercurial-devel <[hidden email]> wrote:
>
> # HG changeset patch
> # User nabbisen <[hidden email]>
> # Date 1617325695 -32400
> #      Fri Apr 02 10:08:15 2021 +0900
> # Node ID f269688339206a9f7c85fb089cd9adb9c8215a92
> # Parent  5284da57c604bc5a36ac74b36001ce3d6e0be1d3
> improve mobile view with viewport and css media query
>
> diff -r 5284da57c604 -r f26968833920 static/css/styles.css
> --- a/static/css/styles.css Mon Oct 26 14:55:33 2020 +0100
> +++ b/static/css/styles.css Fri Apr 02 10:08:15 2021 +0900
> @@ -205,3 +205,20 @@
> .wrap {
>     white-space: pre-wrap;
> }
> +
> +/** todo: 876px? */
> +@media (max-width: 876px) {
> +    body { width: 100vw; padding: 0; margin: 0; }
> +    
> +    .row { padding: 0.3rem 0.7rem; }
> +    .col { float: unset; display: block; width: 100%; padding: 0.3rem 0.7rem; margin: 0; }
> +    .big { float: unset; width: 100%; }
> +
> +    #nav { position: static; width: 100vw; height: auto; padding: 0.3rem 0; line-height: 1.25em; }
> +
> +    #content { padding: 0.4rem 0.2rem; }
> +    #content .table-of-contents { font-size: 100%; }
> +    #content .table-of-contents li { line-height: 2.4em; }
> +
> +    pre, .output { overflow-x: auto; }
> +}
> diff -r 5284da57c604 -r f26968833920 templates/base.html
> --- a/templates/base.html Mon Oct 26 14:55:33 2020 +0100
> +++ b/templates/base.html Fri Apr 02 10:08:15 2021 +0900
> @@ -1,8 +1,9 @@
> -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> -       "http://www.w3.org/TR/html4/loose.dtd">
> -<html>
> +<!DOCTYPE html>
> +<html lang="en">
>     <head>
> -        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> +        <meta charset="utf-8">
> +        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
> +        
>         <link href="{{ url_for('static', filename='css/styles.css') }}" type="text/css" rel="stylesheet">
>         <script type="text/javascript" src="{{ url_for('static', filename='js/common.js') }}"></script>
>         <script type="text/javascript" src="{{ url_for('static', filename='sources.js') }}"></script>
> _______________________________________________
> Mercurial-devel mailing list
> [hidden email]
> https://www.mercurial-scm.org/mailman/listinfo/mercurial-devel

_______________________________________________
Mercurial-devel mailing list
[hidden email]
https://www.mercurial-scm.org/mailman/listinfo/mercurial-devel