Merged in feature/BKL-67-StylingDocumentCollectionPage (pull request #45)

AndreasEngelmark · AndreasEngelmark · commit ce8479b08d5d · 2022-05-09T18:56:24.000Z
Feature/BKL-67 StylingDocumentCollectionPage
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/typography/typography.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/typography/typography.scss
@@ -12,18 +12,8 @@
 	&:active,
 	&:focus,
 	&:active:hover {
-		background-color: transparent;
 		color: inherit;
-
-		font-style: inherit;
-		font-size: inherit;
-		font-variant: inherit;
-		font-weight: inherit;
-		font-family: inherit;
-
-		text-decoration: none;
-		line-height: inherit;
-		vertical-align: inherit;
+		text-decoration: inherit;
 	}
 }
 
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/variables/variables.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/variables/variables.scss
@@ -20,7 +20,7 @@ $border-radius-sm: 4px;
 $border-radius-lg: 10px;
 
 // Typography
-$font-family-base: Helvetica, $font-family-base;
+$font-family-base: "Helvetica Neue", $font-family-base;
 $body-color: $gray-900;
 
 $link-color: $loop-green;
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/fields.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/fields.scss
@@ -2,7 +2,3 @@
 	color: $dark;
 	font-weight: bold;
 }
-
-.os2loop-title-text-inline {
-	color: $dark;
-}
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss
@@ -6,6 +6,7 @@
 @import "layout/title.scss";
 @import "layout/user.scss";
 @import "layout/container-fluid-addition.scss"; // TODO: move this to bootstrap
+@import "layout/body.scss";
 
 // blocks
 @import "blocks/notifications.scss";
@@ -20,7 +21,7 @@
 @import "elements/btn-search-filter.scss";
 @import "elements/tabs.scss";
 @import "elements/step-by-step.scss";
-@import "elements/document-collection-list.scss";
+@import "elements/tab-pane.scss";
 
 // forms
 @import "forms/comment-form.scss";
@@ -41,8 +42,8 @@
 @import "pages/view-profile-page.scss";
 @import "pages/edit-profile-page.scss";
 @import "pages/contact-page.scss";
