Improved accessibility, switched to locally supplied icons

This commit is contained in:
Edgar P. Burkhart 2022-01-28 14:49:28 +01:00
parent f0f9edfb9f
commit e6ddc2cfc8
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
14 changed files with 135 additions and 39 deletions

View file

@ -1,4 +1,4 @@
import argparse
#import argparse
import configparser
import logging
import locale
@ -12,14 +12,14 @@ from .server import create_app
from .calendar import get_davclient
parser = argparse.ArgumentParser(description='Web-based CalDav client')
parser.add_argument('-c', '--config', type=Path, default='config.ini',
help='Configuration file path')
args = parser.parse_args()
#parser = argparse.ArgumentParser(description='Web-based CalDav client')
#parser.add_argument('-c', '--config', type=Path, default='config.ini',
# help='Configuration file path')
#
#args = parser.parse_known_args()
config = configparser.RawConfigParser()
config.read(args.config)
config.read('config.ini')
locale.setlocale(locale.LC_ALL, config.get('locale', 'locale', fallback=None))

View file

@ -4,40 +4,28 @@ body {
1fr;
grid-template-rows:
auto
1fr;
1fr
auto;
}
body > .topbar,
body > footer {
grid-column: 1 / span 2;
padding: 1rem 3rem;
position: relative;
}
body > .topbar {
padding-top: 3rem;
grid-row: 1;
grid-column: 1 / span 2;
margin: 3rem 3rem 1rem 3rem;
position: relative;
}
.topbar h1 {
margin: 0;
}
.topbar > a {
position: absolute;
top: 0;
right: 0;
color: var(--text-02) !important;
text-decoration: none;
padding: 0 1rem;
line-height: 4rem;
background: none;
cursor: pointer;
}
.topbar > a > i {
vertical-align: top;
}
.topbar > a:hover {
background: var(--hover-ui);
}
.topbar > a:active {
background: var(--active-ui);
}
.topbar > a:focus {
outline: 2px solid var(--focus);
body > footer {
grid-row: 3;
background: var(--ui-01);
}
body > #events {

View file

@ -70,7 +70,6 @@ form button:focus {
outline: 2px solid var(--focus);
}
form button.primary {
padding-right: 4rem;
color: var(--text-04);
background: var(--interactive-01);
position: relative;

View file

@ -0,0 +1,45 @@
/*
* https://remixicon.com
* https://github.com/Remix-Design/RemixIcon
* Copyright RemixIcon.com
* Released under the Apache License Version 2.0
*/
@font-face {
font-family: "remixicon";
src: url('remixicon.eot?t=1643377622508'); /* IE9*/
src: url('remixicon.eot?t=1643377622508#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("remixicon.woff2?t=1643377622508") format("woff2"),
url("remixicon.woff?t=1643377622508") format("woff"),
url('remixicon.ttf?t=1643377622508') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('remixicon.svg?t=1643377622508#remixicon') format('svg'); /* iOS 4.1- */
font-display: swap;
}
[class^="ri-"], [class*="ri-"] {
font-family: 'remixicon' !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
.ri-xxs { font-size: .5em; }
.ri-xs { font-size: .75em; }
.ri-sm { font-size: .875em }
.ri-1x { font-size: 1em; }
.ri-2x { font-size: 2em; }
.ri-3x { font-size: 3em; }
.ri-4x { font-size: 4em; }
.ri-5x { font-size: 5em; }
.ri-6x { font-size: 6em; }
.ri-7x { font-size: 7em; }
.ri-8x { font-size: 8em; }
.ri-9x { font-size: 9em; }
.ri-10x { font-size: 10em; }
.ri-fw { text-align: center; width: 1.25em; }
.ri-map-pin-line:before { content: "\ef14"; }
.ri-repeat-line:before { content: "\f074"; }

Binary file not shown.

View file

@ -0,0 +1,47 @@
/*
* https://remixicon.com
* https://github.com/Remix-Design/RemixIcon
* Copyright RemixIcon.com
* Released under the Apache License Version 2.0
*/
@font-face {
font-family: "remixicon";
src: url('remixicon.eot?t=1643377622508'); /* IE9*/
src: url('remixicon.eot?t=1643377622508#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("remixicon.woff2?t=1643377622508") format("woff2"),
url("remixicon.woff?t=1643377622508") format("woff"),
url('remixicon.ttf?t=1643377622508') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('remixicon.svg?t=1643377622508#remixicon') format('svg'); /* iOS 4.1- */
font-display: swap;
}
[class^="ri-"], [class*="ri-"] {
font-family: 'remixicon' !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:global {
.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
.ri-xxs { font-size: .5em; }
.ri-xs { font-size: .75em; }
.ri-sm { font-size: .875em }
.ri-1x { font-size: 1em; }
.ri-2x { font-size: 2em; }
.ri-3x { font-size: 3em; }
.ri-4x { font-size: 4em; }
.ri-5x { font-size: 5em; }
.ri-6x { font-size: 6em; }
.ri-7x { font-size: 7em; }
.ri-8x { font-size: 8em; }
.ri-9x { font-size: 9em; }
.ri-10x { font-size: 10em; }
.ri-fw { text-align: center; width: 1.25em; }
.ri-map-pin-line:before { content: "\ef14"; }
.ri-repeat-line:before { content: "\f074"; }
}

View file

@ -0,0 +1,12 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<font id="remixicon" horiz-adv-x="1200">
<font-face font-family="remixicon"
units-per-em="1200" ascent="1200"
descent="0" />
<missing-glyph horiz-adv-x="0" /><glyph glyph-name="map-pin-line"
unicode="&#xEF14;"
horiz-adv-x="1200" d="M600 155L847.5 402.5A350 350 0 1 1 352.5 402.5L600 155zM600 13.6000000000001L281.8 331.8000000000002A450 450 0 1 0 918.2 331.8000000000002L600 13.5999999999999zM600 550A100 100 0 1 1 600 750A100 100 0 0 1 600 550zM600 450A200 200 0 1 0 600 850A200 200 0 0 0 600 450z" /><glyph glyph-name="repeat-line"
unicode="&#xF074;"
horiz-adv-x="1200" d="M300 1000H1050A50 50 0 0 0 1100 950V600H1000V900H300V750L50 950L300 1150V1000zM900 200H150A50 50 0 0 0 100 250V600H200V300H900V450L1150 250L900 50V200z" /></font></defs></svg>

After

Width:  |  Height:  |  Size: 1,011 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="display:none;"><symbol viewBox="0 0 24 24" id="map-pin-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 20.9l4.95-4.95a7 7 0 1 0-9.9 0L12 20.9zm0 2.828l-6.364-6.364a9 9 0 1 1 12.728 0L12 23.728zM12 13a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 2a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></symbol><symbol viewBox="0 0 24 24" id="repeat-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4-5 4v-3z"/></symbol></svg>

After

Width:  |  Height:  |  Size: 585 B

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -4,11 +4,14 @@
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{% block description %}Saturn - Web based CalDav client.{% endblock %}" />
<title>{% block title %}Saturn{% endblock %}</title>
<link rel="icon" type="text/svg" href="/static/svg/logo.svg" />
{% block style %}
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/icons/remixicon.css" />
{% endblock %}
</head>
<body>

View file

@ -3,13 +3,11 @@
{% block style %}
{{ super() }}
<link rel="stylesheet" href="/static/css/index.css" />
<link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
{% endblock %}
{% block body %}
<div class="topbar">
<h1><img src="/static/svg/logo.svg" /> Saturn</h1>
<a href="/logout"><i class="ri-logout-box-line ri-2x"></i></a>
<h1><img src="/static/svg/logo.svg" alt="" /> Saturn</h1>
</div>
<div id="events">
@ -78,4 +76,8 @@
</div>
{% endfor %}
</div>
<footer>
<a href="/logout">Log Out</a>
</footer>
{% endblock %}

View file

@ -3,7 +3,6 @@
{% block style %}
{{ super() }}
<link rel="stylesheet" href="/static/css/login.css" />
<link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
{% endblock %}
{% block body %}
@ -14,7 +13,7 @@
{% endif %}
<input class="txt" type="password" name="password" placeholder="Password" />
<button class="icon" type="reset">
<i class="ri-delete-back-2-line ri-fw"></i>
Clear
</button>
<button class="primary" type="submit">
Log In