style and compatibility update

app/templates/corpora/analysis.html.j2

@@ -5,22 +5,40 @@
 {% import 'corpora/_analysis/static_visualization.html.j2' as static_visualization_extension %}
 
 
-{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-container"{% endblock main_attribs %}
+{% set navbar_extended = true %}
+
+
+{% block stylesheets %}
+{{ super() }}
+{% assets
+  filters='pyscss',
+  output='gen/pages/corpora/analysis.%(version)s.css',
+  'sass/pages/corpora/analysis.scss'
+-%}
+<link href="{{ ASSET_URL }}" rel="stylesheet">
+{% endassets -%}
+{% endblock stylesheets %}
+
+
+{% block navbar_secondary_content %}
+<ul class="tabs tabs-transparent no-autoinit" id="corpus-analysis-extension-tabs">
+  <li class="tab">
+    <a class="active" href="#corpus-analysis-home-container"><i class="nopaque-icons service-icons left" data-service="corpus-analysis" style="line-height: inherit;"></i>Corpus analysis</a>
+  </li>
+  <li class="tab">
+    <a href="#corpus-analysis-concordance-container"><i class="material-icons left" style="line-height: inherit;">{{ concordance_extension.icon }}</i>{{ concordance_extension.name }}</a>
+  </li>
+  <li class="tab">
+    <a href="#corpus-analysis-reader-container"><i class="material-icons left" style="line-height: inherit;">{{ reader_extension.icon }}</i>{{ reader_extension.name }}</a>
+  </li>
+</ul>
+{% endblock navbar_secondary_content %}
+
+
+{% block main_attribs %} class="service-color lighten" data-service="corpus-analysis" id="corpus-analysis-container" style="margin-top: 48px;"{% endblock main_attribs %}
 
 
 {% block page_content %}
-<ul class="row tabs no-autoinit" id="corpus-analysis-extension-tabs">
-  <li class="tab col s3">
-    <a class="active" href="#corpus-analysis-home-container"><i class="nopaque-icons service-icons left" data-service="corpus-analysis"></i>Corpus analysis</a>
-  </li>
-  <li class="tab col s3">
-    <a href="#corpus-analysis-concordance-container"><i class="material-icons left">{{ concordance_extension.icon }}</i>{{ concordance_extension.name }}</a>
-  </li>
-  <li class="tab col s3">
-    <a href="#corpus-analysis-reader-container"><i class="material-icons left">{{ reader_extension.icon }}</i>{{ reader_extension.name }}</a>
-  </li>
-</ul>
-
 <div id="corpus-analysis-home-container">
   <h1>{{ title }}</h1>
 

app/templates/corpora/corpus.html.j2

@@ -1,7 +1,20 @@
 {% extends "base.html.j2" %}
 {% import "wtf.html.j2" as wtf %}
 
-{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
+
+{% block stylesheets %}
+{{ super() }}
+{% assets
+  filters='pyscss',
+  output='gen/pages/corpora/corpus.%(version)s.css',
+  'sass/pages/corpora/corpus.scss'
+-%}
+<link href="{{ ASSET_URL }}" rel="stylesheet">
+{% endassets -%}
+{% endblock stylesheets %}
+
+
+{% block main_attribs %} class="service-color lighten" data-service="corpus-analysis"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">
@@ -14,19 +27,6 @@
       <div class="card service-color-border border-darken" data-service="corpus-analysis" style="border-top: 10px solid">
         <div class="card-content">
           <span class="chip corpus-status corpus-status-color corpus-status-text white-text"></span>
-          <div class="active preloader-wrapper small corpus-status-spinner">
-            <div class="spinner-layer spinner-blue-only">
-              <div class="circle-clipper left">
-                <div class="circle"></div>
-              </div>
-              <div class="gap-patch">
-                <div class="circle"></div>
-              </div>
-              <div class="circle-clipper right">
-                <div class="circle"></div>
-              </div>
-            </div>
-          </div>
           <div class="row">
             <div class="col s12">
               <div class="input-field">

app/templates/corpora/public_corpus.html.j2

@@ -15,7 +15,7 @@
           {% if corpus.status.name in ['SUBMITTED', 'QUEUED', 'BUILDING'] %}
           <a class="btn-floating btn-small waves-effect waves-light" id="refresh-button"><i class="material-icons">refresh</i></a>
           {% endif %}
-          <span class="chip corpus-status-text corpus-status-color white-text" data-status="{{ corpus.status.name }}"></span>
+          <span class="chip corpus-status-text corpus-status-color white-text" data-corpus-status="{{ corpus.status.name }}"></span>
           <div class="row">
 
             <div class="col s12">