mozaikoo® Backend App

Page Structure

<Header />
<Sidebar>
  <SidebarHead />
  <!-- list and tree view -->
  <SidebarFilter>
    <FilterStatus />
    <FilterMenu />
    <FilterCategory />
    <FilterTags />
    <Filter[Type] />
      ... page, widgets, entries …
  </SidebarFilter>
  <!-- detail view -->
  <SidebarContent />
  <SidebarEditor />
</Sidebar>
<Toolbar />
<LanguageSwitcher />

<main>
  <!-- detail views as tabs -->
  <DetailMain />
  <DetailContent />
  <DetailSettings />
  <DetailMedia />
  <DetailRelations />
  <DetailVersions />
  <DetailACL />
  <DetailCustom />
  <DetailSidebar>
    <!-- appear only when content is separated (as tabs or scrollspy) -->
    <DetailSidebarTabs />
  </DetailSidebar>
  <!-- list view -->
  <List>
  <!-- tree view -->
  <Tree>
  <!-- media view -->
  <FileBrowser>
</main>

<Footer />

Views

List View

There are only 3 types of entity lists:

  • tree – hierarchical (with drag & drop and item rearrangements)
  • list – linear with each field sortable plus menu for extending and deleting table fields in view
  • media with additional views and media previews (also used as file browser)

Detail View

Dashboards

Dashboard charts are built with chart.js and have additional simple widgets:

  • elements (showing defined elements with filter and sort options)
  • activities (showing user activity in chronological order)
  • logs (showing logged events with filter and sort options)

<Header>
  <AppMainMenu>
  <Logo />
  <HeaderOwner />
  <HeaderNavigation />
  <UsersActive />
  <UserActive />
  <HelpMenu />
</Header>