-@import "pages/document-page.scss";
-@import "pages/document-collection-page.scss";
+@import "pages/document.scss";
+@import "pages/document-collection.scss";
 
 @import "pages/user-questions.scss";
 @import "pages/user-subscriptions.scss";
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/elements/document-collection-list.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/elements/document-collection-list.scss
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/elements/tab-pane.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/elements/tab-pane.scss
@@ -0,0 +1,20 @@
+.tab-pane {
+	.os2loop-title-text-inline {
+		font-weight: $badge-font-weight;
+	}
+
+	.documents-in-collection {
+		@extend .block-secondary-gray;
+	}
+
+	.document-collection-item {
+		@extend .block-secondary-white, .py-20;
+	}
+
+	.document-collection-list + .document-collection-list,
+	.document-collection-list + .document-collection-item,
+	.document-collection-item + .document-collection-list,
+	.document-collection-item + .document-collection-item {
+		@extend .mt-20;
+	}
+}
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/body.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/body.scss
@@ -0,0 +1,9 @@
+body {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	overflow-y: scroll;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/pages/document-collection.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/pages/document-collection.scss
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/pages/document.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/pages/document.scss
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--list-display.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--list-display.html.twig
@@ -104,7 +104,7 @@
       </div>
       {% endif %}
       <div class="d-inline-flex mt-10">
-        <span class="badge badge-primary badge-{{ node.getType|clean_class }}">{{ node.type.entity.label }}</span>
+        <span class="badge badge-primary badge-{{ node.getType|clean_class }} mr-15">{{ node.type.entity.label }}</span>
         {{ content.os2loop_shared_subject }}
         {{ content.os2loop_shared_profession }}
         {{ content.os2loop_shared_category }}
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--os2loop-documents-collection.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--os2loop-documents-collection.html.twig
@@ -75,11 +75,11 @@
 {# Import macros #}
 {% import '@os2loop_theme/macros.html.twig' as macros %}
 
-<article{{ attributes.addClass("document-collection") }}>
+<article{{ attributes }}>
   {% set tabs = [
-    {'id': 'collection', 'name': 'Collection'|t},
+    {'id': 'collection', 'name': 'Document collection'|t},
     {'id': 'about-collection', 'name': 'About collection'|t},
-    {'id': 'documents-in-collection', 'name': 'Documents in collection'|t}
+    {'id': 'documents-in-collection', 'name': 'Documents'|t}
   ] %}
   {% include '@os2loop_theme/navigation/content-tabs.html.twig' with {'tabs': tabs, 'id': 'document-tabs'} %}
   <div class="tab-content" id="document-tabs-content">
@@ -92,23 +92,21 @@
     </div>
     <div class="tab-pane" id="about-collection" role="tabpanel" aria-labelledby="about-collection-tab">
       {{ macros.title("About collection"|t, "collection", node, content, false) }}
-      <div{{ content_attributes.addClass("bg-secondary-loop") }}>
-        <div>{{ content.os2loop_shared_subject }}</div>
-        <div>{{ content.os2loop_shared_profession }}</div>
-        <div>{{ content.os2loop_shared_category }}</div>
-        <div>{{ content.os2loop_shared_tags }}</div>
+      <div{{ content_attributes.addClass("block-secondary-gray") }}>
+        <div>{{ content.os2loop_shared_owner }}</div>
+        <div>{{ content.os2loop_shared_version }}</div>
         <div>{{ content.os2loop_shared_approver }}</div>
         <div>{{ content.os2loop_shared_approval_date }}</div>
         <div>{{ content.os2loop_shared_rev_date }}</div>
-        <div>{{ content.os2loop_shared_owner }}</div>
-        <div>{{ content.os2loop_shared_version }}</div>
       </div>
     </div>
     {% if os2loop_documents_collection_tree|default(false) %}
     <div class="tab-pane" id="documents-in-collection" role="tabpanel" aria-labelledby="documents-in-collection-tab">
       {{ macros.title("Documents in collection"|t, "collection", node, content, false) }}
+    <div class="documents-in-collection">
       {{ macros.table_of_contents(os2loop_documents_collection_tree, node) }}
     </div>
+    </div>
     {% endif %}
   </div>
 </article>
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--os2loop-documents-document.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--os2loop-documents-document.html.twig
@@ -95,7 +95,7 @@
 <article{{ attributes }}>
   {% set tabs = [
     {'id': 'document', 'name': 'Document'|t},
-    {'id': 'about-document', 'name': 'About document'|t},
+    {'id': 'about-document', 'name': 'About document'|t}
   ] %}
   {% if os2loop_documents_collection|default(false) %}
     {% set tabs = tabs|merge([
@@ -114,21 +114,17 @@
     </div>
     <div class="tab-pane" id="about-document" role="tabpanel" aria-labelledby="about-document-tab">
       {{ macros.title("About document"|t, "document", node, content, false) }}
-      <div>{{ content.os2loop_documents_document_autho }}</div>
-      <div{{ content_attributes.addClass("bg-secondary-loop") }}>
-        <div>{{ content.os2loop_shared_subject }}</div>
-        <div>{{ content.os2loop_shared_profession }}</div>
+      <div{{ content_attributes.addClass("block-secondary-gray") }}>
+        <div>{{ content.os2loop_documents_document_autho }}</div>
+        <div>{{ content.os2loop_shared_rev_date }}</div>
         <div>{{ content.os2loop_shared_tags }}</div>
-        <div>{{ content.os2loop_shared_category }}</div>
       </div>
     </div>
     {% if os2loop_documents_collection|default(false) %}
       <div class="tab-pane" id="about-collection" role="tabpanel" aria-labelledby="about-collection">
         {{ macros.title(os2loop_documents_collection.title.value, "document", os2loop_documents_collection, content, true, {link: true}) }}
         {% if os2loop_documents_collection_tree|default(false) %}
-          <div>
-            {# We use div here to prevent it from appearing in TOC #}
-            <div class="h5">{{ 'Documents in collection'|t }}</div>
+          <div class="documents-in-collection">
             {{ macros.table_of_contents(os2loop_documents_collection_tree, os2loop_documents_collection, node.id) }}
           </div>
         {% elseif os2loop_documents_collections|default(false) %}
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/field/field.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/field/field.html.twig
@@ -57,7 +57,8 @@
   {% endif %}
 {% elseif label_display == 'inline' %}
   <span{{ attributes }}>
-    <span{{ title_attributes.addClass(title_classes).addClass("d-none") }}>{{ label }}:</span>
+    {# <span{{ title_attributes.addClass(title_classes).addClass("d-none") }}>{{ label }}:</span> #}
+    <span{{ title_attributes.addClass(title_classes) }}>{{ label }}:</span>
     {% if multiple %}
       <span>
     {% endif %}
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/macros.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/macros.html.twig
@@ -17,7 +17,7 @@
     <h1{{ title_attributes }} class="header h2 {{ class }}">
       {% if options.link|default(false) %}
         {% set url = path('entity.node.canonical', {node: node.id}) %}
-        <a href="{{ url }}">{{ title }}</a>
+        <a href="{{ url }}" class="link-unstyled">{{ title }}</a>
       {% else %}
         {{ title }}
       {% endif %}
@@ -29,7 +29,7 @@
   </div>
   <div class="title row align-baseline mb-30">
     <div class="col-12 col-md-auto pl-0">
-      <div class="badge badge-{{ node.getType|clean_class }}">{{ class|capitalize|t }}</div>
+      <div class="badge badge-os2loop-documents-{{ class }}">{{ class|capitalize|t }}</div>
     </div>
     <div class="col-12 col-md-auto pl-0">
       {{ content.os2loop_shared_subject }}
@@ -77,15 +77,27 @@
     <div class="list-group document-collection-list">
       {% for item in items %}
         {% set document = item.document %}
-        {% if current_node_id is same as(document.id) %}
-          <a href="{{ path('entity.node.canonical', {node: document.id, collection: collection.id}) }}" class="list-group-item list-group-item-action document-collection-item active">
-            {{ document.title.value }} <span class="badge badge-dark badge-pill float-right mt-1">{{ 'Currently open'|t }}</span>
-          </a>
-        {% else %}
-          <a href="{{ path('entity.node.canonical', {node: document.id, collection: collection.id}) }}" class="list-group-item list-group-item-action document-collection-item">
-            {{ document.title.value }}
-          </a>
-        {% endif %}
+        {% set is_active_document = current_node_id is same as(document.id) %}
+        <div class="list-group-item list-group-item-action document-collection-item d-inline-flex">
+          {# icon #}
+          <div class="list-group-icon">
+            {{ source("#{active_theme_path()}/assets/svg/#{document.getType|clean_class}.svg", ignore_missing=true) }}
+          </div>
+          {# description #}
+          <div class="d-inline-flex align-items-start">
+            <a href="{{ path('entity.node.canonical', {node: document.id, collection: collection.id}) }}" class="h5 link-unstyled ml-30">
+              {{ document.title.value }}
+            </a>
+            <span class="badge badge-primary badge-{{ document.getType|clean_class }} ml-20">{{ document.type.entity.label }}</span>
+            {% if is_active_document %}
+              <span class="badge badge-primary ml-20">{{ 'Open document'|t }}</span>
+            {% endif %}
+          </div>
+          {# date #}
+          <div class="ml-auto small">
+            {{ document.createdtime|date('d-m-Y') }}
+          </div>
+        </div>
         {{ item.children ? _self.table_of_contents(item.children, collection, current_node_id) }}
       {% endfor %}
     </div>

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,3 @@`
`2`	`2`	`color: $dark;`
`3`	`3`	`font-weight: bold;`
`4`	`4`	`}`
`5`		`-`
`6`		`-.os2loop-title-text-inline {`
`7`		`- color: $dark;`
`8`		`-}`