Add container class to fix indenting on webform confirmation pages

Ref agaric/sites/agaric-coop#241

README.md

@@ -17,6 +17,19 @@ _This command will look at your `.nvmrc` file and use the version node.js specif
 
 _This command looks at `package.json` and installs all the npm dependencies specified in it.  Some of the dependencies include grunt and grunt-sass._
 
+## Usage
+
+### Compile CSS
+
+`grunt sass`
+
+See more available Grunt commands:
+
+`grunt --help`
+
+
+## Stuff we're not using
+
 ### Rebuild the style guide
 
 `grunt kss`

agaric/sass/agaric.scss

@@ -67,3 +67,4 @@
 @import "agaric/component.iconlist";
 @import "agaric/component.related";
 @import "agaric/component.footer";
+@import "agaric/component.code";

agaric/sass/agaric/_base.blockquote.scss

@@ -5,9 +5,6 @@
 // Styleguide: Base.Blockquote
 
 .content blockquote {
-  border-left-width: 0;
-  padding-left: 0;
-  padding-right: 0;
   color: currentColor;
   //
   * {

agaric/sass/agaric/_base.elements.scss

@@ -59,23 +59,19 @@ p {
 
 .content a {
   font-weight: bold;
+  padding: $link-hover-padding;
+  margin: -$link-hover-padding;
   &:hover {
     color: $link-hover;
     background-color: $link-hover-background;
-    padding: $link-hover-padding;
-    margin: -$link-hover-padding;
   }
   &:focus {
     color: $link-focus;
     background-color: $link-hover-background;
-    padding: $link-hover-padding;
-    margin: -$link-hover-padding;
   }
   &:active {
     color: $link-active;
     background-color: $link-hover-background;
-    padding: $link-hover-padding;
-    margin: -$link-hover-padding;
   }
 }
 

agaric/sass/agaric/_base.form.scss

@@ -25,6 +25,22 @@
   margin-bottom: .6rem;
 }
 
+.content p.form-label,
 .form-label {
-  margin-top: .6rem;
+  margin-top: 1rem;
+  margin-bottom: .6rem;
+}
+
+// Webforms
+
+.webform-form,
+.webform-submission-form {
+  border-left: 4px solid $blue-dark;
+  border-right: 4px solid $blue-dark;
+  margin: .1rem 1.5rem .1rem 1.5rem;
+  padding: 0 1.5rem;
+  @include widescreen {
+    margin: .5rem 6rem .5rem 6rem;
+    padding: 0 6rem;
+  }
 }

agaric/sass/agaric/_component.code.scss

@@ -0,0 +1,22 @@
+// Fixes https://github.com/jgthms/bulma/issues/1708
+code .tag, code .number {
+  display: inline;
+  padding: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  text-align: inherit;
+  vertical-align: inherit;
+  border-radius: inherit;
+  font-weight: inherit;
+  white-space: inherit;
+  background: inherit;
+  margin: inherit;
+}
+
+// Try to undo what presumably prism styling is doing to our in-text code:
+code {
+  background-color: inherit;
+  color: inherit;
+  font-size: inherit;
+  padding: 0.2em 0.25em;
+}

agaric/sass/agaric/_component.hero.scss

@@ -170,7 +170,7 @@
       .title {
         margin-top: 0.25em;
         margin-left: -1.25em;
-        max-width: 6em;
+        max-width: 12em;
       }
       .subtitle {
         font-size: $size-5;

agaric/sass/agaric/_component.navbar.scss

@@ -17,10 +17,10 @@
   #logo .logo-color {
     fill: currentColor;
   }
-  & + section,
-  & + .floating-tabs + #main-content + section,
-  & + .floating-tabs + #main-content + article > section:first-child,
-  & + .floating-tabs + #main-content + .node > section:first-child {
+  & + div[data-drupal-messages-fallback] + section,
+  & + div[data-drupal-messages-fallback] + .floating-tabs + #main-content + section,
+  & + div[data-drupal-messages-fallback] + .floating-tabs + #main-content + article > section:first-child,
+  & + div[data-drupal-messages-fallback] + .floating-tabs + #main-content + .node > section:first-child {
     padding-top: 3.3125em;
     @include desktop {
       padding-top: 5.875em;

agaric/sass/agaric/_component.related.scss

@@ -19,3 +19,9 @@
     border-top: 0;
   }
 }
+
+.section.related .title.is-5 {
+  font-size: 1.1rem;
+  line-height: 1.25em;
+  font-weight: normal; // TODO just remove the '.title' instead.
+}

agaric/sass/agaric/_component.teaser.scss

@@ -35,15 +35,11 @@ a.teaser {
 }
 
 .media.teaser {
-  display: flex;
-  //
   .media-left {
     width: 12em;
-    //
     img {
       width: 100%;
       height: auto;
-      display: block;
     }
   }
 }

agaric/sass/agaric/_layout.flow.scss

@@ -45,6 +45,9 @@
       h2:first-child {
         margin-top: 1.1428em;
       }
+      .columns h2:first-child {
+        margin-top: inherit;
+      }
     }
   }
   .flow_full {

agaric/templates/field/field--field-body-paragraph--rss-teaser.html.twig

@@ -39,8 +39,8 @@
 #}
 <description>
 {% set one_and_done = false %}
-{% for item in items if not one_and_done %}
-  {% if item.content['#paragraph'].type.0.entity.id == 'text' %}
+{% for item in items %}
+  {% if item.content['#paragraph'].type.0.entity.id == 'text' and not one_and_done %}
     {% set one_and_done = true %}
     {{ item.content|render|escape }}
   {% endif %}

agaric/templates/field/field--field-title.html.twig

@@ -46,4 +46,9 @@
     })
   %}
   <h1{{ item.attributes }}>{{ item.content}} </h1>
