fenix-ui-visualization-box
Version:
FENIX resource visualization box
208 lines (124 loc) • 4.74 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>FENIX Visualization box: test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="FENIX Visualization box: test">
<meta name="author" content="Daniele Salvatore <daniele.salvatore [at] fao.org>">
<meta name="author" content="Nicola Selleri <nicola.selleri [at] fao.org>">
</head>
<body>
<div class="alert alert-warning" role="alert">Open console for logs</div>
<div class="container">
<div class="col-xs-12">
<h1>FENIX Visualization Box: <small>Large layout + model</small></h1>
</div>
</div>
<hr>
<div class="container">
<h2>Clone</h2>
<div class="col-xs-6">
<div id="box-clone">Clone</div>
</div>
<div class="col-xs-6">
<ul id="clone-list" class="list-unstyled"></ul>
</div>
</div>
<hr>
<div class="container">
<div class="col-xs-12">
<div id="box-container-large"></div>
</div>
</div>
<!--
<div class="container">
<div class="col-xs-6">
<h2>Medium layout + empty model</h2>
<div id="box-container-medium-1"> box medium 1</div>
</div>
<div class="col-xs-6">
<h2>Medium layout + valid model </h2>
<div id="box-container-medium-2">box medium 2</div>
</div>
</div>
<hr>
<div class="container">
<h2>Destroy</h2>
<div class="col-xs-6">
<div id="box-container-destroy"> box destroy</div>
</div>
<div class="col-xs-6">
<button id="btn-destroy" type="button" class="btn btn-danger btn-lg btn-block">Destroy</button>
</div>
</div>
<hr>
<div class="container">
<h2>Change box state</h2>
<div class="col-xs-6">
<div id="box-container-status">box status</div>
</div>
<div class="col-xs-6">
<div id="status-btns" role="group">
<button type="button" data-status="loading" class="btn btn-default btn-lg btn-block">Loading</button>
<button type="button" data-status="ready" class="btn btn-success btn-lg btn-block">Ready</button>
<button type="button" data-status="error" class="btn btn-danger btn-lg btn-block">Error</button>
<button type="button" data-status="empty" class="btn btn-warning btn-lg btn-block">Empty</button>
</div>
</div>
</div>
<hr>
<div class="container">
<h2>Async model</h2>
<div class="col-xs-6">
<div id="box-container-async">async status</div>
</div>
<div class="col-xs-6">
<button id="btn-async" type="button" class="btn btn-default btn-lg btn-block">Add model</button>
</div>
</div>
<hr>
<div class="container">
<h2>Show tab</h2>
<div class="col-xs-6">
<div id="box-container-tabs">box tabs</div>
</div>
<div class="col-xs-6">
<div id="tabs-btns" role="group">
<button type="button" data-tab="table" class="btn btn-default btn-lg btn-block">Table <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
<button type="button" data-tab="chart" class="btn btn-default btn-lg btn-block">Chart <span class="glyphicon glyphicon-flash" aria-hidden="true"></span></button>
<button type="button" data-tab="map" class="btn btn-default btn-lg btn-block">Map <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
<hr>
<div class="container">
<h2>Flip tab</h2>
<div class="col-xs-6">
<div id="flip-container">box tabs</div>
</div>
<div class="col-xs-6">
<div id="flip-btns" role="group">
<button type="button" data-flip="front" class="btn btn-default btn-lg btn-block">Front <span class="glyphicon glyphicon-text-color" aria-hidden="true"></span></button>
<button type="button" data-flip="back" class="btn btn-default btn-lg btn-block">Back <span class="glyphicon glyphicon-text-background" aria-hidden="true"></span></button>
</div>
</div>
</div>
<hr>
<div class="container">
<h2>State</h2>
<div class="col-xs-6">
<div id="state-container">state tabs</div>
</div>
<div class="col-xs-6">
<div id="state-btns" role="group">
<button type="button" id="state-btn" class="btn btn-default btn-lg btn-block">State <span class="glyphicon glyphicon-heart" aria-hidden="true"></span></button>
</div>
</div>
</div>
<hr>-->
</body>
</html>