Merge remote-tracking branch 'origin/master'

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,27 @@
+---
+name: ⚠️ Bug
+about: Report a problem or defect
+---
+
+## Description
+
+<!-- A brief description of the issue -->
+
+## Environment
+
+URL:
+
+<!-- If the issue is browser-specific, include the link from https://whatsmybrowser.org/ -->
+
+## Steps to reproduce
+
+1.
+2.
+3. ...
+
+## Expected result
+
+
+## Actual result
+
+<!-- Include a traceback, screenshot or video if applicable -->

.github/ISSUE_TEMPLATE/feature.md

@@ -0,0 +1,12 @@
+---
+name: ✨ Feature
+about: Request new functionality or modifications to existing functionality
+---
+
+## Description
+
+## Acceptance Criteria
+
+<!-- Concrete steps that can be taken to confirm this works as expected -->
+
+

.github/ISSUE_TEMPLATE/task.md

@@ -0,0 +1,8 @@
+---
+name: 👷 Task
+about: Behind-the-scenes work (upgrades, technical debt cleanup, etc.)
+---
+
+## Description
+
+## Reason for task

CHANGELOG.rst

@@ -1,6 +1,11 @@
 Changelog
 =========
 
+3.5 (master)
+------------
+
+- Mobile view improvements.
+
 3.4 (2019-12-08)
 ----------------
 

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: 700px) {
+    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: 699px) {
+    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%)
-      }
     }
   }
 }

client/scss/components/_header.scss

@@ -140,3 +140,9 @@ ul#snippetOptions {
   position: absolute;
   left: -9999px;
 }
+
+// Hide some options on mobile to make up space
+@media only screen and (max-width: 700px) {
+  .option-type, .sep, .option-edit, .option-slim{ display: none; }
+  #copyHeadline { display: none; }
+}

docs/_static/custom.css

