Web Windows Metro Controls je nyní plně responzivní

Rozhodl jsem se trochu oživit WindowsMetroControls, kde jsem v češtině popsal používání jednotlivých controlů v metro W8 aplikacích. Myslím že to bylo pro W8 a ne W8.1 takže už to je dost staré. Hlavně ale šlo o to, aby to bylo konečně responzivní, aby Google označil celý můj web jako „optimalizován pro mobily“..i když to bych musel dát pryč ty Dart programy, jenže nevím kde, mám jen blog a 1 hosting.

Na problém jsem narazil hned na začátku, ty útržky kódu měli nastavené zvýraznění přímo jako html tagy, a prohlížeč/javascript už pak nedělal nic. Jako zvýrazňovač jsem nově použil https://highlightjs.org/ . Ukázka starého kódu s natvrdo vloženými HTML tagy:

XML

<span class="title">Grid</span>
<span class="attribute">x:Name</span>
=
<span class="value">"columnGrid"</span>
<span class="attribute">Background</span>
=
<span class="value">"Black"</span>
<span class="attribute">Width</span>
=
<span class="value">"900"</span>
<span class="attribute">Height</span>
=
<span class="value">"200"</span>
<br>
<span class="tag">
    <span class="title">RichTextBlock</span>
    <span class="attribute">x:Name</span>
    =
    <span class="value">"rtb1"</span>
    <span class="tag">class="title">RichTextBlock</span>
    <br>
    <span class="tag">
        </
<span class="title">
        Grid
    </span>

Nyní ten samý kód vypadá takto: <pre><code><Grid x:Name=“columnGrid“ Background=“Black“ Width=“900″ Height=“200″> <RichTextBlock x:Name=“rtb1″></RichTextBlock> </Grid></code></pre> Starý kód na tento nový mi vytvořil tento:

foreach (var item in htmlFiles)
{
    HtmlParser hd = new HtmlParser();
    string text = File.ReadAllText(item);
    //text = text.Replace(" <", " <").Replace(">", ">");
    text = text.Replace("> < <", ">&lt2; <").Replace(">> <", ">&gt2; <");
    hd.LoadHtml(" <wmc>" + text.Replace(" <", "&lt2;").Replace(">", "&gt2;") + " </wmc>");
    List<HtmlNode> dd = hd.ReturnTagsRek(hd.DocumentNode, "pre");
    foreach (HtmlNode item2 in dd)
    {
        HtmlParser hd2 = new HtmlParser();
        //.Replace("> < <", "> < <")
        //
        //.Replace(" <span>", "").Replace(" </span>", "")
        var item3 = item2.InnerHtml.Replace(" <", "&lt2;").Replace(">", "&gt2;");
        string ddWoHtml = " <code>" + HtmlHelper.StripAllTags(item3) + " </code>";
        item2.InnerHtml = ddWoHtml;
    }
    string nfn = item.Replace("html2", "html");
    if (File.Exists(nfn))
    {
        File.Delete(nfn);
    }
    string nl = Environment.NewLine;
    string p1 = SH.ReplaceAll(hd.DocumentNode.InnerHtml.Replace("&lt2;", " <").Replace("&gt2;", ">"), nl, "  ");
    string p2 = SH.ReplaceAll(p1, nl, nl + nl);
    string[] l = SH.GetLines(p2);
    l = CA.RemoveStringsEmpty2(l);
    File.WriteAllLines(nfn, l);
} </HtmlNode>

A tohle je všechno. Jediný problém je že se mi odstranilo odsazení, ale jinak to nešlo, takže někdy budu muset použít nějaký XAML/C# formatter, ať mi ho tam vrátí. Hlavně že to už bude responzivní. Windows Phone:

Android:

Chrome na Windows, po staru:

Chrome na WIndows, nový vzhled:

A Google Webmaster Tools souhlasí:

👻 RIP – tenhle server nepřežil ani vlastní hosting.

Napsat komentář Zrušit odpověď na komentář