refactor mod zone - closes lichess-org/tavern#114

app/views/irwin.scala

@@ -74,7 +74,7 @@ object irwin {
     }
 
   def report(report: lila.irwin.IrwinReport.WithPovs)(implicit ctx: Context): Frag =
-    div(id := "mz_irwin", cls := "mz-section")(
+    div(cls := "mz-section mz-section--irwin", dataRel := "irwin")(
       header(
         a(cls := "title", href := routes.Irwin.dashboard)(
           img(src := assetUrl("images/icons/brain.blue.svg")),

app/views/user/mod.scala

@@ -16,7 +16,8 @@ import lila.user.{ Holder, User }
 import lila.appeal.Appeal
 
 object mod {
-  private def mzSection(key: String) = div(id := s"mz_$key", cls := "mz-section")
+  private def mzSection(key: String) =
+    div(cls := s"mz-section mz-section--$key", dataRel := key, id := s"mz_$key")
 
   def menu =
     mzSection("menu")(
@@ -531,7 +532,7 @@ object mod {
       renderIp: RenderIp
   ): Tag = {
     import data._
-    div(cls := "mz-section mz_others")(
+    mzSection("others")(
       table(cls := "slist")(
         thead(
           tr(

ui/site/css/_appeal.scss

@@ -7,7 +7,7 @@
     }
   }
 
-  .mz_others {
+  .mz-section--others {
     margin-bottom: 3em;
   }
 

ui/site/css/mod/_communication.scss

@@ -121,7 +121,7 @@
     margin: 1em 0;
   }
 
-  > .mz_others {
+  > .mz-section--others {
     font-size: 0.9em;
     max-height: 30vh;
 

ui/site/css/mod/_inquiry.scss

@@ -1,5 +1,5 @@
 body,
-#mz_menu .inner {
+.mz-section--menu .inner {
   margin-top: 53px !important;
 }
 

ui/site/src/modUser.ts

@@ -16,7 +16,7 @@ lichess.load.then(() => {
       if (!e.data) return;
       const html = $('<output>').append($.parseHTML(e.data));
       html.find('.mz-section').each(function (this: HTMLElement) {
-        const prev = $('#' + this.id);
+        const prev = $zone.find(`.mz-section--${$(this).data('rel')}`);
         if (prev.length) prev.replaceWith($(this));
         else $zone.append($(this).clone());
       });
@@ -68,10 +68,10 @@ lichess.load.then(() => {
       });
     };
 
-    $('#mz_menu > a:not(.available)').each(function (this: HTMLAnchorElement) {
+    $('.mz-section--menu > a:not(.available)').each(function (this: HTMLAnchorElement) {
       $(this).toggleClass('available', !!$(getLocationHash(this)).length);
     });
-    makeReady('#mz_menu', el => {
+    makeReady('.mz-section--menu', el => {
       $(el)
         .find('a')
         .each(function (this: HTMLAnchorElement, i: number) {
@@ -91,7 +91,7 @@ lichess.load.then(() => {
       $(el).on('submit', () => {
         $(el).addClass('ready').find('input').prop('disabled', true);
         xhr.formToXhr(el).then(html => {
-          $('#mz_actions').replaceWith(html);
+          $zone.find('.mz-section--actions').replaceWith(html);
           userMod($inZone);
         });
         return false;
@@ -110,7 +110,7 @@ lichess.load.then(() => {
       })
     );
 
-    makeReady('.mz_others', el => {
+    makeReady('.mz-section--others', el => {
       $(el).height($(el).height());
       $(el)
         .find('.mark-alt')
@@ -121,10 +121,10 @@ lichess.load.then(() => {
           }
         });
     });
-    makeReady('.mz_others table', el => {
+    makeReady('.mz-section--others table', el => {
       tablesort(el, { descending: true });
     });
-    makeReady('#mz_identification .spy_filter', el => {
+    makeReady('.mz-section--identification .spy_filter', el => {
       $(el)
         .find('.button')
         .on('click', function (this: HTMLAnchorElement) {
@@ -136,10 +136,10 @@ lichess.load.then(() => {
       const valueOf = (el: HTMLTableRowElement) => $(el).find('td:first-child').text();
       const applyFilter = (v?: string) =>
         v
-          ? $inZone.find('.mz_others tbody tr').each(function (this: HTMLElement) {
+          ? $inZone.find('.mz-section--others tbody tr').each(function (this: HTMLElement) {
               $(this).toggleClass('none', !($(this).data('tags') || '').includes(v));
             })
-          : $inZone.find('.mz_others tbody tr.none').removeClass('none');
+          : $inZone.find('.mz-section--others tbody tr.none').removeClass('none');
       $(el)
         .find('tr')
         .on('click', function (this: HTMLTableRowElement) {
@@ -155,15 +155,15 @@ lichess.load.then(() => {
       $(el).on('mouseleave', () => !selected && applyFilter());
     });
     makeReady(
-      '#mz_identification .slist--sort',
+      '.mz-section--identification .slist--sort',
       el => {
         tablesort(el, { descending: true });
       },
       'ready-sort'
     );
-    makeReady('.mz_others .more-others', el => {
+    makeReady('.mz-section--others .more-others', el => {
       $(el)
-        .addClass('.ready')
+        .addClass('ready')
         .on('click', () => {
           nbOthers = 1000;
           reloadZone();