hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-09-19 19:00:11 +00:00
Code Issues Projects Releases Wiki Activity

web: css adjustments

Browse Source 
tailwind classes define what "page-container" previously did, with some
changes. Logout button moved to top of screen.
This commit is contained in:
Harvey Tindall 2024-08-05 21:18:32 +01:00
parent b40211a6e0
commit 284312713c
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
11 changed files with 61 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/base.css
View File

@ -62,17 +62,6 @@ html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\
display: initial; display: initial;
} }
.page-container {
margin: 5% 20% 5% 20%;
}
@media (max-width: 1024px) {
.page-container {
margin: 2%;
margin-top: 5rem;
}
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
:root { :root {
font-size: 0.9rem; font-size: 0.9rem;

2
html/404.html
View File

@ -6,7 +6,7 @@
<title>404 - jfa-go</title> <title>404 - jfa-go</title>
</head> </head>
<body class="section"> <body class="section">
<div class="page-container"> <div class="page-container m-2 lg:my-20 lg:mx-64">
<div class="card"> <div class="card">
<h1 class="heading">Page not found.</h1> <h1 class="heading">Page not found.</h1>
<p class="content"> <p class="content">

98
html/admin.html
View File

@ -535,58 +535,56 @@
</form> </form>
</div> </div>
<div id="notification-box"></div> <div id="notification-box"></div>
<div class="top-[2%] left-[2%] lg:top-4 lg:left-4 absolute flex flex-row gap-2"> <div class="page-container m-2 lg:my-20 lg:mx-64 flex flex-col gap-4">
<span class="dropdown z-[11]" tabindex="0" id="lang-dropdown"> <div class="top-2 inset-x-2 lg:absolute flex flex-row justify-between">
<span class="button ~urge dropdown-button"> <div class="flex flex-row gap-2">
<i class="ri-global-line"></i> <span class="dropdown z-[11]" tabindex="0" id="lang-dropdown">
<span class="ml-2 chev"></span> <span class="button ~urge dropdown-button">
</span> <i class="ri-global-line"></i>
<div class="dropdown-display"> <span class="ml-2 chev"></span>
<div class="card ~neutral @low"> </span>
<label class="switch pb-4"> <div class="dropdown-display">
<input type="radio" name="lang-time" id="lang-12h"> <div class="card ~neutral @low">
<span>{{ .strings.time12h }}</span> <label class="switch pb-4">
</label> <input type="radio" name="lang-time" id="lang-12h">
<label class="switch pb-4"> <span>{{ .strings.time12h }}</span>
<input type="radio" name="lang-time" id="lang-24h"> </label>
<span>{{ .strings.time24h }}</span> <label class="switch pb-4">
</label> <input type="radio" name="lang-time" id="lang-24h">
<div id="lang-list"></div> <span>{{ .strings.time24h }}</span>
</div> </label>
<div id="lang-list"></div>
</div>
</div>
</span>
<span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
</div> </div>
</span> <div class="flex flex-row gap-2">
<span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span> <span class="button ~critical @low unfocused" id="logout-button">{{ .strings.logout }}</span>
</div> {{ if .userPageEnabled }}
{{ if .userPageEnabled }} <div class="">
<div class="top-[2%] lg:top-4 right-[2%] lg:right-4 absolute"> <a class="button ~info" href="{{ .urlBase }}/my/account"><i class="ri-account-circle-fill mr-2"></i>{{ .strings.myAccount }}</a>
<a class="button ~info" href="{{ .urlBase }}/my/account"><i class="ri-account-circle-fill mr-2"></i>{{ .strings.myAccount }}</a> </div>
</div> {{ end }}
{{ end }}
<div class="page-container">
<div class="mb-4">
<header>
<div class="flex flex-row overflow-x-scroll items-center">
<span id="button-tab-invites" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.invites }}</span>
<span id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.accounts }}</span>
<span id="button-tab-activity" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.activity }}</span>
<span id="button-tab-settings" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.settings }}</span>
</div>
</header>
</div>
<div class="mb-4">
<div>
<span class="button ~critical @low mb-4 unfocused" id="logout-button">{{ .strings.logout }}</span>
</div> </div>
</div> </div>
<div id="tab-invites"> <header>
<div class="card @low invites dark:~d_neutral mb-4 overflow-visible"> <div class="flex flex-row overflow-x-scroll items-center gap-2">
<span id="button-tab-invites" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.invites }}</span>
<span id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.accounts }}</span>
<span id="button-tab-activity" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.activity }}</span>
<span id="button-tab-settings" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.settings }}</span>
</div>
</header>
<div id="tab-invites" class="flex flex-col gap-4">
<div class="card @low dark:~d_neutral flex flex-col gap-2 overflow-visible invites">
<span class="heading">{{ .strings.invites }}</span> <span class="heading">{{ .strings.invites }}</span>
<div id="invites" class="mt-2"></div> <div id="invites"></div>
</div> </div>
<div class="card @low dark:~d_neutral"> <div class="card @low dark:~d_neutral flex flex-col gap-2">
<span class="heading">{{ .strings.create }}</span> <span class="heading">{{ .strings.create }}</span>
<div class="flex flex-col md:flex-row gap-3 mt-2" id="create-inv"> <div class="flex flex-col md:flex-row gap-3" id="create-inv">
<div class="card ~neutral @low flex flex-col gap-2 grow"> <div class="card ~neutral @low flex flex-col gap-2 flex-1">
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<label class="w-1/2"> <label class="w-1/2">
<input type="radio" name="duration" class="unfocused" id="radio-inv-duration" checked> <input type="radio" name="duration" class="unfocused" id="radio-inv-duration" checked>
@ -694,7 +692,7 @@
<input type="text" id="create-user-label" class="input ~neutral @low"> <input type="text" id="create-user-label" class="input ~neutral @low">
</div> </div>
</div> </div>
<div class="card ~neutral @low flex flex-col justify-between gap-2 grow"> <div class="card ~neutral @low flex flex-col justify-between gap-2 flex-1">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<label class="label supra" for="create-uses">{{ .strings.inviteNumberOfUses }}</label> <label class="label supra" for="create-uses">{{ .strings.inviteNumberOfUses }}</label>
@ -738,7 +736,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="tab-accounts" class="unfocused"> <div id="tab-accounts" class="flex flex-col gap-4 unfocused">
<div class="card @low dark:~d_neutral accounts mb-4 overflow-visible"> <div class="card @low dark:~d_neutral accounts mb-4 overflow-visible">
<div id="accounts-filter-dropdown" class="dropdown manual z-10 w-full"> <div id="accounts-filter-dropdown" class="dropdown manual z-10 w-full">
<div class="flex flex-col md:flex-row align-middle gap-2"> <div class="flex flex-col md:flex-row align-middle gap-2">
@ -837,7 +835,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="tab-activity" class="unfocused"> <div id="tab-activity" class="flex flex-col gap-4 unfocused">
<div class="card @low dark:~d_neutral activity mb-4 overflow-visible"> <div class="card @low dark:~d_neutral activity mb-4 overflow-visible">
<div id="activity-filter-dropdown" class="dropdown manual z-10 w-full" tabindex="0"> <div id="activity-filter-dropdown" class="dropdown manual z-10 w-full" tabindex="0">
<div class="flex flex-col md:flex-row align-middle gap-2"> <div class="flex flex-col md:flex-row align-middle gap-2">
@ -894,7 +892,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="tab-settings" class="unfocused"> <div id="tab-settings" class="flex flex-col gap-4 unfocused">
<div class="card @low dark:~d_neutral settings overflow flex flex-col gap-2"> <div class="card @low dark:~d_neutral settings overflow flex flex-col gap-2">
<div class="flex flex-col md:flex-row align-middle gap-2"> <div class="flex flex-col md:flex-row align-middle gap-2">
<div class="flex flex-row align-middle justify-between md:justify-normal"> <div class="flex flex-row align-middle justify-between md:justify-normal">

