peterstockings/bloodpressure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make navbar menu work on mobile

Browse Source
This commit is contained in:
Peter Stockings
2024-12-26 00:25:04 +11:00
parent 95dbe23ca8
commit 83c4ff7a7a
2 changed files with 37 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/static/css/tailwind.css
View File

@@ -1243,6 +1243,16 @@ video {
background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
} }
.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:text-blue-800:hover { .hover\:text-blue-800:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity, 1)); color: rgb(30 64 175 / var(--tw-text-opacity, 1));
@@ -1353,6 +1363,10 @@ video {
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.lg\:inline-block {
display: inline-block;
}
.lg\:flex { .lg\:flex {
display: flex; display: flex;
} }
@@ -1369,6 +1383,18 @@ video {
align-items: center; align-items: center;
} }
.lg\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.lg\:pt-0 { .lg\:pt-0 {
padding-top: 0px; padding-top: 0px;
} }

22
app/templates/_layout.html
View File

@@ -14,10 +14,11 @@
<body class="bg-gray-100 text-gray-800"> <body class="bg-gray-100 text-gray-800">
<nav class="flex items-center justify-between flex-wrap p-6 fixed w-full z-10 top-0" x-data="{ isOpen: false }" <nav class="flex items-center justify-between flex-wrap p-6 fixed w-full z-10 top-0" x-data="{ isOpen: false }"
@keydown.escape="isOpen = false" :class="{ 'shadow-lg bg-indigo-900' : isOpen , 'bg-gray-800' : !isOpen}"> @keydown.escape="isOpen = false" @click.away="isOpen = false"
:class="{ 'shadow-lg bg-indigo-900' : isOpen , 'bg-gray-800' : !isOpen}">
<!--Logo etc--> <!--Logo etc-->
<div class="flex items-center flex-shrink-0 text-white mr-6"> <div class="flex items-center flex-shrink-0 text-white mr-6">
<a class="text-white no-underline hover:text-white hover:no-underline" href="#"> <a class="text-white no-underline hover:text-white hover:no-underline" href="/">
<span class="text-2xl pl-2"><i class="em em-grinning"></i> Blood Pressure</span> <span class="text-2xl pl-2"><i class="em em-grinning"></i> Blood Pressure</span>
</a> </a>
</div> </div>
@@ -36,8 +37,7 @@
<!--Menu--> <!--Menu-->
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto" <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
:class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }" @click.away="isOpen = false" :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }" x-show.transition="true">
x-show.transition="true">
<ul class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center"> <ul class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center">
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<li class="mr-3"> <li class="mr-3">
@@ -46,7 +46,7 @@
text-white text-white
{% else %} {% else %}
text-gray-600 hover:text-gray-200 hover:text-underline text-gray-600 hover:text-gray-200 hover:text-underline
{% endif %}" href="{{ url_for('main.dashboard') }}" @click="isOpen = false">Dashboard {% endif %}" href="{{ url_for('main.dashboard') }}">Dashboard
</a> </a>
</li> </li>
<li class="mr-3"> <li class="mr-3">
@@ -55,12 +55,12 @@
text-white text-white
{% else %} {% else %}
text-gray-600 hover:text-gray-200 hover:text-underline text-gray-600 hover:text-gray-200 hover:text-underline
{% endif %}" href="{{ url_for('main.manage_data') }}" @click="isOpen = false">Data {% endif %}" href="{{ url_for('main.manage_data') }}">Data
</a> </a>
</li> </li>
<li class="mr-3"> <li class="mr-3">
<a class="flex items-center gap-2 text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" <a class="flex items-center gap-2 text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
href="{{ url_for('user.profile') }}" @click="isOpen = false"> href="{{ url_for('user.profile') }}">
{% if current_user.profile and current_user.profile.profile_pic %} {% if current_user.profile and current_user.profile.profile_pic %}
<img src="{{ url_for('user.profile_image', user_id=current_user.id) }}" alt="Profile Picture" <img src="{{ url_for('user.profile_image', user_id=current_user.id) }}" alt="Profile Picture"
class="w-8 h-8 rounded-full border-2 border-white object-cover group-hover:scale-105 transition"> class="w-8 h-8 rounded-full border-2 border-white object-cover group-hover:scale-105 transition">
@@ -75,7 +75,7 @@
</svg> </svg>
</div> </div>
{% endif %} {% endif %}
<span class="hidden sm:inline text-sm font-medium group-hover:underline <span class=" text-sm font-medium group-hover:underline
{% if request.path == url_for('user.profile') %} {% if request.path == url_for('user.profile') %}
text-white text-white
{% else %} {% else %}
@@ -89,7 +89,7 @@
text-white text-white
{% else %} {% else %}
text-gray-600 hover:text-gray-200 hover:text-underline text-gray-600 hover:text-gray-200 hover:text-underline
{% endif %}" href="{{ url_for('auth.logout') }}" @click="isOpen = false">Logout {% endif %}" href="{{ url_for('auth.logout') }}">Logout
</a> </a>
</li> </li>
{% else %} {% else %}
@@ -99,7 +99,7 @@
text-white text-white
{% else %} {% else %}
text-gray-600 hover:text-gray-200 hover:text-underline text-gray-600 hover:text-gray-200 hover:text-underline
{% endif %}" href="{{ url_for('auth.login') }}" @click="isOpen = false">Login {% endif %}" href="{{ url_for('auth.login') }}">Login
</a> </a>
</li> </li>
<li class="mr-3"> <li class="mr-3">
@@ -108,7 +108,7 @@
text-white text-white
{% else %} {% else %}
text-gray-600 hover:text-gray-200 hover:text-underline text-gray-600 hover:text-gray-200 hover:text-underline
{% endif %}" href="{{ url_for('auth.signup') }}" @click="isOpen = false">Signup {% endif %}" href="{{ url_for('auth.signup') }}">Signup
</a> </a>
</li> </li>
{% endif %} {% endif %}