1
0
mirror of https://github.com/muety/wakapi.git synced 2023-08-10 21:12:56 +03:00

refactor(wip): redesign settings page

This commit is contained in:
Ferdinand Mütsch
2021-12-16 12:39:41 +01:00
parent 4e7322c985
commit 7b7fa8bdf3
15 changed files with 695 additions and 654 deletions

View File

@@ -1,4 +1,5 @@
<script src="assets/app.js"></script>
<script src="assets/vendor/iconify.basic.min.js"></script>
<script src="assets/vendor/seedrandom.min.js"></script>
<script src="assets/vendor/chart.min.js"></script>
<script src="assets/icons.js"></script>
<script src="assets/icons.js"></script>

View File

@@ -17,4 +17,5 @@
<link href="assets/vendor/tailwind.dist.css" rel="stylesheet">
{{ end }}
<link href="assets/app.css" rel="stylesheet">
<script src="assets/vendor/petite-vue.min.js" defer></script>
</head>

View File

@@ -12,7 +12,7 @@
<main class="mt-10 flex-grow flex justify-center w-full">
<div class="flex-grow max-w-lg mt-10">
<div class="mb-8">
<h1 class="font-semibold text-2xl text-white m-0">Welcome!</h1>
<h1 class="font-semibold text-3xl text-white m-0">Welcome!</h1>
<span class="text-gray-600">Log in to continue using Wakapi</span>
</div>
<form action="login" method="post">

View File

@@ -3,10 +3,10 @@
{{ template "logo.tpl.html" }}
</div>
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer">
<a class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer" href="summary">
<span class="iconify inline text-2xl text-gray-400" data-icon="ic:round-dashboard"></span>
<a class="text-gray-300" href="summary">Dashboard</a>
</div>
<span class="text-gray-300">Dashboard</span>
</a>
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-not-allowed">
<span class="iconify inline text-2xl text-gray-700" data-icon="bi:people-fill"></span>
@@ -32,7 +32,7 @@
<div class="hidden flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-12 w-full" id="resources-menu-dropdown">
<div class="flex-grow flex flex-col">
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/muety/wakapi" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/muety/wakapi" target="_blank" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
<span class="text-sm">GitHub</span>
<span class="iconify inline" data-icon="codicon:github-inverted"></span>
</a>
@@ -44,13 +44,13 @@
</a>
</div>
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://wakatime.com" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://wakatime.com" target="_blank" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
<span class="text-sm">WakaTime</span>
<span class="iconify inline" data-icon="simple-icons:wakatime"></span>
</a>
</div>
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/sponsors/muety" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/sponsors/muety" target="_blank" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
<span class="text-sm">Donate</span>
<span class="iconify inline" data-icon="bx:bxs-heart"></span>
</a>
@@ -59,10 +59,10 @@
</div>
</div>
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer">
<a class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer" href="settings">
<span class="iconify inline text-2xl text-gray-400" data-icon="ci:settings-filled"></span>
<a class="text-gray-400" href="settings">Settings</a>
</div>
<span class="text-gray-400">Settings</span>
</a>
<div class="flex-grow"></div>

File diff suppressed because it is too large Load Diff

View File

@@ -12,7 +12,7 @@
<main class="mt-10 flex-grow flex justify-center w-full">
<div class="flex-grow max-w-lg mt-10">
<div class="mb-8">
<h1 class="font-semibold text-2xl text-white m-0 mb-2">Sign up to Wakapi</h1>
<h1 class="font-semibold text-3xl text-white m-0 mb-2">Sign up to Wakapi</h1>
<p class="text-sm text-gray-600">
Welcome to Wakapi! Your first step is to create an account.
Afterwards, make sure to set up the <a href="https://wakatime.com" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-gray-400">WakaTime</a> client tools.

View File

@@ -7,6 +7,8 @@
{{ template "menu-main.tpl.html" . }}
{{ template "alerts.tpl.html" . }}
{{ if .User.HasData }}
<div class="flex justify-end mt-12 relative">
@@ -46,8 +48,6 @@
{{ end }}
{{ template "alerts.tpl.html" . }}
<main class="flex flex-col items-center mt-10 flex-grow">
{{ if .User.HasData }}
@@ -161,7 +161,7 @@
<div class="p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col" id="label-container" style="height: 300px">
<div class="flex justify-between text-lg">
<span class="font-semibold whitespace-no-wrap">Labels</span>
<a href="settings#details-labels" class="ml-4 h-8 inline flex-grow">
<a href="settings#data" class="ml-4 inline p-2 hover:bg-gray-800 rounded" style="margin-top: -5px">
<span class="iconify inline" data-icon="twemoji:gear"></span>
</a>
<div class="flex justify-end flex-1 text-xs items-center">
@@ -182,12 +182,12 @@
<div class="pb-4">
<img src="assets/images/welcome.svg" width="200px" alt="User welcome illustration">
</div>
<h1 class="font-semibold text-2xl text-white m-0 w-full">Welcome to Wakapi!</h1>
<h1 class="font-semibold text-3xl text-white m-0 w-full">Welcome to Wakapi!</h1>
<p>
It looks like there is no data available for the specified time range.<br>If you logged in to Wakapi for the first time, see the setup instructions below on how to get started.
</p>
<div class="w-full pt-10 flex flex-col space-y-4">
<h1 class="font-semibold text-2xl text-white m-0 mb-2">Setup Instructions</h1>
<h1 class="font-semibold text-3xl text-white m-0 mb-2">Setup Instructions</h1>
<div class="w-full bg-gray-850 text-left rounded-md py-4 px-8 text-xs font-mono shadow-md">
# <strong>Step 1:</strong> Download WakaTime plugin for your IDE<br>
# See: https://wakatime.com/plugins<br><br>
@@ -238,8 +238,6 @@
}
</script>
<script src="assets/app.js"></script>
</body>
</html>