@@ -0,0 +1,4 @@
+.highlight { background-color: #f8f8f8; }
+.highlight pre { font-size: 1em; }
+.sidebar .searchbox { border-top: 1px solid #eaecef;; }
+

docs/conf.py

@@ -19,8 +19,10 @@
 
 # -- Project information -----------------------------------------------------
 
+from datetime import datetime
+
 project = 'dpaste'
-copyright = '2018, Martin Mahner'
+copyright = f'2013—{datetime.now().year}, Martin Mahner'
 author = 'Martin Mahner'
 
 # The short X.Y version
@@ -69,7 +71,7 @@ language = None
 exclude_patterns = ['_build', 'Thumbs.db', '.DS_Store']
 
 # The name of the Pygments (syntax highlighting) style to use.
-pygments_style = 'sphinx'
+pygments_style = "tango"
 
 
 # -- Options for HTML output -------------------------------------------------
@@ -79,9 +81,17 @@ pygments_style = 'sphinx'
 #
 
 try:
-    import sphinx_rtd_theme
+    html_theme = "press"
-    html_theme = "sphinx_rtd_theme"
+    html_css_files = ["custom.css"]
-    html_theme_path = ["_themes", ]
+    html_sidebars = {'**': ['util/sidetoc.html', 'util/searchbox.html']}
+    html_theme_options = {
+      "external_links": [
+          ("🐞 File an issue", "https://github.com/bartTC/dpaste/issues"),
+          ("Github", "https://github.com/bartTC/dpaste"),
+          ("Docker Hub", "https://hub.docker.com/r/barttc/dpaste"),
+          ("dpaste.org", "https://dpaste.org")
+      ]
+    }
 
 except ImportError:
     html_theme = 'alabaster'

docs/rtd-requirements.txt

@@ -1 +1,2 @@
 sphinxcontrib-httpdomain
+sphinx_press_theme

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/details.html

@@ -7,19 +7,20 @@
 {% block body_type %}{%endblock %}
 
 {% block headline %}
-  <a href="{{ request.build_absolute_uri }}">{{ request.build_absolute_uri }}</a>
+  <div id="copyHeadline">
-
+    <a href="{{ request.build_absolute_uri }}">{{ request.build_absolute_uri }}</a>
-  <a href="#" id="copyToClipboard" title="{% trans "Copy URL to clipboard" %}">
+      <a href="#" id="copyToClipboard" title="{% trans "Copy URL to clipboard" %}">
-    <svg fill="#FFF" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+      <svg fill="#FFF" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-      <path d="M40.965 6c5.137 0 9.273 3.988 9.8 9h1.188c3.14 0 5.809 2.125 6.68 5h2.309c4.39 0 7.988 3.766 7.988 8.188V55h15.98-.004a1.99 1.99 0 0 1 1.574.652c.356.39.543.91.516 1.441A1.995 1.995 0 0 1 84.906 59h-15.98v26.812c0 4.422-3.598 8.188-7.988 8.188h-39.95C16.598 94 13 90.234 13 85.812V28.186C13 23.765 16.598 20 20.99 20h2.308c.871-2.875 3.54-5 6.68-5h1.187c.528-5.012 4.66-9 9.801-9zm0 4a5.968 5.968 0 0 0-5.992 6v1a2 2 0 0 1-2 2h-2.996c-1.696 0-2.996 1.305-2.996 3s1.3 3 2.996 3H51.95c1.695 0 2.996-1.305 2.996-3s-1.301-3-2.996-3h-2.996a1.998 1.998 0 0 1-1.996-2v-1c0-3.336-2.66-6-5.993-6zm19.973 14h-2.309c-.87 2.875-3.539 5-6.68 5H29.978c-3.14 0-5.809-2.125-6.68-5h-2.309c-1.968 0-3.996 2.05-3.996 4.188v57.624c0 2.137 2.024 4.188 3.996 4.188h39.95c1.968 0 3.996-2.05 3.996-4.188v-26.81H46.176l6.117 5.5c.828.742.894 2.015.156 2.843a2.01 2.01 0 0 1-2.84.157l-9.988-9a2 2 0 0 1 0-3l9.988-9a2.005 2.005 0 0 1 1.465-.532 2.002 2.002 0 0 1 1.219 3.532L46.175 55h18.758V28.189c0-2.137-2.027-4.188-3.996-4.188z"/>
+        <path d="M40.965 6c5.137 0 9.273 3.988 9.8 9h1.188c3.14 0 5.809 2.125 6.68 5h2.309c4.39 0 7.988 3.766 7.988 8.188V55h15.98-.004a1.99 1.99 0 0 1 1.574.652c.356.39.543.91.516 1.441A1.995 1.995 0 0 1 84.906 59h-15.98v26.812c0 4.422-3.598 8.188-7.988 8.188h-39.95C16.598 94 13 90.234 13 85.812V28.186C13 23.765 16.598 20 20.99 20h2.308c.871-2.875 3.54-5 6.68-5h1.187c.528-5.012 4.66-9 9.801-9zm0 4a5.968 5.968 0 0 0-5.992 6v1a2 2 0 0 1-2 2h-2.996c-1.696 0-2.996 1.305-2.996 3s1.3 3 2.996 3H51.95c1.695 0 2.996-1.305 2.996-3s-1.301-3-2.996-3h-2.996a1.998 1.998 0 0 1-1.996-2v-1c0-3.336-2.66-6-5.993-6zm19.973 14h-2.309c-.87 2.875-3.539 5-6.68 5H29.978c-3.14 0-5.809-2.125-6.68-5h-2.309c-1.968 0-3.996 2.05-3.996 4.188v57.624c0 2.137 2.024 4.188 3.996 4.188h39.95c1.968 0 3.996-2.05 3.996-4.188v-26.81H46.176l6.117 5.5c.828.742.894 2.015.156 2.843a2.01 2.01 0 0 1-2.84.157l-9.988-9a2 2 0 0 1 0-3l9.988-9a2.005 2.005 0 0 1 1.465-.532 2.002 2.002 0 0 1 1.219 3.532L46.175 55h18.758V28.189c0-2.137-2.027-4.188-3.996-4.188z"/>
-    </svg>
+      </svg>
-  </a>
+    </a>
-  <input type="text" id="copyToClipboardField" value="{{ request.build_absolute_uri }}"/>
+    <input type="text" id="copyToClipboardField" value="{{ request.build_absolute_uri }}"/>
+  </div>
 {% endblock %}
 
 {% block options %}
   <ul id="snippetOptions">
-    <li>
+    <li class="option-type">
       <strong>{{ snippet.lexer_name }}</strong>
       {% if snippet.expire_type == 1 %}
         {% blocktrans with date=snippet.expires|timeuntil %}Expires in: {{ date }}{% endblocktrans %}
@@ -30,18 +31,18 @@
       {% endif %}
     </li>
     <li class="sep"></li>
-    <li>
+    <li class="option-delete">
       <a href="#delete">{% trans "Delete Now" %}</a>
     </li>
     {% if raw_mode and snippet.expire_type != 3 %}
-      <li><a href="{% url "snippet_details_raw" snippet.secret_id %}">{% trans "Raw" %}</a></li>
+      <li class="option-raw"><a href="{% url "snippet_details_raw" snippet.secret_id %}">{% trans "Raw" %}</a></li>
     {% endif %}
-    <li><a href="{% url "snippet_details_slim" snippet.secret_id %}">{% trans "Slim" %}</a></li>
+    <li class="option-slim"><a href="{% url "snippet_details_slim" snippet.secret_id %}">{% trans "Slim" %}</a></li>
     <textarea id="copySnippetSource">{{ snippet.content }}</textarea>
-    <li><a href="#copy" id="copySnippetToClipboard">{% trans "Copy Snippet" %}</a></li>
+    <li class="option-copy"><a href="#copy" id="copySnippetToClipboard">{% trans "Copy Snippet" %}</a></li>
-    <li><a href="#edit" id="editSnippet">{% trans "Edit Snippet" %}</a></li>
+    <li class="option-edit"><a href="#edit" id="editSnippet">{% trans "Edit Snippet" %}</a></li>
     {% if snippet.lexer != 'text' %}
-      <li>
+      <li class="option-wordwrap">
         <label for="wordwrap">
           <input type="checkbox" id="wordwrap"{% if wordwrap %} checked{% endif %}> Wordwrap
         </label>

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>
 

setup.cfg

@@ -55,10 +55,10 @@ dev =
     ipdb
     isort
     black
-    django-sslserver
     sphinx
     sphinx-autobuild
     sphinx-rtd-theme
+    sphinx_press_theme
     sphinxcontrib-httpdomain
 
 [options.packages.find]