/lag UI

app/views/site/help.scala

@@ -1,7 +1,4 @@
-package views
-package html.site
-
-import play.twirl.api.Html
+package views.html.site
 
 import lila.api.Context
 import lila.app.templating.Environment._
@@ -90,8 +87,8 @@ src="https://lichess.org/embed/MPJcy1JW?theme=auto&bg=auto"
   def layout(
     title: String,
     active: String,
-    moreCss: Html = emptyHtml,
-    moreJs: Html = emptyHtml
+    moreCss: Frag = emptyFrag,
+    moreJs: Frag = emptyFrag
   )(body: Frag)(implicit ctx: Context) = views.html.base.layout(
     title = title,
     moreCss = moreCss,
@@ -100,23 +97,24 @@ src="https://lichess.org/embed/MPJcy1JW?theme=auto&bg=auto"
   ) {
     val sep = div(cls := "sep")
     val external = frag(" ", i(dataIcon := "0"))
+    def activeCls(c: String) = cls := active.activeO(c)
     main(cls := "page-menu")(
       st.nav(cls := "page-menu__menu subnav")(
-        a(cls := active.activeO("about"), href := routes.Page.about)(trans.aboutX.frag("lichess.org")),
-        a(cls := active.activeO("contact"), href := routes.Main.contact)(trans.contact.frag()),
-        a(cls := active.activeO("tos"), href := routes.Page.tos)(trans.termsOfService.frag()),
-        a(cls := active.activeO("privacy"), href := routes.Page.privacy)(trans.privacy.frag()),
-        a(cls := active.activeO("master"), href := routes.Page.master)("Title verification"),
+        a(activeCls("about"), href := routes.Page.about)(trans.aboutX.frag("lichess.org")),
+        a(activeCls("contact"), href := routes.Main.contact)(trans.contact.frag()),
+        a(activeCls("tos"), href := routes.Page.tos)(trans.termsOfService.frag()),
+        a(activeCls("privacy"), href := routes.Page.privacy)(trans.privacy.frag()),
+        a(activeCls("master"), href := routes.Page.master)("Title verification"),
         sep,
-        a(cls := active.activeO("help"), href := routes.Page.help)(trans.contribute.frag()),
-        a(cls := active.activeO("thanks"), href := routes.Page.thanks)(trans.thankYou.frag()),
+        a(activeCls("help"), href := routes.Page.help)(trans.contribute.frag()),
+        a(activeCls("thanks"), href := routes.Page.thanks)(trans.thankYou.frag()),
         sep,
-        a(cls := active.activeO("webmasters"), href := routes.Main.webmasters)(trans.webmasters.frag()),
-        a(cls := active.activeO("database"), href := "https://database.lichess.org")(trans.database.frag(), external),
-        a(cls := active.activeO("api"), href := "https://database.lichess.org")("API", external),
-        a(cls := active.activeO("source"), href := "https://github.com/ornicar/lila")("Source code", external),
+        a(activeCls("webmasters"), href := routes.Main.webmasters)(trans.webmasters.frag()),
+        a(activeCls("database"), href := "https://database.lichess.org")(trans.database.frag(), external),
+        a(activeCls("api"), href := "https://database.lichess.org")("API", external),
+        a(activeCls("source"), href := "https://github.com/ornicar/lila")("Source code", external),
         sep,
-        a(href := routes.Main.lag)("Is Lichess lagging?")
+        a(activeCls("lag"), href := routes.Main.lag)("Is Lichess lagging?")
       ),
       div(cls := "page-menu__content")(body)
     )

app/views/site/lag.scala.html

@@ -6,13 +6,13 @@
 @jsTag("lag.js")
 }
 
-@base.layout(
+@site.help.layout(
 title = "Is lichess lagging?",
-moreCss = cssTag("lag.css"),
+active = "lag",
+moreCss = responsiveCssTag("lag"),
 moreJs = moreJs) {
-
-<div class="content_box lag">
-  <h1 class="lichess_title">
+<main class="box box-pad lag">
+  <h1>
     Is lichess lagging?
     <span class="answer short">
       <span class="waiting">Measurements in progress...</span>

public/javascripts/lag.js

@@ -81,6 +81,8 @@ $(function() {
   var buildChart = function(opt) {
     return {
       chart: {
+        width: 350,
+        height: 350,
         type: 'gauge',
         plotBackgroundColor: null,
         plotBackgroundImage: null,

public/stylesheets/lag.css

@@ -1,38 +0,0 @@
-.lag {
-  overflow: hidden;
-}
-.lag .answer.long {
-  margin: 40px 0;
-  text-align: center;
-}
-.lag .sections {
-  overflow: hidden;
-}
-.lag section {
-  display: block;
-  float: left;
-  width: 50%;
-  box-sizing: border-box;
-}
-.lag p {
-  margin: 1em 0;
-}
-.lag h2 {
-  font-size: 1.4em;
-}
-.lag section h2 {
-  text-align: center;
-}
-.lag section .meter {
-  margin: -40px 0;
-}
-.lag section.server {
-  padding-right: 20px;
-  border-right: 2px solid rgba(127,127,127, 0.3);
-}
-.lag section.network {
-  padding-left: 20px;
-}
-.lag .last-word {
-  margin-top: 30px;
-}

ui/site/css/_lag.scss

@@ -0,0 +1,32 @@
+.lag {
+  h1 .answer {
+    display: block;
+    font-size: .7em;
+    margin-top: 1em;
+  }
+  .answer.long {
+    margin: 3em 0;
+    text-align: center;
+  }
+  .sections {
+    @extend %flex-between;
+  }
+  section {
+    @extend %flex-column;
+    flex: 0 1 45%;
+    align-items: center;
+    text-align: justify;
+  }
+  p {
+    margin: 1em 0;
+  }
+  h2 {
+    font-size: 1.5em;
+  }
+  .last-word {
+    margin-top: 3em;
+    h2 {
+      margin-top: 2em;
+    }
+  }
+}

ui/site/css/build/_lag.scss

@@ -0,0 +1,2 @@
+@import '../../../common/css/plugin';
+@import '../lag';

ui/site/css/build/lag.dark.scss

@@ -0,0 +1,2 @@
+@import '../../../common/css/theme/dark';
+@import 'lag';

ui/site/css/build/lag.light.scss

@@ -0,0 +1,2 @@
+@import '../../../common/css/theme/light';
+@import 'lag';

ui/site/css/build/lag.transp.scss

@@ -0,0 +1,2 @@
+@import '../../../common/css/theme/transp';
+@import 'lag';