⚡ Lay out language menu in two columns

ct-js · May 5, 2020 · a4d50ec · a4d50ec
1 parent 9b8bde9
commit a4d50ec
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/riotTags/main-menu.tag b/src/riotTags/main-menu.tag
@@ -101,7 +101,8 @@ main-menu.flexcol
         };
 
         const languageSubmenu = {
-            items: []
+            items: [],
+            columns: 2
         };
         const recentProjectsSubmenu = {
             items: []

diff --git a/src/riotTags/shared/context-menu.tag b/src/riotTags/shared/context-menu.tag
@@ -5,7 +5,8 @@
         Expects a following structure:
         {
             opened: boolean, // mutable by a context-menu instance
-            items: Array<IMenuItem>
+            items: Array<IMenuItem>,
+            columns: number
         }
         IMenuItem is:
         {
@@ -27,7 +28,7 @@
     @method open
     @method close
 
-context-menu(class="{opened: opts.menu.opened}" ref="root")
+context-menu(class="{opened: opts.menu.opened}" ref="root" style="{opts.menu.columns? 'columns: '+opts.menu.columns+';' : ''}")
     a(
         each="{item in opts.menu.items}"
         href="javascript: void 0;"

diff --git a/src/styl/tags/shared/context-menu.styl b/src/styl/tags/shared/context-menu.styl
@@ -30,6 +30,7 @@ context-menu
         left 100%
         top 0
     a, context-menu a
+        break-inside avoid
         color text
         {trans}
         &:first-child