+
+  {% if authors is not empty %}
+    <p class="byline is-mono">Written by {{ authors }}</p>
+    <p class="byline is-mono">Posted on <time class="dt-published" datetime="{{ iso_datetime }}">{{ date }}</time></p>
+  {% endif %}
 {% endfor %}

agaric/templates/layout/ds-2col--node-landing-page-simple-card.html.twig

@@ -0,0 +1,2 @@
+{% extends "ds-2col.html.twig" %}
+{% set attributes = attributes.addClass('is-mobile') %}

agaric/templates/layout/ds-2col.html.twig

@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Override Display Suite 2 column template to get rid of DS classes.
+ *
+ * Available variables:
+ * - outer_wrapper: outer wrapper element
+ * - left_wrapper: wrapper element around left region
+ * - right_wrapper: wrapper element around right region
+ * - attributes: layout attributes
+ * - left_attributes: attributes for left region
+ * - right_attributes: attributes for right region
+ * - left: content of left region
+ * - right: content of right region
+ */
+#}
+<{{ outer_wrapper }}{{ attributes.addClass('columns', 'clearfix') }}>
+
+  {{ title_suffix.contextual_links }}
+
+  <{{ left_wrapper }}{{ left_attributes.addClass('column') }}>
+    {{ left }}
+  </{{ left_wrapper }}>
+
+  <{{ right_wrapper }}{{ right_attributes.addClass('column') }}>
+    {{ right }}
+  </{{ right_wrapper }}>
+
+</{{ outer_wrapper }}>

agaric/templates/layout/item-list--indieweb-syndication.html.twig

