0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00

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
This commit is contained in:
Kevin Ansfield 2020-10-21 12:34:05 +01:00
parent 489f45155d
commit 09368c2966
3 changed files with 7 additions and 7 deletions

View file

@ -1,13 +1,13 @@
{{#each @itemSections as |section sectionIndex|}} {{#each @itemSections as |section sectionIndex|}}
{{#if section.items}} {{#if section.items}}
{{#if (or (not section.developerExperiment) (enable-developer-experiments))}} {{#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}} {{section.title}}
</div> </div>
{{#each section.items as |item|}} {{#each section.items as |item|}}
{{#if (or (not item.developerExperiment) (enable-developer-experiments))}} {{#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="{{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 class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
</div> </div>
{{/if}} {{/if}}

View file

@ -9,11 +9,11 @@ export function kgStyle([style], options) {
switch (style) { switch (style) {
// Card menu // Card menu
case 'cardmenu': 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; break;
case 'cardmenu-card': 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; break;
case 'cardmenu-icon': case 'cardmenu-icon':
@ -21,7 +21,7 @@ export function kgStyle([style], options) {
break; break;
case 'cardmenu-label': case 'cardmenu-label':
cssClass = 'f-supersmall tracked-1 fw3 ma0 mt1'; cssClass = 'f-supersmall tracked-1 fw3 ma0 ml2';
break; break;
// Container cards // Container cards

View file

@ -48,7 +48,7 @@ export default [
export const CARD_MENU = [ export const CARD_MENU = [
{ {
title: 'Primary', title: 'Primary',
rowLength: 3, rowLength: 1,
items: [{ items: [{
label: 'Image', label: 'Image',
icon: 'koenig/kg-card-type-image', icon: 'koenig/kg-card-type-image',
@ -111,7 +111,7 @@ export const CARD_MENU = [
}, },
{ {
title: 'Embed', title: 'Embed',
rowLength: 3, rowLength: 1,
items: [{ items: [{
label: 'YouTube', label: 'YouTube',
icon: 'koenig/kg-card-type-youtube', icon: 'koenig/kg-card-type-youtube',