scripts/apps/legal-archive/views/legal_archive.html
<div class="subnav legal-archive subnav--absolute" sd-media-query min-width="700">
<button class="filter-trigger" ng-click="openAdvanceSearch = !openAdvanceSearch"
title="{{ :: 'Filters' | translate }}"
aria-label="{{ :: 'Filters' | translate }}"
ng-class="{'filter-trigger--active': openAdvanceSearch}">
<i class="icon-filter-large"></i>
</button>
<div sd-searchbar></div>
<div sd-pagination data-items="items" ng-if="elementState !== 'compact'"></div>
<div class="subnav__stretch-bar"></div>
<div sd-legal-item-sortbar ng-if="elementState !== 'compact'" class="sortbar-container"></div>
<div class="view-select">
<button tooltip="{{ :: 'switch to grid view' | translate }}" tooltip-placement="left" ng-show="view !== 'mgrid'" ng-click="setview('mgrid')"><i class="icon-grid-view"></i></button>
<button tooltip="{{ :: 'switch to list view' | translate }}" tooltip-placement="left" ng-show="view !== 'compact'" ng-click="setview('compact')"><i class="icon-list-view"></i></button>
</div>
<div class="button-stack right-stack" ng-if="elementState === 'compact'">
<div class="dropdown dropdown--align-right dropdown--compact-state" dropdown>
<button class="navbtn dropdown__toggle" dropdown__toggle><i class="icon-dots-vertical"></i></button>
<ul class="dropdown__menu">
<li><span class="dropdown__menu-label">{{:: 'Pagination' | translate}}</span></li>
<li>
<span sd-pagination data-items="items"></span>
</li>
<li class="dropdown__menu-divider"></li>
<li><span class="dropdown__menu-label">{{:: 'Sorting' | translate}}</span></li>
<li>
<span sd-legal-item-sortbar></span>
</li>
</ul>
</div>
</div>
</div>
<section class="search main-section search-page-container" ng-class="{'sidebar-open': openAdvanceSearch}">
<div class="archive-sidebar">
<div class="header">
<ul>
<li translate>Search</li>
</ul>
<button aria-label="{{ :: 'Close panel' | translate }}" class="doopen" ng-click="openAdvanceSearch = false"><i class="icon-close-small"></i></button>
</div>
<div class="content">
<div data-context="context" >
<form>
<fieldset>
<div class="field">
<label for="search-story-id">{{:: 'GUID' | translate}}</label>
<div class="control">
<input type="text" id="search-story-id" ng-model="criteria._id" tabindex="1">
</div>
</div>
<div class="field">
<label for="search-unique-id">{{:: 'Unique Name' | translate}}</label>
<div class="control">
<input type="text" id="search-unique-id" ng-model="criteria.unique_name" tabindex="1">
</div>
</div>
<div class="field">
<label for="search-headline">{{:: 'Headline' | translate}}</label>
<div class="control">
<input type="text" id="search-headline" ng-model="criteria.headline" tabindex="2">
</div>
</div>
<div class="field">
<label for="search-slugline">{{:: 'Slugline' | translate}}</label>
<div class="control">
<input type="text" id="search-slugline" ng-model="criteria.slugline" tabindex="3">
</div>
</div>
<div class="field">
<label for="search-storytext">{{:: 'Story Text' | translate}}</label>
<div class="control">
<input type="text" id="search-storytext" ng-model="criteria.body_html" tabindex="4">
</div>
</div>
<div class="field" sd-date-param data-location="criteria.published_after">
<label for="published_after" translate>Published From</label>
<div sd-datepicker id="published_after" ng-model="criteria.published_after"></div>
</div>
<div class="field" sd-date-param data-location="criteria.published_before">
<label for="published_before" translate>Published Until</label>
<div sd-datepicker id="published_before" ng-model="criteria.published_before"></div>
</div>
</fieldset>
</form>
<div class="actions">
<button class="btn btn--primary pull-right" ng-click="search()" tabindex="7" translate>Go</button>
<button class="btn btn--primary pull-right" ng-click="clear()" tabindex="8" translate>Clear</button>
</div>
</div>
</div>
</div>
<div class="archive-content">
<div class="preview-layout" ng-class="{
closed: !selected.preview
}" >
<div class="list-pane {{ view || 'list' }}-view">
<div id="content-list" class="content" sd-updown data-items="items._items" data-select="preview(item)">
<div class="loading-indicator" ng-show="loading" translate>loading</div>
<div class="shadow-list-holder" sd-items-list></div>
</div>
</div>
<div id="item-preview" class="preview-pane content-item-preview" ng-show="selected.preview" ng-init="tab = 'content'">
<header>
<ul class="nav nav-tabs">
<li ng-class="{
active: tab === 'content'
}">
<button ng-click="tab = 'content'"><span translate>Content</span></button>
</li>
<li ng-class="{
active: tab === 'metadata'
}">
<button ng-click="tab = 'metadata'"><span translate>Metadata</span></button>
</li>
<li ng-class="{
active: tab === 'history'}">
<button ng-click="tab = 'history'"><span translate>Item history</span></button>
</li>
</ul>
<button ng-click="preview(null)" class="icn-btn close-preview">
<i class="icon-close-small"></i>
</button>
</header>
<div class="content" ng-if="selected.preview">
<div ng-if="tab === 'content'" sd-media-preview></div>
<div ng-if="tab === 'metadata'" sd-media-metadata data-item="selected.preview"></div>
<div ng-if="tab === 'history'" sd-versioning-history data-item="selected.preview"></div>
</div>
</div>
</div>
</div>
</section>