mirror of https://github.com/resf/distro-tools.git
Add light mode support
This commit is contained in:
Mustafa Gezen
parent
bb5159cf1c
commit
8abcdf4206
GPG Key ID:
DCDF010D946438C1
|
|
@ -6,7 +6,7 @@ Tortoise.init_models(["apollo.db"], "models") # noqa # pylint: disable=wrong-im
|
|||
|
||||
from fastapi import FastAPI, Request, Depends
|
||||
from fastapi.openapi.utils import get_openapi
|
||||
from fastapi.responses import JSONResponse
|
||||
from fastapi.responses import JSONResponse, RedirectResponse
|
||||
from starlette.middleware.sessions import SessionMiddleware
|
||||
from fastapi_pagination import add_pagination
|
||||
|
||||
|
|
@ -88,6 +88,23 @@ async def health():
|
|||
return {"status": "ok"}
|
||||
|
||||
|
||||
@app.get("/_/set_color")
|
||||
async def set_color(request: Request):
|
||||
valid_colors = ["dark", "light"]
|
||||
color = request.query_params.get("color")
|
||||
response = RedirectResponse(
|
||||
request.headers["referer"] if "referer" in request.headers else "/"
|
||||
)
|
||||
|
||||
# First check if the color is valid
|
||||
# If valid, set the color in the cookie, then
|
||||
# redirect back to referrer
|
||||
if color in valid_colors:
|
||||
response.set_cookie("color", color)
|
||||
|
||||
return response
|
||||
|
||||
|
||||
@app.exception_handler(404)
|
||||
async def not_found_handler(request, exc): # pylint: disable=unused-argument
|
||||
if request.url.path.startswith("/api"
|
||||
|
|
|
|||
|
|
@ -6,12 +6,56 @@ $feature-flags: (
|
|||
@use 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/generated/themes';
|
||||
@import 'carbon-components/scss/globals/scss/styles.scss';
|
||||
|
||||
:root {
|
||||
@include carbon--theme($carbon--theme--g90, true);
|
||||
@mixin dark-mode-non-root {
|
||||
a {
|
||||
color: map-get($carbon--theme--g90, 'link-01');
|
||||
}
|
||||
|
||||
#color-switcher-dark {
|
||||
display: var(--display-dark-switcher);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: map-get($carbon--theme--g90, 'link-01');
|
||||
@mixin dark-mode {
|
||||
:root {
|
||||
@include carbon--theme($carbon--theme--g90, true);
|
||||
--display-dark-switcher: none;
|
||||
--display-light-switcher: block;
|
||||
}
|
||||
|
||||
@include dark-mode-non-root;
|
||||
}
|
||||
|
||||
@mixin light-mode {
|
||||
:root,
|
||||
:root.light {
|
||||
@include carbon--theme($carbon--theme--white, true);
|
||||
--display-light-switcher: none;
|
||||
--display-dark-switcher: block;
|
||||
}
|
||||
|
||||
bx-side-nav {
|
||||
border-right: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
#color-switcher-light {
|
||||
display: var(--display-light-switcher);
|
||||
}
|
||||
}
|
||||
|
||||
@include light-mode;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@include dark-mode;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
@include carbon--theme($carbon--theme--g90, true);
|
||||
|
||||
@include dark-mode-non-root;
|
||||
|
||||
--display-dark-switcher: none;
|
||||
--display-light-switcher: block;
|
||||
}
|
||||
|
||||
.bx--inline-notification__text-wrapper {
|
||||
|
|
|
|||
|
|
@ -40,19 +40,19 @@
|
|||
<div class="bx--grid bx--grid--full-width" style="margin:3rem 0;">
|
||||
<div class="bx--row">
|
||||
<div class="bx--col-lg-10">
|
||||
<div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Synopsis</h3>
|
||||
<div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Synopsis</h3>
|
||||
<p>{{ advisory.synopsis }}</p>
|
||||
<br /><br />
|
||||
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Description</h3>
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Description</h3>
|
||||
{% set description = advisory.description.split("\n") %}
|
||||
{% for line in description %}
|
||||
<p>{{ line }}</p>
|
||||
{% endfor %}
|
||||
<br /><br />
|
||||
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Affected products</h3>
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Affected products</h3>
|
||||
<bx-ordered-list>
|
||||
{% for product in advisory.affected_products %}
|
||||
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">{{ product.name }}</bx-list-item>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
</bx-ordered-list>
|
||||
<br /> <br />
|
||||
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Fixes</h3>
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Fixes</h3>
|
||||
<bx-ordered-list>
|
||||
{% for fix in advisory.fixes %}
|
||||
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
</bx-ordered-list>
|
||||
<br /> <br />
|
||||
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">CVEs</h3>
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">CVEs</h3>
|
||||
<bx-ordered-list>
|
||||
{% for cve in advisory.cves %}
|
||||
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
|
||||
|
|
@ -83,8 +83,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bx--col-lg-6">
|
||||
<div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);">Affected packages</h3>
|
||||
<div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);">Affected packages</h3>
|
||||
{% for product_repo_name, nevras in package_map.items() %}
|
||||
<h4 style="padding-bottom:0.3rem;font-weight:400;padding-top:0.3rem;">{{ product_repo_name }}</h4>
|
||||
<bx-ordered-list>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% set theme = "" %}
|
||||
{% if "color" in request.cookies %}
|
||||
{% if request.cookies["color"] == "light" %}
|
||||
{% set theme = "light" %}
|
||||
{% elif request.cookies["color"] == "dark" %}
|
||||
{% set theme = "dark" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<html lang="en" class="{{theme}}">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="color-scheme" content="dark">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>{% block title %}Peridot Apollo{% endblock %}</title>
|
||||
|
|
@ -25,8 +34,8 @@
|
|||
|
||||
.apollo-outer bx-inline-notification {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
--cds-inverse-01: #ffffff;
|
||||
color: var(--cds-text-01);
|
||||
--cds-inverse-01: var(--cds-text-01);
|
||||
background: var(--cds-button-separator);
|
||||
}
|
||||
|
||||
|
|
@ -95,6 +104,12 @@
|
|||
{% endif %}
|
||||
</bx-header-nav>
|
||||
<bx-header-nav style="margin-left:auto;padding-left:0">
|
||||
<bx-header-nav-item href="/_/set_color?color=light" id="color-switcher-light">
|
||||
{% include "light_icon.jinja" %}
|
||||
</bx-header-nav-item>
|
||||
<bx-header-nav-item href="/_/set_color?color=dark" id="color-switcher-dark">
|
||||
{% include "light_icon.jinja" %}
|
||||
</bx-header-nav-item>
|
||||
{% if request.session.get("user.name") %}
|
||||
<bx-header-nav-item>{{ request.session.get("user.name") }}</bx-header-nav-item>
|
||||
<bx-header-nav-item href="/logout/">Logout</bx-header-nav-item>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;display:block;"
|
||||
xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0 {
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
<title>light</title>
|
||||
<rect fill="currentColor" x="7.5" y="1" width="1" height="2.5" />
|
||||
<rect fill="currentColor" x="10.8" y="3.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 0.7526 9.6636)" width="2.5"
|
||||
height="1" />
|
||||
<rect fill="currentColor" x="12.5" y="7.5" width="2.5" height="1" />
|
||||
<rect fill="currentColor" x="11.6" y="10.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.9774 12.0652)" width="1"
|
||||
height="2.5" />
|
||||
<rect fill="currentColor" x="7.5" y="12.5" width="1" height="2.5" />
|
||||
<rect fill="currentColor" x="2.7" y="11.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.3811 6.3373)" width="2.5"
|
||||
height="1" />
|
||||
<rect fill="currentColor" x="1" y="7.5" width="2.5" height="1" />
|
||||
<rect fill="currentColor" x="3.4" y="2.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.6512 3.9356)" width="1"
|
||||
height="2.5" />
|
||||
<path fill="currentColor"
|
||||
d="M8,6c1.1,0,2,0.9,2,2s-0.9,2-2,2S6,9.1,6,8S6.9,6,8,6 M8,5C6.3,5,5,6.3,5,8s1.3,3,3,3s3-1.3,3-3S9.7,5,8,5z" />
|
||||
<rect id="_Transparent_Rectangle_" class="st0" width="16" height="16" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -69,19 +69,19 @@
|
|||
<div class="bx--grid bx--grid--full-width" style="margin:3rem 0;">
|
||||
<div class="bx--row">
|
||||
<div class="bx--col-lg-10">
|
||||
<div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Synopsis</h3>
|
||||
<div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Synopsis</h3>
|
||||
<p>{{ advisory.synopsis }}</p>
|
||||
<br /><br />
|
||||
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Description</h3>
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Description</h3>
|
||||
{% set description = advisory.description.split("\n") %}
|
||||
{% for line in description %}
|
||||
<p>{{ line }}</p>
|
||||
{% endfor %}
|
||||
<br /><br />
|
||||
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Affected products</h3>
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Affected products</h3>
|
||||
<bx-ordered-list>
|
||||
{% for product in advisory.affected_products %}
|
||||
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
</bx-ordered-list>
|
||||
<br /> <br />
|
||||
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Fixes</h3>
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Fixes</h3>
|
||||
<bx-ordered-list>
|
||||
{% for ticket in advisory.bugzilla_tickets %}
|
||||
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
</bx-ordered-list>
|
||||
<br /> <br />
|
||||
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">CVEs</h3>
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">CVEs</h3>
|
||||
<bx-ordered-list>
|
||||
{% for cve in advisory.cves %}
|
||||
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bx--col-lg-6">
|
||||
<div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
|
||||
<div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
|
||||
{% set pkg_list = {} %}
|
||||
{% for pkg in advisory.packages %}
|
||||
{% if pkg.repo_name in pkg_list %}
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Affected packages</h3>
|
||||
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Affected packages</h3>
|
||||
{% for repo_name, pkg in pkg_list.items() %}
|
||||
<h4 style="padding-bottom:0.3rem;font-weight:400;">{{ repo_name }}</h4>
|
||||
<bx-ordered-list>
|
||||
|
|
|
|||
Loading…
Reference in New Issue