Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Add new grid layout with four subviews

Browse source
This commit is contained in:
Markus Grigull 2015-10-14 10:45:41 +02:00
parent bb470e940a
commit b716b67bbc
3 changed files with 39 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/styles/app.css
View file

@ -55,7 +55,7 @@ h2 {
}
#main {
}
.grid {
@ -69,23 +69,6 @@ h2 {
border-collapse: collapse;
}
.grid2x2 td {
padding: 0;
margin: 0;
width: 50%;
height: 50%;
}
.grid3x1 td {
height: 100%;
width: auto;
padding: 5px;
border: 1px solid black;
}
#S1-image {
height: auto;
}
@ -95,10 +78,11 @@ h2 {
}
.column-right {
width: auto;
padding: 25px;
padding-top: 25px;
padding-bottom: 40px;
width: 100%;
height: 100%;
}
.column-right h3 {
@ -121,8 +105,8 @@ h2 {
}
.line-chart {
width: 100%;
height: 100%;
width: 400px;
height: 400px;
}
.data-table {

4
app/templates/components/line-chart.hbs
View file

@ -1 +1,3 @@
<div>
Get some space
</div>

69
app/templates/lab-mashup.hbs
View file

@ -1,68 +1,57 @@
<section id="main">
<table class="grid grid2x2">
<table class="grid">
<tr>
<td colspan="2">
<div class="layout-page" width="70%">
<img src={{"assets/images/View2/TransmissionSystem.svg"}} class="svg-image" />
</div>
</td>
<td rowspan="2" width="30%" height="100%">
<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 />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</p>
</div>
</td>
</tr>
<tr>
<td>
<div id="top-left" class="layout-page">
<h2>Transmission System</h2>
<table class="grid grid3x1">
<tr>
<td colspan="2" id="S1-image">
<img src={{"assets/images/View2/TransmissionSystem.svg"}} class="svg-image" />
</td>
</tr>
<div class="layout-page">
<table>
<tr>
<td class="column-left">
{{property-table model=S1Entity showProperty="showProperty1Values"}}
</td>
<td class="column-right">
<h3>{{S1Property.name}}</h3>
{{#if S1Property}}
<h3>{{S1Property.name}}</h3>
{{/if}}
{{line-chart data=S1Property.values}}
<h4>{{S1Property.type}}</h4>
{{#if S1Property}}
<h4>{{S1Property.type}}</h4>
{{/if}}
</td>
</tr>
</table>
</div>
</td>
<td>
<div id="top-right" class="layout-page">
<h2>Distribution System</h2>
<table class="grid grid3x1">
<tr>
<td colspan="2" id="S1-image">
<img src={{"assets/images/View3/DistributionSystem.svg"}} class="svg-image" />
</td>
</tr>
<div class="layout-page">
<table>
<tr>
<td class="column-left">
{{property-table model=S2Entity showProperty="showProperty2Values"}}
</td>
<td class="column-right">
<h3>{{S2Property.name}}</h3>
{{line-chart data=S2Property.values}}
<h4>{{S2Property.type}}</h4>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="bottom-left" class="layout-page">
<h2>Simulation</h2>
<img src={{"assets/images/View1/Simulation Scenario.svg"}} class="svg-image" />
</div>
</td>
<td>
<div id="bottom-right" class="layout-page">
<h2>Static</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.</p>
</table>
</div>
</td>
</tr>