Add layout for main page with top bar
This commit is contained in:
parent
3acafda0d3
commit
e31994a8cf
6 changed files with 1461 additions and 57 deletions
1277
static/main.css
1277
static/main.css
File diff suppressed because it is too large
Load diff
46
static/main.js
Normal file
46
static/main.js
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
let mobile_open_button = document.getElementById("mobile-menu-open-button");
|
||||||
|
let mobile_close_button = document.getElementById("mobile-menu-close-button");
|
||||||
|
let mobile_menu = document.getElementById("mobile-menu");
|
||||||
|
|
||||||
|
const profile_button = document.getElementById("profile-menu-button");
|
||||||
|
let profile_dropdown = document.getElementById("profile-dropdown");
|
||||||
|
|
||||||
|
function toggle_mobile_menu() {
|
||||||
|
|
||||||
|
if (mobile_open_button.classList.contains("block")) {
|
||||||
|
mobile_menu.classList.remove("hidden");
|
||||||
|
mobile_open_button.classList.remove("block");
|
||||||
|
mobile_open_button.classList.add("hidden");
|
||||||
|
mobile_close_button.classList.remove("hidden");
|
||||||
|
mobile_close_button.classList.add("block");
|
||||||
|
} else {
|
||||||
|
mobile_menu.classList.add("hidden");
|
||||||
|
mobile_close_button.classList.remove("block");
|
||||||
|
mobile_close_button.classList.add("hidden");
|
||||||
|
mobile_open_button.classList.remove("hidden");
|
||||||
|
mobile_open_button.classList.add("block");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggle_profile_dropdown() {
|
||||||
|
|
||||||
|
if (profile_dropdown.classList.contains("hidden")) {
|
||||||
|
profile_dropdown.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
profile_dropdown.classList.add("hidden");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hide_profile_dropdown() {
|
||||||
|
let profile_dropdown = document.getElementById("profile-dropdown");
|
||||||
|
|
||||||
|
if (!profile_dropdown.classList.contains("hidden")) {
|
||||||
|
profile_dropdown.classList.add("hidden");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("click", (event) => {
|
||||||
|
if (!profile_button.contains(event.target) && !profile_dropdown.contains(event.target)) {
|
||||||
|
profile_dropdown.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,9 +1,117 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" class="h-full bg-white">
|
||||||
{% include "head.html" %}
|
{% include "head.html" %}
|
||||||
<body>
|
<body class="h-full">
|
||||||
{% include "top_bar.html" %}
|
<!--
|
||||||
|
This example requires updating your template:
|
||||||
|
|
||||||
Hi there, {{ user.full_name }}!
|
```
|
||||||
|
<html class="h-full bg-gray-100">
|
||||||
|
<body class="h-full">
|
||||||
|
```
|
||||||
|
-->
|
||||||
|
<div class="min-h-full">
|
||||||
|
<nav class="bg-purple-200">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex h-16 items-center justify-between">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
👀
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<div class="ml-10 flex items-baseline space-x-4">
|
||||||
|
<!-- Current: "bg-purple-700 text-white", Default: "text-gray-700 hover:bg-purple-500 hover:bg-opacity-75" -->
|
||||||
|
<a href="#" class="bg-purple-700 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">Dashboard</a>
|
||||||
|
<a href="#" class="text-gray-700 hover:text-white hover:bg-purple-500 hover:bg-opacity-75 rounded-md px-3 py-2 text-sm font-medium">Placeholder</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<div class="ml-4 flex items-center md:ml-6">
|
||||||
|
<!-- Profile dropdown -->
|
||||||
|
<div class="relative ml-3">
|
||||||
|
<div>
|
||||||
|
<button type="button" class="relative flex max-w-xs items-center rounded-full bg-purple-600 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-purple-600" id="profile-menu-button" aria-expanded="false" aria-haspopup="true" onClick="toggle_profile_dropdown()">
|
||||||
|
<span class="absolute -inset-1.5"></span>
|
||||||
|
<span class="sr-only">Open user menu</span>
|
||||||
|
|
||||||
|
<!-- placeholder icon -->
|
||||||
|
<span class="inline-block h-6 w-6 overflow-hidden rounded-full bg-gray-200">
|
||||||
|
<svg class="h-full w-full text-gray-400" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" id="profile-dropdown">
|
||||||
|
|
||||||
|
<div class="ml-3">
|
||||||
|
<div class="text-base font-medium text-gray-600">{{ user.full_name }}</div>
|
||||||
|
<div class="text-sm font-medium text-gray-400">{{ user.email }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- Active: "bg-gray-100", Not Active: "" -->
|
||||||
|
<a href="/logout" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="-mr-2 flex md:hidden">
|
||||||
|
<!-- Mobile menu button -->
|
||||||
|
<button type="button" class="relative inline-flex items-center justify-center rounded-md bg-purple-600 p-2 text-purple-200 hover:bg-purple-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-purple-600" aria-controls="mobile-menu" aria-expanded="false" onClick="toggle_mobile_menu()">
|
||||||
|
<span class="absolute -inset-0.5"></span>
|
||||||
|
<span class="sr-only">Open main menu</span>
|
||||||
|
<!-- Menu open: "hidden", Menu closed: "block" -->
|
||||||
|
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" id="mobile-menu-open-button">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||||
|
</svg>
|
||||||
|
<!-- Menu open: "block", Menu closed: "hidden" -->
|
||||||
|
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" id="mobile-menu-close-button">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile menu, show/hide based on menu state. -->
|
||||||
|
<div class="md:hidden hidden" id="mobile-menu">
|
||||||
|
<div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
|
||||||
|
<!-- Current: "bg-purple-700 text-white", Default: "text-white hover:bg-purple-500 hover:bg-opacity-75" -->
|
||||||
|
<a href="#" class="bg-purple-700 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">Dashboard</a>
|
||||||
|
<a href="#" class="text-gray-700 hover:text-white hover:bg-purple-500 hover:bg-opacity-75 block rounded-md px-3 py-2 text-base font-medium">Placeholder</a>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-purple-700 pb-3 pt-4">
|
||||||
|
<div class="flex items-center px-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<!-- placeholder icon -->
|
||||||
|
<span class="inline-block h-6 w-6 overflow-hidden rounded-full bg-gray-200">
|
||||||
|
<svg class="h-full w-full text-gray-400" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<div class="text-base font-medium text-gray-600">{{ user.full_name }}</div>
|
||||||
|
<div class="text-sm font-medium text-gray-400">{{ user.email }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 space-y-1 px-2">
|
||||||
|
<a href="/logout" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-purple-500 hover:bg-opacity-75">Sign out</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
|
||||||
|
|
||||||
|
Hi there!
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="/static/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,50 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" class="h-full bg-purple-100">
|
||||||
{% include "head.html" %}
|
{% include "head.html" %}
|
||||||
<body class="min-h-screen bg-purple-100">
|
<body class="h-full">
|
||||||
<div class="h-full">
|
|
||||||
<div class="flex min-h-screen flex-1 flex-col justify-center py-12">
|
|
||||||
<div class="flex flex-1 flex-row justify-center grow-0">
|
|
||||||
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
|
|
||||||
<form method="post" class="">
|
|
||||||
<h1 class="text-xl">Sign In to Pique</h1>
|
|
||||||
|
|
||||||
{% if error %}
|
<div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||||
<p class="">{{ error }}</p>
|
<div class="sm:mx-auto sm:w-full sm:max-w-md">
|
||||||
{% endif %}
|
<h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to Pique</h2>
|
||||||
|
|
||||||
<div class="">
|
|
||||||
<label>Username</label>
|
|
||||||
<input type="text" name="username" placeholder="Username" value="{{ username }}" required>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
|
||||||
|
<div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
|
||||||
|
<form class="space-y-6" method="POST">
|
||||||
|
<div>
|
||||||
|
<label for="username" class="block text-sm font-medium leading-6 text-gray-900">Username</label>
|
||||||
<div class="">
|
<div class="">
|
||||||
<label>Password</label>
|
<input id="username" name="username" type="username" autocomplete="username" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6">
|
||||||
<input type="password" name="password" placeholder="Password" required>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
|
||||||
<div class="">
|
<div class="">
|
||||||
<input type="submit" value="Log In">
|
<input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-600">
|
||||||
|
<label for="remember-me" class="ml-3 block text-sm leading-6 text-gray-900">Remember me</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-sm leading-6">
|
||||||
|
<a href="#" class="font-semibold text-emerald-600 hover:text-emerald-500">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button type="submit" class="flex w-full justify-center rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600">Sign in</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
0
templates/sidebar.html
Normal file
0
templates/sidebar.html
Normal file
|
|
@ -1,8 +0,0 @@
|
||||||
<div class="nav dark">
|
|
||||||
<div class="nav-elem">
|
|
||||||
<a href="/">Pique</a>
|
|
||||||
</div>
|
|
||||||
<div class="nav-elem">
|
|
||||||
<a href="/logout">Logout</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in a new issue