Feature/loop 866 teaser templates 04 2021

config/sync/block.block.os2loop_theme_primary_local_tasks.yml

@@ -2,6 +2,8 @@ uuid: a32a1e68-3a4a-4f83-8f73-7d387b19cc30
 langcode: en
 status: true
 dependencies:
+  module:
+    - system
   theme:
     - os2loop_theme
 _core:

config/sync/core.entity_view_display.node.os2loop_documents_collection.teaser.yml

@@ -10,6 +10,7 @@ dependencies:
     - field.field.node.os2loop_documents_collection.os2loop_shared_tags
     - node.type.os2loop_documents_collection
   module:
+    - text
     - user
 id: node.os2loop_documents_collection.teaser
 targetEntityType: node
@@ -23,14 +24,20 @@ content:
     region: content
   links:
     weight: 100
+  os2loop_documents_dc_content:
+    type: text_default
+    weight: 0
+    region: content
+    label: visually_hidden
     settings: {  }
     third_party_settings: {  }
-    region: content
 hidden:
   entity_print_view_epub: true
   entity_print_view_pdf: true
   entity_print_view_word_docx: true
   os2loop_documents_dc_content: true
+  flag_os2loop_favourite: true
+  links: true
   os2loop_shared_profession: true
   os2loop_shared_subject: true
   os2loop_shared_tags: true

config/sync/core.entity_view_display.node.os2loop_documents_document.teaser.yml

@@ -32,6 +32,8 @@ hidden:
   entity_print_view_epub: true
   entity_print_view_pdf: true
   entity_print_view_word_docx: true
+  flag_os2loop_favourite: true
+  links: true
   os2loop_documents_document_autho: true
   os2loop_documents_document_body: true
   os2loop_documents_document_conte: true

config/sync/core.entity_view_display.node.os2loop_external.teaser.yml

@@ -12,17 +12,38 @@ dependencies:
     - field.field.node.os2loop_external.os2loop_shared_tags
     - node.type.os2loop_external
   module:
+    - link
+    - text
     - user
 id: node.os2loop_external.teaser
 targetEntityType: node
 bundle: os2loop_external
 mode: teaser
 content:
   links:
-    weight: 100
+    weight: 0
+    region: content
     settings: {  }
     third_party_settings: {  }
+  os2loop_external_descripti:
+    type: text_default
+    weight: 1
     region: content
+    label: visually_hidden
+    settings: {  }
+    third_party_settings: {  }
+  os2loop_external_url:
+    type: link
+    weight: 2
+    region: content
+    label: inline
+    settings:
+      trim_length: 80
+      url_only: false
+      url_plain: false
+      rel: ''
+      target: ''
+    third_party_settings: {  }
 hidden:
   entity_print_view_epub: true
   entity_print_view_pdf: true

config/sync/core.entity_view_display.node.os2loop_post.teaser.yml

@@ -3,6 +3,7 @@ langcode: en
 status: false
 dependencies:
   config:
+    - core.entity_view_display.comment.os2loop_post_comment.default
     - core.entity_view_mode.node.teaser
     - field.field.node.os2loop_post.os2loop_post_comments
     - field.field.node.os2loop_post.os2loop_post_content
@@ -13,6 +14,8 @@ dependencies:
     - field.field.node.os2loop_post.os2loop_shared_tags
     - node.type.os2loop_post
   module:
+    - comment
+    - text
     - user
 id: node.os2loop_post.teaser
 targetEntityType: node
@@ -27,12 +30,29 @@ content:
   links:
     weight: 100
     settings: {  }
+    region: content
+  os2loop_post_comments:
+    type: comment_default
+    weight: 1
+    region: content
+    label: above
+    settings:
+      view_mode: default
+      pager_id: 0
     third_party_settings: {  }
+  os2loop_post_content:
+    type: text_default
+    weight: 0
     region: content
+    label: visually_hidden
+    settings: {  }
+    third_party_settings: {  }
 hidden:
   entity_print_view_epub: true
   entity_print_view_pdf: true
   entity_print_view_word_docx: true
+  flag_os2loop_favourite: true
+  links: true
   os2loop_post_comments: true
   os2loop_post_content: true
   os2loop_post_file: true

config/sync/core.entity_view_display.node.os2loop_question.teaser.yml

@@ -3,6 +3,7 @@ langcode: en
 status: false
 dependencies:
   config:
+    - core.entity_view_display.comment.os2loop_question_answer.default
     - core.entity_view_mode.node.teaser
     - field.field.node.os2loop_question.os2loop_question_answers
     - field.field.node.os2loop_question.os2loop_question_content
@@ -13,6 +14,8 @@ dependencies:
     - field.field.node.os2loop_question.os2loop_shared_tags
     - node.type.os2loop_question
   module:
+    - comment
+    - text
     - user
 id: node.os2loop_question.teaser
 targetEntityType: node
@@ -27,12 +30,29 @@ content:
   links:
     weight: 100
     settings: {  }
+    region: content
+  os2loop_question_answers:
+    type: comment_default
+    weight: 4
+    region: content
+    label: above
+    settings:
+      view_mode: default
+      pager_id: 0
     third_party_settings: {  }
+  os2loop_question_content:
+    type: text_default
+    weight: 0
     region: content
+    label: visually_hidden
+    settings: {  }
+    third_party_settings: {  }
 hidden:
   entity_print_view_epub: true
   entity_print_view_pdf: true
   entity_print_view_word_docx: true
+  flag_os2loop_favourite: true
+  links: true
   os2loop_question_answers: true
   os2loop_question_content: true
   os2loop_question_file: true

web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss

