Fix responsive
This commit is contained in:
@@ -43,7 +43,7 @@ function setBarTooltip(bar : HTMLElement, attendeesCount : number) : void{
|
||||
tooltip.innerText = attendeesCount.toString();
|
||||
|
||||
tooltip.style.position = 'absolute';
|
||||
tooltip.style.visibility = 'hidden'; // Initially hidden
|
||||
tooltip.style.visibility = 'hidden';
|
||||
tooltip.style.backgroundColor = 'black';
|
||||
tooltip.style.color = 'white';
|
||||
tooltip.style.padding = '5px';
|
||||
@@ -80,8 +80,6 @@ function queryContainer() : HTMLElement {
|
||||
.graph {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 10px;
|
||||
border-left: solid 1px black;
|
||||
border-bottom: solid 1px black;
|
||||
|
||||
@@ -38,7 +38,7 @@ function extractToken() : string {
|
||||
</div>
|
||||
<div v-else class="container">
|
||||
<AttendanceGraph :event="event" />
|
||||
<Calendar/>
|
||||
<Calendar class="calendar"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -48,7 +48,7 @@ function extractToken() : string {
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1001px) {
|
||||
.attendance-graph
|
||||
.attendance-graph, .calendar
|
||||
{
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
@@ -57,10 +57,10 @@ function extractToken() : string {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.attendance-graph
|
||||
.attendance-graph, .calendar
|
||||
{
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
width: 80%;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user