ourworld_web/www_freeflownation
20
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

mobile header fix

Browse Source
This commit is contained in:
timurgordon 2022-02-28 13:59:07 +03:00
parent c75f09391d
commit ae3ca6b2a5
1 changed files with 20 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
templates/partials/header.html
View File

@ -173,76 +173,48 @@
From: "opacity-100 scale-100" From: "opacity-100 scale-100"
To: "opacity-0 scale-95" To: "opacity-0 scale-95"
--> -->
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden"> <div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden">
<div> <div>
<div class="shadow-xs bg-white divide-y-2 divide-gray-50"> <div class="shadow-xs bg-white divide-y-2 divide-gray-50">
<div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8"> <div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
<nav class="flex flex-col justify-around">
<nav class="flex flex-col justify-around pb-12">
{% for header_item in header_items %} {% for header_item in header_items %}
{% if not loop.first %} {% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %} {% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %} {% set header_label = header_arr[0] %}
{% if '<a' in header_label %} {% if '<a' in header_label %}
{% set link_label = header_label | striptags %} {% set link_label = header_label | striptags %}
{% set link_path = header_label | split(pat="%22") | safe%} {% set link_path = header_label | split(pat="%22") | safe%}
<a href="{{link_path[1]}}" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0"> <a href="{{link_path[1]}}" class="text-3xl leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 m-4 transition ease-in-out duration-150 mt-0">
{{link_label}} {{link_label}}
</a> </a>
{% else %} {% else %}
<div class="relative">
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %} {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" --> <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
<button type="button" id="{{button_id}}" class="text-gray-500 group inline-flex items-center space-x-2 text-sm leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <button type="button" id="{{button_id}}" class="flex flex-col items-start text-left text-gray-500 group inline-flex space-x-2 text-3xl m-4 leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<span>{{ header_label }}</span> <span>{{ header_label }}</span>
<!-- <!--
Heroicon name: chevron-down Heroicon name: chevron-down
Item active: "text-gray-600", Item inactive: "text-gray-400" Item active: "text-gray-600", Item inactive: "text-gray-400"
--> -->
</button> {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
</div> <div id="{{menu_id}}" class="z-50 leading-3 mt-6 inset-x-0 text-sm transform hidden ease-in opacity-0 -translate-y-1">
{% set header_menu = header_arr[1] %} {{ header_arr[1] | safe }}
</div>
<nav> </button>
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
<div id="{{menu_id}}" class="z-50 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 absolute inset-x-0 transform shadow-lg md:backdrop-blur lg:backdrop-blur xl:backdrop-blur hidden ease-in opacity-0 -translate-y-1">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:py-12">
{{header_menu | safe }}
</div>
</div>
</div>
</nav>
{% endif %} {% endif %}
{% if header_arr[1] %}
{% endif %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</nav> </nav>
</div> </div>
{% for header_item in header_items %}
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
{% set header_menu = header_arr[1] %}
<nav>
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
<div id="{{menu_id}}" class="z-50 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 absolute inset-x-0 transform shadow-lg md:backdrop-blur lg:backdrop-blur xl:backdrop-blur hidden ease-in opacity-0 -translate-y-1">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:py-12">
{{header_menu | safe }}
</div>
</div>
</div>
</nav>
{% endif %}
{% endfor %}
</div> </div>
</div> </div>