stoffelmauro
/
ConsultancyProject_2_ETL
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

really basic mobile view

main
Giò Diani 2025-01-19 11:27:21 +01:00
parent 5664e5130e
commit 41f8c89178
3 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
dashboard/resources/css/app.css
View File

@ -191,10 +191,10 @@ body.overview main{
grid-template-columns: repeat(8, minmax(1%, 50%)); grid-template-columns: repeat(8, minmax(1%, 50%));
grid-template-rows: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
grid-template-areas: grid-template-areas:
"chart3 chart3 chart3 chart1 chart1 chart1 chart4 chart4" "chart1 chart1 chart1 chart2 chart2 chart2 chart4 chart4"
"chart3 chart3 chart3 chart1 chart1 chart1 chart4 chart4" "chart1 chart1 chart1 chart2 chart2 chart2 chart4 chart4"
"chart3 chart3 chart3 chart2 chart2 chart2 chart4 chart4" "chart1 chart1 chart1 chart3 chart3 chart3 chart4 chart4"
"chart3 chart3 chart3 chart2 chart2 chart2 chart4 chart4" "chart1 chart1 chart1 chart3 chart3 chart3 chart4 chart4"
} }
body.region main{ body.region main{
@ -214,8 +214,8 @@ body.property main{
grid-template-columns: repeat(4, minmax(10%, 50%)); grid-template-columns: repeat(4, minmax(10%, 50%));
grid-template-rows: repeat(4, 1fr) 4em; grid-template-rows: repeat(4, 1fr) 4em;
grid-template-areas: grid-template-areas:
"chart2 chart2 chart1 chart1" "chart1 chart1 chart2 chart2"
"chart2 chart2 chart1 chart1" "chart1 chart1 chart2 chart2"
"chart5 chart5 chart3 chart4" "chart5 chart5 chart3 chart4"
"chart5 chart5 chart3 chart4" "chart5 chart5 chart3 chart4"
"chart5 chart5 timeline timeline"; "chart5 chart5 timeline timeline";
@ -260,10 +260,28 @@ article>header>h2{
height: auto; height: auto;
} }
main{ body.overview main,
body.region main,
body.property main{
height: auto; height: auto;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: repeat(4, minmax(20em, 25em)); grid-template-rows: repeat(5, minmax(20em, 25em)) 4em;
grid-template-areas: "chart1" "chart2" "chart3" "chart4" "chart5" "chart6" "timeline";
}
body.overview main{
grid-template-rows: minmax(20em, 40em) repeat(3, minmax(20em, 25em));
grid-template-areas: "chart1" "chart2" "chart3" "chart4";
}
body.region main{
grid-template-rows: minmax(20em, 40em) repeat(4, minmax(20em, 25em)) 4em;
grid-template-areas: "chart1" "chart2" "chart3" "chart4" "chart6" "timeline";
}
body.property main{
grid-template-rows: repeat(5, minmax(20em, 25em)) 4em;
grid-template-areas: "chart1" "chart2" "chart3" "chart4" "chart5" "timeline";
} }
} }

6
dashboard/resources/views/overview.blade.php
View File

@ -11,7 +11,7 @@
</nav> </nav>
@endsection @endsection
@section('main') @section('main')
<article class="header" style="grid-area: chart3;"> <article class="header" style="grid-area: chart1;">
<header> <header>
<h2>Verfügbarkeit aller Mietobjekte über gesamten beobachteten Zeitraum</h2> <h2>Verfügbarkeit aller Mietobjekte über gesamten beobachteten Zeitraum</h2>
<button popovertarget="pop1"> <button popovertarget="pop1">
@ -32,7 +32,7 @@
</header> </header>
<div id="chart-heatmap"></div> <div id="chart-heatmap"></div>
</article> </article>
<article class="header" style="grid-area: chart1;"> <article class="header" style="grid-area: chart2;">
<header> <header>
<h2> <h2>
Anzahl jemals gefundene Kurzzeitmietobjekte pro Region Anzahl jemals gefundene Kurzzeitmietobjekte pro Region
@ -54,7 +54,7 @@
</header> </header>
<div id="chart-props-per-region"></div> <div id="chart-props-per-region"></div>
</article> </article>
<article class="header" style="grid-area: chart2;"> <article class="header" style="grid-area: chart3;">
<header> <header>
<h2> <h2>
Entwicklung der Anzahl jemals gefunden Kurzzeitmietobjekte Entwicklung der Anzahl jemals gefunden Kurzzeitmietobjekte

4
dashboard/resources/views/property.blade.php
View File

@ -27,7 +27,7 @@
<article style="grid-area: timeline;"> <article style="grid-area: timeline;">
<div id="timeline"></div> <div id="timeline"></div>
</article> </article>
<article class="header" style="grid-area: chart1;"> <article class="header" style="grid-area: chart2;">
<header> <header>
<h2 id="belegung-title"> <h2 id="belegung-title">
Kalenderansicht der Verfügbarkeit am <span class="date">{{ $startDate }}</span> Kalenderansicht der Verfügbarkeit am <span class="date">{{ $startDate }}</span>
@ -57,7 +57,7 @@
<div id="chart-capacity-monthly"> <div id="chart-capacity-monthly">
</div> </div>
</article> </article>
<article class="header" style="grid-area: chart2;"> <article class="header" style="grid-area: chart1;">
<header> <header>
<h2> <h2>
Entwicklung der Verfügbarkeit Entwicklung der Verfügbarkeit