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|}}
|
{{#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}}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Add table
Reference in a new issue