Introduce Flexbox Layout.

remotes/upstream/doubtfire
Kieran R. Prasch 2019-09-06 14:00:13 -07:00
parent 8f73d974d9
commit 2f1f4076c4
2 changed files with 39 additions and 16 deletions

View File

@ -86,5 +86,29 @@ body{
}
.logo-box {
padding: 0;
}
#widgets {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
margin-top: 5em;
}
#widgets div {
width: 15%;
border: 1px solid black;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
#version {
width: 100%;
font-size: 2em;
}

View File

@ -34,15 +34,10 @@ class NetworkStatusPage:
return self.dash_app.title
@staticmethod
def header(title) -> html.Div:
return html.Div([
html.Div([
html.Div([
html.Img(src='/assets/nucypher_logo.png'),
], className='banner'),
html.Div(f'v{nucypher.__version__}', className='row')
]),
])
def header() -> html.Div:
return html.Div([html.Img(src='/assets/nucypher_logo.png', className='banner'),
html.Span(f'v{nucypher.__version__}', id='version')],
className="logo-widget")
def previous_states(self, learner: Learner) -> html.Div:
domains = learner.learning_domains
@ -175,18 +170,22 @@ class MoeStatusPage(NetworkStatusPage):
self.dash_app.index_string = file.read()
self.dash_app.layout = html.Div([
# hidden update buttons for hendrix notifications
html.Div([
html.Button("Refresh States", id='hidden-state-button', type='submit'),
html.Button("Refresh Known Nodes", id='hidden-node-button', type='submit'),
]),
dcc.Location(id='url', refresh=False),
html.Div(id='header'),
html.Div(id='current-period'),
html.Div(id='time-remaining'),
html.Div([
html.Div(id='header'),
html.Div(id='current-period'),
html.Div(id='time-remaining'),
], id='widgets'),
html.Div(id='prev-states'),
html.Div(id='known-nodes'),
dcc.Interval(
id='interval-component',
interval=15 * 1000,
@ -197,7 +196,7 @@ class MoeStatusPage(NetworkStatusPage):
@self.dash_app.callback(Output('header', 'children'),
[Input('url', 'pathname')]) # on page-load
def header(pathname):
return self.header(self.title)
return self.header()
@self.dash_app.callback(Output('prev-states', 'children'),
[Input('url', 'pathname')])
@ -245,7 +244,7 @@ class UrsulaStatusPage(NetworkStatusPage):
@self.dash_app.callback(Output('header', 'children'), [Input('url', 'pathname')]) # on page-load
def header(pathname):
return self.header(self.title)
return self.header()
@self.dash_app.callback(Output('ursula_info', 'children'), [Input('url', 'pathname')]) # on page-load
def ursula_info(pathname):