Skip to content

Commit

Permalink
fix layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@cshagen
cshagen committed Jan 13, 2025
1 parent 62a0095 commit 2320683
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 13 deletions.
25 changes: 18 additions & 7 deletions packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="subgrid justify-content-left">
<div class="titleline grid-col-12 d-flex justify-content-left mb-3">
<div class="vehicleinfo justify-content-left">
<div class="titleline mb-3">
<DisplayButton @click="openSettings('#chSettings')">
<div
class="carname d-flex justify-content-left align-items-center px-2"
Expand Down Expand Up @@ -42,6 +42,7 @@
/>
</div>
<!-- Car info -->
<div class="infoline">
<InfoItem
v-if="chargepoint.isSocConfigured"
heading="Ladestand:"
Expand All @@ -50,7 +51,7 @@
<BatterySymbol :soc="soc" class="me-2" />
<DisplayButton v-if="chargepoint.isSocManual" @click="editSoc = !editSoc">
<i
class="fa-solid fa-sm fas fa-edit py-0 px-4 mt-3"
class="fa-solid fa-sm fas fa-edit py-0 px-3 mt-3"
:style="{ color: 'var(--color-fg)' }"
/>
</DisplayButton>
Expand All @@ -74,7 +75,8 @@
/>
{{ props.chargepoint.timedCharging ? 'Ja' : 'Nein' }}
</InfoItem>

</div>
<div class="infoline">
<!-- ET Information -->
<InfoItem
v-if="etData.active"
Expand Down Expand Up @@ -107,7 +109,7 @@
>
<span :style="currentPriceStyle">{{ currentPrice }} ct </span>
</InfoItem>

</div>
<!-- Chargemode buttons -->
<RadioBarInput
:id="'chargemode-' + chargepoint.name"
Expand Down Expand Up @@ -223,9 +225,14 @@ const currentPriceStyle = computed(() => {
</script>
<style scoped>
.titleline {
display:flex;
justify-content: left;
}
.infoline {
display:flex;
justify-content: space-between;
flex-direction: row;
}
.chargemodes {
grid-column: 1 / 13;
justify-self: center;
Expand All @@ -248,10 +255,14 @@ const currentPriceStyle = computed(() => {
font-size: 20pt;
}
.fa-edit {
font-size: 10pt;
font-size: 8pt;
}
.socEditor {
border: 1px solid var(--color-menu);
justify-self: stretch;
}
.vehicleinfo {
display:flex;
flex-direction: column;
}
</style>
12 changes: 6 additions & 6 deletions packages/modules/display_themes/colors/source/src/components/shared/WBWidget.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<div class="wb-subwidget mx-2">
<slot />
</div>
<div v-if="$slots.footer != undefined" class="subgrid">
<div v-if="$slots.footer != undefined">
<hr class="grid-col-12" />
<div class="wb-subwidget mx-2">
<slot name="footer" />
Expand All @@ -39,16 +39,16 @@
align-self: stretch;
width: 100%;
border-radius: 30px;
display: grid;
/* display: grid;
grid-template-columns: repeat(12, auto);
gap: 0.2em;
justify-content: stretch;
gap: 0.2em; */
}
.wb-subwidget {
border: 0px solid var(--color-subframe);
padding: var(--padding-widget);
grid-column: span 12;
/*grid-column: span 12;*/
}
.header {
Expand All @@ -71,7 +71,7 @@
}
.cont {
display: grid;
align-self: stretch;
height: 100%;
}
Expand Down
81 changes: 81 additions & 0 deletions packages/modules/display_themes/colors/source/src/views/StatusPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,61 @@
<span class="header">Entwicklungszweig:</span
><span>{{ globalData.devBranch }}</span>
</div>

<!-- <div v-if="!restart && !shutdown" class="controlbuttons d-flex justify-content-between p-5">
<button class="btn controlbutton" :style="{'background-color': 'var(--color-battery)'}" @click="reload()">
<i class="fa-solid fa-rotate-left"/>
Display neu laden
</button>
<button class="btn controlbutton" :style="{'background-color': 'var(--color-evu)'}" @click="restart = true">
<i class="fa-solid fa-power-off"/>
openWB neu starten
</button>
<button class="btn controlbutton" :style="{'background-color': 'var(--color-evu)'}" @click="shutdown = true">
<i class="fa-solid fa-power-off"/>
openWB abschalten
</button>
</div> -->
<!-- <div v-if="restart"
class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center "
>
<span class="confirmTitle">Neustart</span>
<span class="confirmQuestion">Die openWB jetzt neu starten?</span>
<div class="d-flex justify-content-between mt-3">
<button class="btn cancelButton mx-3 px-3" @click="restart=false">Abbrechen</button>
<button class="btn confirmButton mx-3 px-3" @click="restartWB()">Neustart</button>
</div>
</div> -->
<!-- <div v-if="shutdown"
class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center "
>
<span class="confirmTitle">Abschalten</span>
<span class="confirmQuestion">Die openWB jetzt abschalten?</span>
<div class="d-flex justify-content-between mt-3">
<button class="btn cancelButton mx-3 px-3" @click="shutdown=false">Abbrechen</button>
<button class="btn confirmButton mx-3 px-3" @click="shutdownWB()">Abschalten</button>
</div>
</div> -->
</template>

<script setup lang="ts">
import { globalData } from '@/assets/js/model'
/* import { sendCommand } from '@/assets/js/sendMessages'
import { ref } from 'vue'
let restart = ref(false)
let shutdown = ref(false)
function shutdownWB() {
sendCommand({})
}
function restartWB() {
sendCommand({})
}
function reload() {
location.reload()
} */
</script>

<style scoped>
Expand All @@ -29,4 +80,34 @@ import { globalData } from '@/assets/js/model'
.header {
color: var(--color-fg);
}
.controlbuttons {
font-size: var(--font-settings);
}
.controlbutton {
background-color: var(--color-menu);
color: var(--color-fg);
font-size: var(--font-settings);
}
.confirmationBox {
border: 3px solid var(--color-evu);
justify-self: stretch;
font-size: var(--font-settings);
background-color: var(--color-fg);
color: var(--color-evu);
}
.confirmTitle {
font-weight: bold;
}
.cancelButton {
font-size: var(--font-settings);
background-color: var(--color-battery);
}
.confirmButton {
font-size: var(--font-settings);
background-color: var(--color-evu);
color: var(--color-fg);
}
</style>

0 comments on commit 2320683

Please sign in to comment.