Simple internal sitemaps

Simple admin sitemap

What ever solution that you build, there will be some internal pages that you would be building for internal employees to do administrative work such as clean up data, manually create new user etc.

The minimum functionality that you can build is to have an simple clean admin sitemap. HTML code the the above sitemap:

<div class='ui container'>
  <div class='ui grid'>
    <div class='sixteen wide column'>
      <div class='ui segment'>
        <h2>Admin sitemap</h2>
        <div class='ui ordered list'>
          <div class='item'>
            <div>Users and VAs</div>
            <div class='ui ordered list'>
              <a href="" class="item">List all users</a>
              <a href="" class="item">List all VAs</a>
              <a href="" class="item">Create a user or va</a>
            </div>
          </div>
          <div class='item'>
            <div>Others</div>
            <div class="ui ordered list">
              <a href="" class='item'>VA hours consumed per month</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Use trix for as rich text editor

Trix used with semantic ui

Semantic UI does not support a native wysiwyg. Trix by Basecamp team is a very elegant rich text editor (wysiwyg).

Use the sails-business-stack-generator to install trix in your sails project.

Sample code for using trix.

<div class="field">
    <label>Summary of work for this subscription</label>
    <input id='report_body' type="hidden" name="report_body" placeholder="write your summary here" value="<%=dr.body%>">
    <trix-editor input="report_body"></trix-editor>
</div>

Things to note about the above code – 1) trix editor has an attribute called input. This should be the id of the input element on which the trix editor is applied. 2) Also make sure that this page includes the trix js and trix css.

<link rel='stylesheet' type='text/css' href='/trix/trix.css'> 			
<script type='text/javascript' src='/trix/trix.js'></script> 	

This post is part of the business solution stack series