feat(district): update to lastest ui-styleguide

district/templates/district/base.html

@@ -16,7 +16,7 @@
   <!-- Bootstrap CSS -->
 
   <!-- Styles -->
-  <link rel="stylesheet" href="{% static "styleguide234/assets/css/styles.css" %}">
+  <link rel="stylesheet" href="{% static "styleguide291/assets/css/styles.css" %}">
   <link href="{% static "shared/vendor/fancybox/jquery.fancybox.min.css" %}" rel="stylesheet">
   <link rel="stylesheet" href="{% static "shared/css/helpers.css" %}">
 
@@ -24,6 +24,11 @@
     .inline-block {
       display: inline-block;
     }
+
+    .no-underline,
+    .no-underline:hover {
+      text-decoration: none;
+    }
   </style>
 
   {% if page.root_page.matomo_id %}
@@ -201,17 +206,15 @@
     </ui-app>
   </div>
 
-
   {% block subheader %}{% endblock %}
 
   {% block container %}
-    <main class="container container--default {% block container_spacing %}py-8 lg:py-16{% endblock %}">
+    <main class="container {% block container_class %}container--default{% endblock %} {% block container_spacing %}py-8 lg:py-16{% endblock %}">
       {% block content %}{% endblock %}
     </main>
   {% endblock%}
 
   <footer class="footer bg-grey-700 text-white __js-root">
-
     <ui-app inline-template>
 
       <div>
@@ -306,11 +309,23 @@
     </ui-app>
   </footer>
 
-
-  <script src="{% static "styleguide234/assets/js/vue.2.6.11.js" %}"></script>
-  <script src="{% static "styleguide234/assets/js/main.bundle.js" %}"></script>
+  <script src="{% static "styleguide291/assets/js/vue.2.6.11.js" %}"></script>
+  <script src="{% static "styleguide291/assets/js/main.bundle.js" %}"></script>
   <script src="{% static "shared/vendor/jquery/jquery-3.4.1.min.js" %}"></script>
   <script src="{% static "shared/vendor/lazysizes/lazysizes.min.js" %}"></script>
   <script src="{% static "shared/vendor/fancybox/jquery.fancybox.min.js" %}"></script>
+
+  <link rel="stylesheet" href="//unpkg.com/leaflet/dist/leaflet.css" />
+  <link rel="stylesheet" href="//unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
+  <link rel="stylesheet" href="{% static "maps_utils/geo-feature-collection.css" %}" />
+
+  <script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
+  <script src="//unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
+  <script src="//bundle.run/@mapbox/polylabel@1.0.2"></script>
+  <script src="//unpkg.com/vue2-leaflet"></script>
+
+  <script src="{% static "maps_utils/geo-feature-collection.js" %}"></script>
+
+  {% block scripts %}{% endblock %}
 </body>
 </html>

shared/static/styleguide291/assets/css/pattern-scaffolding.css

+/**
+ * This stylesheet is for styles you want to include only when displaying demo
+ * styles for grids, animations, color swatches, etc.
+ * These styles will not be your production CSS.
+ */
+#sg-patterns {
+  -webkit-box-sizing: border-box !important;
+          box-sizing: border-box !important;
+  max-width: 100%;
+  padding: 0 0.5em;
+}
+
+.demo-animate {
+  background: #ddd;
+  padding: 1em;
+  margin-bottom: 1em;
+  text-align: center;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.sg-colors {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  list-style: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.sg-colors li {
+  -webkit-box-flex: 1;
+      -ms-flex: auto;
+          flex: auto;
+  padding: 0.3em;
+  margin: 0 0.5em 0.5em 0;
+  min-width: 5em;
+  max-width: 14em;
+  border: 1px solid #ddd;
+  border-radius: 0;
+}
+
+.sg-swatch {
+  display: block;
+  height: 8rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0;
+}
+
+.sg-label {
+  font-size: 1rem;
+}
+
+.sg-pattern-example {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+}
+
+.sg-pattern-head .sg-pattern-title a {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+  font-weight: bold !important;
+  font-size: 1.2rem !important;
+  color: #202020 !important;
+}
+
+.sg-pattern-category-title a {
+  font-family: "Bebas Neue", "Helvetica", "Arial", sans-serif !important;
+  font-weight: 400 !important;
+  font-size: 3.5rem !important;
+}