static: improve organisation of UI files
This commit is contained in:
Jens Langhammer
parent
b39bee7a30
commit
416b2c60a1
|
|
@ -6,17 +6,17 @@
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<link rel="preload" href="{% static 'passbook/fonts/DINEngschriftStd.woff2' %}" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="{% static 'dist/assets/fonts/DINEngschriftStd.woff2' %}" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="{% static 'passbook/fonts/DINEngschriftStd.woff' %}" as="font" type="font/woff" crossorigin>
|
<link rel="preload" href="{% static 'dist/assets/fonts/DINEngschriftStd.woff' %}" as="font" type="font/woff" crossorigin>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<title>{% block title %}{% trans title|default:config.passbook.branding.title %}{% endblock %}</title>
|
<title>{% block title %}{% trans title|default:config.passbook.branding.title %}{% endblock %}</title>
|
||||||
<link rel="icon" type="image/png" href="{% static 'passbook/logo.png' %}">
|
<link rel="icon" type="image/png" href="{% static 'dist/assets/images/logo.png' %}">
|
||||||
<link rel="shortcut icon" type="image/png" href="{% static 'passbook/logo.png' %}">
|
<link rel="shortcut icon" type="image/png" href="{% static 'dist/assets/images/logo.png' %}">
|
||||||
<link rel="stylesheet" type="text/css" href="{% static 'node_modules/@patternfly/patternfly/patternfly.css' %}">
|
<link rel="stylesheet" type="text/css" href="{% static 'node_modules/@patternfly/patternfly/patternfly.css' %}">
|
||||||
<link rel="stylesheet" type="text/css" href="{% static 'node_modules/@patternfly/patternfly/patternfly-addons.css' %}">
|
<link rel="stylesheet" type="text/css" href="{% static 'node_modules/@patternfly/patternfly/patternfly-addons.css' %}">
|
||||||
<link rel="stylesheet" type="text/css" href="{% static 'node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css' %}">
|
<link rel="stylesheet" type="text/css" href="{% static 'node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css' %}">
|
||||||
<link rel="stylesheet" type="text/css" href="{% static 'src/passbook.css' %}">
|
<link rel="stylesheet" type="text/css" href="{% static 'dist/passbook.css' %}">
|
||||||
<script src="{% static 'dist/main.js' %}" type="module"></script>
|
<script src="{% static 'dist/main.js' %}" type="module"></script>
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ passbook:
|
||||||
branding:
|
branding:
|
||||||
title: passbook
|
title: passbook
|
||||||
title_show: true
|
title_show: true
|
||||||
logo: /static/passbook/logo.svg
|
logo: /static/dist/assets/images/logo.svg
|
||||||
# Optionally add links to the footer on the login page
|
# Optionally add links to the footer on the login page
|
||||||
footer_links:
|
footer_links:
|
||||||
- name: Documentation
|
- name: Documentation
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 670 KiB After Width: | Height: | Size: 670 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 68 B After Width: | Height: | Size: 68 B |
|
|
@ -21,11 +21,11 @@
|
||||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||||
/>
|
/>
|
||||||
<title>passbook</title>
|
<title>passbook</title>
|
||||||
<link rel="icon" type="image/png" href="/static/passbook/logo.png" />
|
<link rel="icon" type="image/png" href="/static/dist/assets/images/logo.png" />
|
||||||
<link
|
<link
|
||||||
rel="shortcut icon"
|
rel="shortcut icon"
|
||||||
type="image/png"
|
type="image/png"
|
||||||
href="/static/passbook/logo.png"
|
href="/static/dist/assets/images/logo.png"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,309 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "DIN 1451 Std";
|
||||||
|
src: url("assets/fonts/DINEngschriftStd.woff2") format("woff2"),
|
||||||
|
url("assets/fonts/DINEngschriftStd.woff") format("woff");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
--pf-c-nav__link--PaddingTop: 0.5rem;
|
||||||
|
--pf-c-nav__link--PaddingRight: 0.5rem;
|
||||||
|
--pf-c-nav__link--PaddingBottom: 0.5rem;
|
||||||
|
--pf-c-nav__link--PaddingLeft: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb-brand {
|
||||||
|
font-family: "DIN 1451 Std";
|
||||||
|
font-size: 4em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
color: var(--pf-global--Color--light-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb-brand > a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb-brand > img {
|
||||||
|
max-height: 68px;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pf-c-background-image::before {
|
||||||
|
background-image: url("assets/images/flow_background.jpg");
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix patternfly sidebar and header with open Modal */
|
||||||
|
.pf-c-page__sidebar {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pf-c-page__header {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure card is displayed on small screens */
|
||||||
|
.pf-c-login__main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* login page's icons */
|
||||||
|
.pf-c-login__main-footer-links-item-link img {
|
||||||
|
fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
|
||||||
|
height: 100%;
|
||||||
|
max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix multiple selects height */
|
||||||
|
select[multiple] {
|
||||||
|
height: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selector */
|
||||||
|
.selector {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 45vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector .selector-filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector .selector-filter label {
|
||||||
|
margin: 0 8px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector .selector-filter input {
|
||||||
|
width: auto;
|
||||||
|
min-height: 0;
|
||||||
|
flex: 1 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-available,
|
||||||
|
.selector-chosen {
|
||||||
|
width: auto;
|
||||||
|
flex: 1 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector select {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector ul.selector-chooser {
|
||||||
|
width: 26px;
|
||||||
|
height: 52px;
|
||||||
|
padding: 2px 0;
|
||||||
|
margin: auto 15px;
|
||||||
|
border-radius: 20px;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-add,
|
||||||
|
.selector-remove {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-size: 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-add {
|
||||||
|
background-position: 0 -120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-remove {
|
||||||
|
background-position: 0 -80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.selector-chooseall,
|
||||||
|
a.selector-clearall {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked {
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked > * {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked select {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked .selector-available,
|
||||||
|
.stacked .selector-chosen {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked ul.selector-chooser {
|
||||||
|
width: 52px;
|
||||||
|
height: 26px;
|
||||||
|
padding: 0 2px;
|
||||||
|
margin: 15px auto;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked .selector-chooser li {
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked .selector-add,
|
||||||
|
.stacked .selector-remove {
|
||||||
|
background-size: 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked .selector-add {
|
||||||
|
background-position: 0 -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked .active.selector-add {
|
||||||
|
background-position: 0 -60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked .selector-remove {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked .active.selector-remove {
|
||||||
|
background-position: 0 -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-tooltip,
|
||||||
|
.selector .help-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
form .form-row p.datetime {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetime input {
|
||||||
|
width: 50%;
|
||||||
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetime span {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetime .timezonewarning {
|
||||||
|
display: block;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimeshortcuts {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-group {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-add,
|
||||||
|
.selector-remove {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
display: block;
|
||||||
|
text-indent: -3000px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: default;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active.selector-add,
|
||||||
|
.active.selector-remove {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active.selector-add:hover,
|
||||||
|
.active.selector-remove:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-add {
|
||||||
|
background: url(../admin/img/selector-icons.svg) 0 -96px no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active.selector-add:focus,
|
||||||
|
.active.selector-add:hover {
|
||||||
|
background-position: 0 -112px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-remove {
|
||||||
|
background: url(../admin/img/selector-icons.svg) 0 -64px no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[data-is-monospace] {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form with user */
|
||||||
|
.form-control-static {
|
||||||
|
margin-top: var(--pf-global--spacer--sm);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.form-control-static .left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.form-control-static img {
|
||||||
|
margin-right: var(--pf-global--spacer--xs);
|
||||||
|
}
|
||||||
|
.form-control-static a {
|
||||||
|
padding-top: var(--pf-global--spacer--xs);
|
||||||
|
padding-bottom: var(--pf-global--spacer--xs);
|
||||||
|
line-height: var(--pf-global--spacer--xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Static OTP Tokens, passbook.stages.otp_static */
|
||||||
|
.pb-otp-tokens {
|
||||||
|
list-style: circle;
|
||||||
|
columns: 2;
|
||||||
|
-webkit-columns: 2;
|
||||||
|
-moz-columns: 2;
|
||||||
|
margin-left: var(--pf-global--spacer--xs);
|
||||||
|
}
|
||||||
|
.pb-otp-tokens li {
|
||||||
|
font-size: var(--pf-global--FontSize--2xl);
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix pre elements within alerts */
|
||||||
|
.pf-c-alert pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Aggregate Cards */
|
||||||
|
.pb-aggregate-card {
|
||||||
|
font-size: var(--pf-global--icon--FontSize--lg);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pf-c-content h1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.pf-c-content h1 i {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.pf-c-content h1 :first-child {
|
||||||
|
margin-right: var(--pf-global--spacer--sm);
|
||||||
|
}
|
||||||
|
|
@ -7,7 +7,11 @@ import typescript from "@rollup/plugin-typescript";
|
||||||
import cssimport from "rollup-plugin-cssimport";
|
import cssimport from "rollup-plugin-cssimport";
|
||||||
import copy from "rollup-plugin-copy";
|
import copy from "rollup-plugin-copy";
|
||||||
|
|
||||||
const resources = [{ src: "src/index.html", dest: "dist" }];
|
const resources = [
|
||||||
|
{ src: "src/index.html", dest: "dist" },
|
||||||
|
{ src: 'src/passbook.css', dest: 'dist' },
|
||||||
|
{ src: 'src/assets/*', dest: 'dist/assets' },
|
||||||
|
];
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 670 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,55 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||||
|
<path style="fill:#57565C;" d="M407,512H105C47.103,512,0,464.897,0,407V105C0,47.103,47.103,0,105,0h302
|
||||||
|
c57.897,0,105,47.103,105,105v302C512,464.897,464.897,512,407,512z"/>
|
||||||
|
<path style="fill:#3E3D42;" d="M407,0H256v512h151c57.897,0,105-47.103,105-105V105C512,47.103,464.897,0,407,0z"/>
|
||||||
|
<rect x="91" y="141" style="fill:#00C3FF;" width="330" height="44"/>
|
||||||
|
<rect x="256" y="141" style="fill:#00AAF0;" width="165" height="44"/>
|
||||||
|
<rect x="91" y="176" style="fill:#FFDC40;" width="330" height="44"/>
|
||||||
|
<rect x="256" y="176" style="fill:#FFAB15;" width="165" height="44"/>
|
||||||
|
<rect x="91" y="206" style="fill:#87E694;" width="330" height="44"/>
|
||||||
|
<rect x="256" y="206" style="fill:#66CC70;" width="165" height="44"/>
|
||||||
|
<path style="fill:#F2F2F2;" d="M421,381c0,8.284-6.716,15-15,15H106c-8.284,0-15-6.716-15-15v-85h89.997
|
||||||
|
c9.31,0,17.688,4.938,21.868,12.888C213.277,328.695,233.638,341,256,341s42.723-12.305,53.135-32.111
|
||||||
|
c4.18-7.95,12.559-12.889,21.868-12.889H421V381z"/>
|
||||||
|
<path style="fill:#FF6849;" d="M421,266h-89.997c-20.487,0-39.041,11.085-48.423,28.929C277.369,304.842,267.185,311,256,311
|
||||||
|
s-21.369-6.158-26.58-16.071C220.038,277.085,201.484,266,180.997,266H91v-30h330V266z"/>
|
||||||
|
<path style="fill:#F2F2F2;" d="M421,146H91v-15c0-8.284,6.716-15,15-15h300c8.284,0,15,6.716,15,15V146z"/>
|
||||||
|
<path style="fill:#E5E5E5;" d="M331.003,296c-9.31,0-17.688,4.938-21.868,12.889C298.723,328.695,278.362,341,256,341v55h150
|
||||||
|
c8.284,0,15-6.716,15-15v-85H331.003z"/>
|
||||||
|
<path style="fill:#FD4B2D;" d="M256,236v75c11.185,0,21.369-6.158,26.58-16.071C291.962,277.085,310.516,266,331.003,266H421v-30
|
||||||
|
H256z"/>
|
||||||
|
<path style="fill:#E5E5E5;" d="M406,116H256v30h165v-15C421,122.716,414.284,116,406,116z"/>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 B |
|
|
@ -21,11 +21,11 @@
|
||||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||||
/>
|
/>
|
||||||
<title>passbook</title>
|
<title>passbook</title>
|
||||||
<link rel="icon" type="image/png" href="/static/passbook/logo.png" />
|
<link rel="icon" type="image/png" href="/static/dist/assets/images/logo.png" />
|
||||||
<link
|
<link
|
||||||
rel="shortcut icon"
|
rel="shortcut icon"
|
||||||
type="image/png"
|
type="image/png"
|
||||||
href="/static/passbook/logo.png"
|
href="/static/dist/assets/images/logo.png"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|
@ -59,8 +59,6 @@
|
||||||
>
|
>
|
||||||
<pb-sidebar
|
<pb-sidebar
|
||||||
class="pf-c-page__sidebar"
|
class="pf-c-page__sidebar"
|
||||||
brandLogo="/static/passbook/logo.svg"
|
|
||||||
brandTitle="passbook"
|
|
||||||
>
|
>
|
||||||
</pb-sidebar>
|
</pb-sidebar>
|
||||||
<pb-router-outlet
|
<pb-router-outlet
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "DIN 1451 Std";
|
font-family: "DIN 1451 Std";
|
||||||
src: url("fonts/DINEngschriftStd.woff2") format("woff2"),
|
src: url("assets/fonts/DINEngschriftStd.woff2") format("woff2"),
|
||||||
url("fonts/DINEngschriftStd.woff") format("woff");
|
url("assets/fonts/DINEngschriftStd.woff") format("woff");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
|
|
@ -34,7 +34,7 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pf-c-background-image::before {
|
.pf-c-background-image::before {
|
||||||
background-image: url("./flow_background.jpg");
|
background-image: url("assets/images/flow_background.jpg");
|
||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Reference in New Issue