187 lines
9.8 KiB
Plaintext
187 lines
9.8 KiB
Plaintext
<!DOCTYPE html>
|
|
<html class="h-full bg-gray-100">
|
|
<head>
|
|
<title>Evocheck</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<%= csrf_meta_tags %>
|
|
<%= csp_meta_tag %>
|
|
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
|
|
|
|
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
|
|
<%= javascript_importmap_tags %>
|
|
</head>
|
|
|
|
<body class="h-full">
|
|
<div class="min-h-full">
|
|
<nav class="bg-white shadow-sm" data-controller="main-nav">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0 flex items-center">
|
|
<img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow">
|
|
<img class="hidden lg:block h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg" alt="Workflow">
|
|
</div>
|
|
<div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
|
|
<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
|
|
<%= render partial: "shared/main_menu",
|
|
locals: {
|
|
active_classes: "border-indigo-500 text-gray-900",
|
|
inactive_classes: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
|
|
common_classes: "inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
|
|
} %>
|
|
</div>
|
|
</div>
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center">
|
|
|
|
<!-- Profile dropdown -->
|
|
<div class="ml-3 relative">
|
|
<div>
|
|
<button type="button" class="bg-white flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="user-menu-button" data-action="click->main-nav#toggle_user_menu" data-main-nav-target="userButton" aria-controls="user-menu" aria-expanded="false" aria-haspopup="true">
|
|
<span class="sr-only">Open user menu</span>
|
|
<img class="h-8 w-8 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="">
|
|
</button>
|
|
</div>
|
|
|
|
<!--
|
|
Dropdown menu, show/hide based on menu state.
|
|
|
|
Entering: "transition ease-out duration-200"
|
|
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 id="user-menu" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" data-main-nav-target="userMenu" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
|
<%= render partial: "shared/user_menu",
|
|
locals: {
|
|
active_classes: "",
|
|
inactive_classes: "",
|
|
common_classes: "block px-4 py-2 text-sm text-gray-700 hover:text-gray-800 hover:bg-gray-100"
|
|
} %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="-mr-2 flex items-center sm:hidden">
|
|
<!-- Mobile menu button -->
|
|
<button type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" data-action="click->main-nav#toggle_mobile_menu" data-main-nav-target="mobileButton" aria-controls="mobile-menu" aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
<!--
|
|
Heroicon name: outline/menu
|
|
|
|
Menu open: "hidden", Menu closed: "block"
|
|
-->
|
|
<%= heroicon "menu", variant: :outline, options: { class: "block h-6 w-6", "data-main-nav-target": "mobileOpenButton" } %>
|
|
<!--
|
|
Heroicon name: outline/x
|
|
|
|
Menu open: "block", Menu closed: "hidden"
|
|
-->
|
|
<%= heroicon "x", variant: :outline, options: { class: "hidden h-6 w-6", "data-main-nav-target": "mobileCloseButton" } %>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu, show/hide based on menu state. -->
|
|
<div class="hidden sm:hidden" id="mobile-menu" data-main-nav-target="mobileMenu">
|
|
<div class="pt-2 pb-3 space-y-1">
|
|
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->
|
|
<%= render partial: "shared/main_menu",
|
|
locals: {
|
|
active_classes: "bg-indigo-50 border-indigo-500 text-indigo-700",
|
|
inactive_classes: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800",
|
|
common_classes: "block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
|
|
} %>
|
|
</div>
|
|
<div class="pt-4 pb-3 border-t border-gray-200">
|
|
<div class="flex items-center px-4">
|
|
<div class="flex-shrink-0">
|
|
<img class="h-10 w-10 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="ml-3">
|
|
<div class="text-base font-medium text-gray-800">Tom Cook 2</div>
|
|
<div class="text-sm font-medium text-gray-500">tom@example.com</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 space-y-1">
|
|
<%= render partial: "shared/user_menu",
|
|
locals: {
|
|
active_classes: "",
|
|
inactive_classes: "",
|
|
common_classes: "block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
|
|
} %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="py-10">
|
|
<header>
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h1 class="text-3xl font-bold leading-tight text-gray-900">
|
|
<%= yield :main_header %>
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<% if notice.present? %>
|
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
<div class="rounded-md bg-yellow-50 p-4" data-controller="notification" data-notification-target="notificationWrapper">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<%= heroicon "check-circle", variant: :solid, options: { class: "h-5 w-5 text-yellow-400" } %>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium text-yellow-800">
|
|
<%= notice %>
|
|
</p>
|
|
</div>
|
|
<div class="ml-auto pl-3">
|
|
<div class="-mx-1.5 -my-1.5">
|
|
<button type="button" class="inline-flex bg-yellow-50 rounded-md p-1.5 text-yellow-500 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-yellow-50 focus:ring-yellow-600" data-action="click->notification#dismiss">
|
|
<span class="sr-only">Dismiss</span>
|
|
<%= heroicon "x", variant: :solid, options: { class: "h-5 w-5" } %>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% if alert.present? %>
|
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
<div class="rounded-md bg-red-50 p-4" data-controller="notification" data-notification-target="notificationWrapper">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<%= heroicon "check-circle", variant: :solid, options: { class: "h-5 w-5 text-red-400" } %>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium text-red-800">
|
|
<%= alert %>
|
|
</p>
|
|
</div>
|
|
<div class="ml-auto pl-3">
|
|
<div class="-mx-1.5 -my-1.5">
|
|
<button type="button" class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600" data-action="click->notification#dismiss">
|
|
<span class="sr-only">Dismiss</span>
|
|
<%= heroicon "x", variant: :solid, options: { class: "h-5 w-5" } %>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= yield %>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<div>
|
|
<%= controller_name %>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |