STEINNI
85 lines
3.0 KiB
HTML
85 lines
3.0 KiB
HTML
<style>
|
|
.data-explorer .results {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 480px;
|
|
background: var(--eicui-base-color-grey);
|
|
resize:vertical;
|
|
}
|
|
.data-explorer .results .detail {
|
|
position: absolute;
|
|
left: var(--eicui-base-spacing-2xs);
|
|
top: var(--eicui-base-spacing-2xs);
|
|
}
|
|
.data-explorer .results .detail article {
|
|
resize: horizontal;
|
|
min-width: 240px;
|
|
}
|
|
.data-explorer .results .detail article footer:empty:before {
|
|
content: "(no entity relation)";
|
|
text-align: center;
|
|
font-size: smaller;
|
|
color: var(--eicui-base-color-grey);
|
|
}
|
|
.data-explorer .results .detail article > section {
|
|
padding: 0;
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
}
|
|
.data-explorer .results .detail article > footer { grid-auto-flow: row; }
|
|
.data-explorer .results .detail article > section [eicdatagrid] { font-size: small; }
|
|
.data-explorer .results svg .entity {
|
|
cursor:pointer;
|
|
transition: all 0.7s;
|
|
}
|
|
.data-explorer .results svg .entity .icon {
|
|
font-family: 'glyphs';
|
|
font-size: 24px;
|
|
}
|
|
.data-explorer .results svg .entity .bg {
|
|
fill: var(--app-color-white);
|
|
transition: all 0.7s;
|
|
}
|
|
.data-explorer .results svg .entity text {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
text-align: center;
|
|
fill: var(--app-color-black);
|
|
stroke-width: 0.1;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
transition: all 0.7s;
|
|
}
|
|
.data-explorer .results svg .entity .title { font-size: 14px; font-weight: bold; }
|
|
.data-explorer .results svg .entity .type { font-size: 11px; }
|
|
.data-explorer .results svg .relation {
|
|
fill: none;
|
|
stroke: var(--app-color-white);
|
|
stroke-width: 3px;
|
|
transition: all 0.7s;
|
|
}
|
|
.data-explorer .results svg .entity.selected .bg { fill: var(--app-color-primary); }
|
|
.data-explorer .results svg .entity.selected text {
|
|
fill: var(--app-color-white);
|
|
}
|
|
.data-explorer .results svg .related { stroke: var(--app-color-accent); }
|
|
.data-explorer .results svg .entity.related .bg { fill: var(--app-color-accent); }
|
|
.data-explorer .results svg .entity.related text { stroke: var(--app-color-black); fill: var(--app-color-black); }
|
|
</style>
|
|
<article eiccard class="data-explorer">
|
|
<header>
|
|
<h1>MarkLogic™ Data Storage Explorer</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<div class="filters">
|
|
<input eicinput type="search" name="q" placeholder="full text search" />
|
|
<select eicselect name="attributes" editable placeholder="add some filters..."></select>
|
|
|
|
</div>
|
|
<div class="results">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"></svg>
|
|
<div class="detail" placeholder="select an entity"></div>
|
|
</div>
|
|
</section>
|
|
</article> |