From 0f5d5e6caf14c1fcb39389dd10f822d315789ad1 Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Thu, 22 Jul 2021 19:38:10 +1000
Subject: [PATCH] Re #150 - stop using 'size' across all elements and rely on
 CSS for a better mobile experience (stops fields from pushing out)

---
 backend/static/styles/styles.css      | 13 ++++++++++---
 backend/static/styles/styles.scss     | 21 ++++++++++++++-------
 backend/templates/edit.html           | 10 +++++-----
 backend/templates/settings.html       |  4 ++--
 backend/templates/watch-overview.html |  4 ++--
 5 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/backend/static/styles/styles.css b/backend/static/styles/styles.css
index 7f9976c4..52a194d8 100644
--- a/backend/static/styles/styles.css
+++ b/backend/static/styles/styles.css
@@ -297,8 +297,6 @@ footer {
       color: #dd0000; }
   .pure-form label {
     font-weight: bold; }
-  .pure-form input {
-    width: 100%; }
   .pure-form textarea {
     width: 100%; }
 
@@ -307,7 +305,7 @@ footer {
     max-width: 95%; }
   .edit-form {
     padding: 0.5em;
-    margin: 0.5em; }
+    margin: 0; }
   #nav-menu {
     overflow-x: scroll; } }
 
@@ -354,3 +352,12 @@ and also iPads specifically.
       background-color: #eee; }
     .watch-table.pure-table-striped tr:nth-child(2n-1) td {
       background-color: inherit; } }
+
+/** Desktop vs mobile input field strategy
+- We dont use 'size' with <input> because `size` is too unreliable to override, and will often push-out
+- Rely always on width in CSS
+*/
+@media only screen and (min-width: 761px) {
+  /* m-d is medium-desktop */
+  .m-d {
+    min-width: 80%; } }
diff --git a/backend/static/styles/styles.scss b/backend/static/styles/styles.scss
index b7fd1e34..78565076 100644
--- a/backend/static/styles/styles.scss
+++ b/backend/static/styles/styles.scss
@@ -401,10 +401,6 @@ footer {
     font-weight: bold;
   }
 
-  input {
-    width: 100%;
-  }
-
   textarea {
     width: 100%;
   }
@@ -416,7 +412,7 @@ footer {
   }
   .edit-form {
     padding: 0.5em;
-    margin: 0.5em;
+    margin: 0;
   }
   #nav-menu {
     overflow-x: scroll;
@@ -429,8 +425,7 @@ Max width before this PARTICULAR table gets nasty
 This query will take effect for any screen smaller than 760px
 and also iPads specifically.
 */
-@media only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
 
   .watch-table {
     /* Force table to not be like tables anymore */
@@ -496,3 +491,15 @@ and also iPads specifically.
   }
 }
 
+
+/** Desktop vs mobile input field strategy
+- We dont use 'size' with <input> because `size` is too unreliable to override, and will often push-out
+- Rely always on width in CSS
+*/
+@media only screen and (min-width: 761px) {
+/* m-d is medium-desktop */
+    .m-d {
+        min-width: 80%;
+    }
+}
+
diff --git a/backend/templates/edit.html b/backend/templates/edit.html
index 59ce2dc9..77ee233f 100644
--- a/backend/templates/edit.html
+++ b/backend/templates/edit.html
@@ -5,16 +5,16 @@
     <form class="pure-form pure-form-stacked" action="{{ url_for('edit_page', uuid=uuid, next = request.args.get('next') ) }}" method="POST">
         <fieldset>
             <div class="pure-control-group">
-                {{ render_field(form.url, placeholder="https://...", size=30, required=true) }}
+                {{ render_field(form.url, placeholder="https://...", required=true, class="m-d") }}
             </div>
             <div class="pure-control-group">
-                {{ render_field(form.title, size=30) }}
+                {{ render_field(form.title, class="m-d") }}
             </div>
             <div class="pure-control-group">
-                {{ render_field(form.tag, size=10) }}
+                {{ render_field(form.tag) }}
             </div>
             <div class="pure-control-group">
-                {{ render_field(form.minutes_between_check, size=5) }}
+                {{ render_field(form.minutes_between_check) }}
                 {% if using_default_minutes %}
                     <span class="pure-form-message-inline">Currently using the <a href="{{ url_for('settings_page', uuid=uuid) }}">default global settings</a>, change to another value if you want to be specific.</span>
                 {% else %}
@@ -22,7 +22,7 @@
                 {% endif %}
             </div>
             <div class="pure-control-group">
-                {{ render_field(form.css_filter, size=25, placeholder=".class-name or #some-id, or other CSS selector rule.") }}
+                {{ render_field(form.css_filter, placeholder=".class-name or #some-id, or other CSS selector rule.", class="m-d") }}
                 <span class="pure-form-message-inline">
                     <ul>
                         <li>CSS - Limit text to this CSS rule, only text matching this CSS rule is included.</li>
diff --git a/backend/templates/settings.html b/backend/templates/settings.html
index 8840aef7..59bd46ec 100644
--- a/backend/templates/settings.html
+++ b/backend/templates/settings.html
@@ -7,14 +7,14 @@
     <form class="pure-form pure-form-stacked settings" action="{{url_for('settings_page')}}" method="POST">
         <fieldset>
             <div class="pure-control-group">
-                {{ render_field(form.minutes_between_check, size=5) }}
+                {{ render_field(form.minutes_between_check) }}
                 <span class="pure-form-message-inline">Default time for all watches, when the watch does not have a specific time setting.</span>
             </div>
             <div class="pure-control-group">
                 {% if current_user.is_authenticated %}
                     <a href="{{url_for('settings_page', removepassword='yes')}}" class="pure-button pure-button-primary">Remove password</a>
                 {% else %}
-                {{ render_field(form.password, size=10) }}
+                {{ render_field(form.password) }}
                 <span class="pure-form-message-inline">Password protection for your changedetection.io application.</span>
                 {% endif %}
             </div>
diff --git a/backend/templates/watch-overview.html b/backend/templates/watch-overview.html
index c09ae222..9a024533 100644
--- a/backend/templates/watch-overview.html
+++ b/backend/templates/watch-overview.html
@@ -7,8 +7,8 @@
     <form class="pure-form" action="{{ url_for('api_watch_add') }}" method="POST" id="new-watch-form">
         <fieldset>
             <legend>Add a new change detection watch</legend>
-                {{ render_simple_field(form.url, placeholder="https://...", size=30, required=true) }}
-                {{ render_simple_field(form.tag, size=10, value=active_tag if active_tag else '', placeholder="tag") }}
+                {{ render_simple_field(form.url, placeholder="https://...", required=true) }}
+                {{ render_simple_field(form.tag, value=active_tag if active_tag else '', placeholder="tag") }}
             <button type="submit" class="pure-button pure-button-primary">Watch</button>
         </fieldset>
         <!-- add extra stuff, like do a http POST and send headers -->