Better mobile form grid.

Makefile

@@ -35,7 +35,7 @@ css: ## Compile SCSS files
 
 .PHONY: css-watch
 css-watch: ## Compile JS files
-	npx sass --watch client/scss/dpaste.scss:build/dpaste.css
+	npx sass --watch client/scss/dpaste.scss:dpaste/static/dpaste.css
 
 .PHONY: js
 js: ## Compile JS files

client/scss/components/_form.scss

@@ -11,14 +11,63 @@
 }
 
 .snippet-form {
+  box-sizing: border-box;
   background-color: $bgColor;
 
+  // Desktop Grid
+  @media only screen and (min-width: 800px) {
+    padding: 15px $boxPadding;
+    display: grid;
+    grid-template: "a b c d" "e e e e";
+    grid-template-columns: 1fr 1fr 1fr 10fr;
+    align-items: center;
+
+    .form-textarea {
+      height: 70vh;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      border-top: 1px solid $borderColor;
+      margin-top: 15px;
+      padding-top: 15px;
+    }
+    .form-action { justify-self: end; }
+  }
+
+  // Mobile Grid
+  @media only screen and (max-width: 799px) {
+    padding: 10px;
+    display: grid;
+    justify-content: space-between;
+    grid-template: "a b" "c c" "e e" "d d";
+    align-items: center;
+    .form-expire select { margin-right: 0; }
+    .form-action { justify-self: start; }
+
+    p { padding: 4px 0; }
+  }
+
+  // ⬇ Layout
+  .form-lexer { grid-area: a;}
+  .form-expire { grid-area: b; }
+  .form-rtl { grid-area: c; white-space: nowrap; }
+  .form-action { grid-area: d; }
+  .form-textarea { grid-area: e; }
+
+  .form-action {
+    .btn {
+      width: auto;
+      padding: 6px 20px;
+    }
+  }
+
+  // ⬇ Form Element Appearance
   label {
     display: none;
     font-size: 13px;
   }
 
-  .options-rtl label {
+  .form-rtl label {
     display: inline;
   }
 
@@ -58,38 +107,16 @@
     }
   }
 
-  .options {
+  textarea {
-    @include boxPadding(0, 0);
+    padding: 20px;
+    @include codeTextArea;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border: 1px solid $borderColor;
 
-    height: 60px;
+    &:active, &:focus {
-    display: flex;
+      border-color: darken($selectBorderColor, 10%)
-    align-items: center;
-    border-bottom: 1px solid $borderColor;
-
-    .action {
-      margin-left: auto;
-
-      .btn {
-        width: auto;
-        padding: 6px 20px;
-      }
-    }
-  }
-
-  .content {
-    @include boxPadding(20px, 20px);
-
-    textarea {
-      padding: 20px;
-      @include codeTextArea;
-      min-height: 390px;
-      box-sizing: border-box;
-      width: 100%;
-      border: 1px solid $borderColor;
-
-      &:active, &:focus {
-        border-color: darken($selectBorderColor, 10%)
-      }
     }
   }
 }

dpaste/apps.py

@@ -76,10 +76,10 @@ class dpasteAppConfig(AppConfig):
     #     )
     EXPIRE_CHOICES = (
         ("onetime", _("One-Time snippet")),
-        (3600, _("In one hour")),
+        (3600, _("Expire in one hour")),
-        (3600 * 24 * 7, _("In one week")),
+        (3600 * 24 * 7, _("Expire in one week")),
-        (3600 * 24 * 30, _("In one month")),
+        (3600 * 24 * 30, _("Expire in one month")),
-        ("never", _("Never")),
+        ("never", _("Never Expire")),
     )
 
     # Default value for ``EXPIRE_CHOICES``

dpaste/templates/dpaste/includes/form.html

@@ -4,39 +4,38 @@
   {% csrf_token %}
   {{ form.non_field_errors }}
 
-  <div class="options">
+  <p style="display: none;">{{ form.title }}</p> {# Honeypot field #}
-    <p style="display: none;">{{ form.title }}</p> {# Honeypot field #}
 
-    <p class="options-lexer">
+  <p class="form-lexer">
-      <label for="{{ form.lexer.auto_id }}">{% trans "Syntax" %}</label>
+    <label for="{{ form.lexer.auto_id }}">{% trans "Syntax" %}</label>
-      {{ form.lexer }}
+    {{ form.lexer }}
-    </p>
+  </p>
 
-    <p class="options-expire">
+  <p class="form-expire">
-      <label for="{{ form.expires.auto_id }}">{% trans "Expires" %}</label>
+    <label for="{{ form.expires.auto_id }}">{% trans "Expires" %}</label>
-      {{ form.expires }}
+    {{ form.expires }}
-    </p>
+  </p>
 
-    <p class="options-rtl">
+  <p class="form-rtl">
-      {{ form.rtl }}
+    {{ form.rtl }}
-      <label for="{{ form.rtl.auto_id }}">{% trans "Right-to-Left" %}</label>
+    <label for="{{ form.rtl.auto_id }}">{% trans "Right-to-Left" %}</label>
-    </p>
+  </p>
 
-    <p class="action">
+  <p class="form-textarea superenter {% if not object %}autofocus{% endif %} {% if form.content.errors %}error{% endif %}">
-      <button class="btn" type="submit">
-        {% trans "Paste Snippet" %}
-        <span class="sep"></span>
-        <span class="platform-mac">{% trans "&#8984;+&#9166;" %}</span>
-        <span class="platform-win">{% trans "Ctrl+&#9166;" %}</span>
-      </button>
-    </p>
-  </div>
-
-  <p class="content superenter {% if not object %}autofocus{% endif %} {% if form.content.errors %}error{% endif %}">
       <label for="{{ form.content.auto_id }}">{% trans "Content" %}</label>
     {{ form.content }}
   </p>
 
+  <p class="form-action">
+    <button class="btn" type="submit">
+      {% trans "Paste Snippet" %}
+      <span class="sep"></span>
+      <span class="platform-mac">{% trans "&#8984;+&#9166;" %}</span>
+      <span class="platform-win">{% trans "Ctrl+&#9166;" %}</span>
+    </button>
+  </p>
+
+
   {{ dpaste_extra_post_form }}
 </form>