Minimal Gallery App

[GarethYoung1]

Robert Scheitlin, GISP‌

ESRI UK Technical Support‌

I have downloaded and started to configure the minimal gallery app for our business purposes (this will be hosted on our own web server):

GitHub - Esri/minimal-gallery: The Minimal Gallery is a simple way to display maps and apps in a gal... 

I have a queries on how I can change the card element to show the item description (e.g.):

Thanks

[RobertScheitlin__GISP]

Gareth,

   I am not a type script developer but here is what I made work:

application\widgets\panels\Panel.js (line 6 and 20).

define(["require", "exports", "esri/widgets/support/widget"], function (require, exports, widget_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.default = function (props) {
        var author = props.config.showAuthor ? (widget_1.tsx("p", { class: "font-size--1 card-last hug-bottom", key: props.item.title + "-author" }, props.item.owner)) : null;
        var desc = props.config.showDesc ? (widget_1.tsx("p", { class: "font-size--1 card-desc", title: props.item.snippet }, props.item.snippet)) : null;
        var PanelBaseComponent = {
            captionOpacity: 1,
            captionTransform: 0,
            render: function () {
                var caption = props.config.showItemType ? (widget_1.tsx("div", { class: "card-image-caption", style: "\n                        opacity: " + PanelBaseComponent.captionOpacity + ";\n                        transform: translate(0, " + PanelBaseComponent.captionTransform + "%);\n                        background-color: " + convertHex(props.captionColor, 80) + ";\n                        color: " + props.config.captionTextColor + "\n                    " }, props.item.displayName)) : null;
                return (widget_1.tsx("div", { class: "card block trailer-1 animate-fade-in card-fade", style: "background-color: " + props.config.cardColor + ";", key: props.item.title + "-div" },
                    widget_1.tsx("figure", { class: "card-image-wrap" },
                        widget_1.tsx("a", { title: props.i18n.ui.galleryTip, role: "link", tabindex: "0", onkeypress: handleKeyPress },
                            widget_1.tsx("img", { class: "card-image clickable thumbnail-min", img: true, src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", alt: props.item.title, onmouseover: handleMouseOver, onmouseleave: handleMouseOut, onclick: props.itemClickHandler, style: "\n                                    background-image: url(" + props.item.thumbnailUrl + ");\n                                    background-repeat: no-repeat;\n                                    background-size: cover;\n                                " })),
                        caption),
                    widget_1.tsx("div", { class: "card-content", style: "color: " + props.config.fontColor },
                        widget_1.tsx("a", { title: props.i18n.ui.galleryTip, style: "color: " + props.config.linkColor },
                            widget_1.tsx("h5", { tabindex: "0", class: "clickable", onclick: props.itemClickHandler }, props.item.title)),
                        desc,
                        author,
                        widget_1.tsx("div", { class: "open-out-container" },
                            widget_1.tsx("a", { class: "open-out-icon btn btn-transparent icon-ui-description", title: props.extItem, href: props.extLink, style: "color: " + props.config.buttonBgColor, key: props.item.title + "-info-icon" }),
                            widget_1.tsx("a", { class: "open-out-icon btn btn-transparent icon-ui-maximize", title: props.extTitle, href: props.maxLink, style: "color: " + props.config.buttonBgColor, key: props.item.title + "-open-out-icon" })))));
            }
        };
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Add these css rules to bundle.css

.card-desc {
  position: relative;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  overflow: hidden;
  max-height: 3.6em;
  word-wrap: break-word;
  line-height: 1.2em !important; }

.card-desc:after {
  content: '...';
  position: absolute;
  right: 15px;
  bottom: 0;
}

.card-desc:before {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 15px;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
  top: 2.4em;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP · Accepted solution]

I forgot you have to add this to the application.json

"showDesc": true,‍