Get SASS compilation working

Main thing that was missing was including the main CSS file in the template.

There are a few hacky bits here, like moving the whole of toolkit inside the
stylesheets directory.

Would arguably be cleaner using something that isn’t Flask Assets, but that’s
something for later.

app/__init__.py

@@ -79,11 +79,12 @@ def init_asset_environment(app):
 
     # Tell flask-assets where to look for our sass files.
     env.load_path = [
-        os.path.join(os.path.dirname(__file__), 'assets/stylesheets'),
         os.path.join(os.path.dirname(__file__), 'assets'),
+        os.path.join(os.path.dirname(__file__), 'assets/stylesheets'),
         os.path.join(os.path.dirname(__file__), 'assets/stylesheets/stylesheets/govuk_frontend_toolkit'),
-        os.path.join(os.path.dirname(__file__), 'assets/stylesheets/govuk_template')
-
+        os.path.join(os.path.dirname(__file__), 'assets/stylesheets/govuk_template'),
+        os.path.join(os.path.dirname(__file__), 'assets/stylesheets/views'),
+        os.path.join(os.path.dirname(__file__), 'assets/stylesheets/components'),
     ]
 
     scss = get_filter('scss', as_output=True)
@@ -93,7 +94,7 @@ def init_asset_environment(app):
         assets.Bundle(
             'main.scss',
             filters='scss',
-            output='css_all.css'
+            output='stylesheets/css_all.css'
         )
     )
 

app/assets/stylesheets/govuk_elements/main.scss

@@ -3,8 +3,8 @@
 // https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
 
 
-@import "../../govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta";
-@import "../../govuk_frontend_toolkit/stylesheets/design-patterns/buttons";
+@import "../govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta";
+@import "../govuk_frontend_toolkit/stylesheets/design-patterns/buttons";
 
 // GOV.UK elements
 @import "elements/helpers";

app/assets/stylesheets/govuk_template/govuk-template.scss

@@ -1,11 +1,11 @@
 /* govuk_frontend_toolkit includes */
-@import "../../govuk_frontend_toolkit/stylesheets/colours";
-@import "../../govuk_frontend_toolkit/stylesheets/conditionals";
-@import "../../govuk_frontend_toolkit/stylesheets/css3";
-@import "../../govuk_frontend_toolkit/stylesheets/device-pixels";
-@import "../../govuk_frontend_toolkit/stylesheets/typography";
-@import "../../govuk_frontend_toolkit/stylesheets/grid_layout";
-@import "../../govuk_frontend_toolkit/stylesheets/design-patterns/_buttons";
+@import "../govuk_frontend_toolkit/stylesheets/colours";
+@import "../govuk_frontend_toolkit/stylesheets/conditionals";
+@import "../govuk_frontend_toolkit/stylesheets/css3";
+@import "../govuk_frontend_toolkit/stylesheets/device-pixels";
+@import "../govuk_frontend_toolkit/stylesheets/typography";
+@import "../govuk_frontend_toolkit/stylesheets/grid_layout";
+@import "../govuk_frontend_toolkit/stylesheets/design-patterns/_buttons";
 
 // Edited version of govuk_elements repo
 // https://github.com/alphagov/govuk_elements
@@ -23,5 +23,3 @@
 
 // Extra CSS for this application
 @import "../app";
-
-

app/assets/stylesheets/main.scss

@@ -1,6 +1,6 @@
 // Edited version of govuk_frontend_toolkit
 // https://github.com/alphagov/govuk_frontend_toolkit/
-@import "govuk_frontend_toolkit/stylesheets/conditionals";
+@import "govuk_frontend_toolkit/stylesheets/_conditionals.scss";
 @import "govuk_frontend_toolkit/stylesheets/shims";
 @import "govuk_frontend_toolkit/stylesheets/measurements";
 @import "govuk_frontend_toolkit/stylesheets/css3";
@@ -11,14 +11,6 @@
 @import "govuk_frontend_toolkit/stylesheets/design-patterns/buttons";
 @import "govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta";
 
-// Edited version of govuk_template repo
-// https://github.com/alphagov/govuk_template
-@import "govuk_template/govuk-template";
-@import "govuk_template/govuk-template-ie6";
-@import "govuk_template/govuk-template-ie7";
-@import "govuk_template/govuk-template-ie8";
-@import "govuk_template/govuk-template-print";
-
 // Edited version of govuk_elements repo
 // https://github.com/alphagov/govuk_elements
 @import "govuk_elements/elements/reset";
@@ -33,5 +25,9 @@
 @import "govuk_elements/elements/panels";
 @import "govuk_elements/elements/tables";
 
+// ////---xxsd----k/
 // Extra CSS for this application
+@import "components/sms-message";
+
+// Break this up
 @import "app";

app/templates/admin_template.html

@@ -1,5 +1,10 @@
 {% extends "govuk_template.html" %}
 
+{% block head %}
+  {% assets "css_all" %}
+    <link rel="stylesheet" href="{{ ASSET_URL }}" />
+  {% endassets %}
+{% endblock %}
 
 {% block page_title %}
 GOV.UK notifications admin
@@ -12,9 +17,9 @@ GOV.UK notifications admin
 
  {% block inside_header %}
 <div class="phase-banner-beta">
-    
+
       <strong class="phase-tag">BETA</strong>
-    
+
 </div>
  {% endblock %}
 
@@ -27,4 +32,3 @@ GOV.UK notifications admin
 {% else %}
     {% set homepage_url = url_for('main.dashboard') %}
 {% endif %}
-

app/templates/views/send-sms.html

@@ -1,7 +1,8 @@
 {% extends "admin_template.html" %}
+{% from "components/sms-message.html" import sms_message %}
 
 {% block page_title %}
-GOV.UK Notify | Send text messages
+	GOV.UK Notify | Send text messages
 {% endblock %}
 
 {% block content %}
@@ -11,7 +12,7 @@ GOV.UK Notify | Send text messages
 		<h1 class="heading-xlarge">Send text messages</h1>
 
 		<p>This page will be where we construct text messages</p>
-
+		{{ sms_message("hi") }}
   	<p>
   	<a class="button" href="check-sms" role="button">Continue</a>
   	</p>