2
html/crash.html
View File

@ -6,7 +6,7 @@
<title>Crash report</title> <title>Crash report</title>
</head> </head>
<body> <body>
<div class="page-container"> <div class="page-container m-2 lg:my-20 lg:mx-64">
<div class="card ~critical sectioned"> <div class="card ~critical sectioned">
<section class="section ~critical"> <section class="section ~critical">
<span class="heading">Crash report for jfa-go</span> <span class="heading">Crash report for jfa-go</span>

2
html/create-success.html
View File

@ -6,7 +6,7 @@
<title>{{ .strings.successHeader }} - jfa-go</title> <title>{{ .strings.successHeader }} - jfa-go</title>
</head> </head>
<body class="section"> <body class="section">
<div class="page-container"> <div class="page-container m-2 lg:my-20 lg:mx-64">
<div class="card ~neutral @low mb-4"> <div class="card ~neutral @low mb-4">
<span class="heading mb-4">{{ .strings.successHeader }}</span> <span class="heading mb-4">{{ .strings.successHeader }}</span>
<p class="content my-4">{{ .successMessage }}</p> <p class="content my-4">{{ .successMessage }}</p>

4
html/form.html
View File

@ -35,7 +35,7 @@
</div> </div>
</div> </div>
{{ template "account-linking.html" . }} {{ template "account-linking.html" . }}
<div class="top-[2%] lg:top-4 left-[2%] lg:left-4 absolute"> <div class="top-2 left-2 absolute">
<span class="dropdown" tabindex="0" id="lang-dropdown"> <span class="dropdown" tabindex="0" id="lang-dropdown">
<span class="button ~urge dropdown-button"> <span class="button ~urge dropdown-button">
<i class="ri-global-line"></i> <i class="ri-global-line"></i>
@ -48,7 +48,7 @@
</span> </span>
</div> </div>
<div id="notification-box"></div> <div id="notification-box"></div>
<div class="page-container"> <div class="page-container m-2 lg:my-20 lg:mx-64">
<div class="card dark:~d_neutral @low"> <div class="card dark:~d_neutral @low">
<div class="flex flex-col md:flex-row gap-3 items-baseline mb-2"> <div class="flex flex-col md:flex-row gap-3 items-baseline mb-2">
<span class="heading mr-5"> <span class="heading mr-5">

