[ADF-1784] Fix empty folder drag&drop message for small devices (#2555)

* Fix empty folder drag&drop message for small devices

* Fix documentation

* Modify documentation again, the unsaved part...

docs/version-manager.component.md

@@ -4,7 +4,7 @@ The Version manager component displays the version history of a node with the ab
 
 ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `This component is still in experimental phase, it has several limitations which will be resolved soon.`
 
-![Breadcrumb](docassets/images/version-manager.png)
+![Version Manager](docassets/images/version-manager.png)
 
 ## Basic Usage
 
@@ -12,11 +12,36 @@ The Version manager component displays the version history of a node with the ab
 <adf-version-manager [node]="aMinimalNodeEntryEntity"></adf-version-manager>
 ```
 
+## Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| node | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | The node you want to manage the version history of. |
+
+
+## Version List component
+
+Inside the version manager component, there is the underlying VersionListComponent. The VersionListComponent loads and displays the version history of a node.
+
+### Basic Usage
+
+```html
+<adf-version-list [id]="nodeId"></adf-version-list>
+```
+
 ### Properties
 
 | Name | Type | Description |
 | --- | --- | --- |
-| node | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | The node you want to see the version history of. |
+| id | string | The node id you want to see the version history of. |
+
+### Version actions
+
+Each version has a context menu on the right, with the following actions.
+
+| Action   | Versions  | Description |
+| ---      | ---       | ---         |
+| Restore  | All       | Revert the current version to the selected one with creating a new version of it. |
 
 
 <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->

ng2-components/ng2-alfresco-documentlist/index.ts

@@ -16,10 +16,10 @@
  */
 
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 import { UploadModule } from 'ng2-alfresco-upload';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { BreadcrumbComponent } from './src/components/breadcrumb/breadcrumb.component';
 import { DropdownBreadcrumbComponent } from './src/components/breadcrumb/dropdown-breadcrumb.component';
@@ -99,8 +99,8 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [
         CoreModule,
         UploadModule,
         DataTableModule,
-        MaterialModule,
+        FlexLayoutModule,
-        FlexLayoutModule
+        MaterialModule
     ],
     declarations: [
         ...DOCUMENT_LIST_DIRECTIVES

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html

@@ -24,8 +24,8 @@
                 <adf-empty-list>
                     <div class="adf-empty-list_template adf-empty-folder">
                         <div class="adf-empty-folder-this-space-is-empty">{{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}}</div>
-                        <div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
+                        <div fxHide.lt-md="true" class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
-                        <div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
+                        <div fxHide.lt-md="true" class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
                         <img class="adf-empty-folder-image" [src]="emptyFolderImageUrl">
                     </div>
                     <!-- <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}} </div> -->