Naaturel/letsmeet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix responsive

Browse Source
This commit is contained in:
Laurent
2025-03-22 15:06:52 +01:00
parent 577603df64
commit bacdc94b1e
2 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/components/AttendanceGraph.vue
View File

@@ -43,7 +43,7 @@ function setBarTooltip(bar : HTMLElement, attendeesCount : number) : void{
tooltip.innerText = attendeesCount.toString(); tooltip.innerText = attendeesCount.toString();
tooltip.style.position = 'absolute'; tooltip.style.position = 'absolute';
tooltip.style.visibility = 'hidden'; // Initially hidden tooltip.style.visibility = 'hidden';
tooltip.style.backgroundColor = 'black'; tooltip.style.backgroundColor = 'black';
tooltip.style.color = 'white'; tooltip.style.color = 'white';
tooltip.style.padding = '5px'; tooltip.style.padding = '5px';
@@ -80,8 +80,6 @@ function queryContainer() : HTMLElement {
.graph { .graph {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
height: 100%;
gap: 10px; gap: 10px;
border-left: solid 1px black; border-left: solid 1px black;
border-bottom: solid 1px black; border-bottom: solid 1px black;

10
front/src/views/EventView.vue
View File

@@ -38,7 +38,7 @@ function extractToken() : string {
</div> </div>
<div v-else class="container"> <div v-else class="container">
<AttendanceGraph :event="event" /> <AttendanceGraph :event="event" />
<Calendar/> <Calendar class="calendar"/>
</div> </div>
</template> </template>
@@ -48,7 +48,7 @@ function extractToken() : string {
} }
@media screen and (min-width: 1001px) { @media screen and (min-width: 1001px) {
.attendance-graph .attendance-graph, .calendar
{ {
width: 50%; width: 50%;
height: 50%; height: 50%;
@@ -57,10 +57,10 @@ function extractToken() : string {
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
.attendance-graph .attendance-graph, .calendar
{ {
width: 500px; width: 80%;
height: 500px; height: fit-content;
} }
} }