Vosterra Admin Panel

SketchSystems.spec

Vosterra Admin Panel
  My Libraries
    Create Library Button -> New Library Dialog
    Click L1 -> L1 Content List
    Manage L1 -> L1 Settings
    
    Library List*
    New Library Dialog

  Library 1
    Add Content L1 -> New Content Dialog

    L1 Content List*
      Click L1C1 -> Post Dashboard
    L1 Settings
    
    New Content Dialog
      Add Existing Post -> Import Existing
      Create New Post -> Post Creator
      
      Source?*
      Import Existing
  
  Post Creator
    Save to Library -> Post Dashboard
    Publish to Location -> Post on Network
    
    Draft Post*
  Post Dashboard
Vosterra Network 1
  VN1 Homepage*
  Post on Network

SketchSystems_prototype.js

let ul_style = { listStyleType: 'none', width: '100%', margin: 0, padding: '5px 15px', backgroundColor: '#f1f1f1' };
let li_style = { margin: 0, paddingBottom: '5px' };

function render_nav(model) {
  return $("div", {style: {width: '100%', flex: '1', border: '1px solid black', overflow: 'hidden', }}, [
    $("div", {style: {display: 'flex', flexDirection: 'column', alignItems: 'center'}}, [
      $("h3", {}, "Test!"),
      $("ul", {style: ul_style}, [
        $("li", {}, [
          $("span", {style: {marginLeft: '5px', paddingBottom: '5px'}}, "My Libaries [-]"),
          $("ul", {style: ul_style}, [
            $("li", {style: li_style}, "Library 1"),
            $("li", {style: li_style}, "Library 2"),
          ]),
        ]),
      ]),
    ]),
  ]);
}

function render_body(model) {
  return $("div", {style: {width: '100%', flex: '5', border: '1px black'}}, [
    $("p", {}, "Primary Content"),
  ]);
}
function render(model){
  let current_state_name = model.active_states[0].name;
  let page = $("div", {style: {width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center'}}, [
    $("h1", {}, "Vosterra Admin Panel"),
    $("h3", {}, `${current_state_name}`),
    $("div", {style: {display: 'flex', width: '100%'}}, [render_nav(model), render_body(model)]),
  ]);
  return page;
}