@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Theme override for an item list.
+ *
+ * Available variables:
+ * - items: A list of items. Each item contains:
+ *   - attributes: HTML attributes to be applied to each list item.
+ *   - value: The content of the list element.
+ * - title: The title of the list.
+ * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
+ * - attributes: HTML attributes to be applied to the list.
+ * - empty: A message to display when there are no items. Allowed value is a
+ *   string or render array.
+ * - context: A list of contextual data associated with the list. May contain:
+ *   - list_style: The custom list style.
+ *
+ * @see template_preprocess_item_list()
+ */
+#}
+{% if context.list_style %}
+	{%- set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
+{% endif %}
+{% if items or empty %}
+    {%- if title is not empty -%}
+      <h3>{{'Shared to'|t}}</h3>
+    {%- endif -%}
+
+    {%- if items -%}
+      <{{list_type}}{{attributes}}>
+        {%- for item in items -%}
+          <li{{item.attributes}}>{{ item.value }}</li>
+        {%- endfor -%}
+      </{{list_type}}>
+    {%- else -%}
+      {{- empty -}}
+    {%- endif -%}
+{%- endif %}
+

agaric/templates/layout/node--case-study--full.html.twig

@@ -74,8 +74,8 @@
 {% set title_paragraph_index = null %}
 {% set has_title_paragraph = false %}
 {% if content.field_body_paragraph %}
-  {% for i, paragraph in content.field_body_paragraph if i|first != '#' %}
-    {% if content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
+  {% for i, paragraph in content.field_body_paragraph %}
+    {% if i|first != '#' and content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
       {% set has_title_paragraph = true %}
       {% set title_paragraph_index = i %}
       {{ paragraph }}
@@ -103,8 +103,8 @@
   <div class="container">
     <div class="flow content">
       {% if content.field_body_paragraph %}
-        {% for i, paragraph in content.field_body_paragraph if i|first != '#' %}
-          {% if i is not same as(title_paragraph_index) %}
+        {% for i, paragraph in content.field_body_paragraph %}
+          {% if i|first != '#' and i is not same as(title_paragraph_index) %}
             {{ paragraph }}
           {% endif %}
         {% endfor %}

agaric/templates/layout/node--case-study--teaser.html.twig

@@ -6,8 +6,8 @@
 
 {% set has_title_paragraph = false %}
 {% if content.field_body_paragraph %}
-  {% for i, paragraph in content.field_body_paragraph if i|first != '#' %}
-    {% if content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
+  {% for i, paragraph in content.field_body_paragraph %}
+    {% if i|first != '#' and content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
       {% set has_title_paragraph = true %}
       {{ paragraph }}
     {% endif %}

agaric/templates/layout/node--full.html.twig

@@ -76,8 +76,8 @@
 {% set title_paragraph_index = null %}
 {% set has_title_paragraph = false %}
 {% if content.field_body_paragraph %}
-  {% for i, paragraph in content.field_body_paragraph if i|first != '#' %}
-    {% if content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
+  {% for i, paragraph in content.field_body_paragraph %}
+    {% if i|first != '#' and content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
       {% set has_title_paragraph = true %}
       {% set title_paragraph_index = i %}
       {{ paragraph }}
@@ -106,15 +106,15 @@
           </div>
           {% endif %}
         </div>
-        {% if content.field_authors is not empty %}
-          <p class="byline is-mono">Written by {{ content.field_authors }}</p>
-          <p class="byline is-mono">Posted on <time class="dt-published" datetime="{{ iso_datetime }}">{{ date }}</time></p>
-        {% endif %}
       </div>
     </div>
   </section>
-{% elseif content.field_authors is not empty %}
-<span class="hidden"><a href="{{ url }}" class="u-url">{{ date }}</a><a class="u-author" href="/"></a></span>
+{% endif %}
+{% if content.field_authors is not empty %}
+  <div class="container">
+    <p class="byline is-mono">{{ content.field_authors }}</p>
+    <p class="byline is-mono">Posted on <time class="dt-published" datetime="{{ iso_datetime }}">{{ date }}</time></p>
+  </div>
 {% endif %}
 
 <div class="e-content">
@@ -123,8 +123,8 @@
 {% set walls_up = false %}
 
 {% if content.field_body_paragraph %}
-  {% for i, paragraph in content.field_body_paragraph if i|first != '#' %}
-    {% if i is not same as(title_paragraph_index) %}
+  {% for i, paragraph in content.field_body_paragraph %}
+    {% if i|first != '#' and i is not same as(title_paragraph_index) %}
       {% if paragraph['#paragraph'].field_style_escape_flow.value is not empty %}
         {% set bust_out = paragraph['#paragraph'].field_style_escape_flow.value %}
       {% endif %}
@@ -167,14 +167,14 @@
         {{ content.field_tags }}
       {% endif %}
     </div>
+    {{content.indieweb_syndication}}
   </div>
 </section>
 {% endif %}
-
 </article>{# end h-entry article #}
 
 <!-- Unexpected extra content -->
-{{ content|without('field_body_paragraph', 'field_authors', 'field_tags', 'uid', 'created', 'comment') }}
+{{ content|without('field_body_paragraph', 'field_authors', 'field_tags', 'uid', 'created', 'comment', 'indieweb_syndication') }}
 
 {% if content.comment %}
   {{ content.comment }}

agaric/templates/layout/node--people--full.html.twig

@@ -74,8 +74,8 @@
 {% set title_paragraph_index = null %}
 {% set has_title_paragraph = false %}
 {% if content.field_body_paragraph %}
-  {% for i, paragraph in content.field_body_paragraph if i|first != '#' %}
-    {% if content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
+  {% for i, paragraph in content.field_body_paragraph %}
+    {% if i|first != '#' and content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
       {% set has_title_paragraph = true %}
       {% set title_paragraph_index = i %}
       {{ paragraph }}
@@ -109,8 +109,8 @@
 {% set walls_up = false %}
 
 {% if content.field_body_paragraph %}
-  {% for i, paragraph in content.field_body_paragraph if i|first != '#' %}
-    {% if i is not same as(title_paragraph_index) %}
+  {% for i, paragraph in content.field_body_paragraph %}
+    {% if i|first != '#' and i is not same as(title_paragraph_index) %}
       {% if paragraph['#paragraph'].field_style_escape_flow.value is not empty %}
         {% set bust_out = paragraph['#paragraph'].field_style_escape_flow.value %}
       {% endif %}

agaric/templates/layout/node--rss-teaser.html.twig

@@ -71,14 +71,12 @@
  */
 #}
 
-BOW!  BOW BEFORE MY POWER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-
 <a class="teaser media content" href="{{ url }}">
 
 {% set has_title_paragraph = false %}
 {% if content.field_body_paragraph %}
-  {% for i, paragraph in content.field_body_paragraph if i|first != '#' %}
-    {% if content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
+  {% for i, paragraph in content.field_body_paragraph %}
+    {% if i|first != '#' and content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
       {% set has_title_paragraph = true %}
       {{ paragraph }}
     {% endif %}

agaric/templates/layout/node--teaser.html.twig

@@ -71,12 +71,12 @@
  */
 #}
 
-<a class="teaser media content" href="{{ url }}">
+<a class="teaser media content columns" href="{{ url }}">
 
 {% set has_title_paragraph = false %}
 {% if content.field_body_paragraph %}
-  {% for i, paragraph in content.field_body_paragraph if i|first != '#' %}
-    {% if content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
+  {% for i, paragraph in content.field_body_paragraph %}
+    {% if i|first != '#' and content.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
       {% set has_title_paragraph = true %}
       {{ paragraph }}
     {% endif %}
@@ -84,7 +84,7 @@
 {% endif %}
 
 {% if not has_title_paragraph %}
-  <div class="media-left">
+  <div class="media-left column is-one-third is-one-quarter-desktop">
     {{ content.field_image }}
     {% if node.bundle == 'blog' and content.field_authors is not empty %}
       <p class="byline is-mono">
@@ -93,7 +93,7 @@
       </p>
     {% endif %}
   </div>
-  <div class="media-content content">
+  <div class="media-content content column is-two-thirds is-three-quarters-desktop ">
     <h3 class="title is-5">{{ label }}</h3>
     <div class="subtitle is-6">
       {{ content.field_summary }}

agaric/templates/layout/region--footer.html.twig

@@ -28,6 +28,9 @@
       <div class="column">
         Powered by <a href="https://www.drutopia.org/">Drutopia</a>
       </div>
+      <div class="column">
+        <a href="/privacy-policy">Privacy Policy</a>
+      </div>
     </div>
   </div>
 {% endif %}

agaric/templates/paragraph/paragraph--title.html.twig

@@ -38,6 +38,7 @@
  * @ingroup themeable
  */
 #}
+{% set attributes = attributes.setAttribute('data-headerbg', 'transparent') %}
 {%
   set classes = [
     'hero',
@@ -46,6 +47,9 @@
 %}
 {% if paragraph.field_style_color is not empty %}
   {% set classes = classes|merge(['is-'~paragraph.field_style_color.value]) %}
+  {% if paragraph.field_style_color.value == 'white' %}
+    {% set attributes = attributes.removeAttribute('data-headerbg') %}
+  {% endif %}
 {% endif %}
 {% if paragraph.field_style_titlebar.value == false %}
   {% set classes = classes|merge(['hero-project']) %}
@@ -58,12 +62,13 @@
   {% set classes = classes|merge(styles) %}
 {% endif %}
 
+
 {% if paragraph.field_style_titlebar.value == true and paragraph.field_image is not empty %}
-  {% set attributes = attributes.setAttribute('data-headerbg', 'transparent').setAttribute('style', 'background-image: url('~file_url(paragraph.field_image.entity.uri.value)~')') %}
+  {% set attributes = attributes.setAttribute('style', 'background-image: url('~file_url(paragraph.field_image.entity.uri.value)~')') %}
 {% endif %}
 
 {% block paragraph %}
-  <section{{ attributes.addClass(classes) }} data-headerbg="transparent">
+  <section{{ attributes.addClass(classes) }}>
     {% block content %}
     {% if paragraph.field_style_titlebar.value == false %}
     <div class="container">

agaric/templates/patterns/title_paragraph/pattern-title-paragraph.html.twig

@@ -13,8 +13,8 @@
 {% set title_paragraph_index = null %}
 {% set has_title_paragraph = false %}
 {% if paragraphs.field_body_paragraph %}
-  {% for i, paragraph in paragraphs.field_body_paragraph if i|first != '#' %}
-    {% if paragraphs.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
+  {% for i, paragraph in paragraphs.field_body_paragraph %}
+    {% if i|first != '#' and paragraphs.field_body_paragraph['#items'][i].entity.type.0.entity.id == 'title' %}
       {% set has_title_paragraph = true %}
       {% set title_paragraph_index = i %}
       <div class="column is-one-third">

agaric/templates/webform/webform-confirmation.html.twig

@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Default theme implementation to webform confirmation.
+ *
+ * Available variables:
+ * - progress: Progress bar.
+ * - message: Confirmation message.
+ * - back_url: URL to the previous webform submission.
+ *
+ * @see template_preprocess_webform_confirmation()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ attach_library('webform/webform.confirmation') }}
+
+{% if progress %}
+  {{ progress }}
+{% endif %}
+
+<div{{ attributes.addClass('webform-confirmation container') }}>
+
+  {% if message %}
+    <div class="webform-confirmation__message">{{ message }}</div>
+  {% endif %}
+
+  {% if back %}
+  <div class="webform-confirmation__back">
+    <a href="{{ back_url }}" rel="prev"{{ back_attributes }}>{{ back_label }}</a>
+  </div>
+  {% endif %}
+
+</div>

css

@@ -0,0 +1 @@
+grunt sass

package.json

@@ -3,21 +3,21 @@
   "version": "1.0.0",
   "devDependencies": {
     "assemble": "^0.4.42",
-    "grunt": "^1.0.1",
+    "grunt": "^1.0.4",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-connect": "^1.0.2",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-kss": "^5.0.1",
     "grunt-sass": "^2.1.0",
     "grunt-shell": "^2.1.0",
-    "kss": "^3.0.0-beta.18",
-    "node-sass": "^4.10.0"
+    "kss": "^3.0.0-beta.25",
+    "node-sass": "^4.13.0"
   },
   "dependencies": {
-    "bulma": "^0.7.2",
+    "bulma": "^0.7.5",
     "bulma-extensions": "^1.0.4",
     "grunt-cli": "^1.3.2",
-    "ionicons": "^4.4.6",
+    "ionicons": "^4.6.3",
     "slick-carousel": "^1.8.1"
   }
 }