gitea-mirror/MAGI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style improvements.

Browse Source
This commit is contained in:
Tomasz Rewak
2023-05-14 23:05:48 +02:00
parent b45cf1c789
commit e44b15c91a
2 changed files with 69 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style.css
+41 -8
View File
@@ -2,23 +2,61 @@ body {
background: black;
}
input {
background: black;
border: 2px solid #ff8d00;
color: #ff8d00;
}
.magi {
height: 50vh;
display: grid;
grid-template-columns: 20px 2fr 0.5fr 1fr 0.5fr 2fr 20px;
grid-template-rows: 20px 2fr 2fr 1fr 3fr 20px;
aspect-ratio: 2 / 1;
container-type: size;
border: 2px solid #ff8d00;
}
.magi>.title {
grid-area: 5 / 4;
color: #ff8d00;
text-align: center;
font-size: 4em;
font-size: 9cqh;
font-weight: bold;
}
.magi>.header>hr {
border: 2px solid #277547;
height: 4px;
margin: 2px;
}
.magi>.header>span {
color: #ff8d00;
font-size: 10cqh;
display: flex;
justify-content: center;
font-weight: bold;
transform: scaleX(2);
}
.magi>.header.left {
grid-area: 2 / 1 / 3 / 3;
}
.magi>.header.right {
grid-area: 2 / 6 / 3 / 8;
}
.magi>.system-status {
grid-area: 3 / 2 / 4 / 3;
font-family: Helvetica;
color: #ff8d00;
}
.magi>.wise-man {
font-family: Helvetica;
font-size: 4em;
font-size: 8cqh;
font-weight: bold;
display: flex;
align-items: center;
@@ -38,9 +76,4 @@ body {
.magi>.wise-man.casper {
grid-area: 4 / 2 / 6 / 4;
clip-path: polygon(0 0, 65% 0, 100% 44%, 100% 100%, 0 100%);
}
.system-status {
font-family: Helvetica;
color: #ff8d00;
}
main.py
+28 -21
View File
@@ -10,27 +10,34 @@ app = Dash(__name__)
Magi = load_react_component(app, 'components', 'magi.js')
WiseMan = load_react_component(app, 'components', 'wise_man.js')
# 質問 - question
# 解決 - resolution
app.layout = Magi(id='magi', children=[
html.Div(
className='system-status',
children=[
html.Div(children='CODE : 473'),
html.Div(children='FILE : MAGI_SYS'),
html.Div(id='extention', children='EXTENTION : ????'),
html.Div(children='EX_MODE : OFF'),
html.Div(children='PRIORITY : AAA')]),
WiseMan(id={'type': 'wise-man', 'name': 'melchior'}, name='melchior', order_number=1, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
WiseMan(id={'type': 'wise-man', 'name': 'balthasar'}, name='balthasar', order_number=2, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
WiseMan(id={'type': 'wise-man', 'name': 'casper'}, name='casper', order_number=3, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
html.Div(className='title', children='MAGI'),
html.Div(className='header', children=[
html.Hr(),
html.Hr(),
html.Hr(),
html.Hr()
app.layout = html.Div(children=[
Magi(id='magi', children=[
html.Div(
className='system-status',
children=[
html.Div(children='CODE : 473'),
html.Div(children='FILE : MAGI_SYS'),
html.Div(id='extention', children='EXTENTION : ????'),
html.Div(children='EX_MODE : OFF'),
html.Div(children='PRIORITY : AAA')]),
WiseMan(id={'type': 'wise-man', 'name': 'melchior'}, name='melchior', order_number=1, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
WiseMan(id={'type': 'wise-man', 'name': 'balthasar'}, name='balthasar', order_number=2, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
WiseMan(id={'type': 'wise-man', 'name': 'casper'}, name='casper', order_number=3, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
html.Div(className='title', children='MAGI'),
html.Div(className='header left', children=[
html.Hr(),
html.Hr(),
html.Span('質 問 '),
html.Hr(),
html.Hr()
]),
html.Div(className='header right', children=[
html.Hr(),
html.Hr(),
html.Span('解 決 '),
html.Hr(),
html.Hr()
])
]),
dcc.Input(id='query', type='text', value='', debounce=True, autoComplete='off'),