Update modules (#24)

* content edits
* minor readme fix
* modules update
* added list of navigation types
* updated order
* added label for new modules in 7.4

---------

Co-authored-by: Guust Nieuwenhuis <[email protected]>

04_front-end-layout-manager/01_introduction/01_layout-manager.md

@@ -10,6 +10,22 @@ permalink: /front-end-layout-manager/introduction/layout-manager/
 
 # Layout Manager
 
+The Layout Manager is the front-end tool for composing the layout of pages, entering content, and adding/configuring automated tools like navigation, forms, feeds and collections.
+
 ## Concept
 
+Instead of relying upon hard-coded, code-based layout templates, the Layout Manager allows you to drag-and-drop highly configurable "Modules" onto a page. Each Module (depending upon it's type and location) will have an associated "configurator" that allows further customization, such as functional settings (feed source, form name, etc.) and layout (alignment/width, associated CSS classes/styles, etc.). In this way, the editor is allowed a great deal of flexibility when laying out each page, seeing the results immeditately and without having to edit or create hard-coded templates.
+
 ## How-to
+
+To enable the Layout Manager, log into Masa CMS with an account that has editing permissions enabled, then from the top editor toolbar choose "Edit (pencil icon) -> Inline Edit". A list of Modules will appear on the right-hand side of the page. Use your mouse to drag this into the content area. You will see a context label appear above an available "drop" container when you drag the Module over it. Releasing the mouse button (aka "dropping" it) will place the Module into the container.
+
+## Basics of Layout
+
+When the Layout Manager is active, a "pencil" icon will appear whenever the mouse hovers over a Module in the content area. This is both the "edit" button, and the "drag" handle for moving the Module up/down within the current container or to drag it into another container.
+
+There are two types of Modules: "Containers", which act as placeholders for other Modules (in some cases, even other Containers), and functional Modules, such as Navigation or Collection. *Note*: regarding Containers; it is better to use CSS/styling to layout complex content than use multiple nested containers, as there is a small but increasing performance penalty the more deeply you nest Containers.
+
+## Configurators
+
+For each Module, there is an associated "Configurator", a menu of settings that allow you to configure both the Module and its layout/styling properties. To access a Module's Configurator (once it is placed in the content area) click on the top-left pencil icon that displays when you hover over it.

04_front-end-layout-manager/02_modules/01_content.md

@@ -10,6 +10,24 @@ permalink: /front-end-layout-manager/modules/content/
 
 # Content
 
-## Custom/inline
+Content in the Layout Manager comes in two forms: Inline, and via the Text Module.
+
+## Inline
+Inline content is content that can be edited directly on the page by "double-clicking" on the content area. This can include (depending upon how your site administrator has configured the page template) titles and general content areas.
+
+To edit content inline, simply double-click on the text. For block content, a simplified editor menu will appear above the content. You can simply type in place to add or update the content. Clicking outside of the Content area (or clicking on "Done Editing" in the Layout Manager) will close the editing process, and once the page is saved the change is implemented.
+
+## Via Text Module
+A Content module can also be dragged onto the page. These allow you to create content blocks of three types: Custom, Component, and Bound Attribute. You can select this via the Text Module's "Content Source" setting it it's Configurator.
+
+### Custom
+Custom content is similar to the page's "body" content, in that you use the Masa CMS HTML editor to create a new content block. By selecting "Custom" as the Content Source, and then clicking on the "Edit" button, an Editor modal will appear in which you can create or edit the content.
+
+### Component
+Component allows you to select or create a new Masa CMS Component. Components are shared, reusable content blocks, so remember that editing an existing component will change the content wherever it is displayed.
+
+### Bound Attribute
+Bound Attributes are attributes such as the page's Title or Credits, or any text-type Extended Attributes bound to the current page.
+
+
 
-## Components

04_front-end-layout-manager/02_modules/02_collections.md

@@ -8,6 +8,20 @@ last_modified_date: 20-10-2021 13:00
 permalink: /front-end-layout-manager/modules/collections/
 ---
 
-# Collections
+# Collection
 
-## Types
+A Collection Module places a "Collection" onto the page. Collections are generated in a number of ways within Masa CMS, each type being available under the "Content Source" Configurator dropdown. Depending upon which Content Source is selected, a selection of related options will appear within the Configurator.
+
+## Types (Content Source)
+
+### Local Index
+A Local Index is a Collection of content you have created within the Masa Administrator.
+
+### Remote Feed
+A Remote Feed is a feed from an internal or external location, i.e. an RSS news feed.
+
+### Related Content
+Related Content is a Collection generated from the current page's assigned Related Content.
+
+### Children
+Children is a Collection is the collection of child pages for the current page.

04_front-end-layout-manager/02_modules/03_forms.md

@@ -8,8 +8,6 @@ last_modified_date: 20-10-2021 13:00
 permalink: /front-end-layout-manager/modules/forms/
 ---
 
-# Forms
+# Form
 
-## Creating (admin)
-
-## Adding
+The Form Module places a Masa Form onto the page. You can create a new Form, or select (and then edit) an existing one.

04_front-end-layout-manager/02_modules/04_containers.md

@@ -8,4 +8,7 @@ last_modified_date: 20-10-2021 13:00
 permalink: /front-end-layout-manager/modules/containers/
 ---
 
-# Containers
+# Container
+The Container Module acts as a placeholder for other Modules, or even other Containers. These can be used to layout a page or section and apply specific CSS styling to sections of the page.
+
+*Note*: it is better to use CSS/styling to layout complex content than use multiple nested containers, as there is a small but increasing performance penalty the more deeply you nest Containers.

04_front-end-layout-manager/02_modules/05_embed.md

@@ -8,4 +8,5 @@ last_modified_date: 20-10-2021 13:00
 permalink: /front-end-layout-manager/modules/embed/
 ---
 
-# Embed
+# Embed
+The Embed Module allows you to embed a block of custom content (such as a youtube script block) onto the page.

04_front-end-layout-manager/02_modules/06_navigation.md

@@ -8,4 +8,35 @@ last_modified_date: 20-10-2021 13:00
 permalink: /front-end-layout-manager/modules/navigation/
 ---
 
-# Navigation
+# Navigation
+The Navigation module allows you to place a navigation block onto the page. There are numerous types of custom navigation available via the "Select Navigation" Configurator option, and you should be able to find one that suits your specific need.
+
+## Category Navigation
+
+## Folder Navigation
+
+## Multi-Level Navigation
+
+## Peer Navigation
+
+## Primary Navigation
+New in 7.4
+{: .label .label-orange }
+{: .no_toc }
+
+## Sequential Navigation
+
+## Standard Navigation
+
+## Sub Navigation
+
+## Archive Navigation
+
+## Category Summary
+
+## Category Navigation
+
+## Calendar Navigation
+
+## Tag cloud
+

04_front-end-layout-manager/02_modules/07_plugins.md

@@ -8,4 +8,7 @@ last_modified_date: 20-10-2021 13:00
 permalink: /front-end-layout-manager/modules/plugins/
 ---
 
-# Plugins
+# Plugins
+A Masa CMS Plugin may have it's own set of Modules (sometimes refered to as "display objects") to render it's front-end content. If a plugin has Modules/Display Objects associated with it, then these will be available within the Plugin's Configurator.
+
+Note that this Module only appears if there are plugins installed in your Masa instance.

04_front-end-layout-manager/02_modules/09_button.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: Button
+nav_order: 9
+grand_parent: Front-End/Layout Manager
+parent: Modules
+last_modified_date: 20-10-2021 13:00
+permalink: /front-end-layout-manager/modules/button/
+---
+
+# Button
+New in 7.4
+{: .label .label-orange }
+{: .no_toc }
+
+The Button Module places a simple button onto the page, which will act as a navigation link.

04_front-end-layout-manager/02_modules/10_call_to_action.md

@@ -0,0 +1,13 @@
+---
+layout: default
+title: Call To Action
+nav_order: 10
+grand_parent: Front-End/Layout Manager
+parent: Modules
+last_modified_date: 20-10-2021 13:00
+permalink: /front-end-layout-manager/modules/calltoaction/
+---
+
+# Call To Action
+
+The Call To Action Module creates a "call to action" experience. Both a Component and a Form must be selected, and these will appear on the page within a modal.

04_front-end-layout-manager/02_modules/11_gated_asset.md

@@ -0,0 +1,19 @@
+---
+layout: default
+title: Gated Asset
+nav_order: 11
+grand_parent: Front-End/Layout Manager
+parent: Modules
+last_modified_date: 20-10-2021 13:00
+permalink: /front-end-layout-manager/modules/gatedasset/
+---
+
+# Gated Asset
+New in 7.4
+{: .label .label-orange }
+{: .no_toc }
+
+The Gated Asset Module gates access to a page or download URL. *Note:* this is a basic content gate, and in no way secures the destination url.
+
+## Configuration
+Configuring a Gated Asset requires that you select a Form (which must be completed in order to open the "gate") and a set of pre/post-content messages to complete the process. The Gate can appear either inline on a page or as a modal. Once the form is submitted, the user will be presented with a button that directs them to the gated content via a URL.

04_front-end-layout-manager/02_modules/12_image.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: Image
+nav_order: 12
+grand_parent: Front-End/Layout Manager
+parent: Modules
+last_modified_date: 20-10-2021 13:00
+permalink: /front-end-layout-manager/modules/image/
+---
+
+# Image
+
+The Image Module places an image onto the page.
+

04_front-end-layout-manager/02_modules/13_info.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Info
+nav_order: 13
+grand_parent: Front-End/Layout Manager
+parent: Modules
+last_modified_date: 20-10-2021 13:00
+permalink: /front-end-layout-manager/modules/info/
+---
+
+# Info
+New in 7.4
+{: .label .label-orange }
+{: .no_toc }
+
+The Info Module places selected informational tags onto the page, such as page Credits or Create Date.
+

04_front-end-layout-manager/02_modules/14_media.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Media
+nav_order: 14
+grand_parent: Front-End/Layout Manager
+parent: Modules
+last_modified_date: 20-10-2021 13:00
+permalink: /front-end-layout-manager/modules/media/
+---
+
+# Media
+New in 7.4
+{: .label .label-orange }
+{: .no_toc }
+
+The Media Module places an external video onto the page. Current sources include Youtube, Vimeo and Daily Motion. Vidoes can be set to auto-play.
+

04_front-end-layout-manager/02_modules/15_site_search.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Site Search
+nav_order: 15
+grand_parent: Front-End/Layout Manager
+parent: Modules
+last_modified_date: 20-10-2021 13:00
+permalink: /front-end-layout-manager/modules/sitesearch/
+---
+
+# Site Search
+New in 7.4
+{: .label .label-orange }
+{: .no_toc }
+
+The Site Search Module places a site search box onto the page.
+

04_front-end-layout-manager/02_modules/16_system.md

@@ -0,0 +1,34 @@
+---
+layout: default
+title: System
+nav_order: 16
+grand_parent: Front-End/Layout Manager
+parent: Modules
+last_modified_date: 20-10-2021 13:00
+permalink: /front-end-layout-manager/modules/system/
+---
+
+# System
+System places one of the Masa CMS "system" Modules onto the page.
+
+## Comment Form
+A comment form and comment list (managed/moderated via the administrator).
+
+## Content Rater
+A simple star rater for the page
+
+## Go To First Child
+New in 7.4
+{: .label .label-orange }
+{: .no_toc }
+
+When placed on a page, visitors will automatically be redirect to the first "child" below this page.
+
+## Site Map
+A site map.
+
+## User Favorites
+Allows logged-in users to mark a page as "favorite" for future reference (via the User Tools Module)
+
+## User Tools
+A collection of utilities/information/links for logged-in users.

04_front-end-layout-manager/02_modules/08_custom.md → 04_front-end-layout-manager/02_modules/20_custom.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Custom
-nav_order: 8
+nav_order: 20
 grand_parent: Front-End/Layout Manager
 parent: Modules
 last_modified_date: 20-10-2021 13:00

04_front-end-layout-manager/03_module-use/01_layout-positioning.md

@@ -8,4 +8,17 @@ last_modified_date: 20-10-2021 13:00
 permalink: /front-end-layout-manager/module-use/layout-positioning/
 ---
 
-# Layout/positioning
+# Layout/positioning
+
+
+When the Layout Manager is active, a "pencil" icon will appear whenever the mouse hovers over Modules placed in the content area. This is both the "edit" button, and the "drag" handle for moving the Module.
+
+## Position
+A page will contain at least one "drop" area, a container into which Modules can be dragged from the right-side "Layout Manager" list. When a dragged module is above a valid drop area, the section will highlight in red with the drop area's name appearing top-left. Once dropped, it is possible to reposition the module by dragging it via the "pencil" icon, so that it can be placed above/below other Modules in the same contained area or into another contained area.
+
+## Containers
+There are two types of Modules: Containers, which act as self-contained areas for other Modules (in some cases, even other Containers); and functional Modules, such as Navigation or Collection.
+
+While additional functionality is planned for Containers, for now are intended to give added layout flexibility when simple styling will not do. Because Containers can be styled just as any other Module, they are ideal for laying out panels on a given web page, for instance when a set of informational "Cards" is needed, or for one-off styles.
+
+As noted throughout this documentation, even though Containers can be nested infinitely, it is far better to use them sparingly, as they will demand a higher performance/rendering cost than simple stying would.

04_front-end-layout-manager/03_module-use/02_styling.md

@@ -8,4 +8,26 @@ last_modified_date: 20-10-2021 13:00
 permalink: /front-end-layout-manager/module-use/styling/
 ---
 
-# Styling
+# Styling
+All Modules can be styled via the Module's "Configurator". The Configurator appears in the right-side Layout Manager area whenever a Module is active, like when a Module is first dropped onto a page, or when an already-placed Module's edit "pencil" icon is clicked.
+
+For Modules that allow for styling (most do), the Configurator will display a "Style" menu option at the bottom. Clicking on this will open several new options.
+
+## Module vs Content styling
+A Module has two areas that can be styled: the "module" area, aka the generic div container that surrounds the module content, and the "content" itself. Clicking on "Module" or "Content" within the Style tab will enable you to apply stying to each. The styling options for each are slightly different. "Module" can be thought of as the outer margin of the Module, while "Content" is everything within the Module.
+
+### Layout (Module)
+The layout option for the Module container allows you to set positioning & alignment (even per display device), as well as height, margin and padding.
+
+### Layout (Content)
+Content layout allows you to set text alignment as well as margin and padding.
+
+### Theme
+Theme allows you to set the Module text color.
+
+### Background
+Background lets you set the background color and/or image.
+
+### Custom
+Custom allows you to assign one-off styles, as well as set the z-index.
+