Commit 157a2397 authored by Jan Čermák's avatar Jan Čermák

configuration interface styling - closes #2814

parent 4e278bd9
......@@ -29,12 +29,13 @@ def get_handler(handler_name):
return Handler
def render_form(form, **kwargs):
def render(form, **kwargs):
# same premise as in wizard form - we are handling single-section ForisForm
first_section = form.sections[0]
title = first_section.title
description = first_section.description
return template("config/main", form=form, title=title, description=description, **kwargs)
return template("config/main", form=form, title=title, description=description,
handlers=handler_map.keys(), **kwargs)
@app.route("/")
......@@ -48,8 +49,7 @@ def index():
def config_get(handler_name):
Handler = get_handler(handler_name)
handler = Handler()
form = handler.form
return render_form(form)
return render(handler.form, active_handler_key=handler_name)
@app.route("/<handler_name:re:.+>/", method="POST")
......@@ -61,7 +61,7 @@ def config_post(handler_name):
# only update is allowed
logger.debug("ajax request")
request.POST.pop("update", None)
return dict(html=render_form(handler.form, is_xhr=True))
return dict(html=render(handler.form, is_xhr=True))
try:
if handler.save():
......@@ -69,7 +69,7 @@ def config_post(handler_name):
except TypeError:
# raised by Validator - could happen when the form is posted with wrong fields
pass
return render_form(handler.form)
return render(handler.form, active_handler_key=handler_name)
@app.route("/<handler_name:re:.+>/ajax")
......
......@@ -11,13 +11,18 @@ $foreground-color: #000
$highlight-color: #a32027
$highlight-color-active: lighten(desaturate($highlight-color, 20), 15)
$link-color: #004477
$stroke-color: #ccc
$stroke-color: #888
$base-font: Helvetica, Arial, sans-serif
$heading-font: $base-font
$button-height: 2em
$info-color: #3ab54a
$error-color: #cc0000
// buttons
$button-color: $highlight-color
$button-color-active: $highlight-color-active
$button-color-grayed: #808080
/* -------------------------------------------------------------------------
/* Generic elements
h1, h2, h3, h4, h5, h6
......@@ -41,6 +46,8 @@ h2
h3
+adjust-font-size-to(26px)
button
border: none
/* -------------------------------------------------------------------------
/* Layout
@include establish-baseline
......@@ -54,11 +61,11 @@ body, html
#page
margin: 0 auto
width: 50em
width: 60em
.button
background-color: $highlight-color
background-color: $button-color
color: #fff
display: inline-block
font:
......@@ -73,11 +80,11 @@ body, html
z-index: 999
&:hover
background-color: $highlight-color-active
background-color: $button-color-active
color: #fff
&:before
background-color: $highlight-color-active
background-color: $button-color-active
.button-arrow-right
@extend .button
......@@ -96,36 +103,47 @@ body, html
z-index: -1
/* -------------------------------------------------------------------------
/* Wizard
button
border: none
/* Common config interface elements
.field-hint
vertical-align: middle
#wizard-header
border-bottom: 1px solid $stroke-color
padding: 1em 0
.button-next
@extend .button-arrow-right
float: right
margin-top: 1em
.stepno
+adjust-font-size-to(36px)
font-weight: bold
float: right
.tabs
border-bottom: 1px solid $stroke-color
display: block
position: relative
.stepno-current
font-weight: normal
li
background-color: #e6e6e6
border: 1px solid $stroke-color
border-bottom: none
display: inline-block
#wizard-icon
float: left
width: 120px
a
color: $foreground-color
display: block
line-height: 2.6em
height: 2.6em
padding: 0 1em
text-decoration: none
#wizard-icon + #wizard-content
margin-left: 125px
&:first-child
margin-left: 3em
h1
margin-top: 1em
&.active
background-color: $background-color
font-weight: bold
position: relative
top: 1px
.wizard-description
margin-bottom: 2em
a
padding-top: 0.25em
.wizard-form
.wizard-form, .config-form
div
padding: 0.25em 0
......@@ -140,14 +158,6 @@ button
padding: 0.5em
width: 25em
.field-hint
vertical-align: middle
.button-next
@extend .button-arrow-right
float: right
margin-top: 1em
.background-progress
color: #444
text-align: center
......@@ -155,9 +165,81 @@ button
img
margin-bottom: 2em
.form-buttons
position: absolute
right: 0
#time-success, #updater-success, #updater-fail
display: none
text-align: center
#wizard-time-sync-success
display: none
\ No newline at end of file
display: none
#logout
position: absolute
right: 1em
top: 1em
/* -------------------------------------------------------------------------
/* Wizard
#wizard-header
border-bottom: 1px solid $stroke-color
padding: 1em 0
.stepno
+adjust-font-size-to(36px)
font-weight: bold
float: right
.stepno-current
font-weight: normal
#wizard-icon
float: left
width: 120px
#wizard-icon + #wizard-content
margin-left: 125px
h1
margin-top: 1em
.wizard-description
margin-bottom: 2em
/* -------------------------------------------------------------------------
/* Config
#config-header
position: relative
h1
background: url('../img/wizard/step-wan.png') no-repeat
display: inline-block
padding-left: 120px
height: 120px
line-height: 120px
.logo-turris
display: inline-block
position: absolute
right: 0
top: 55px
.config-description
margin: 2.5em 0
.config-form
position: relative
.button
font-size: 100%
height: 3em
line-height: 3em
margin-right: 0.5em
&.grayed
background-color: $button-color-grayed
&:hover
background-color: lighten(desaturate($button-color-grayed, 20), 15)
\ No newline at end of file
%if not defined('is_xhr'):
%rebase _layout **locals()
<div id="config-header">
<h1>{{ _("Settings") }}</h1>
<div class="logo-turris"><img src="/static/img/logo-turris.png"></div>
<a id="logout" href="/logout">{{ _("Log out") }}</a>
</div>
<div id="config-content">
<div id="admin-content">
<ul class="tabs">
%for handler in handlers:
<li \\
%if defined("active_handler_key") and handler == active_handler_key:
class="active" \\
%end\\
><a href="/config/{{ handler }}/">{{ handler }}</a></li>
%end
</ul>
%end
%include
......
%rebase _layout **locals()
<h1>Foris</h1>
<a href="/logout">odhlásit</a>
<ul>
%for handler in handlers:
<a href="/config/{{ handler }}/">{{ handler }}</a>
%end
</ul>
\ No newline at end of file
%rebase config/base **locals()
\ No newline at end of file
%rebase config/base **locals()
<form id="wizard-main-form" class="wizard-form" action="" method="post" autocomplete="off">
<h1>{{ title }}</h1>
<p class="wizard-description">{{ description }}</p>
<form id="main-form" class="config-form" action="" method="post" autocomplete="off">
<p class="config-description">{{ description }}</p>
%for field in form.active_fields:
%if field.hidden:
{{! field.render() }}
%else:
<div>
{{! field.label_tag }}
{{! field.render() }}
......@@ -11,6 +13,10 @@
<img class="field-hint" src="/static/img/icon-help.png" title="{{ field.hint }}">
%end
</div>
%end
%end
<button type="submit" name="send" class="button">{{ _("Save") }}</button>
<div class="form-buttons">
<a href="{{ request.fullpath }}" type="submit" class="button grayed">{{ _("Discard changes") }}</a>
<button type="submit" name="send" class="button">{{ _("Save changes") }}</button>
</div>
</form>
\ No newline at end of file
......@@ -15,4 +15,5 @@
<ul>
<li><a href="uci/">about:config</a></li>
<li><a href="wizard/">kuzelňik</a></li>
<li><a href="config/">dlaší natavení</a></li>
</ul>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment