Latest Contributions by KlaraSchmitt

‎07-21-2023

Assuming you have the data in your catalog, you should be able to follow these steps https://doc.arcgis.com/en/hub/sites/insert-charts-tables-and-key-metrics.htm#ESRI_SECTION1_E1D799DC433941CA9A3669F4322880D3 to connect your data to the statistics summary card.

‎07-20-2023

Those are not flip cards. Those are non-dynamic KPI cards from this post: https://community.esri.com/t5/arcgis-hub-documents/tips-create-custom-cards-with-html/ta-p/920496 Flip cards are actually rather challenging to get right from a keyboard accessibility and focus management standpoint (we've tried), so it's unlikely you'd seen those in our editor. As for having a dynamically backed statistic card, we currently support this today with the statistic card in the layout editor. We are, however, working on some improvements to that card, which will give it a little appearance boost, amongst other requested features. You can expect to see these changes during Q3 this year.

‎07-05-2023

Hello @Ed_, Unfortunately, you would need to do something fairly complex to make seven images look good in a 12-column grid and you would likely need to have a sound understanding of css-grid, flex-box and/or media queries. I don't have much experience with css-grid and while I did try a quick implementation of your premise using flexbox on my own site, it did not look good when content was forced to wrap on smaller devices. Flexbox doesn't do wrapping automatically and I think even if I did provide you with baseline code, you wouldn't like the output. As you've stated that you aren't familiar with editing HTML, I think you would find it difficult to modify and I think you will have a better look if you use spacers. You may also try searching this forum for people who've done similar grid implementations and see if there's anything you want to try out.

‎06-27-2023

@Ed_ Yes, I understand it's not ideal. However, until we redo our grid structure, which is a large-scale effort that is in fact on our radar, we're limited in how we can handle card resizing and the total columns used by cards in a row must equal 12. And yes, if you do not wish to write HTML to achieve your desired affect in a single 12-column Text Card, I would advise the use of more spacers.

‎06-22-2023

Hello @Ed_, You are likely running into issues because you have 7 images and Hub uses a 12-column grid system to define our rows. At the moment you have 5 image cards that are each 2-columns wide (utilizing 10 columns) and that leaves you with only 2 spare columns of space, so each one of your remaining image cards can only be 1-column wide. You may want to consider stacking your images in two rows and adding spacers on either side.

‎05-26-2023

If you want to learn more about the grid system Hub currently uses, you can review the Bootstrap documentation here: https://bootstrapdocs.com/v3.0.3/docs/css/#grid The bootstrap grid is dependent on a 12 column grid structure, so you'll find it easier to have four 3-column cards. If you go for five cards, you'll have to have five 2-column cards offset by 1-column. You may find my explanation over on this thread helpful: https://community.esri.com/t5/arcgis-hub-questions/how-to-get-all-cards-in-a-text-box-to-dynamically/m-p/1169903/highlight/true#M5223. The columns are containers for the cards. I am not sure why your cards are shifting vertically. If I had to guess, it's because you're using HTML that may have some CSS supplied by Hub (accidentally) due to similar classes between the old calcite-web and the newer calcite design system. It is normal that the card height might be varied if you have different length titles (1 line vs 2) or descriptions, but spacing displaying above the card isn't reflective of that problem. You may also wish to reference this post if you need even height cards. However, this one starts to get into slightly more complicated CSS layouts that require a little familiarity with flexbox: https://community.esri.com/t5/arcgis-hub-questions/dynamically-positioning-a-card-button-based-on-the/m-p/1268793#M5612

‎05-25-2023

