Commit c4ca6ebb authored by Srishti Bankar's avatar Srishti Bankar Committed by Chris Wells
Browse files

Issue #3282709 by srishtiiee: The sort dropdown should be a <select> element

parent 18813160

images/down-arrow.svg

deleted100644 → 0
+0 −3
Original line number Diff line number Diff line 
<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">

<path d="M1.5 0.749999L6 5.25L10.5 0.75" stroke="#232429" stroke-width="2"/>

</svg>

sveltejs/public/build/bundle.css

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/public/build/bundle.js

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/public/build/bundle.js.map

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/src/Search.svelte

+22 −95
Original line number Diff line number Diff line
@@ -41,7 +41,7 @@ 
  export let index = -1;

  export let text = '';

  export let direction = 'DESC';

  export let sort = 'usage_total';

  export let sort;



  export let labels = {

    placeholder: Drupal.t('Module Name, Keyword(s), etc.'),
@@ -365,37 +365,23 @@ 
      {/if}

    </div>



    <div class="grid--2">

      <button type="button" class="btn"> {Drupal.t('Sort')}</button>

      <div class="dropdown">

        <!-- @todo This should not be a button element, no action is triggered

                when it is clicked. -->

        <button type="button" class="btn btn-down">

          <img

            src="/{drupalSettings.project_browser

              .module_path}/images/down-arrow.svg"

            alt=""

          />

          <span class="visually-hidden">{Drupal.t('Sort by')}</span>

        </button>

        <!-- @todo This should be a select element, that is semantically what it does. -->

        <div class="dropdown-content">

          <ul id="pb-sort">

            {#each sortOptions as opt}

              <li

                value={opt.id}

                on:click={() => {

                  sort = opt.id;

                  onSort();

                }}

                class:selected={sort === opt.id}

    <div>

      <label for="pb-sort" class="visually-hidden"

        >{Drupal.t('Choose sorting order')}</label

      >

      <select

        name="pb-sort"

        id="pb-sort"

        bind:value={sort}

        on:change={onSort}

        class="form-select form-element form-element--type-select"

      >

        {#each sortOptions as opt}

          <option value={opt.id}>

            {opt.text}

              </li>

          </option>

        {/each}

          </ul>

        </div>

      </div>

      </select>

    </div>

  </div>

</form>
@@ -508,70 +494,11 @@ 
    align-items: center;

  }



  .grid--2 {

    width: 130px;

  }



  .btn {

    color: black;

    padding: 16px;

    font-size: 16px;

  select {

    border: none;

    outline: none;

    background: #d3d4d9;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

    border-radius: 2px;

  }



  .dropdown {

    position: absolute;

    display: inline-block;

  }



  .dropdown-content {

    display: none;

    position: absolute;

    background-color: #ffffff;

    min-width: 160px;

    z-index: 1;

    left: auto;

    right: 0;

    border: 1px solid #dedfe4;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    border-radius: 2px;

  }



  .dropdown-content li {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

  }



  .dropdown-content li:hover {

    background-color: #f3f4f9;

  }



  .dropdown:hover .dropdown-content {

    display: block;

  }



  .btn-down:hover,

  .dropdown:hover .btn-down {

    background-color: #6b707e;

  }



  .btn-down {

    border-left: 1px solid #ffffff;

  }



  ul {

    padding: 0;

    margin: 0;

  }



  .selected {

    background-color: #f3f4f9;

    background-color: #d3d4d9;

    width: 152px;

    margin-right: 20px;

  }



  button {