sage
/
UnderCover
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Addition of a toggleable dark mode. 

Other UI cleanup and consistency.
This commit is contained in:
Sage Vaillancourt 2023-10-29 21:16:11 -04:00
parent 77868b4f9b
commit 7348bf3ee6
5 changed files with 174 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
app/static/styles.css
View File

@ -2,6 +2,48 @@ html {
height: 100%; height: 100%;
} }
body {
background-color: #f0f0f0;
line-height: 180%;
font-size: 110%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
font-family: 'Barlow', sans-serif;
}
.transition, .transition * {
transition-duration: 0.5s;
transition-property: color, border-color, background-color;
}
.theme-toggler {
cursor: pointer;
}
body.dark-mode {
color: #e7e7e7;
background: linear-gradient(to bottom right, #2e2e62, #1a1226);
background-repeat: no-repeat;
background-attachment: fixed;
}
h1, h2 {
font-family: 'BarlowMedium', sans-serif;
text-align: center;
color: #111;
}
body.dark-mode h1 {
color: #e7e7e7;
}
body.dark-mode h2 {
color: #e7e7e7;
}
::placeholder { ::placeholder {
color: #999; color: #999;
} }
@ -37,26 +79,10 @@ h1:hover span.logo.right {
background-color: white; background-color: white;
} }
body {
background-color: #f0f0f0;
line-height: 180%;
font-size: 110%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
font-family: 'Barlow', sans-serif;
}
strong { strong {
font-family: 'BarlowMedium', sans-serif; font-family: 'BarlowMedium', sans-serif;
} }
h1, h2 {
font-family: 'BarlowMedium', sans-serif;
text-align: center;
}
h1 { h1 {
user-select: none; user-select: none;
} }
@ -84,6 +110,10 @@ label {
transition-timing-function: ease-out; transition-timing-function: ease-out;
} }
body.dark-mode label {
color: #eee;
}
label:hover { label:hover {
color: white; color: white;
background-color: #222; background-color: #222;
@ -93,12 +123,37 @@ input, textarea {
font-family: 'Barlow', sans-serif; font-family: 'Barlow', sans-serif;
} }
body.dark-mode input {
color: #eee;
background-color: #000;
border: none;
padding: 8px;
}
body.dark-mode textarea {
color: #eee;
background-color: #000;
border: none;
padding: 12px;
}
select { select {
background-color: white;
border-radius: 0; border-radius: 0;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-color: #ccc; padding: 10px;
}
select, body.dark-mode select:hover {
background-color: white;
border-color: #8f8f9d;
color: black;
}
body.dark-mode select, select:hover {
background-color: black;
border-color: black;
color: #eee;
} }
.letter-form { .letter-form {
@ -130,18 +185,19 @@ div.user form input, label {
div.user form input { div.user form input {
font-size: 120%; font-size: 120%;
border-style: solid;
border-width: 1px;
border-color: #ddd;
padding: 0.3em;
} }
.btn { .btn {
cursor: pointer;
font-weight: bold; font-weight: bold;
border-radius: 0; border-radius: 0;
border-style: none; border-style: none;
} }
input.btn {
padding: 0.8em 2em;
}
.color-fade { .color-fade {
transition-property: color, background-color; transition-property: color, background-color;
transition-duration: 135ms; transition-duration: 135ms;
@ -158,14 +214,20 @@ div.user form input {
background-color: white; background-color: white;
} }
.secondary { .secondary, body.dark-mode .secondary:hover {
color: black; color: black;
background-color: white; background-color: white;
border: 1px solid #8f8f9d;
} }
.secondary:hover { .secondary a {
color: inherit;
}
.secondary:hover, body.dark-mode .secondary {
color: white; color: white;
background-color: black; background-color: black;
border: 1px solid black;
} }
.logged-in { .logged-in {
@ -269,6 +331,10 @@ textarea {
transition-timing-function: ease-out; transition-timing-function: ease-out;
} }
body.dark-mode div.modal-content {
background-color: #111;
}
.modal-background { .modal-background {
background: none; background: none;
} }
@ -306,6 +372,10 @@ textarea {
color: #000; color: #000;
} }
body.dark-mode .text-button:hover {
color: #fff;
}
/* Small screens */ /* Small screens */
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
body { body {
@ -356,6 +426,7 @@ textarea {
input, textarea { input, textarea {
margin-bottom: 0.5em; margin-bottom: 0.5em;
font-size: 105%; font-size: 105%;
padding: 4px;
} }
dd { dd {
margin-left: 0.5em; margin-left: 0.5em;
@ -370,8 +441,6 @@ textarea {
width: 50%; width: 50%;
} }
div.user form input { div.user form input {
font-size: 110%;
padding: 0.5em;
height: min-content; height: min-content;
} }
.user { .user {

2
app/templates/_formhelpers.jinja2
View File

@ -51,7 +51,7 @@
<input id="password" maxlength="32" minlength="4" name="password" type="password"> <input id="password" maxlength="32" minlength="4" name="password" type="password">
</div> </div>
<div id="confirm-password-div"> <div id="confirm-password-div">
<div style="font-size: 80%; margin-bottom: 1.5em;">Password must be between 8 and 64 characters</div> <div style="margin-bottom: 1.5em;">Password must be between 8 and 64 characters</div>
<label id='confirm-password-label' for="confirm-password">Confirm Password: </label> <label id='confirm-password-label' for="confirm-password">Confirm Password: </label>
<input id="confirm-password" maxlength="32" minlength="4" name="confirm-password" type="password"> <input id="confirm-password" maxlength="32" minlength="4" name="confirm-password" type="password">
</div> </div>

117
app/templates/base.jinja2
View File

@ -3,50 +3,75 @@
{% from "_formhelpers.jinja2" import modal %} {% from "_formhelpers.jinja2" import modal %}
<head> <head>
<title>{% block title %}UnderCover{% endblock title %}</title> <title>{% block title %}UnderCover{% endblock title %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}"> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
<link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" /> <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" />
<meta name="description" content="UnderCover is an easy way to generate unique cover letters, making it simple to send personalized applications to many companies quickly."> <meta name="description" content="UnderCover is an easy way to generate unique cover letters, making it simple to send personalized applications to many companies quickly.">
<meta name="viewport" content="user-scalable=no; width=device-width"> <meta name="viewport" content="user-scalable=no; width=device-width">
<script type="text/javascript"> <script type="text/javascript">
function closeModal() { document.addEventListener('DOMContentLoaded', () => {
document.getElementById('modal').classList.add('transparent') const darkSystem = () => window.matchMedia('(prefers-color-scheme: dark)').matches
document.body.classList.remove('scroll-lock') const lightStored = () => localStorage.getItem('dark-mode') === 'false'
const darkStored = () => localStorage.getItem('dark-mode') === 'true'
if (!lightStored() && (darkSystem() || darkStored())) {
document.body.classList.add('dark-mode')
} }
function showModal(login, text) { const togglers = document.getElementsByClassName('theme-toggler');
document.getElementById('modal').classList.remove('transparent') for (let i = 0; i < togglers.length; i++) {
document.getElementById('modal-title').innerText = text togglers[i].addEventListener('click', () => {
document.body.classList.add('scroll-lock') document.body.classList.toggle('dark-mode')
const darkMode = document.body.classList.contains('dark-mode')
const createAccountElements = [ localStorage.setItem("dark-mode", darkMode)
'confirm-password', })
'confirm-password-label',
'create-account-form-button'
]
const loginElements = [
'log-in-form-button'
]
const [visibleElements, hiddenElements] = login
? [loginElements, createAccountElements]
: [createAccountElements, loginElements]
visibleElements.forEach(element => document.getElementById(element).classList.remove('hidden'))
hiddenElements.forEach(element => document.getElementById(element).classList.add('hidden'))
} }
</script> setTimeout(() => document.body.classList.add('transition'), 600)
<style> })
@font-face { function toggleTheme() {
font-family: 'Barlow'; document.body.classList.toggle('dark-mode')
font-display: swap; }
src: url('/static/fonts/Barlow-Regular.ttf'); function closeModal() {
} document.getElementById('modal').classList.add('transparent')
@font-face { document.body.classList.remove('scroll-lock')
font-family: 'BarlowMedium'; }
font-display: swap; function showModal(login, text) {
src: url('/static/fonts/Barlow-Medium.ttf'); document.getElementById('modal').classList.remove('transparent')
} document.getElementById('modal-title').innerText = text
</style> document.body.classList.add('scroll-lock')
{% block head %}{{ head }}{% endblock head %}
const createAccountElements = [
'confirm-password',
'confirm-password-label',
'create-account-form-button'
]
const loginElements = [
'log-in-form-button'
]
const [visibleElements, hiddenElements] = login
? [loginElements, createAccountElements]
: [createAccountElements, loginElements]
visibleElements.forEach(element => document.getElementById(element).classList.remove('hidden'))
hiddenElements.forEach(element => document.getElementById(element).classList.add('hidden'))
}
</script>
<style>
@font-face {
font-family: 'Barlow';
font-display: swap;
src: url('/static/fonts/Barlow-Regular.ttf');
}
@font-face {
font-family: 'BarlowMedium';
font-display: swap;
src: url('/static/fonts/Barlow-Medium.ttf');
}
@font-face {
font-family: 'BarlowBold';
font-display: swap;
src: url('/static/fonts/Barlow-Bold.ttf');
}
</style>
{% block head %}{{ head }}{% endblock head %}
</head> </head>
<body> <body>
@ -55,7 +80,7 @@
<div class="user logged-in"> <div class="user logged-in">
<p style="margin: 0 1em 0 0;">{{ username }}</p> <p style="margin: 0 1em 0 0;">{{ username }}</p>
<form action="/logout"> <form action="/logout">
<input class="btn primary color-fade" style="margin: 0; padding: 0.4em;" type="submit" value="Logout"> <input class="btn primary color-fade" style="font-family: 'BarlowMedium'; margin-right: 1em; margin: 0;" type="submit" value="Log Out"></input>
</form> </form>
</div> </div>
{% else %} {% else %}
@ -68,9 +93,9 @@
</form> </form>
</div> </div>
{% endif %} {% endif %}
<a href="/" style="text-decoration: none;"> <!--<a href="/" style="text-decoration: none;">-->
<h1><span class="logo left">Under</span><span class="logo right">Cover</span></h1> <h1 title="Click to toggle dark mode" class="theme-toggler"><span class="logo left">Under</span><span class="logo right">Cover</span></h1>
</a> <!--</a>-->
<h2>The secret cover letter generator</h2> <h2>The secret cover letter generator</h2>
{% if error %} {% if error %}
<div class="errors"> <div class="errors">

11
app/templates/writing.jinja2
View File

@ -49,11 +49,12 @@
onchange="window.location = '/?letter_name=' + this.options[this.value - 1].label" onchange="window.location = '/?letter_name=' + this.options[this.value - 1].label"
) )
}} }}
<a <div class="btn secondary color-fade" style="display: flex; justify-content: center; align-items: center; padding-left: 0.75em; padding-right: 0.75em; margin-left: 0.5em;">
href="/add_letter" <a
class="btn secondary color-fade" href="/add_letter"
style="padding-left: 0.75em; padding-right: 0.75em; text-decoration: none; margin-left: 0.5em; text-align: center;" style="text-decoration: none; margin: 0; padding: 0;"
> + </a> > + </a>
</div>
</div> </div>
</div> </div>
{% endif %} {% endif %}

2
start
View File

@ -2,7 +2,7 @@
SCRIPT_DIR="$( cd "$( dirname "$0" )" && pwd )" SCRIPT_DIR="$( cd "$( dirname "$0" )" && pwd )"
source ./env source $SCRIPT_DIR/env
if ! test -f "$SCRIPT_DIR/.undercover_init_successful"; then if ! test -f "$SCRIPT_DIR/.undercover_init_successful"; then
if ! "$SCRIPT_DIR/init"; then if ! "$SCRIPT_DIR/init"; then