Hi Mark, Are you using this version of Calcite: https://developers.arcgis.com/calcite-design-system/components/card/ for your cards? Because I see some classes in your code (column-22 pre-1) that make me think you might be looking at the older calcite web framework. Hub is not built using that framework, we're still using Bootstrap 3 for our grid system (which is what generates that first div with the col-* classes you list), but we're beginning to incorporate the calcite components from the calcite design system linked above and you can use those same components in the Text Card in the HTML editor. However, you may see some differences as the components rely on slots to manage their configurations. Edit: I'd add that the other classes you mention: three-card contrast-safe-text are formatting that Hub uses to style the calcite card component if you are using the plus icon in the Text Card to inject these. The CSS related to these classes is primarily used for formatting the thumbnail, but there is a little bit related to font-sizes. In regards to you question about a halo effect, unfortunately, it is not possible at this time to add a drop-shadow to the calcite card itself because these components are web components. You might be able to wrap the card in a div and apply a box shadow to the div by a unique CSS class. You can use a box-shadow generator: https://www.cssmatic.com/box-shadow to generate your glow styles. You want horizontal and vertical length to be near 0 and blur to be 10-20.

‎05-24-2023

Hello Kreed, You can set a unique row class by clicking the edit pencil icon on the row card and then at the bottom of the Appearance accordion, find the Row CSS Class and give it a unique name that won't interfere with the app stylesheets. Row CSS Class field highlighted Then in your text card you can add embedded style tags that allow you to apply CSS to your cards using the row class as your first selector. <style> .my-custom-row-class .calcite-web { ... } </style> However, as I noted above, using a min-height doesn't really account for responsive resizing if your cards differ in amount of content, so you may need additional CSS such as media queries or flex-box (and if you're using flex-box, you want to take the Bootstrap col-* classes out of your code.)

‎03-16-2023

Hello @ShaunLakeAWE, I can help you a little bit with keeping the buttons at the bottom of the cards; however, you may still observe some height unbalance at the tablet viewport. Unfortunately, our grid system still relies on floats, so it's difficult to make cards maintain the same height when they are reflowing. Within the <style> tags, you want to add this: .card-content { justify-content: space-between; } This will evenly distribute available space between the <h4>, the <p>, and the <a> (button). If you prefer your headings and paragraph text to remain more top aligned, you can choose to wrap the <h4> and <p> tags in a <div> which will change the space distribution to being distributed between two elements: the div container and the button. Hopefully this gets you a little further in your goals.

‎03-02-2023

Hello @RandyMcGregor3, I understand the confusion and I apologize. Because the Gallery Cards always have a white background and we are trying to automatically handle accessibility contrast requirements for light link colors, we are running a function that darkens the color threshold based on its luminance. It is not perfect, but we are trying to account for a majority of use cases. It presently does result in gray for medium-level link colors that would fail contrast on a while background. Currently, the outline button on Gallery Cards uses a transparent background, but perhaps we can look at other options once the calcite upgrade has been integrated with our app. In the meantime, using the solid button would give you color and also ensure that the button passes color contrast requirements.

‎03-02-2023

Hello @BradCarone, I am sorry for the delay. I have not forgotten about you, but I wanted to make sure I gave you accurate guidance. If you're using Calcite buttons <calcite-button> with an href, you can use appearance="solid" to get a solid button using link-color or appearance="transparent" to get a transparent button using link-color. I might ask you to hold off on using appearance="outline". We are currently in the process of implementing an upgrade that will change how that particular style behaves and it should be finalized by the end of March. An example of this would be: <calcite-button href="#" appearance="solid">Button Text</calcite-button> If you need an outline button, I would suggest using Bootstrap for now (please see my update above for expected changes.) When using Bootstrap 3 classes on a link or a dropdown, you can use .btn-primary to get a solid button, .btn-default to get an outline button, or .btn-link to get a transparent button. An example of this would be: <a href="#" class="btn btn-primary">Button Text</a>

‎03-02-2023

Update We appreciated the community feedback on this change related to how theme is applied to buttons. Based on that feedback, we plan to replace the transparent background on the Bootstrap outline buttons using the .btn-default class with the site-background color (as they were before). This new change was carefully considered and will streamline conversion to calcite outline-fill buttons in the future. We expect it to be included in our next release.

‎02-27-2023

@ArmstKP Embedded styles within the Text Card are not contained to the Text Card; they will apply to the entire page if your selectors are generic. Our application uses a lot of the common HTML elements, so that is likely what is happening if you've attached styles to the button element. You can prevent this from happening by adding a unique class name to the row containing your Text Card and then referencing that row in your CSS to limit how the styles are applied. Example of generic selector usage button {background-color: blue; color: gray} Example of targeted selector using row class .uniqueRowClassName button {background-color: blue; color: gray}

‎02-27-2023

Do you have any custom CSS on your page in Text Cards or in your header that affects buttons or perhaps uses a !important? That looks like the result of custom CSS being applied to generic selectors without enough specificity.

‎02-13-2023

Layout enhancements We have received many enhancement requests for our layout editor. This includes requests for column layouts, text formatting, undo/redo, and the ability to embed cards in other sites. To lay the foundation for building these features, we are slowly transitioning parts of our application to a different framework (Calcite). While our goal is that this will have limited impact on your existing sites, we will need to tweak a few patterns. Update to theme One of these patterns that we will be changing is how theme is applied to buttons. Calcite uses fewer colors than Hub when it comes to calculating button styles. Our initial observations are that this can cause some accessibility contrast violations in transparent and hollow / outline buttons on themes that were previously accessible. To avoid this scenario without requiring customers to review each of their individual site themes, we are going to use the link color and the site (body) background color to generate all styles of buttons. We assume that those who are most concerned about accessible color palates will already have picked a contrast safe option for the link text used with their site background. Hub theme builder displaying body background, text, and link color pickers Moving forward, solid / filled buttons will be using link color for button background and site (body) background for button text. Hollow / outline buttons will be using link color for button border and button text and they will have a transparent background that permits the site (body) background color to come through. Filled button displaying link-color as background and two hollow buttons using link-color as border and text The proposed release date for these changes is 02-22-2023 and at that point we would also be removing the theme pickers for button background color and button text color. Outline buttons on rows Please see update posted on 03/02/2023. As a result of the new framework, outline / hollow buttons will be using a transparent background. This results in the link color / site background combo in most parts of the app. If you've set a unique row color on a Hub site or page, any outline or hollow buttons used within that row will display the row color as the button background. Consider reviewing these patterns for legibility and switching to a solid / filled button if preferred. Survey card set to color palette of theme and button style of hollow Gallery cards There is one additional pattern where changes may be noticeable. The site Gallery Card has a white background and in themes where the site background is dark, link color is likely to be a light color. A light link colored outline button on a white background becomes illegible. To account for this, we will automatically try to darken the link color for outline buttons when they are present on white backgrounds. The solid button will not be affected by this issue. Gallery card displaying darkened pink color for outline button We’re excited to bring you improvements to the layout editor in the coming months, enabled by our transition to a Calcite framework.

Online Status	Offline
Date Last Visited	2 weeks ago

My Ideas

Latest Contributions by KlaraSchmitt

Re: Hub site app usage and update flip cards

Re: Hub site app usage and update flip cards

Re: Resize image card in a row

Re: Resize image card in a row

Re: Resize image card in a row

Re: Using Calcite to Emulate our Drupel Web Site

Re: Using Calcite to Emulate our Drupel Web Site

Re: How to get all cards in a text box to dynamically display on 3 by row

Re: Dynamically positioning a card button based on the card height

Re: Update to Hub button theme colors

Re: Update to Hub button theme colors

Re: Update to Hub button theme colors

Re: Minor Issue: Explore Feeds and Manage Privacy at bottom of page

Re: Minor Issue: Explore Feeds and Manage Privacy at bottom of page

Update to Hub button theme colors

New accessibility documentation

Re: Dashboard selector color tied to element focus...

Automated accessibility scanning and the Shadow DO...

Re: WCAG AA accessible polygon colors

Re: Menu Button Text Disappeared