Latest Contributions by KlaraSchmitt

That is not an ArcGIS Hub Site. It's a WordPress site. It simply has the word 'hub' in its name. Based on their code, it looks like they are using an auto-play video embed, which as I have previously explained, we do not support. If you wish to see how a site is operating or want to compare it to your own, you can right-click the webpage and then select Inspect to open up the source code for HTML and CSS. ... View more

If you have a row set to layout: box, the max width of the row is 1170px with 15px of padding on either side. If you are using layout: wide, then the max width of the row will be the width of the viewport (browser) minus 15px of padding on either side. But the grid is responsive, so if you adjust your viewport, then the grid will resize, which will shrink the row width and possibly the application width depending on how you have your application configured. If you have used HTML to force a 400px width on the application card, then you may see no changes. If you are using an application card with a spacer card, then the application card may grow smaller to maintain an ~50% layout. If you are using an application card and the spacer card is hidden on mobile, then the application card will expand to fill the full-width of the row and will be the size of the viewport. ... View more

I would recommend using media queries to target the different viewport sizes straight from within the style tags in your HTML code. The structure would be something like: #navbar { /* general CSS rules here */  @media (max-width: 560px) {   /* mobile breakpoint - add CSS overrides */  }  @media (max-width: 768px) {   /* tablet breakpoint - add CSS overrides */ } } You have two ways of writing media queries. I'm using max-width, which means I have the desktop viewport CSS set first and then overrides for mobile and tablet. You can also use min-width if you are starting from a mobile first general CSS bucket. ... View more

No. If you have it autoplay, it's longer than 5 seconds. Gifs also technically require play / pause / hide controls when autoplaying or lasting longer than 5 seconds, which is why you don't see them frequency used in Hub either. ... View more

We do not support moving backgrounds in Hub as it goes against WCAG (Web Content Accessibility Guidelines). All moving content that lasts longer than five seconds requires controls to pause, stop, or hide the content and we do not have those types of controls for background images. https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html In addition, automatically moving content can be detrimental for those with vestibular disorders, which is why we don't even support auto-playing videos embedded through our video card. ... View more

You could take a look at this site and try to duplicate their floating button: https://alohachallenge.hawaii.gov/ ... View more

We only rely on it for advanced DIY functionality. You can build a Hub site without code. This is an improvement from when I first started and you had to use markdown to build your whole site layout. Many of the features that used to require code in the early days of our site builder are now represented by actual layout cards and can be filled out through form fields. People do make some really nice sites using HTML & CSS, but that could be done with or without Hub. It is more related to their knowledge of HTML & CSS. I don't know off the top of my head if ESRI offers that type of training, but there are a lot of free resources on the web for learning the basics of HTML & CSS. I like https://css-tricks.com/guides/  If you look for the csstricks tag on some of my posts, I've published several posts with code snippets for some types of stylized cards and if you want basic components like buttons, we're starting to transition to the Calcite framework. (My one caveat about using these is that they are something called web components, which won't mean much to you at the moment. But in a nutshell, web components are easy to get up-and-running because they have a bunch of built in configurations, but they are very hard to style visually because they don't support CSS overwrites.) While we do use Bootstrap for our grid, it isn't really necessary to know, because the drag and drop editor can be used with grids and cards to automatically handle reflow. If you want a more thorough explanation of how the grid works, I give an overview of it in this post: 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 with a link to the Bootstrap documentation. You will not be able to do javascript within our application, because while our app is built using lot of javascript, embedding third party javascript is a security risk, so we don't allow it. ... View more

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. ... View more

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. ... View more

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. ... View more

@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. ... View more

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. ... View more

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. ... View more