css and ui imprvements

xmrnodes/app.py

@@ -30,11 +30,11 @@ HEALTHY_BLOCK_DIFF = 500 # idc to config this. hardcode is fine.
 @app.route("/", methods=["GET", "POST"])
 def index():
     form = SubmitNode()
-    nettype = request.args.get("nettype", "mainnet")
+    nettype = request.args.get("network", "mainnet")
-    crypto = request.args.get("crypto", "monero")
+    crypto = request.args.get("chain", "monero")
     onion = request.args.get("onion", False)
     show_all = "true" == request.args.get("all", "false")
-    web_compatible = request.args.get("web_compatible", False)
+    web_compatible = request.args.get("cors", False)
     highest_block = get_highest_block(nettype, crypto)
     healthy_block = highest_block - HEALTHY_BLOCK_DIFF
 

xmrnodes/static/css/style.css

@@ -4,7 +4,7 @@
 }
 
 .section {
-  margin-bottom: 1em;
+  margin-bottom: 0em;
 }
 
 .btn {
@@ -87,3 +87,55 @@ input[type="text"] {
 .filter-red {
   filter: invert(16%) sepia(59%) saturate(5380%) hue-rotate(333deg) brightness(79%) contrast(101%);
 }
+
+#filters {
+  margin-top: 1em;
+}
+
+#filters span {
+  margin: 1em;
+}
+
+.pure-button {
+  /* filter: drop-shadow(6px 6px 0 #00e7e3); */
+  /* filter: drop-shadow(6px 6px 0 #e70078); */
+  box-shadow: 5px 5px 0 #00e7e3;
+  margin: 1em 0 1em 0;
+  cursor: pointer;
+  transition: .1s ease all;
+}
+
+.pure-button:hover {
+  transform: translate(4px, 10%);
+  box-shadow: 1px 1px 0px #00e7e3;
+  transition: .1s ease all;
+  cursor: pointer;
+}
+
+.pure-pink {
+  background-color: #e70078;
+  box-shadow: 5px 5px 0 #f599c9;
+  color: #f9f9f9;
+}
+
+.pure-pink:hover {
+  background-color: #e70078;
+  box-shadow: 1px 1px 0 #f599c9;
+  color: #f9f9f9;
+}
+
+.pure-grey {
+  box-shadow: 5px 5px 0 #b2d6f7;
+}
+
+.pure-grey:hover {
+  box-shadow: 1px 1px 0 #b2d6f7;
+}
+
+.nodeURL {
+  user-select: all;
+}
+
+td img {
+  padding-right: .75em;
+}

xmrnodes/templates/index.html

@@ -16,6 +16,7 @@
             <div class="form-group">
               {{ f.label }}
               {{ f }}
+              <button type="submit" class="pure-button pure-button-primary">Submit</button>
             </div>
           {% endif %}
         {% endfor %}
@@ -24,20 +25,57 @@
             <li>{{ form[field].label }}: {{ ', '.join(errors) }}</li>
         {% endfor %}
         </ul>
-        <button type="submit" class="pure-button pure-button-primary">Submit</button>
+        
     </form>
   </div>
 
   <div id="nodes" class="pure-u-1 section">
     <h2 class="center">Find a Node</h2>
     <div class="center" id="filters">
-      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=mainnet"><button class="pure-button search-btn">Mainnet</button></a>
+      <form>
-      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=testnet"><button class="pure-button search-btn">Testnet</button></a>
+        <span>
-      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=stagenet"><button class="pure-button search-btn">Stagenet</button></a>
+          <label for="chainSelect">Chain:</label>
-      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}web_compatible=true"><button class="pure-button search-btn">Web</button></a>
+          <select name="chain" id="chainSelect">
-      {% if 'onion' not in request.args %}<a href="{% if 'nettype' in request.args or 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}onion=true"><button class="pure-button search-btn"><img src="/static/images/tor.svg" width=15px> Onion</button></a>{% endif %}
+            <option value="monero" autofocus>Monero</option>
-      <a href="/?crypto=wownero"><button class="pure-button search-btn wownero"><img src="/static/images/wownero.svg" width=50px></button></a>
+            <option value="wownero">Wownero</option>
-      <a href="/"><button class="pure-button search-btn button-warning" style="border: dashed red;">x Clear</button></a>
+          </select>
+        </span>
+
+        <span>
+          <label for="networkSelect">Network:</label>
+          <select name="network" id="networkSelect">
+            <option value="mainnet" autofocus>Mainnet</option>
+            <option value="testnet">Testnet</option>
+            <option value="stagenet">Stagenet</option>
+          </select>
+        </span>
+        
+        <span>
+          <label for="cors">Web (CORS):</label>
+          <input type="checkbox" name="cors" id="cors">
+        </span>
+
+        <span>
+          <label for="onion">Onion:</label>
+          <input type="checkbox" name="onion" id="onion">
+        </span>
+
+        <span>
+          <input type="submit" value="Filter" class="pure-button pure-pink">
+        </span>
+
+        <span>
+          <a href="/"><input type="button" value="Reset" class="pure-button pure-grey"></a>
+        </span>
+        <!--
+        <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=mainnet"><button class="pure-button search-btn">Mainnet</button></a>
+        <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=testnet"><button class="pure-button search-btn">Testnet</button></a>
+        <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=stagenet"><button class="pure-button search-btn">Stagenet</button></a>
+        <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}web_compatible=true"><button class="pure-button search-btn">Web</button></a>
+        {% if 'onion' not in request.args %}<a href="{% if 'nettype' in request.args or 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}onion=true"><button class="pure-button search-btn"><img src="/static/images/tor.svg" width=15px> Onion</button></a>{% endif %}
+        <a href="/?crypto=wownero"><button class="pure-button search-btn wownero"><img src="/static/images/wownero.svg" width=50px></button></a>
+        -->
+      </form>
     </div>
     <br>
     {% if nodes %}
@@ -53,7 +91,7 @@
         {% endif %}
         Tracking {{ nodes_all }} {{ nettype }} {{ crypto | capitalize }} nodes in the database.
         <br>
-        Of those, {{ nodes_unhealthy }} nodes failed their last check-in (unresponsive to ping or over 100 blocks away from highest reported block).
+        Of those, {{ nodes_unhealthy }} nodes failed their last check-in (unresponsive to ping or over 500 blocks away from highest reported block).
       </p>
       <p class="center">Showing {{ nodes | length }} nodes.
         {% if 'all' not in request.args %}
@@ -79,7 +117,7 @@
         <tbody>
           {% for node in nodes %}
           <tr class="js-sort-table">
-            <td>{% if node.is_tor %}<img src="/static/images/tor.svg" width="15px">{% endif %}{{ node.url }}</td>
+            <td>{% if node.is_tor %}<img src="/static/images/tor.svg" width="15px">{% endif %}<span class="nodeURL">{{ node.url }}</span></td>
             <td>{{ node.last_height }}</td>
             <td>
               {% if node.available %}