diff --git a/assets/styles/main.css b/assets/styles/main.css index f6f68b0..92004d7 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -179,17 +179,6 @@ a.button { form h3 { margin: 0; margin-top: 2rem; - display: flex; - align-items: center; - - &::after { - /*content: '';*/ - height: 1px; - flex: 1; - display: block; - background-color: black; - margin-left: .5em; - } } fieldset { @@ -210,10 +199,6 @@ fieldset { bottom: -.55em; margin-bottom: .5rem; } - - & + button.form-new-item { - margin-top: 1rem; - } } input[type="text"] { @@ -238,6 +223,16 @@ textarea { flex-direction: column; } + & > div.input-group { + flex-direction: row; + align-items: baseline; + + input, + textarea { + flex: 1; + } + } + label { margin-bottom: .5rem; } diff --git a/templates/macros/display_rrset.html b/templates/macros/display_rrset.html index c0a9551..ec16ad5 100644 --- a/templates/macros/display_rrset.html +++ b/templates/macros/display_rrset.html @@ -12,9 +12,7 @@ {% endif %}
- - - + {{ icons::pencil() }}
diff --git a/templates/macros/form.html b/templates/macros/form.html new file mode 100644 index 0000000..3575da0 --- /dev/null +++ b/templates/macros/form.html @@ -0,0 +1,51 @@ +{% macro input(id, name, value, type="text", description="", errors, error_msg_id, label, label_attributes, attributes) %} + +{% set filtered_errors = [] %} + +{% for error in errors %} + {% if error %} + {% set_global filtered_errors = filtered_errors | concat(with=error) %} + {% endif %} +{% endfor %} + + +
+ + {% for error in filtered_errors %} +

+ {{ tr( + msg=error_msg_id, + attr="error-" ~ error.code | replace(from=":", to="-"), + lang=lang) }} +

+ {% endfor %} + {% if description %} +

+ {{ description }} +

+ {% endif %} +
+{% endmacro %} diff --git a/templates/macros/icons.html b/templates/macros/icons.html new file mode 100644 index 0000000..3b99dbd --- /dev/null +++ b/templates/macros/icons.html @@ -0,0 +1,12 @@ +{% macro plus_circle() %} + +{% endmacro %} + +{% macro pencil() %} + + + +{% endmacro %} diff --git a/templates/pages/new_record.html b/templates/pages/new_record.html index d161e2c..014f0f4 100644 --- a/templates/pages/new_record.html +++ b/templates/pages/new_record.html @@ -1,5 +1,8 @@ {% extends "bases/app.html" %} -{% import "macros/new_rrset.html" as new_rrset %} + +{% import "macros/icons.html" as icons %} +{% import "macros/form.html" as form %} + {% block title %}{{ tr(msg="new-record-title", lang=lang) }} – {{ current_zone }} ‑ {% endblock title %} {% block main %} diff --git a/templates/pages/new_record/configure_record.html b/templates/pages/new_record/configure_record.html index 39cdd0e..3f67558 100644 --- a/templates/pages/new_record/configure_record.html +++ b/templates/pages/new_record/configure_record.html @@ -9,29 +9,20 @@ {% set ttl_error = errors | get(key="/addresses/ttl", default="") %}
- -
- - {% if ttl_error %} -

- {{ tr( - msg="record-input-ttl", - attr="error-" ~ ttl_error.code | replace(from=":", to="-"), - lang=lang) }} -

- {% endif %} -

- {{ tr(msg="record-input-ttl", attr="help", lang=lang) }} -

+ {{ + form::input( + id="address-ttl", + name="addresses[ttl]", + value=address.address | default(value=""), + type="number", + errors=[ ttl_error ], + error_msg_id="record-input-ttl", + description=tr(msg="record-input-ttl", attr="help", lang=lang), + label=tr(msg="record-input-ttl", attr="input-label", lang=lang), + label_attributes=[], + attributes=[], + ) + }}
@@ -39,48 +30,33 @@ {% for address in input_data.addresses.data.addresses | default(value=[""]) %} {% set address_error = errors | get(key="/addresses/data/addresses/" ~ loop.index0 ~ "/address", default="") %}
- -
- - {% if global_address_error or address_error %} -

- {% if global_address_error %} - {{ tr( - msg="record-input-addresses", - attr="error-" ~ global_address_error.code | replace(from=":", to="-"), - lang=lang) }} - {% else %} - {{ tr( - msg="record-input-addresses", - attr="error-" ~ address_error.code | replace(from=":", to="-"), - lang=lang) }} - {% endif %} -

- {% endif %} -
+ {{ + form::input( + id="address-" ~ loop.index0, + name="addresses[data][addresses][" ~loop.index0 ~ "][address]", + value=address.address | default(value=""), + type="text", + errors=[ + global_address_error, + address_error, + ], + error_msg_id="record-input-addresses", + label=tr(msg="record-input-addresses", attr="input-label", index=loop.index, lang=lang), + label_attributes=[ + "data-new-item-template-attr", "for", + "data-template-for", "address-{i}", + "data-new-item-template-content", tr(msg="record-input-addresses", attr="input-label", index="{i}", lang=lang), + ], + attributes=[ + "data-new-item-template-attr", "name id", + "data-template-name", "addresses[data][addresses][{i}][address]", + "data-template-id", "address-{i}", + ] + ) + }}
{% endfor %} @@ -158,10 +134,7 @@ {% endfor %} @@ -249,10 +222,7 @@ diff --git a/templates/pages/records.html b/templates/pages/records.html index 18b24fd..8df4c94 100644 --- a/templates/pages/records.html +++ b/templates/pages/records.html @@ -1,4 +1,6 @@ {% import "macros/display_rrset.html" as rrset %} +{% import "macros/icons.html" as icons %} + {% extends "bases/app.html" %} {% block title %}{{ tr(msg="zone-content-title", lang=lang) }} – {{ current_zone }} – {% endblock title %} @@ -21,10 +23,7 @@

{{ node.name }}

- + {{ icons::plus_circle() }} {{ tr(msg="zone-content-new-record-button", lang=lang) }}