Ticket Forms as Tiles instead of Drop Down

Answered

Posted Apr 29, 2020

Hello - I'm looking to set up our Ticket Forms as "tiles" on the page instead of a drop-selection. So instead of this image below:

We'd see each ticket form as a box on the screen, similar to how Categories appear on our Guide homepage like this

I am a super beginner in terms of JS/CSS, so I'd love to have specific code to copy. Thanks!

4 comments

Date

Abdul Qabiz (Diziana)

May 06, 2020

Hi Katie

It’s little tricky but doable. I will see if I can share a code snippet with you.

Cheers.

Abdul Qabiz
Team Diziana

Katie Holt

May 07, 2020

Thank you so much, Abdul! I really appreciate it!

Abdul Qabiz (Diziana)

May 09, 2020

Hi @...

You can do something like this:

New Request Page:

New Request Page with a selected Form:

The selected form's card will be shown as active (blue color), and the form's card will be moved to first position. This is to make it easy to understand and related. As you can see Ticket Form 3 was moved to be in first position. This can be removed from the code.

You can open new_request_page.hbs of your theme, take back up of existing code, and replace code in the template that with the code shared below.

I have inlined all the styles and scripts, and the html structure is based on what we have in Copenhagen; it should work fine, but if it doesn't you can tweak. This is a good start.

If it doesn't work in your theme, then you should only copy the code within the comments (as highlighted below) and put in respective places in your template.

<div class="container-divider"></div>
<div class="container">
  <nav class="sub-nav">
    {{breadcrumbs}}
    <div class="search-container">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
        <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
        <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
      </svg>
      {{search submit=false}}
    </div>
  </nav>

  <h1>
    {{t 'submit_a_request'}}
    <span class="follow-up-hint">
      {{follow_up}}
    </span>
  </h1>
 
  {{!-- Tiles Code Starts Here --}}
  <div class="paddingBlock">
    <div class="cards">
      {{#each ticket_forms}}
        <a href="{{url}}" title="{{display_name}}" class="card id-{{id}} card__link">
            <div class="card__item">
              <i class="card__image fa"></i>
              <h2 class="card__title" aria-label="{{display_name}} Form">{{display_name}}</h2>
            </div>
        </a>
      {{/each}}
    </div>
  </div>
  {{!-- Tiles Ends Starts Here --}}

  <div id="main-content" class="form">
    {{request_form}}
  </div>
</div>

{{!-- TILES CSS and JavaScript Code Starts --}}
<style>
  .request_ticket_form_id {
    display: none;
  }

  .paddingBlock {
    padding: 20px 0;
  }

  .cards {
    display: flex;
    flex-wrap: wrap;
  }

  .card {
    cursor: pointer;
    flex: 1 0 200px;
    width: 32%;
    margin: 1%;
    padding: 10px;
    height: 150px;
    text-align: center;
    background: {{settings.brand_color}};
    color: {{settings.brand_text_color}};
  }

  .card:nth-child(1) {
    margin-left: 0;
  }

  .card:hover {
    background: #1D76B3;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);
    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
  }

  .card:active, .card__active {
    background: #1D76B3;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);
    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
  }

  .card__item {
    display: flex;
    flex-direction: column;
  }

  .card__image {
    flex: 1;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .card__image::before {
    font-size: 50px;
    font-family: "copenhagen-icons";
    content: '\1f4c4';
    text-decoration: none;
  }

  .card__title {
    flex: 1;
    font-size: 1.20rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
    line-height: 30px;
    text-transform: uppercase;
  }

  .card__link:hover,
  .card__link:active,
  .card__link:focus {
    text-decoration: none;
  }

  .card__link {
    color: {{settings.brand_text_color}};
  }

  .hide {
    display: none;
  }
</style>
<script>
  var searchQuery = window.location.search
  if (searchQuery.indexOf('?ticket_form_id=') >= 0) {
    var ticketId = searchQuery.split('?ticket_form_id=')[1]
    console.log(ticketId)
    var activeForm = document.querySelector('.id-' + ticketId)
    activeForm.classList.add('card__active')
    var cards = document.querySelector('.cards').children
    cards.length > 1 && cards[0].before(activeForm)

  } else {
    document.querySelector('#main-content').classList.add('hide')
  }
</script>
{{!-- TILES CSS and JavaScript Code Ends here. --}}

DISCLAIMER. THIS CODE IS PROVIDED "AS IS" AND ANY EXPRESSED OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.

Thank you

Abdul Qabiz

Team Diziana