diff --git a/Makefile b/Makefile index e94106e..c24d8cd 100644 --- a/Makefile +++ b/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 diff --git a/client/scss/components/_form.scss b/client/scss/components/_form.scss index 1a602cb..e53b783 100644 --- a/client/scss/components/_form.scss +++ b/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 { - @include boxPadding(0, 0); + textarea { + padding: 20px; + @include codeTextArea; + box-sizing: border-box; + width: 100%; + height: 100%; + border: 1px solid $borderColor; - height: 60px; - display: flex; - 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%) - } + &:active, &:focus { + border-color: darken($selectBorderColor, 10%) } } } diff --git a/dpaste/apps.py b/dpaste/apps.py index 6f20a14..1c112e6 100644 --- a/dpaste/apps.py +++ b/dpaste/apps.py @@ -76,10 +76,10 @@ class dpasteAppConfig(AppConfig): # ) EXPIRE_CHOICES = ( ("onetime", _("One-Time snippet")), - (3600, _("In one hour")), - (3600 * 24 * 7, _("In one week")), - (3600 * 24 * 30, _("In one month")), - ("never", _("Never")), + (3600, _("Expire in one hour")), + (3600 * 24 * 7, _("Expire in one week")), + (3600 * 24 * 30, _("Expire in one month")), + ("never", _("Never Expire")), ) # Default value for ``EXPIRE_CHOICES`` diff --git a/dpaste/templates/dpaste/includes/form.html b/dpaste/templates/dpaste/includes/form.html index 734d091..63e3453 100644 --- a/dpaste/templates/dpaste/includes/form.html +++ b/dpaste/templates/dpaste/includes/form.html @@ -4,39 +4,38 @@ {% csrf_token %} {{ form.non_field_errors }} -
-

{{ form.title }}

{# Honeypot field #} +

{{ form.title }}

{# Honeypot field #} -

- - {{ form.lexer }} -

+

+ + {{ form.lexer }} +

-

- - {{ form.expires }} -

+

+ + {{ form.expires }} +

-

- {{ form.rtl }} - -

+

+ {{ form.rtl }} + +

-

- -

-
- -

+

{{ form.content }}

+

+ +

+ + {{ dpaste_extra_post_form }}