Created
May 23, 2020 19:47
-
-
Save phirefly/445f217efe318f877656e42b1802caaf to your computer and use it in GitHub Desktop.
zindex-troubleshoot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<% @requests.each_with_index do |request, index| %> | |
<li class="border-t border-gray-200"> | |
<a href="#" class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"> | |
<div class="flex items-center px-4 py-4 sm:px-6"> | |
<div class="min-w-0 flex-1 flex items-center"> | |
<div class="flex-shrink-0"> | |
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" /> | |
</div> | |
<div class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4"> | |
<div> | |
<div class="text-sm leading-5 font-medium text-indigo-600 truncate"><%= request.user.friendly_name %></div> | |
<div class="mt-2 flex items-center text-sm leading-5 text-gray-500"> | |
<svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> | |
<path fill-rule="evenodd" d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" clip-rule="evenodd"/> | |
</svg> | |
<span class="truncate"><%= request.user.email %></span> | |
</div> | |
</div> | |
<div class="hidden md:block"> | |
<div> | |
<div class="text-sm leading-5 text-gray-900"> | |
Requested <a href="#"><%= request.thing.title %></a> on | |
<time datetime="2020-01-07">01/01/2020</time> | |
<p>Current status: <%= request.thing.status %></p> | |
</div> | |
<div class="mt-2 flex items-center text-sm leading-5 text-gray-500"> | |
<!-- BEGIN dropdown response --> | |
<div data-controller="dropdown" class="z-<%= 100-index %>"> | |
<div class="relative inline-block text-left"> | |
<div> | |
<span class="rounded-md shadow-sm"> | |
<button data-action="click->dropdown#toggle click@window->dropdown#hide" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"> | |
Actions | |
<svg class="-mr-1 ml-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20"> | |
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/> | |
</svg> | |
</button> | |
</span> | |
</div> | |
<!-- | |
Dropdown panel, show/hide based on dropdown state. | |
Entering: "transition ease-out duration-100" | |
From: "transform opacity-0 scale-95" | |
To: "transform opacity-100 scale-100" | |
Leaving: "transition ease-in duration-75" | |
From: "transform opacity-100 scale-100" | |
To: "transform opacity-0 scale-95" | |
--> | |
<div data-target="dropdown.menu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg hidden"> | |
<div class="rounded-md bg-white shadow-xs"> | |
<div class="py-1"> | |
<a id='btn-dropdown-accept' | |
data-reflex="click->DropdownReflex#accept" | |
data-status="<%= @status %>" | |
href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 | |
hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 | |
focus:text-gray-900">Accept</a> | |
<a id='btn-dropdown-decline' | |
data-reflex="click->DropdownReflex#decline" | |
data-status="<%= @status %>" | |
href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 | |
hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 | |
focus:text-gray-900">Decline</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- END dropdown response --> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div> | |
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> | |
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/> | |
</svg> | |
</div> | |
</div> | |
</a> | |
</li> | |
<% end %> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment