diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss index 1db13eae..e182cd35 100644 --- a/changedetectionio/static/styles/scss/styles.scss +++ b/changedetectionio/static/styles/scss/styles.scss @@ -402,8 +402,24 @@ label { } #watch-add-wrapper-zone { - >div { - display: inline-block; + + @media only screen and (min-width: 760px) { + display: flex; + gap: 0.3rem; + flex-direction: row; + } + /* URL field grows always, other stay static in width */ + > span { + flex-grow: 0; + + input { + width: 100%; + padding-right: 1em; + } + + &:first-child { + flex-grow: 1; + } } @media only screen and (max-width: 760px) { diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index 9fd9bef9..8c63d822 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -683,11 +683,23 @@ label:hover { #new-watch-form legend { color: var(--color-text-legend); font-weight: bold; } - #new-watch-form #watch-add-wrapper-zone > div { - display: inline-block; } - @media only screen and (max-width: 760px) { - #new-watch-form #watch-add-wrapper-zone #url { - width: 100%; } } + #new-watch-form #watch-add-wrapper-zone { + /* URL field grows always, other stay static in width */ } + @media only screen and (min-width: 760px) { + #new-watch-form #watch-add-wrapper-zone { + display: flex; + gap: 0.3rem; + flex-direction: row; } } + #new-watch-form #watch-add-wrapper-zone > span { + flex-grow: 0; } + #new-watch-form #watch-add-wrapper-zone > span input { + width: 100%; + padding-right: 1em; } + #new-watch-form #watch-add-wrapper-zone > span:first-child { + flex-grow: 1; } + @media only screen and (max-width: 760px) { + #new-watch-form #watch-add-wrapper-zone #url { + width: 100%; } } #diff-col { padding-left: 40px; } diff --git a/changedetectionio/templates/_helpers.jinja b/changedetectionio/templates/_helpers.jinja index 878a6196..7e7506a9 100644 --- a/changedetectionio/templates/_helpers.jinja +++ b/changedetectionio/templates/_helpers.jinja @@ -39,6 +39,24 @@ {% endmacro %} +{% macro render_nolabel_field(field) %} + + {{ field(**kwargs)|safe }} + {% if field.errors %} + + {% if field.errors %} + + {% endif %} + + {% endif %} + +{% endmacro %} + + {% macro render_button(field) %} {{ field(**kwargs)|safe }} {% endmacro %} \ No newline at end of file diff --git a/changedetectionio/templates/watch-overview.html b/changedetectionio/templates/watch-overview.html index 85620356..b63b5dab 100644 --- a/changedetectionio/templates/watch-overview.html +++ b/changedetectionio/templates/watch-overview.html @@ -1,6 +1,6 @@ {% extends 'base.html' %} {% block content %} -{% from '_helpers.jinja' import render_simple_field, render_field %} +{% from '_helpers.jinja' import render_simple_field, render_field, render_nolabel_field %} @@ -11,14 +11,11 @@
Add a new change detection watch
-
- {{ render_simple_field(form.url, placeholder="https://...", required=true) }} - {{ render_simple_field(form.tags, value=tags[active_tag].title if active_tag else '', placeholder="watch label / tag") }} -
-
- {{ render_simple_field(form.watch_submit_button, title="Watch this URL!" ) }} - {{ render_simple_field(form.edit_and_watch_submit_button, title="Edit first then Watch") }} -
+ + {{ render_nolabel_field(form.url, placeholder="https://...", required=true) }} + {{ render_nolabel_field(form.tags, value=tags[active_tag].title if active_tag else '', placeholder="watch label / tag") }} + {{ render_nolabel_field(form.watch_submit_button, title="Watch this URL!" ) }} + {{ render_nolabel_field(form.edit_and_watch_submit_button, title="Edit first then Watch") }}
{{ render_simple_field(form.processor, title="Edit first then Watch") }}