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

Mon Apr 12 18:52:45 UTC 2021

(+pulkitg because it’s website-related)

> On Apr 1, 2021, at 9:14 PM, Heddi Nabbisen via Mercurial-devel <mercurial-devel at mercurial-scm.org> wrote:
> 
> # HG changeset patch
> # User nabbisen <nabbisen at scqr.net>
> # 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? */
> + at 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
> Mercurial-devel at mercurial-scm.org
> https://www.mercurial-scm.org/mailman/listinfo/mercurial-devel