Fixing messages styling

backend/backend.py

@@ -130,7 +130,7 @@ def import_page():
                 if len(url):
                     remaining_urls.append(url)
 
-        messages.append({'class': 'ok', 'message': "{} imported, {} skipped.".format(good, len(remaining_urls))})
+        messages.append({'class': 'ok', 'message': "{} Imported, {} Skipped.".format(good, len(remaining_urls))})
 
         launch_checks()
 
@@ -138,6 +138,7 @@ def import_page():
                              messages=messages,
                              remaining="\n".join(remaining_urls)
                              )
+    messages = []
     return output
 
 

backend/static/css/styles.css

@@ -165,3 +165,11 @@ color: #fff;
     background: rgb(200, 200, 200);
     /* this is a green */
 }
+
+.messages {
+    padding: 1em;
+    background: rgba(255,255,255,.2);
+    border-radius: 10px;
+    color: #fff;
+    font-weight: bold;
+    }

backend/templates/base.html

@@ -17,10 +17,10 @@
         <ul class="pure-menu-list">
 
             <li class="pure-menu-item">
-                <a href="/import"  class="pure-menu-link">IMPORT</a>
+                <a href="/import" class="pure-menu-link">IMPORT</a>
             </li>
             <li class="pure-menu-item">
-                <a href="/settings"  class="pure-menu-link">SETTINGS</a>
+                <a href="/settings" class="pure-menu-link">SETTINGS</a>
             </li>
             <li class="pure-menu-item"><a class="github-link" href="https://github.com/dgtlmoon/changedetection.io">
                 <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1"
@@ -42,11 +42,13 @@
         {% block header %}{% endblock %}
     </header>
 
+    {% if messages %}
     <div class="messages">
-         {% for message in messages %}
-            <div class="flash-message {{ message['class'] }}">{{ message['message'] }}</div>
+        {% for message in messages %}
+        <div class="flash-message {{ message['class'] }}">{{ message['message'] }}</div>
         {% endfor %}
     </div>
+    {% endif %}
 
 
     {% block content %}

backend/templates/import.html

@@ -9,8 +9,13 @@
         <fieldset class="pure-group">
             <legend>One URL per line, URLs that do not pass validation will stay in the textarea.</legend>
 
-            <textarea name="urls" class="pure-input-1-2" placeholder="https://" cols="150" style="width: 100%;font-family:monospace;" rows="25">{{ remaining }}</textarea>
-        </fieldset>
+            <textarea name="urls" class="pure-input-1-2" placeholder="https://"
+                      style="width: 100%;
+                            font-family:monospace;
+                            white-space: pre;
+                            overflow-wrap: normal;
+                            overflow-x: scroll;" rows="25">{{ remaining }}</textarea>
+    </fieldset>
         <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Import</button>
 
     </form>

backend/templates/watch-overview.html

@@ -15,14 +15,14 @@
         <!-- user/pass r = requests.get('https://api.github.com/user', auth=('user', 'pass')) -->
     </form>
     <div>
-{% for tag in tags %}
-        {% if tag == "" %}
-     <a href="/" class="pure-button button-tag ">All</a>
-        {% else %}
-        <a href="/?tag={{ tag}}" class="pure-button button-tag ">{{ tag }}</a>
-        {% endif %}
-{% endfor %}
-        </div>
+        {% for tag in tags %}
+            {% if tag == "" %}
+            <a href="/" class="pure-button button-tag ">All</a>
+            {% else %}
+            <a href="/?tag={{ tag}}" class="pure-button button-tag ">{{ tag }}</a>
+            {% endif %}
+        {% endfor %}
+    </div>
 
     <div id="watch-table-wrapper">
         <table class="pure-table pure-table-striped watch-table">
@@ -48,9 +48,7 @@
                     <div class="fetch-error">{{ watch.last_error }}</div>
                     {% endif %}
                 </td>
-                <td>{{watch|format_last_checked_time}}
-
-                </td>
+                <td>{{watch|format_last_checked_time}}</td>
                 <td>{{watch.last_changed|format_timestamp_timeago}}</td>
                 <td><a href="/api/checknow?uuid={{ watch.uuid}}" class="pure-button button-small pure-button-primary">Recheck</a>
                     <a href="/edit?uuid={{ watch.uuid}}" class="pure-button button-small pure-button-primary">Edit</a>