scss autocompile during development

acros/management/commands/scss.py

@@ -1,30 +1,10 @@
-from pathlib import Path
-
-import sass
 from django.core.management.base import BaseCommand
 
+from acros.utils.assets import save_css
+
 
 class Command(BaseCommand):
     help = 'compile scss'
 
     def handle(self, *args, **kwargs):
-        basedir = Path(__file__).resolve().parent.parent.parent.parent
-
-        inputdir = basedir / "static/scss/"
-        inputfile = inputdir / "main.scss"
-        outputfile = basedir / "static/css/main.css"
-        sourcemap = outputfile.with_suffix(".css.map")
-        with inputfile.open() as f:
-            sass_text = f.read()
-
-        css,sourcemap_text = sass.compile(
-            filename=str(inputfile),
-            output_style="compressed",
-            include_paths=[str(inputdir), str(basedir)],
-            source_map_filename=str(sourcemap)
-        )
-
-        with outputfile.open("w") as f:
-            f.write(css)
-        with sourcemap.open("w") as f:
-            f.write(sourcemap_text)
+        save_css()

acros/templates/acros/index.html

@@ -1,7 +1,11 @@
 {% extends 'base.html' %}
+{% block heading %}
+  <h1 class="acronym">Acronomy</h1>
+  <p class="fullName">because Astronomers love Acronyms</p>
+{% endblock %}
 
 {% block content %}
-<h1>Search</h1>
+{#<h1>Search</h1>#}
 {% endblock %}
 
 {% block searchInput %}autofocus{% endblock %}

acros/urls.py

@@ -36,6 +36,9 @@ urlpatterns = [
 if settings.DEBUG:
     import debug_toolbar
 
+    urlpatterns.append(path("css", views.debug_css, name="css"))
+    urlpatterns.append(path("css_sourcemap", views.debug_css_sourcemap, name="css_sourcemap"))
+
     urlpatterns = [
                       path('__debug__/', include(debug_toolbar.urls)),
                   ] + urlpatterns

acros/utils/assets.py

@@ -0,0 +1,30 @@
+from pathlib import Path
+
+import sass
+
+basedir = Path(__file__).resolve().parent.parent.parent
+
+inputdir = basedir / "static/scss/"
+inputfile = inputdir / "main.scss"
+outputfile = basedir / "static/css/main.css"
+sourcemap = outputfile.with_suffix(".css.map")
+
+
+def get_css(debug=False):
+    sourcemap_name = "css_sourcemap" if debug else str(sourcemap)
+    css, sourcemap_text = sass.compile(
+        filename=str(inputfile),
+        output_style="compressed",
+        include_paths=[str(inputdir), str(basedir)],
+        source_map_filename=sourcemap_name,
+        source_map_contents=debug
+    )
+    return css, sourcemap_text
+
+
+def save_css():
+    css, sourcemap_text = get_css()
+    with outputfile.open("w") as f:
+        f.write(css)
+    with sourcemap.open("w") as f:
+        f.write(sourcemap_text)

acros/views.py

@@ -1,10 +1,12 @@
 from django.contrib.auth.mixins import LoginRequiredMixin
+from django.http import HttpResponse
 from django.views import generic
 from rest_framework import viewsets, filters
 
 from acros.forms import EditForm, AddForm
 from acros.models import Acronym, Tag
 from acros.serializers import AcronymSerializer, AcronymListSerializer, TagSerializer
+from acros.utils.assets import get_css
 
 
 class IndexView(generic.TemplateView):
@@ -79,3 +81,16 @@ class AcronymViewSet(viewsets.ReadOnlyModelViewSet):
 class TagViewSet(viewsets.ReadOnlyModelViewSet):
     queryset = Tag.objects.all().order_by("name")
     serializer_class = TagSerializer
+
+
+##### DEBUG views #####
+
+
+def debug_css(request):
+    css, source_map = get_css(debug=True)
+    return HttpResponse(css, content_type="text/css")
+
+
+def debug_css_sourcemap(request):
+    css, source_map = get_css(debug=True)
+    return HttpResponse(source_map, content_type="application/json")

static/app.js

@@ -10,10 +10,12 @@ new Autocomplete('#autocomplete', {
     // results. In this case we're using
     // the Wikipedia search API.
     search: input => {
-        const url = "/api/acronym/?search=" + input
+
+        const acroSearch = input.split(':')[0];
+        const url = "/api/acronym/?search=" + acroSearch
 
         return new Promise(resolve => {
-            if (input.length < 1) {
+            if (acroSearch.length < 1) {
                 return resolve([])
             }
 

static/scss/main.scss

@@ -46,9 +46,12 @@
 
 
 .accountStatus {
-  position: absolute;
-  top: 20px;
-  right: 20px;
+  @include media-breakpoint-up(md) {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+
+  }
 }
 
 h1 {

templates/base.html

@@ -9,7 +9,11 @@
   <title>{% block title %}Acronomy{% endblock %}</title>
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{% static "css/main.css" %}">
+  {% if debug %}
+    <link rel="stylesheet" href="{% url "css" %}">
+  {% else %}
+    <link rel="stylesheet" href="{% static "css/main.css" %}">
+  {% endif %}
   {% block extra_head %}
   {% endblock %}
 </head>
@@ -29,7 +33,8 @@
   {% block heading %}
   {% endblock %}
   <div id="autocomplete" class="autocomplete">
-    <input class="autocomplete-input" {% block searchInput %}{% endblock %}/>
+    <input placeholder="Search for an acronym"
+           class="autocomplete-input" {% block searchInput %}{% endblock %}/>
     <ul class="autocomplete-result-list"></ul>
   </div>