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:
parent
489f45155d
commit
09368c2966
3 changed files with 7 additions and 7 deletions
|
@ -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}}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Add table
Reference in a new issue