mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Change layout to fixed unscrollable single page
Still images and text and charts are work in progress
This commit is contained in:
Markus Grigull
parent
912ff7a570
commit
665617d19d
5 changed files with 198 additions and 133 deletions
|
|
@ -48,7 +48,7 @@ export default Ember.Component.extend({
|
|||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 1
|
||||
lineWidth: 2
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,38 +1,70 @@
|
|||
@import "normalize.css";
|
||||
|
||||
/*
|
||||
* Skeleton
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
.ember-application {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
||||
background: #6EA2B0;
|
||||
color: #4d4d4d;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
/*font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
|
||||
font: 1.6em Helvetica;
|
||||
font-weight: 300;
|
||||
font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.row, .col {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.row {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.col {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Application
|
||||
*/
|
||||
#lapMashupApp {
|
||||
|
||||
}
|
||||
|
||||
header {
|
||||
color: #fff;
|
||||
background-color: #3B843C;
|
||||
color: #103B7D;
|
||||
background-color: #fff;
|
||||
|
||||
/*padding: 10px 0 10px 0;*/
|
||||
|
||||
height: 100px;
|
||||
top: 0;
|
||||
|
||||
border-bottom: 3px solid #bbb;
|
||||
}
|
||||
|
||||
header #title {
|
||||
|
|
@ -43,7 +75,7 @@ header #title {
|
|||
-webkit-text-rendering: optimizeLegiblity;
|
||||
-moz-text-rendering: optimizeLegibitliy;
|
||||
|
||||
padding: 10px 0 10px 20px;
|
||||
padding: 20px 0 20px 50px;
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -57,109 +89,26 @@ header #logos {
|
|||
}
|
||||
|
||||
footer {
|
||||
color: #777;
|
||||
color: #555;
|
||||
|
||||
padding-top: 10px;
|
||||
height: 25px;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
font-size: 13px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
font-size: 1em;
|
||||
/*text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main {
|
||||
top: 100px;
|
||||
bottom: 25px;
|
||||
|
||||
}
|
||||
|
||||
.grid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.column-left {
|
||||
|
||||
}
|
||||
|
||||
.column-right {
|
||||
padding: 25px 5px 25px 10px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.column-right h3 {
|
||||
text-align: center;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layout-page {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layout-page h2 {
|
||||
text-align: center;
|
||||
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
background: #eee;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
border: 1px solid #999;
|
||||
border-collapse: collapse;
|
||||
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: #ddd;
|
||||
|
||||
border: 1px solid #999;
|
||||
border-collapse: collapse;
|
||||
|
||||
padding: 5px;
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
border: 1px solid #999;
|
||||
border-collapse: collapse;
|
||||
|
||||
padding: 5px;
|
||||
|
||||
font-size: 14px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.svg-image {
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -178,6 +127,127 @@ footer {
|
|||
height: 50px !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Layout
|
||||
*/
|
||||
.grid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
/*padding: 0;*/
|
||||
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
border: 0;
|
||||
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.grid td {
|
||||
/*padding: 20px 10px 20px 10px;*/
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.layout-page {
|
||||
background-color: #f2f2f2;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
0 9px 18px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
height: 100%;
|
||||
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.layout-page h2 {
|
||||
text-align: center;
|
||||
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.page-grid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-grid tr {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-grid td {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Content
|
||||
*/
|
||||
|
||||
.property-cell {
|
||||
|
||||
}
|
||||
|
||||
.chart-cell {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Components
|
||||
*/
|
||||
.line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
background: #eee;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border: 1px solid #999;
|
||||
border-collapse: collapse;
|
||||
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: #ddd;
|
||||
|
||||
border: 1px solid #999;
|
||||
border-collapse: collapse;
|
||||
|
||||
padding: 2px 4px;
|
||||
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
border: 1px solid #999;
|
||||
border-collapse: collapse;
|
||||
|
||||
padding: 2px 4px;
|
||||
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
.label-source {
|
||||
text-align: left;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<section id="lapMashupApp">
|
||||
<header id="header">
|
||||
<header class="row">
|
||||
<div id="title">
|
||||
Lab Mashup Visualization
|
||||
</div>
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
{{outlet}}
|
||||
</section>
|
||||
|
||||
<footer id="info">
|
||||
|
||||
<footer class="row">
|
||||
<p>© 2015 - Institute for Automation of Complex Power Systems</p>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,26 @@
|
|||
|
||||
<table height="100%">
|
||||
{{#if entityName}}
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
<h2>{{entityName}}</h2>
|
||||
</th>
|
||||
</tr>
|
||||
{{/if}}
|
||||
<table class="page-grid">
|
||||
<tr>
|
||||
{{#if entityAvailable}}
|
||||
<td class="column-left" valign="top">
|
||||
{{property-table model=entity showProperty="showPropertyValues"}}
|
||||
</td>
|
||||
<td class="column-right">
|
||||
{{#if visibleProperty}}
|
||||
<td valign="top" class="property-cell">
|
||||
{{property-table model=entity showProperty="showPropertyValues"}}
|
||||
</td>
|
||||
<td valign="top" width="100%" height="100%" class="chart-cell">
|
||||
<!-- <h2>{{entityName}}</h2> -->
|
||||
|
||||
{{#if entityAvailable}}
|
||||
<!-- {{#if visibleProperty}}
|
||||
<h3>{{visibleProperty.name}}</h3>
|
||||
{{/if}}
|
||||
{{/if}} -->
|
||||
|
||||
{{line-chart data=visibleProperty}}
|
||||
|
||||
{{#if visibleProperty}}
|
||||
<!-- {{#if visibleProperty}}
|
||||
<h4 class="label-source">Source: {{visibleProperty.source}}</h4>
|
||||
<h4 class="label-type">{{visibleProperty.type}}</h4>
|
||||
{{/if}}
|
||||
</td>
|
||||
{{else}}
|
||||
<h3>Entity has no attributes</h3>
|
||||
{{/if}}
|
||||
{{/if}} -->
|
||||
{{else}}
|
||||
<h3>Entity has no attributes</h3>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<section id="main">
|
||||
<section class="row" id="main">
|
||||
<table class="grid">
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<tr height="50%">
|
||||
<td colspan="2" style="padding-top: 20px;">
|
||||
<div class="layout-page" width="66%">
|
||||
<img src={{"assets/images/TS_DS_grid_withSimulators.svg"}} class="svg-image" />
|
||||
</div>
|
||||
</td>
|
||||
<td rowspan="2" width="33%">
|
||||
<td rowspan="2" width="33%" style="padding-top: 20px; padding-bottom: 20px">
|
||||
<div class="layout-page">
|
||||
<h2>Simulation</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
|
||||
|
|
@ -15,11 +15,11 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<tr height="50%">
|
||||
<td width="33%" style="padding-bottom: 20px;">
|
||||
{{entity-chart entity=S1Entity entityName="Transmission System"}}
|
||||
</td>
|
||||
<td>
|
||||
<td width="33%" style="padding-bottom: 20px;">
|
||||
{{entity-chart entity=S2Entity entityName="Distribution System"}}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue