/documents updated: vertical layout

src/client/components/PageDocuments.js

@@ -1,35 +1,25 @@
-import template from '../../templates/components/page-documents.html';
-import {unique} from '../../utils/common';
+import template from '../../templates/components/page-documents.html'
+import {unique} from '../../utils/common'
 
 export default function (app) {
-    app.component('pageDocuments', {
-        bindings: {
-            documents: '<'
-        },
-        template: template,
-        controllerAs: '$',
-        controller: function () {
-            let categories = unique(i => i.category);
+	app.component('pageDocuments', {
+		bindings: {
+			documents: '<'
+		},
+		template: template,
+		controllerAs: '$',
+		controller: function () {
+			const documents = this.documents
+			const uniqueCategories = unique(i => i.category)
+			const documentsOf = category => documents.filter(i => i.category === category)
 
-            this.collections = [];
-
-            let documents = this.documents;
-            let cats = categories(documents)
-                .map(cat => new Object({
-                    name: cat,
-                    documents: []
-                }));
-
-            let docCollections = documents.reduce(
-                (cats, doc) => {
-                    let c = cats.find(i => i.name === doc.category);
-                    c.documents.push(doc);
-                    return cats;
-                },
-                cats
-            );
-
-            this.collections = this.collections.concat(docCollections);
-        }
-    });
-};
+			this.collections = uniqueCategories(documents)
+				.reduce((acc, category) => (
+					[...acc, {
+						name: category,
+						documents: documentsOf(category)
+					}]
+				), [])
+		}
+	})
+};

src/style/components/document.scss

@@ -2,31 +2,47 @@
 
 .document {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
   padding: 0;
-  margin: 0 $single-margin $double-margin;
-
-  p {
-    text-align: center;
-  }
+  margin-bottom: $single-margin;
 }
 
 .document__image{
+  min-width: 4em;
+  width: 4em;
+  height: 4em;
+
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  //align-items: center;
+
   img {
-    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
     box-shadow: $white-shadow;
   }
 }
 
 .document__image--medium{
-  max-width: 7.5em;
 }
 
 .document__image--big{
   max-width: 20em;
 }
 
+.document__file {
+  margin-left: $single-margin;
+  flex-grow: 10;
+}
+
+.document__file-info {
+  width: 25%;
+  flex-grow: 1;
+  font-size: $smaller-font-size;
+  text-align: right;
+}
+
 @media (max-width: $mobile-width) {
   .document {
     margin: 0 $single-margin/2 $single-margin;

src/style/components/documents-container.scss

@@ -1,10 +1,17 @@
 @import "../variables";
 
 .documents-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: baseline;
+  margin-bottom: $post-margin;
+
+  &__head {
+    margin-bottom: $double-margin;
+  }
+
+  &__body {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+  }
 }
 
 @media (max-width: $mobile-width) {

src/templates/components/document.html

@@ -1,12 +1,15 @@
 <div class="document">
-    <div class="document__image {{$.imageClass}}">
-        <a href="{{$.document.url}}" target="_blank" class="invisible">
-            <img ng-src="{{$.previewUrl}}" alt="{{$.document.title}}">
-        </a>
+    <a href="{{$.document.url}}" target="_blank" class="invisible">
+        <div class="document__image {{$.imageClass}}">
+            <img ng-src="{{$.previewUrl}}" alt="{{$.document.title}}"/>
+        </div>
+    </a>
+
+    <div class="document__file">
+        <a href="{{$.document.url}}" target="_blank">{{$.document.title | uppercaseFirst}}</a>
     </div>
 
-    <p class="document__file">{{$.document.title | uppercaseFirst}}</p>
-    <p class="document__file-info">
+    <div class="document__file-info">
         <a href="{{$.document.url}}" target="_blank">{{$.file.name | ext}} ({{$.file.size | bytes}})</a>
-    </p>
+    </div>
 </div>

src/templates/components/page-documents.html

@@ -1,8 +1,12 @@
-<div class="content content_wide content--padding-top--menu">
-    <div ng-repeat="c in $.collections">
-        <h2>{{c.name}}</h2>
+<div class="content content_thin content--padding-top--menu">
+    <div class="documents-container"
+         ng-repeat="c in $.collections"
+    >
+        <div class="documents-container__head">
+            <h3>{{c.name}}</h3>
+        </div>
 
-        <div class="documents-container">
+        <div class="documents-container__body">
             <document ng-repeat="i in c.documents" document="i"></document>
         </div>
     </div>