cleaning up css styles for mobile. Removing menu on confirmation / message pages

formspree/static/css/main.css

@@ -211,7 +211,6 @@ table {
     height: 0; }
 
 .container {
-  width: 100%;
   max-width: 950px;
   margin: 0 auto; }
   .container:after {
@@ -221,8 +220,9 @@ table {
     visibility: hidden;
     line-height: 0;
     height: 0; }
-  .container.narrow {
+  @media (min-width: 760px) {
-    max-width: 600px; }
+    .container.narrow {
+      max-width: 600px; } }
   @media (max-width: 760px) {
     .container {
       max-width: 100% !important; } }
@@ -717,7 +717,6 @@ a.alert-box.success:hover {
           border-bottom: 5px solid #ddd; }
           .dashboard table.responsive tr td {
             display: block;
-            text-align: center;
             font-size: 13px;
             border-bottom: 1px dotted #ccc;
             margin: 10px auto;
@@ -727,7 +726,6 @@ a.alert-box.success:hover {
           .dashboard table.responsive tr td:before {
             content: attr(data-label);
             display: block;
-            text-align: center;
             text-transform: uppercase;
             font-weight: bold; } }
     .dashboard table.submissions {
@@ -738,8 +736,7 @@ a.alert-box.success:hover {
       .dashboard table.submissions tr:first-child td {
         padding-top: 10px; }
       .dashboard table.submissions td {
-        padding: 3px 1px;
+        padding: 3px 1px; }
-        border: 1px ridge; }
       .dashboard table.submissions pre {
         font-family: inherit;
         margin: 0;
@@ -919,6 +916,12 @@ a.alert-box.success:hover {
   .html-highlight .comment {
     color: #696969; }
 
+a.button.export {
+  width: 11em;
+  text-align: center;
+  display: inline-block;
+  margin: 0 0 20px 20px; }
+
 .slicknav_btn {
   position: relative;
   display: block;
@@ -1303,9 +1306,6 @@ body#card {
   text-align: center; }
   body#card.dashboard {
     padding-top: 0; }
-  @media screen and (max-width: 40em) {
-    body#card {
-      padding-top: 0; } }
 
 .tooltip {
   font-weight: 600;
@@ -1349,21 +1349,24 @@ body#card {
   padding-bottom: 1em; }
   @media (max-width: 760px) {
     .container {
-      padding-bottom: 0 !important;
+      padding-bottom: 0 !important; } }
-      padding-top: 0 !important; } }
   .container.block {
     padding-bottom: 1.5em;
     padding-top: 1.5em; }
     @media (max-width: 760px) {
       .container.block {
-        padding-top: 0 !important;
         padding-bottom: 0 !important; } }
     .container.block:first-child {
       padding-top: 0; }
     .container.block:last-child {
       padding-bottom: 0; }
-  .container.card {
+  @media (min-width: 760px) {
-    max-width: 500px; }
+    .container.card {
+      max-width: 500px; } }
+  @media (max-width: 760px) {
+    .container.card {
+      margin-right: 20px;
+      margin-left: 20px; } }
   .container.index-card {
     max-width: 950px; }
 

formspree/static/scss/dashboard.scss

@@ -72,7 +72,6 @@
 
           td {
             display: block;
-            text-align: center;
             font-size: 13px;
             border-bottom: 1px dotted #ccc;
             margin: 10px auto;
@@ -86,7 +85,6 @@
           td:before {
             content: attr(data-label);
             display: block;
-            text-align: center;
             text-transform: uppercase;
             font-weight: bold;
           }
@@ -104,7 +102,6 @@
       tr:first-child td { padding-top: 10px; }
       td {
         padding: 3px 1px;
-        border: 1px ridge;
       }
       pre {
         font-family: inherit;
@@ -351,3 +348,10 @@
   .attrvalue { color: #0000e6 }
   .comment { color: #696969 }
 }
+
+a.button.export {
+  width: 11em;
+  text-align: center;
+  display: inline-block;
+  margin: 0 0 20px 20px;
+}

formspree/static/scss/grid.scss

@@ -11,7 +11,6 @@
 }
 
 .container {
-    width: 100%;
     max-width: 950px;
     margin: 0 auto;
 
@@ -25,7 +24,9 @@
     }
 
     &.narrow {
-        max-width: 600px;
+        @media (min-width: 760px) {
+            max-width: 600px;
+        }
     }
 
     @media (max-width: 760px) {

formspree/static/scss/main.scss

@@ -40,9 +40,6 @@ body#card {
         padding-top: 0;
     }
 
-    @media screen and (max-width: 40em) {
-        padding-top: 0;
-    }
 }
 
 .tooltip {
@@ -117,7 +114,6 @@ body#card {
 
     @media (max-width: 760px) {
         padding-bottom: 0 !important;
-        padding-top: 0 !important;
     }
 
     &.block {
@@ -125,7 +121,6 @@ body#card {
         padding-top: 1.5em;
 
         @media (max-width: 760px) {
-            padding-top: 0 !important;
             padding-bottom: 0 !important;
         }
 
@@ -138,7 +133,15 @@ body#card {
     }
 
     &.card {
-        max-width: 500px;
+        @media (min-width: 760px) {
+            max-width: 500px;
+        }
+
+        @media (max-width: 760px) {
+            margin-right: 20px;
+            margin-left: 20px;
+        }
+
     }
 
     &.index-card {

formspree/templates/forms/captcha.html

@@ -36,7 +36,8 @@
 
       grecaptcha.render('recaptcha', {
         'sitekey' : {{ config.RECAPTCHA_KEY|tojson|safe }},
-        'callback' : success
+        'callback' : success,
+        'size': window.innerWidth < 400 ? 'compact' : 'normal'
       });
     };
   </script>

formspree/templates/forms/confirmation_sent.html

@@ -9,7 +9,8 @@
         'sitekey' : {{ config.RECAPTCHA_KEY|tojson|safe }},
         'callback' : function () {
           document.querySelector('form').submit()
-        }
+        },        
+        'size': window.innerWidth < 400 ? 'compact' : 'normal'        
       });
     }
   </script>

formspree/templates/forms/submissions.html

@@ -59,8 +59,8 @@
 </div>
 <div class="container block">
   <div class="col-1-1 right">
-    <a href="{{ url_for('form-submissions', hashid=form.hashid, format='csv') }}" target="_blank" class="button">Export as CSV</a>
+    <a href="{{ url_for('form-submissions', hashid=form.hashid, format='csv') }}" target="_blank" class="button export">Export&nbsp;as&nbsp;CSV</a>
-    <a href="{{ url_for('form-submissions', hashid=form.hashid, format='json') }}" target="_blank" class="button">Export as JSON</a>
+    <a href="{{ url_for('form-submissions', hashid=form.hashid, format='json') }}" target="_blank" class="button export">Export&nbsp;as&nbsp;JSON</a>
   </div>
 
 {% endblock %}

formspree/templates/forms/unblock_email.html

@@ -7,7 +7,8 @@
         'sitekey' : {{ config.RECAPTCHA_KEY|tojson|safe }},
         'callback' : function () {
           document.querySelector('form').submit()
-        }
+        },
+        'size': window.innerWidth < 400 ? 'compact' : 'normal'        
       });
     }
   </script>

formspree/templates/layouts/base.html

@@ -40,6 +40,7 @@ ga('send', 'pageview');
     {% endwith %}
   </noscript>
 
+  {% block nav %}
   <nav>
     {% if g.user.is_authenticated %}
       <div class="greetings">
@@ -63,6 +64,7 @@ ga('send', 'pageview');
     {% endif %}
       </div>
   </nav>
+  {% endblock %}
 
   <div class="row">
     {% block base %}

formspree/templates/layouts/message.html

@@ -1,5 +1,7 @@
 {% extends 'layouts/base.html' %}
 
+{% block nav %}{% endblock %}
+
 {% block footer %}
 <div class="container narrow">
   <p class="footer">Powered by {{config.SERVICE_NAME}}. <a href="{{config.SERVICE_URL}}">Read more.</a></p>

web/test2.html

@@ -0,0 +1,8 @@
+<html>
+<form action="http://localhost:5000/test@formspree.io" method="POST">
+<input type="text" name="email" placeholder="email" />
+<input type="text" name="message" placeholder="message" />
+<input type="hidden" name="_next" value="http://localhost:8000/thanks.html"/>
+<input type="submit"/>
+</form>
+</html>