[WIP] Improve master layout for different devices + product growth

We have two pressing needs:

1. Improve experience on real estate challenged devices.
2. Make room for product feature-set growth.

To hit these targets, we need to develop better UX through smarter on-screen space management.

gui/app/templates/components/section/jira/type-editor.hbs

@@ -8,7 +8,7 @@
 		{{#link-to "customize.integrations"}}
 			{{ui/ui-button color=constants.Color.Green light=true label="Configure Jira Connector"}}
 		{{/link-to}}
-		{{ui/ui-spacer size=300}}
+		<Ui::UiSpacer @size=300 />
 	{{else}}
 		{{#unless authenticated}}
 			<p class="color-green-600">Your Documize administrator needs to provide Jira connection details before usage.</p>
@@ -23,10 +23,10 @@
 			{{ui/ui-button color=constants.Color.Yellow light=true label=constants.Label.Preview submit=true onClick=(action "onPreview")}}
 		</form>
 
-		{{ui/ui-spacer size=300}}
+		<Ui::UiSpacer @size=300 />>
 		{{{issuesGrid}}}
 	{{else}}
-		{{ui/ui-spacer size=300}}
+		<Ui::UiSpacer @size=300 />
 		<p class="color-gray-700">Jira connector not authenticated</p>
 	{{/if}}
 {{/section/base-editor}}

gui/app/templates/components/section/plantuml/type-editor.hbs

@@ -9,7 +9,7 @@
 	<div class="section-plantuml-diagram">
 		<div class="form-group">
 			<label><a href="http://plantuml.com/" target="_blank">PlantUML Diagram</a></label>
-			{{ui/ui-spacer size=200}}
+			<Ui::UiSpacer @size=200 />
 			<div>
 				<p>Insert sample diagrams:</p>
 				<p>
@@ -26,16 +26,16 @@
 		</div>
 	</div>
 
-	{{ui/ui-spacer size=200}}
+	<Ui::UiSpacer @size=200 />
 
 	{{ui/ui-button color=constants.Color.Yellow light=true label=previewButtonCaption onClick=(action "onPreview")}}
 
-	{{ui/ui-spacer size=200}}
+	<Ui::UiSpacer @size=200 />
 
 	<div id={{previewId}} class="text-center">
 		<img src={{diagramPreview}}>
 	</div>
 
-	{{ui/ui-spacer size=200}}
+	<Ui::UiSpacer @size=200 />
 
 {{/section/base-editor}}

gui/app/templates/components/section/tabular/type-editor.hbs

@@ -17,7 +17,7 @@
 			onClick=(action "onShowImportModal")}}
 	</div>
 
-	{{ui/ui-spacer size=300}}
+	<Ui::UiSpacer @size=300 />
 
 	<div id={{editorId}} class="mousetrap wysiwyg wysiwyg-editor">
 		{{{pageBody}}}