Skip to content

Commit

Permalink
Mobiles Styling für Übersichtsseiten optimiert
Browse files Browse the repository at this point in the history
  • Loading branch information
@SvenoF54
SvenoF54 committed Jan 20, 2025
1 parent d0bd41e commit 1460825
Show file tree
Hide file tree
Showing 12 changed files with 276 additions and 270 deletions.
5 changes: 5 additions & 0 deletions css/allPages.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ body {
text-decoration: line-through;
}

.fs-12 {
font-family: Arial, sans-serif;
font-size: 12px;
}


/* Navigation */

Expand Down
34 changes: 2 additions & 32 deletions css/overviewPage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,38 +48,6 @@ h1 {

/* Energy-Chart Legend Buttons */

.custom-legend .btn-light {
color: #495057;
background-color: #f8f9fa;
border-color: #ced4da;
}

.custom-legend {
width: 95vw !important;
display: flex;
flex-wrap: nowrap !important;
align-items: center;
}

.legend-button {
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
font-family: Arial, sans-serif;
white-space: nowrap !important;
justify-content: center;
}

.legend-vertical-line {
width: 2px;
background-color: #aaa;
flex-grow: 1;
margin: 0 0px;
height: 25px;
display: inline-block;
}

.legend-line {
display: inline-block;
width: 20px;
Expand All @@ -92,6 +60,8 @@ h1 {
.legend-label {
color: #333;
font-size: 0.75rem;
white-space: nowrap !important;
cursor: pointer;
}

.hidden {
Expand Down
9 changes: 1 addition & 8 deletions js/overview-pages/configureAutarkyChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,7 @@ const scalesAutarky = {
}

const optionsAutarky = {
layout: {
padding: {
left: 20,
right: 20,
top: 20,
bottom: 20
}
},
layout: {},
responsive: true,
maintainAspectRatio: false,
plugins: {
Expand Down
9 changes: 1 addition & 8 deletions js/overview-pages/configureEnergyChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,7 @@ const scalesEnergy = {


const optionsEnergy = {
layout: {
padding: {
left: 20,
right: 20,
top: 20,
bottom: 20
}
},
layout: {},
onClick: (event, elements, chart) => {
if (elements.length > 0) {
const element = elements[0];
Expand Down
4 changes: 4 additions & 0 deletions js/overview-pages/formFunctionsForDayOverview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ $(document).ready(function() {
$('#date-range-form').submit();
});

$('#month1, #month2').change(function() {
$('#date-range-form').submit();
});

$('#line1').change(function() {
$('#date-range-form').submit();
});
Expand Down
2 changes: 1 addition & 1 deletion lib/utils/htmlHelper.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ public static function formatFailureForPopover($title, $nullRows, $failurePercen
$result = '<div class="me-3 text-'.HtmlHelper::prepareFailureStyle($failurePercent).'"><strong>'.$title.'</strong></div>';
$text = ($nullRows == 0 ? '/' : StringHelper::formatNumber($nullRows));
$result.= '<div class="me-1 text-'.HtmlHelper::prepareFailureStyle($failurePercent).'">'.$text.'</div>';
$result.= '<div class="text-'.HtmlHelper::prepareFailureStyle($failurePercent).'">(' . $failurePercent . '%)</div>';
$result.= '<div class="text-'.HtmlHelper::prepareFailureStyle($failurePercent).'">(' . $failurePercent . '%)</div>';

return $result;
}
Expand Down
164 changes: 88 additions & 76 deletions views/pages/overview/filter-for-days-overview.phtml
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,93 @@
<div class="row justify-content-center">
<div class="col-auto">
<?php include("views/pages/overview/filter-summary.phtml")?>
<table class="table table-sm table-borderless w-auto" style="table-layout: flex;">
<form method="post" id="date-range-form" action="">
<input type="hidden" name="month1" id="month1" value="<?=$selectedMonth1?>">
<input type="hidden" name="year1" id="year1" value="<?=$selectedYear1?>">
<input type="hidden" name="month2" id="month2" value="<?=$selectedMonth2?>">
<input type="hidden" name="year2" id="year2" value="<?=$selectedYear2?>">
<?php include_once("filter-hidden-config-values.phtml"); ?>
<tbody>
<tr class="table-light">
<td>
<strong class="small m-0 d-block d-sm-none">1:</strong>
<strong class="small m-0 d-none d-sm-inline">Auswahl 1:</strong>
</td>
<!-- Month 1 -->
<?php foreach(MONTH_LIST as $key => $val) { ?>
<td><a class="<?=$key==$selectedMonth1?'primary':'link-dark'?> selectorMonth1 small m-0" href="#<?=$key?>"><?=$val?></td>
<?php } ?>
<!-- Year 1 -->
<td>
<div style="display: flex; align-items: center; gap: 4px;">
<label for="selectorYear1" class="form-label small m-0"><strong>Jahr:</strong></label>
<select name="selectorYear1" id="selectorYear1" class="form-control form-control-sm" style="max-width: 120px;">
<?php for($val = $overviewPageService->getFirstYear(); $val <= $overviewPageService->getLastYear(); $val++) { ?>
<option value="<?=$val?>" <?php echo ($selectedYear1 == $val) ? 'selected' : ''; ?>><?=$val?></option>
<?php } ?>
</select>
</div>
</td>
<!-- Line 1 -->
<td>
<div style="display: flex; align-items: center; gap: 4px;">
<label for="line1" class="form-label small m-0 d-none d-sm-inline mb-0"><strong>Linie&nbsp;1:</strong></label>
<select name="line1" id="line1" class="form-control form-control-sm" style="max-width: 120px;">
<?php foreach($actualConfig->getLinePossibilities() as $val) { ?>
<option value="<?=$val?>" <?php echo ($actualConfig->getLine1() == $val) ? 'selected' : ''; ?>><?=StringHelper::formatEnergyInWattHour($val)?></option>
<?php } ?>
</select>
</div>
</td>
</tr>
<tr class="table-light">
<td>
<strong class="small m-0 d-block d-sm-none">2:</strong>
<strong class="small m-0 d-none d-sm-inline">Auswahl 2:</strong>
</td>
<!-- Month 2 -->
<?php foreach(MONTH_LIST as $key => $val) { ?>
<td><a class="<?=$key==$selectedMonth2?'primary':'link-dark'?> selectorMonth2 small m-0" href="#<?=$key?>"><?=$val?></td>
<?php } ?>
<!-- Year 2 -->
<td>
<div style="display: flex; align-items: center; gap: 4px;">
<label for="selectorYear2" class="form-label small m-0"><strong>Jahr:</strong></label>
<select name="selectorYear2" id="selectorYear2" class="form-control form-control-sm" style="max-width: 120px;">
<div class="col-auto">
<?php include("views/pages/overview/filter-summary.phtml")?>
<table class="table table-sm table-borderless">
<form method="post" id="date-range-form" action="">
<input type="hidden" name="year1" id="year1" value="<?=$selectedYear1?>">
<input type="hidden" name="year2" id="year2" value="<?=$selectedYear2?>">
<?php include_once("filter-hidden-config-values.phtml"); ?>
<tbody>
<tr class="table-light">
<td>
<strong class="small m-0 d-block d-sm-none">1:</strong>
<strong class="small m-0 d-none d-sm-inline">Auswahl 1:</strong>
</td>
<!-- Month 1 -->
<?php foreach(MONTH_LIST as $key => $val) { ?>
<td class="d-none d-md-inline align-middle small"><a class="<?=$key==$selectedMonth1?'primary':'link-dark'?> selectorMonth1" href="#<?=$key?>"><?=mb_substr($val, 0, 3)?><span class="d-none d-lg-inline"><?=mb_substr($val, 3)?></span></td>
<?php } ?>
<td class="d-block d-md-none">
<select class="form-control form-control-sm" name="month1" id="month1">
<?php foreach(MONTH_LIST as $key => $val) { ?>
<option value="<?=$key?>" <?php echo ($key == $selectedMonth1) ? 'selected' : ''; ?>><?=$val?></option>
<?php } ?>
</select>
</td>
<!-- Year 1 -->
<td>
<div style="display: flex; align-items: center; gap: 4px;">
<label for="selectorYear1" class="form-label small d-none d-md-inline m-0"><strong>Jahr:</strong></label>
<select name="selectorYear1" id="selectorYear1" class="form-control form-control-sm" style="max-width: 120px;">
<?php for($val = $overviewPageService->getFirstYear(); $val <= $overviewPageService->getLastYear(); $val++) { ?>
<option value="<?=$val?>" <?php echo ($selectedYear2 == $val) ? 'selected' : ''; ?>><?=$val?></option>
<option value="<?=$val?>" <?php echo ($selectedYear1 == $val) ? 'selected' : ''; ?>><?=$val?></option>
<?php } ?>
</select>
</div>
</td>
<!-- Line 1 -->
<td>
<div style="display: flex; align-items: center; gap: 4px;">
<label for="line1" class="form-label small m-0 d-none d-md-inline mb-0"><strong>Linie&nbsp;1:</strong></label>
<select name="line1" id="line1" class="form-control form-control-sm" style="max-width: 120px;">
<?php foreach($actualConfig->getLinePossibilities() as $val) { ?>
<option value="<?=$val?>" <?php echo ($actualConfig->getLine1() == $val) ? 'selected' : ''; ?>><?=StringHelper::formatEnergyInWattHour($val)?></option>
<?php } ?>
</select>
</div>
</td>
</tr>
<tr class="table-light">
<td>
<strong class="small m-0 d-block d-sm-none">2:</strong>
<strong class="small m-0 d-none d-sm-inline">Auswahl 2:</strong>
</td>
<!-- Month 2 -->
<?php foreach(MONTH_LIST as $key => $val) { ?>
<td class="d-none d-md-inline align-middle small"><a class="<?=$key==$selectedMonth2?'primary':'link-dark'?> selectorMonth2" href="#<?=$key?>"><?=mb_substr($val, 0, 3)?><span class="d-none d-lg-inline"><?=mb_substr($val, 3)?></span></td>
<?php } ?>
<td class="d-block d-md-none">
<select class="form-control form-control-sm" name="month2" id="month2">
<?php foreach(MONTH_LIST as $key => $val) { ?>
<option value="<?=$key?>" <?php echo ($key == $selectedMonth2) ? 'selected' : ''; ?>><?=$val?></option>
<?php } ?>
</select>
</td>
<!-- Year 2 -->
<td>
<div style="display: flex; align-items: center; gap: 4px;">
<label for="selectorYear2" class="form-label small d-none d-md-inline m-0"><strong>Jahr:</strong></label>
<select name="selectorYear2" id="selectorYear2" class="form-control form-control-sm" style="max-width: 120px;">
<?php for($val = $overviewPageService->getFirstYear(); $val <= $overviewPageService->getLastYear(); $val++) { ?>
<option value="<?=$val?>" <?php echo ($selectedYear2 == $val) ? 'selected' : ''; ?>><?=$val?></option>
<?php } ?>
</select>
</div>
</td>
<!-- Line 2 -->
<td>
<div style="display: flex; align-items: center; gap: 4px;">
<label for="line2" class="form-label small m-0 d-none d-md-inline"><strong>Linie&nbsp;2:</strong></label>
<select name="line2" id="line2" class="form-control form-control-sm" style="max-width: 120px;">
<?php foreach($actualConfig->getLinePossibilities() as $val) { ?>
<option value="<?=$val?>" <?php echo ($actualConfig->getLine2() == $val) ? 'selected' : ''; ?>><?=StringHelper::formatEnergyInWattHour($val)?></option>
<?php } ?>
</select>
</div>
</td>
<!-- Line 2 -->
<td>
<div style="display: flex; align-items: center; gap: 4px;">
<label for="line2" class="form-label small m-0 d-none d-sm-inline"><strong>Linie&nbsp;2:</strong></label>
<select name="line2" id="line2" class="form-control form-control-sm" style="max-width: 120px;">
<?php foreach($actualConfig->getLinePossibilities() as $val) { ?>
<option value="<?=$val?>" <?php echo ($actualConfig->getLine2() == $val) ? 'selected' : ''; ?>><?=StringHelper::formatEnergyInWattHour($val)?></option>
<?php } ?>
</select>
</label>
</div>
</td>
</tr>
</tbody>
</form>
</table>
</div>
</label>
</div>
</td>
</tr>
</tbody>
</form>
</table>
</div>
</div>
Loading

0 comments on commit 1460825

Please sign in to comment.