mirror/wakapi
1
0
Fork 0
mirror of https://github.com/muety/wakapi.git synced 2023-08-10 21:12:56 +03:00
Code Issues Projects Releases Wiki Activity

Tailwind 3 & Footer alignment (#419)

Browse Source 
* ui: footer alignment
* chore: upgrade tailwind to v3
* fix: tailwind 3 class renames
* ui(fix): alias green to emerald for tailwind 3
This commit is contained in:
Steven Tang
2022-10-09 10:53:52 +11:00
committed by GitHub
parent bc99dc990a
commit fbae5f8757
18 changed files with 225 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
views/alerts.tpl.html
View File

@ -1,12 +1,12 @@
{{ if .Error }}
<div class="flex justify-center w-full">
<div class="p-4 font-semibold text-white text-sm bg-red-500 rounded mt-16 shadow flex-grow max-w-lg">
<div class="p-4 font-semibold text-white text-sm bg-red-500 rounded mt-16 shadow grow max-w-lg">
Error: {{ .Error | capitalize }}
</div>
</div>
{{ else if .Success }}
<div class="flex justify-center w-full">
<div class="p-4 font-semibold text-white text-sm bg-green-500 rounded mt-16 shadow flex-grow max-w-lg">
<div class="p-4 font-semibold text-white text-sm bg-green-500 rounded mt-16 shadow grow max-w-lg">
{{ .Success | capitalize }}
</div>
</div>

9
views/footer.tpl.html
View File

@ -1,10 +1,11 @@
<footer class="flex justify-between w-full text-center text-gray-500 text-xs mt-20">
<footer class="flex justify-between w-full text-gray-500 mt-20 items-center gap-x-4">
<div class="text-xs font-mono font-semibold">
{{ getVersion }} @ {{ getDbType }}
</div>
<div class="font-semibold text-sm hidden sm:inline-block">
Made with &nbsp; <span class="iconify inline" data-icon="bi:heart-fill"></span> &nbsp; by <a href="https://muetsch.io" class="text-gray-400 hover:text-gray-300">Ferdinand Mütsch</a> as <a
href="https://github.com/muety/wakapi" class="text-gray-400 hover:text-gray-300">open-source</a> software
<div class="font-semibold text-sm">
Made with &nbsp; <span class="iconify inline" data-icon="bi:heart-fill"></span>&nbsp; by
<a href="https://muetsch.io" class="text-gray-400 hover:text-gray-300">Ferdinand Mütsch</a> as
<a href="https://github.com/muety/wakapi" class="text-gray-400 hover:text-gray-300">open-source</a> software
</div>
<div class="text-sm">
<a href="imprint" class="font-semibold hover:text-gray-400">Imprint, Cookies & Data Privacy</a>

4
views/imprint.tpl.html
View File

@ -7,8 +7,8 @@
{{ template "header.tpl.html" . }}
<main class="mt-10 flex-grow flex w-full">
<div class="flex-grow max-w-4xl flex flex-col">
<main class="mt-10 grow flex w-full">
<div class="grow max-w-4xl flex flex-col">
<h1 class="h1">Imprint & Data Privacy</h1>
<p>
{{ htmlSafe .HtmlText }}

2
views/index.tpl.html
View File

@ -11,7 +11,7 @@
{{ template "login-btn.tpl.html" . }}
<main class="mt-10 px-4 md:px-10 lg:px-24 flex-grow flex justify-center w-full">
<main class="mt-10 px-4 md:px-10 lg:px-24 grow flex justify-center w-full">
<div class="flex flex-col text-white">
{{ if and .Newsbox .Newsbox.Text }}
<div class="mb-14 -mt-4 newsbox newsbox-{{ .Newsbox.Type }}">

4
views/leaderboard.tpl.html
View File

@ -18,8 +18,8 @@
{{ template "login-btn.tpl.html" . }}
{{ end }}
<main class="mt-10 flex-grow flex justify-center w-full" id="leaderboard-page">
<div class="flex flex-col flex-grow mt-10 max-available">
<main class="mt-10 grow flex justify-center w-full" id="leaderboard-page">
<div class="flex flex-col grow mt-10 max-available">
<h1 class="h1" style="margin-bottom: 0.5rem">Leaderboard</h1>
<p class="block text-sm text-gray-300 w-full lg:w-3/4 mb-8">

4
views/login.tpl.html
View File

@ -9,8 +9,8 @@
{{ template "alerts.tpl.html" . }}
<main class="mt-10 flex-grow flex justify-center w-full">
<div class="flex-grow max-w-lg mt-10">
<main class="mt-10 grow flex justify-center w-full">
<div class="grow max-w-lg mt-10">
<div class="mb-8">
<h1 class="h1">Welcome!</h1>
<span class="h1-subcaption">Log in to continue using Wakapi</span>

14
views/menu-main.tpl.html
View File

@ -1,7 +1,7 @@
<script type="module" src="assets/js/components/menu-main.js"></script>
<div class="flex justify-between space-x-4 items-center relative" id="main-menu" v-scope @vue:mounted="mounted">
<div class="mr-8 hidden lg:inline-block flex-shrink-0">
<div class="mr-8 hidden lg:inline-block shrink-0">
{{ template "logo.tpl.html" }}
</div>
@ -28,7 +28,7 @@
<span class="iconify inline text-xl text-gray-400" data-icon="akar-icons:chevron-down"></span>
<div v-cloak v-show="state.showDropdownResources" class="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" style="min-width: 128px">
<div class="flex-grow flex flex-col">
<div class="grow flex flex-col">
<div class="submenu-item">
<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" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
<span class="text-sm">GitHub</span>
@ -62,9 +62,9 @@
<span class="text-gray-400 hidden lg:inline-block">Settings</span>
</a>
<div class="flex-grow"></div>
<div class="grow"></div>
<div class="flex-shrink-0 menu-item relative" @click="state.showDropdownUser = !state.showDropdownUser" data-trigger-for="showDropdownUser">
<div class="shrink-0 menu-item relative" @click="state.showDropdownUser = !state.showDropdownUser" data-trigger-for="showDropdownUser">
<div class="hidden md:flex flex flex-col text-right">
<a class="text-gray-300">{{ .User.ID }}</a>
{{ if .User.Email }}
@ -78,7 +78,7 @@
{{ end }}
<div v-cloak v-show="state.showDropdownUser" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-16 w-full" id="user-menu-popup" style="min-width: 156px;">
<div class="flex-grow flex flex-col">
<div class="grow flex flex-col">
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<button class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" @click="state.showApiKey = true" data-trigger-for="showApiKey">
<span class="text-sm">Show API Key</span>
@ -86,7 +86,7 @@
</button>
</div>
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<form action="logout" method="post" class="flex-grow">
<form action="logout" method="post" class="grow">
<button type="submit" class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold">
<span class="text-sm">Logout</span>
<span class="iconify inline" data-icon="ls:logout"></span>
@ -98,7 +98,7 @@
</div>
<div v-cloak v-show="state.showApiKey" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup" id="api-key-popup">
<div class="flex-grow flex flex-col px-2">
<div class="grow flex flex-col px-2">
<span class="text-xxs text-gray-500 mx-1">API Key</span>
<input type="text" class="bg-transparent text-sm text-white mx-1 font-mono" id="api-key-container" readonly
value="{{ .ApiKey }}" style="min-width: 330px">

4
views/reset-password.tpl.html
View File

@ -9,8 +9,8 @@
{{ template "alerts.tpl.html" . }}
<main class="mt-10 flex-grow flex justify-center w-full">
<div class="flex-grow max-w-lg mt-10">
<main class="mt-10 grow flex justify-center w-full">
<div class="grow max-w-lg mt-10">
<div class="mb-8">
<h1 class="h1">Reset Password</h1>
<span class="h1-subcaption">

4
views/set-password.tpl.html
View File

@ -9,8 +9,8 @@
{{ template "alerts.tpl.html" . }}
<main class="mt-10 flex-grow flex justify-center w-full">
<div class="flex-grow max-w-lg mt-10">
<main class="mt-10 grow flex justify-center w-full">
<div class="grow max-w-lg mt-10">
<div class="mb-8">
<h1 class="h1">Choose a new password</h1>
<span class="h1-subcaption">You have requested to reset your password. Please choose a new one.</span>

42
views/settings.tpl.html
View File

@ -32,8 +32,8 @@
{{ template "alerts.tpl.html" . }}
<main class="mt-10 flex-grow flex justify-center w-full" v-scope @vue:mounted="mounted" id="settings-page">
<div class="flex flex-col flex-grow mt-10">
<main class="mt-10 grow flex justify-center w-full" v-scope @vue:mounted="mounted" id="settings-page">
<div class="flex flex-col grow mt-10">
<h1 class="font-semibold text-3xl text-white m-0 mb-4">Settings</h1>
<ul class="flex space-x-4 mb-16 text-gray-600">
@ -276,7 +276,7 @@
<div class="flex flex-col space-y-4">
<div class="flex items-center mt-2 w-full text-gray-500 text-sm space-x-4">
<select name="key" id="select-project"
class="select-default flex-grow">
class="select-default grow">
{{ range $i, $p := .Projects }}
<option value="{{ $p }}">{{ $p }}</option>
{{ end }}
@ -337,11 +337,11 @@
<input type="hidden" name="action" value="add_mapping">
<div class="flex items-center w-full text-gray-500 text-sm">
<span class="mr-2">When filename ends in</span>
<input class="select-default flex-grow"
<input class="select-default grow"
type="text" id="extension" style="width: 70px"
name="extension" placeholder=".py" minlength="1" required>
<span class="mx-2">change language to</span>
<input class="select-default flex-grow"
<input class="select-default grow"
type="text" id="language" style="width: 100px"
name="language" placeholder="Python" minlength="1" required>
<div class="flex justify-end ml-4">
@ -394,11 +394,11 @@
<input type="hidden" name="action" value="update_leaderboard">
<div class="flex space-x-8">
<div class="flex-grow">
<div class="grow">
<label class="font-semibold text-gray-300" for="share_projects">Participate in leaderboard</label>
</div>
<div>
<select autocomplete="off" id="enable_leaderboard" name="enable_leaderboard" class="select-default flex-grow">
<select autocomplete="off" id="enable_leaderboard" name="enable_leaderboard" class="select-default grow">
<option value="false" class="cursor-pointer" {{ if not .User.PublicLeaderboard }} selected {{ end }}>No
</option>
<option value="true" class="cursor-pointer" {{ if .User.PublicLeaderboard }} selected {{ end }}>Yes
@ -434,7 +434,7 @@
<input type="hidden" name="action" value="update_sharing">
<div class="flex space-x-8">
<div class="flex-grow">
<div class="grow">
<label class="font-semibold text-gray-300" for="max_days">Time Range</label>
<span class="block text-sm text-gray-600">(in days; 0 = not public, -1 = unlimited)</span>
</div>
@ -446,11 +446,11 @@
</div>
<div class="flex space-x-8">
<div class="flex-grow">
<div class="grow">
<label class="font-semibold text-gray-300" for="share_projects">Share Projects</label>
</div>
<div>
<select autocomplete="off" id="share_projects" name="share_projects" class="select-default flex-grow">
<select autocomplete="off" id="share_projects" name="share_projects" class="select-default grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareProjects }} selected {{ end }}>No
</option>
<option value="true" class="cursor-pointer" {{ if .User.ShareProjects }} selected {{ end }}>Yes
@ -460,11 +460,11 @@
</div>
<div class="flex space-x-8">
<div class="flex-grow">
<div class="grow">
<label class="font-semibold text-gray-300" for="share_languages">Share Languages</label>
</div>
<div>
<select autocomplete="off" id="share_languages" name="share_languages" class="select-default flex-grow">
<select autocomplete="off" id="share_languages" name="share_languages" class="select-default grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareLanguages }} selected {{ end }}>No
</option>
<option value="true" class="cursor-pointer" {{ if .User.ShareLanguages }} selected {{ end }}>Yes
@ -474,11 +474,11 @@
</div>
<div class="flex space-x-8">
<div class="flex-grow">
<div class="grow">
<label class="font-semibold text-gray-300" for="share_editors">Share Editors</label>
</div>
<div>
<select autocomplete="off" id="share_editors" name="share_editors" class="select-default flex-grow">
<select autocomplete="off" id="share_editors" name="share_editors" class="select-default grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareEditors }} selected {{ end }}>No
</option>
<option value="true" class="cursor-pointer" {{ if .User.ShareEditors }} selected {{ end }}>Yes
@ -488,11 +488,11 @@
</div>
<div class="flex space-x-8">
<div class="flex-grow">
<div class="grow">
<label class="font-semibold text-gray-300" for="share_oss">Share OS'</label>
</div>
<div>
<select autocomplete="off" id="share_oss" name="share_oss" class="select-default flex-grow">
<select autocomplete="off" id="share_oss" name="share_oss" class="select-default grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareOSs }} selected {{ end }}>No
</option>
<option value="true" class="cursor-pointer" {{ if .User.ShareOSs }} selected {{ end }}>Yes
@ -502,11 +502,11 @@
</div>
<div class="flex space-x-8">
<div class="flex-grow">
<div class="grow">
<label class="font-semibold text-gray-300" for="share_machines">Share Machines</label>
</div>
<div>
<select autocomplete="off" id="share_machines" name="share_machines" class="select-default flex-grow">
<select autocomplete="off" id="share_machines" name="share_machines" class="select-default grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareMachines }} selected {{ end }}>No
</option>
<option value="true" class="cursor-pointer" {{ if .User.ShareMachines }} selected {{ end }}>Yes
@ -516,11 +516,11 @@
</div>
<div class="flex space-x-8">
<div class="flex-grow">
<div class="grow">
<label class="font-semibold text-gray-300" for="share_labels">Share Project Labels</label>
</div>
<div>
<select autocomplete="off" id="share_labels" name="share_labels" class="select-default flex-grow">
<select autocomplete="off" id="share_labels" name="share_labels" class="select-default grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareLabels }} selected {{ end }}>No
</option>
<option value="true" class="cursor-pointer" {{ if .User.ShareLabels }} selected {{ end }}>Yes
@ -664,7 +664,7 @@
class="with-url-src-no-scheme" alt="Readme Stats Card">
</div>
<textarea
class="with-url-inner-no-scheme flex-shrink w-full font-mono text-xs appearance-none bg-gray-850 text-gray-500 outline-none rounded py-2 px-4 cursor-not-allowed mt-2"
class="with-url-inner-no-scheme shrink w-full font-mono text-xs appearance-none bg-gray-850 text-gray-500 outline-none rounded py-2 px-4 cursor-not-allowed mt-2"
rows="5" style="resize: none"
readonly>https://github-readme-stats.vercel.app/api/wakatime?username={{ .User.ID }}&api_domain=%s&bg_color=1A202C&title_color=2F855A&icon_color=2F855A&text_color=ffffff&custom_title=Wakapi%20Week%20Stats&layout=compact</textarea>
{{ end }}

4
views/signup.tpl.html
View File

@ -20,8 +20,8 @@
{{ template "alerts.tpl.html" . }}
<main class="mt-10 flex-grow flex justify-center w-full" id="signup-page">
<div class="flex-grow max-w-lg mt-10">
<main class="mt-10 grow flex justify-center w-full" id="signup-page">
<div class="grow max-w-lg mt-10">
<div class="mb-8">
<h1 class="h1">Sign up to Wakapi</h1>
<p class="h1-subcaption">

4
views/summary.tpl.html
View File

@ -16,7 +16,7 @@
{{ if .User.HasData }}
<div id="summary-page" class="flex-grow" v-scope>
<div id="summary-page" class="grow" v-scope>
<div class="flex justify-end mt-12 relative">
<div v-scope="TimePicker({
fromDate: '{{ .From | simpledate }}',
@ -27,7 +27,7 @@
{{ end }}
<main class="flex flex-col items-center mt-10 flex-grow">
<main class="flex flex-col items-center mt-10 grow">
{{ if .User.HasData }}

4
views/time-picker.tpl.html
View File

@ -1,12 +1,12 @@
<template id="time-picker-template">
<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 justify-end" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">
<span class="iconify inline text-2xl text-gray-400 flex-grow" data-icon="fa-regular:calendar-alt"></span>
<span class="iconify inline text-2xl text-gray-400 grow" data-icon="fa-regular:calendar-alt"></span>
<a v-cloak id="current-time-selection" class="text-gray-300 -mb-1">${timeSelection}</a>
<span class="iconify inline text-2xl text-gray-400" data-icon="akar-icons:chevron-down"></span>
</div>
<div v-cloak v-show="state.showDropdownTimepicker" class="z-10 absolute top-0 right-0 popup mt-12 w-40" id="time-picker-dropdown">
<div class="flex-grow flex flex-col flex bg-gray-850 shadow-md rounded w-40 p-1 ">
<div class="grow flex flex-col flex bg-gray-850 shadow-md rounded w-40 p-1 ">
<a id="time-option-today" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" :href="intervalLink('today')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Today</a>
<a id="time-option-yesterday" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" :href="intervalLink('yesterday')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Yesterday</a>
<a id="time-option-week" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" :href="intervalLink('week')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">This Week</a>