diff --git a/webapp/src/components/gallery/gallery.tsx b/webapp/src/components/gallery/gallery.tsx index 939bc5cfd..f9ada8e84 100644 --- a/webapp/src/components/gallery/gallery.tsx +++ b/webapp/src/components/gallery/gallery.tsx @@ -20,6 +20,7 @@ type Props = { const Gallery = (props: Props): JSX.Element => { const {boardTree} = props const {cards} = boardTree + const visiblePropertyTemplates = boardTree.board.cardProperties.filter((template) => boardTree.activeView.visiblePropertyIds.includes(template.id)) const [cardTrees, setCardTrees] = useState<{[key: string]: CardTree | undefined}>({}) useCardListener( @@ -56,6 +57,7 @@ const Gallery = (props: Props): JSX.Element => { key={card.id + card.updateAt} cardTree={cardTree} showCard={props.showCard} + visiblePropertyTemplates={visiblePropertyTemplates} /> ) } diff --git a/webapp/src/components/gallery/galleryCard.scss b/webapp/src/components/gallery/galleryCard.scss index 6f062ff87..23b0820e4 100644 --- a/webapp/src/components/gallery/galleryCard.scss +++ b/webapp/src/components/gallery/galleryCard.scss @@ -2,7 +2,6 @@ border: 1px solid rgba(var(--body-color), 0.09); border-radius: var(--default-rad); width: 280px; - height: 200px; display: flex; flex-direction: column; margin-right: 10px; @@ -20,11 +19,15 @@ padding: 0 10px; font-size: 0.7em; opacity: 0.7; + max-height: 160px; + min-height: 160px; } .gallery-image { flex-grow: 1; overflow: hidden; + max-height: 160px; + min-height: 160px; .ImageElement { width: 100%; @@ -42,4 +45,14 @@ margin-right: 5px; } } + + .gallery-props { + flex-grow: 0; + margin: 0; + padding: 5px 10px; + overflow-wrap: anywhere; + .octo-icon { + margin-right: 5px; + } + } } diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx index 99991455c..c9d31afb9 100644 --- a/webapp/src/components/gallery/galleryCard.tsx +++ b/webapp/src/components/gallery/galleryCard.tsx @@ -3,22 +3,27 @@ import React from 'react' import {FormattedMessage} from 'react-intl' +import {IPropertyTemplate} from '../../blocks/board' import {CardTree} from '../../viewModel/cardTree' import {IContentBlock} from '../../blocks/contentBlock' import ImageElement from '../content/imageElement' import ContentElement from '../content/contentElement' +import PropertyValueElement from '../propertyValueElement' import './galleryCard.scss' type Props = { cardTree: CardTree showCard: (cardId: string) => void + visiblePropertyTemplates: IPropertyTemplate[] } const GalleryCard = React.memo((props: Props) => { const {cardTree} = props + const visiblePropertyTemplates = props.visiblePropertyTemplates || [] + let images: IContentBlock[] = [] images = cardTree.contents.filter((content) => content.type === 'image') @@ -51,6 +56,18 @@ const GalleryCard = React.memo((props: Props) => { />} + {visiblePropertyTemplates.length > 0 && +
+ {visiblePropertyTemplates.map((template) => ( + + ))} +
} ) }) diff --git a/webapp/src/components/viewHeader/viewHeader.tsx b/webapp/src/components/viewHeader/viewHeader.tsx index ca18b2ce6..e04d0d5cd 100644 --- a/webapp/src/components/viewHeader/viewHeader.tsx +++ b/webapp/src/components/viewHeader/viewHeader.tsx @@ -42,7 +42,7 @@ const ViewHeader = React.memo((props: Props) => { const {boardTree, showView} = props const {board, activeView} = boardTree - const withGroupBy = activeView.type === 'board' + const withGroupBy = activeView.viewType === 'board' const [viewTitle, setViewTitle] = useState(activeView.title)