@@ -1,9 +1,14 @@
 @import "bootstrap";
 @import "bootstrap-icons/font/bootstrap-icons.css";
+@import "mixins";
 @import "colors";
 
 $font-family-base: "Montserrat";
 
+a {
+  color: $link-color;
+}
+
 .bg-secondary-loop {
   background-color: $light-background;
   padding: $spacer * 2;
@@ -32,9 +37,10 @@ img {
 
 input {
   &.button {
-    color: $black;
-    background-color: $secondary-color;
-    border-color: $dark-secondary-color;
+    @extend .btn;
+    color: $black !important;
+    background-color: $secondary-color !important;
+    border-color: $dark-secondary-color !important;
 
     &:hover {
       color: $black;
@@ -44,8 +50,25 @@ input {
   }
 }
 
+a {
+  &.button {
+    @extend .btn;
+    color: $black !important;
+    background-color: $secondary-color !important;
+    border-color: $dark-secondary-color !important;
+
+    &:hover {
+      color: $black;
+      background-color: $dark-secondary-color;
+      border-color: $dark-secondary-color;
+    }
+  }
+}
+
+
 @import "bootstrap";
 @import "./comment";
+@import "./teasers";
 @import "./search_api_autocomplete";
 @import "./tabs";
 @import "./fields";

web/profiles/custom/os2loop/themes/os2loop_theme/assets/colors.scss

@@ -31,3 +31,6 @@ $dark-icon-base-color: darken($dark-grey, 10%);
 $dark-delete: darken($red, 10%);
 $dark-upvote: darken($primary-color, 10%);
 $dark-edit: darken($secondary-color, 10%);
+
+// Link color
+$link-color: #0056b3;

web/profiles/custom/os2loop/themes/os2loop_theme/assets/icons.scss

@@ -1,25 +1,3 @@
-@mixin icon(
-  $content: null,
-  $color: $icon-base-color,
-  $hover-color: $dark-icon-base-color
-) {
-  background-color: $color;
-
-  &:hover {
-    background-color: $hover-color;
-  }
-  a {
-    @if $content {
-      &::before {
-        color: $white;
-        font-size: 1.2em;
-        font-family: bootstrap-icons !important;
-        content: $content;
-      }
-    }
-  }
-}
-
 .icon-container {
   display: flex;
   margin: 0;
@@ -37,31 +15,31 @@
     color: $white;
 
     &.edit {
-      @include icon("\f4ca", $edit, $dark-edit);
+      @include link-icon("\f4ca", $edit, $dark-edit);
     }
 
     &.reply {
-      @include icon("\f51f");
+      @include link-icon("\f51f");
     }
 
     &.delete {
-      @include icon("\f5de", $delete, $dark-delete);
+      @include link-icon("\f5de", $delete, $dark-delete);
     }
 
     &.revisions {
-      @include icon("\f4b3");
+      @include link-icon("\f4b3");
     }
 
     &.view {
-      @include icon("\f341");
+      @include link-icon("\f341");
     }
 
     &.upvote.flag {
-      @include icon("\f407", $upvote, $dark-upvote);
+      @include link-icon("\f407", $upvote, $dark-upvote);
     }
 
     &.upvote.unflag {
-      @include icon("\f406", $upvote, $dark-upvote);
+      @include link-icon("\f406", $upvote, $dark-upvote);
     }
 
     i {

web/profiles/custom/os2loop/themes/os2loop_theme/assets/mixins.scss

@@ -0,0 +1,33 @@
+@mixin link-icon(
+  $content: null,
+  $color: $icon-base-color,
+  $hover-color: $dark-icon-base-color
+) {
+  background-color: $color;
+
+  &:hover {
+    background-color: $hover-color;
+  }
+  a {
+    @if $content {
+      &::before {
+        color: $white;
+        font-size: 1.2em;
+        font-family: bootstrap-icons !important;
+        content: $content;
+      }
+    }
+  }
+}
+
+@mixin icon($content: null, $font-size: 1em) {
+  @if $content {
+    &::before {
+      color: $icon-base-color;
+      font-size: $font-size;
+      margin-right: 0.5 * $spacer;
+      font-family: bootstrap-icons !important;
+      content: $content;
+    }
+  }
+}

web/profiles/custom/os2loop/themes/os2loop_theme/assets/paragraphs/step-by-step.scss

@@ -47,6 +47,6 @@
 .step {
   margin-top: -45px;
   min-height: 100px;
-  padding: 15px 0 0 45px;
+  padding: 15px 0 0 55px;
   background-color: $light-background;
 }

web/profiles/custom/os2loop/themes/os2loop_theme/assets/teasers.scss

@@ -0,0 +1,48 @@
+.teaser {
+  padding: $spacer;
+  margin-bottom: 0.5 * $spacer;
+  background-color: $light-background;
+  border-bottom: 1px solid $dark-background;
+  color: $text-color;
+  $icon-size: 25px;
+  .icon-container {
+    padding-left: 15px;
+    align-items: center;
+
+    &.external {
+      @include icon("\f471", $icon-size);
+    }
+
+    &.post {
+      @include icon("\f383", $icon-size);
+    }
+
+    &.question {
+      @include icon("\f50b", $icon-size);
+    }
+    &.collection {
+      @include icon("\f3c2", $icon-size);
+    }
+    &.document {
+      @include icon("\f3b9", $icon-size);
+    }
+  }
+
+  a {
+    color: $text-color;
+  }
+
+  h2 {
+    font-size: 1em;
+  }
+
+  .created {
+    font-size: 12px;
+    margin-bottom: 0.5 * $spacer;
+  }
+
+  .count {
+    display: flex;
+    @include icon("\f253");
+  }
+}