mirror of
https://github.com/DarrenOfficial/dpaste.git
synced 2024-12-23 23:23:06 +11:00
Better mobile form grid.
This commit is contained in:
Martin Mahner
parent
d8e3d62f29
commit
2b08f32e14
4 changed files with 88 additions and 62 deletions
2
Makefile
2
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
|
||||
|
|
|
|||
|
|
@ -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%)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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``
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<label for="{{ form.lexer.auto_id }}">{% trans "Syntax" %}</label>
|
||||
{{ form.lexer }}
|
||||
</p>
|
||||
<p class="form-lexer">
|
||||
<label for="{{ form.lexer.auto_id }}">{% trans "Syntax" %}</label>
|
||||
{{ form.lexer }}
|
||||
</p>
|
||||
|
||||
<p class="options-expire">
|
||||
<label for="{{ form.expires.auto_id }}">{% trans "Expires" %}</label>
|
||||
{{ form.expires }}
|
||||
</p>
|
||||
<p class="form-expire">
|
||||
<label for="{{ form.expires.auto_id }}">{% trans "Expires" %}</label>
|
||||
{{ form.expires }}
|
||||
</p>
|
||||
|
||||
<p class="options-rtl">
|
||||
{{ form.rtl }}
|
||||
<label for="{{ form.rtl.auto_id }}">{% trans "Right-to-Left" %}</label>
|
||||
</p>
|
||||
<p class="form-rtl">
|
||||
{{ form.rtl }}
|
||||
<label for="{{ form.rtl.auto_id }}">{% trans "Right-to-Left" %}</label>
|
||||
</p>
|
||||
|
||||
<p class="action">
|
||||
<button class="btn" type="submit">
|
||||
{% trans "Paste Snippet" %}
|
||||
<span class="sep"></span>
|
||||
<span class="platform-mac">{% trans "⌘+⏎" %}</span>
|
||||
<span class="platform-win">{% trans "Ctrl+⏎" %}</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="content superenter {% if not object %}autofocus{% endif %} {% if form.content.errors %}error{% endif %}">
|
||||
<p class="form-textarea 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 "⌘+⏎" %}</span>
|
||||
<span class="platform-win">{% trans "Ctrl+⏎" %}</span>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
|
||||
{{ dpaste_extra_post_form }}
|
||||
</form>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue