From 09368c2966b815614d698a258e63afb158be6b0c Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 21 Oct 2020 12:34:05 +0100
Subject: [PATCH] Changed card/plus menu layout from grid to rows

no issue

- with the addition of snippets the card menu contents height and potential label width are both growing considerably making the grid layout unworkable
---
 .../koenig-editor/addon/components/koenig-menu-content.hbs  | 4 ++--
 ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js     | 6 +++---
 ghost/admin/lib/koenig-editor/addon/options/cards.js        | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
index d6eba0958a..fad5e9ca7a 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
@@ -1,13 +1,13 @@
 {{#each @itemSections as |section sectionIndex|}}
     {{#if section.items}}
         {{#if (or (not section.developerExperiment) (enable-developer-experiments))}}
-            <div class="flex flex-column justify-center h5 {{unless (eq sectionIndex 0) "mt4"}} mb4 nl4 nr4 pl4 pr4 bg-whitegrey midlightgrey ttu f-supersmall fw4 tracked-3" style="min-width: calc(100% + 3.2rem);">
+            <div class="flex flex-column justify-center h5 {{unless (eq sectionIndex 0) "mt4"}} mb3 nl4 nr4 pl4 pr4 bg-whitegrey midlightgrey ttu f-supersmall fw4 tracked-3" style="min-width: calc(100% + 3.2rem);">
                 {{section.title}}
             </div>
             {{#each section.items as |item|}}
                 {{#if (or (not item.developerExperiment) (enable-developer-experiments))}}
                     <div class="{{if (eq item @selectedItem) "kg-cardmenu-card-selected"}} {{kg-style "cardmenu-card"}}" {{on "click" (fn @itemClicked item)}} data-kg="cardmenu-card" role="menuitem">
-                        <div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w8 h8"}}</div>
+                        <div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w6 h6"}}</div>
                         <div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
                     </div>
                 {{/if}}
diff --git a/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js b/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js
index 2ee89ad46b..0fecba723a 100644
--- a/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js
+++ b/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js
@@ -9,11 +9,11 @@ export function kgStyle([style], options) {
     switch (style) {
     // Card menu
     case 'cardmenu':
-        cssClass = 'koenig-cardmenu absolute top-0 flex flex-wrap justify-start mt0 mr0 mb5 ml0 pa4 overflow-y-auto bg-white br3 shadow-3 ttn f7 normal';
+        cssClass = 'koenig-cardmenu absolute top-0 flex flex-column mt0 mr0 mb3 ml0 pa4 overflow-y-auto bg-white br3 shadow-3 ttn f7 normal';
         break;
 
     case 'cardmenu-card':
-        cssClass = 'flex flex-column justify-center items-center w20 h19 br3 midgrey ba b--transparent hover-darkgrey kg-cardmenu-card-hover pt1 anim-fast';
+        cssClass = 'flex items-center h19 br3 midgrey ba b--transparent hover-darkgrey kg-cardmenu-card-hover pt1 anim-fast';
         break;
 
     case 'cardmenu-icon':
@@ -21,7 +21,7 @@ export function kgStyle([style], options) {
         break;
 
     case 'cardmenu-label':
-        cssClass = 'f-supersmall tracked-1 fw3 ma0 mt1';
+        cssClass = 'f-supersmall tracked-1 fw3 ma0 ml2';
         break;
 
     // Container cards
diff --git a/ghost/admin/lib/koenig-editor/addon/options/cards.js b/ghost/admin/lib/koenig-editor/addon/options/cards.js
index 4bd835e4d6..40f22d395c 100644
--- a/ghost/admin/lib/koenig-editor/addon/options/cards.js
+++ b/ghost/admin/lib/koenig-editor/addon/options/cards.js
@@ -48,7 +48,7 @@ export default [
 export const CARD_MENU = [
     {
         title: 'Primary',
-        rowLength: 3,
+        rowLength: 1,
         items: [{
             label: 'Image',
             icon: 'koenig/kg-card-type-image',
@@ -111,7 +111,7 @@ export const CARD_MENU = [
     },
     {
         title: 'Embed',
-        rowLength: 3,
+        rowLength: 1,
         items: [{
             label: 'YouTube',
             icon: 'koenig/kg-card-type-youtube',