2
html/invalidCode.html
View File

@ -6,7 +6,7 @@
<title>Invalid Code - jfa-go</title> <title>Invalid Code - jfa-go</title>
</head> </head>
<body class="section"> <body class="section">
<div class="page-container"> <div class="page-container m-2 lg:my-20 lg:mx-64">
<div class="card"> <div class="card">
<h1 class="text-3xl font-semibold">Invalid invite code.</h1> <h1 class="text-3xl font-semibold">Invalid invite code.</h1>
<p class="content">The code above was either incorrect, or has expired.</p> <p class="content">The code above was either incorrect, or has expired.</p>

2
html/password-reset.html
View File

@ -11,7 +11,7 @@
<span id="copy-notification" class="unfocused">{{ .strings.copied }}</span> <span id="copy-notification" class="unfocused">{{ .strings.copied }}</span>
</div> </div>
{{ end }} {{ end }}
<div class="page-container"> <div class="page-container m-2 lg:my-20 lg:mx-64">
<div class="card ~neutral @low mb-4"> <div class="card ~neutral @low mb-4">
<span class="heading mb-4"> <span class="heading mb-4">
{{ if .success }} {{ if .success }}

4
html/setup.html
View File

@ -7,7 +7,7 @@
</head> </head>
<body class="max-w-full overflow-x-hidden section"> <body class="max-w-full overflow-x-hidden section">
<div id="notification-box"></div> <div id="notification-box"></div>
<div class="top-[2%] lg:top-4 left-[2%] lg:left-4 absolute"> <div class="top-2 left-2 absolute">
<span class="dropdown" tabindex="0" id="lang-dropdown"> <span class="dropdown" tabindex="0" id="lang-dropdown">
<span class="button ~urge dropdown-button"> <span class="button ~urge dropdown-button">
<i class="ri-global-line"></i> <i class="ri-global-line"></i>
@ -19,7 +19,7 @@
</div> </div>
</span> </span>
</div> </div>
<div class="page-container" id="page-container"> <div class="page-container m-2 lg:my-20 lg:mx-64" id="page-container">
<div class="card ~neutral @low mb-2"> <div class="card ~neutral @low mb-2">
<div class="row"> <div class="row">
<img class="banner header" src="banner.svg" alt="jfa-go" /> <img class="banner header" src="banner.svg" alt="jfa-go" />

6
html/user.html
View File

@ -79,7 +79,7 @@
{{ template "login-modal.html" . }} {{ template "login-modal.html" . }}
{{ template "account-linking.html" . }} {{ template "account-linking.html" . }}
<div id="notification-box"></div> <div id="notification-box"></div>
<div class="top-[2%] lg:top-4 left-[2%] lg:left-4 absolute"> <div class="top-2 left-2 absolute">
<span class="dropdown" tabindex="0" id="lang-dropdown"> <span class="dropdown" tabindex="0" id="lang-dropdown">
<span class="button ~urge dropdown-button"> <span class="button ~urge dropdown-button">
<i class="ri-global-line"></i> <i class="ri-global-line"></i>
@ -102,10 +102,10 @@
<span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span> <span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
<span class="button ~critical @low mb-4 unfocused" id="logout-button">{{ .strings.logout }}</span> <span class="button ~critical @low mb-4 unfocused" id="logout-button">{{ .strings.logout }}</span>
</div> </div>
<div class="top-[2%] lg:top-4 right-[2%] lg:right-4 absolute"> <div class="top-2 right-2 absolute">
<a class="button ~info unfocused" href="/" id="admin-back-button"><i class="ri-arrow-left-fill mr-2"></i>{{ .strings.admin }}</a> <a class="button ~info unfocused" href="/" id="admin-back-button"><i class="ri-arrow-left-fill mr-2"></i>{{ .strings.admin }}</a>
</div> </div>
<div class="page-container unfocused"> <div class="page-container m-2 lg:my-20 lg:mx-64 unfocused">
<div class="card @low dark:~d_neutral mb-4" id="card-user"> <div class="card @low dark:~d_neutral mb-4" id="card-user">
<span class="heading mb-2"></span> <span class="heading mb-2"></span>
</div> </div>

2
site/index.html
View File

@ -52,7 +52,7 @@ sudo apt-get install jfa-go-tray
</div> </div>
</div> </div>
</div> </div>
<div class="page-container" id="page-container"> <div class="page-container m-2 lg:my-20 lg:mx-72" id="page-container">
<div class="card ~neutral @low mb-1"> <div class="card ~neutral @low mb-1">
<div class="row col flex center"> <div class="row col flex center">
<span class="heading welcome">jellyfin-accounts (go)</span> <span class="heading welcome">jellyfin-accounts (go)</span>