staxriver
/
padelclub_backend
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add planning event

Browse Source
sync_v2
Raz 6 months ago
parent 268258425a
commit ed8cea7ff8
1 changed files with 151 additions and 104 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 83
      tournaments/templates/tournaments/broadcast/broadcasted_planning.html

83
tournaments/templates/tournaments/broadcast/broadcasted_planning.html
Unescape View File

@ -13,6 +13,11 @@
.running { .running {
background-color: #90ee90 !important; background-color: #90ee90 !important;
} }
.timeslot {
font-family: "Anybody-ExtraBold";
font-size: clamp(0.4rem, 1.5vw - 0.2rem, 3rem); /* Adjust these values as needed */
color: #1b223a;
}
.match-cell { .match-cell {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
@ -20,12 +25,13 @@
flex-shrink: 0; flex-shrink: 0;
} }
.match-cell .bubble { .match-cell .bubble {
height: 8rem; height: 14vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
font-size: clamp(0.8rem, 1vw + 0.4rem, 1.2rem); /* Dynamic font size based on viewport width */
font-size: clamp(0.4rem, 1.2vw - 0.2rem, 5rem); /* Adjust these values as needed */
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: black; color: black;
@ -47,7 +53,7 @@
flex-shrink: 0; flex-shrink: 0;
} }
.court-label .bubble { .court-label .bubble {
height: 4rem; height: 4vh;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -55,19 +61,44 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1em; /* Slightly smaller dynamic font size for court labels */
font-size: clamp(0.7rem, 0.8vw + 0.1rem, 3rem); /* Adjust these values as needed */
color: black; color: black;
} }
.courts-row, .courts-row,
.matches-row { .matches-row {
display: flex; display: flex;
width: 100%; width: 100%;
gap: 20px; gap: 10px;
} }
.grid-x { .grid-x {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.matchtitle {
font-size: inherit; /* Inherit the dynamic font size from .bubble */
font-weight: bold;
margin-bottom: 0.2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.minor-info {
font-size: inherit; /* Inherit the dynamic font size from .bubble */
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.score {
font-size: inherit; /* Inherit the dynamic font size from .bubble */
}
.bold {
font-weight: bold;
}
.ws {
white-space: nowrap;
}
</style> </style>
<link rel="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" /> <link rel="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" />
@ -177,25 +208,25 @@
calculateFractionWidth() { calculateFractionWidth() {
if (this.courtCount >= 5) { if (this.courtCount >= 5) {
const reductionFactor = 0.9; // Adjust this value (e.g., 0.8 for more reduction) const reductionFactor = 0.95; // Adjust this value
return `calc((100% / ${this.courtCount}) * ${reductionFactor})`; return `calc((100% / ${this.courtCount}) * ${reductionFactor})`;
} else { } else {
const reductionFactor = 0.8; // Adjust this value (e.g., 0.8 for more reduction) const reductionFactor = 0.90; // Adjust this value
return `calc((100% / (${this.courtCount} * 2)) * ${reductionFactor})`; return `calc((100% / (${this.courtCount})) * ${reductionFactor})`;
} }
} }
}" x-init="loop()"> }" x-init="loop()">
<header> <header>
<div id="header"> <div id="header">
<div class="left-content bubble-header"> <div class="left-content bubble-header" style="max-height: 20vh;">
<img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo"> <img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
<div class="left-margin"> <div class="left-margin">
<h1 class="club">{{ tournament.broadcast_event_display_name }}</h1> <h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
<h1 class="event" x-text="days[currentDayIndex]"></h1> <h1 class="event" x-text="days[currentDayIndex]"></h1>
</div> </div>
</div> </div>
<div class="right-content">{% qr_from_text qr_code_url options=qr_code_options %}</div> <div class="right-content" style="max-height: 20vh;">{% qr_from_text qr_code_url options=qr_code_options %}</div>
</div> </div>
</header> </header>
@ -203,9 +234,25 @@
<main> <main>
<div class="grid-x"> <div class="grid-x">
<div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}"> <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}">
<div style="display: flex; margin-bottom: 20px;"> <div style="display: flex; margin-bottom: 10px;">
<div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 20px; width: 8rem;"> <div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
<h1 class="event">00:00</h1> <h1 class="timeslot">00:00</h1>
</div>
<div class="courts-row">
<template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum">
<div class="court-label" :style="{'width': calculateFractionWidth()}">
<div class="bubble">
<div class="score ws bold">Terrain <span x-text="courtNum"></span></div>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}" x-show="courtCount < 5">
<div style="display: flex; margin-bottom: 10px;">
<div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
<h1 class="timeslot">00:00</h1>
</div> </div>
<div class="courts-row"> <div class="courts-row">
<template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum"> <template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum">
@ -227,9 +274,9 @@
<div class="grid-x"> <div class="grid-x">
<template x-for="(group, groupIndex) in groupPage" :key="groupIndex"> <template x-for="(group, groupIndex) in groupPage" :key="groupIndex">
<div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}"> <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}">
<div style="display: flex; margin-bottom: 20px;"> <div style="display: flex; margin-bottom: 10px;">
<div class="bubble-footer" style="align-items: center; justify-content: center; margin-right: 20px; width: 8rem;"> <div class="bubble-footer" style="align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
<h1 class="event" x-text="group.name.slice(-5)"></h1> <h1 class="timeslot" x-text="group.name.slice(-5)"></h1>
</div> </div>
<div class="matches-row"> <div class="matches-row">
@ -237,7 +284,7 @@
<div class="match-cell" :style="{'width': calculateFractionWidth()}"> <div class="match-cell" :style="{'width': calculateFractionWidth()}">
<template x-if="match"> <template x-if="match">
<div class="bubble" :class="{'running': !match.ended && match.started, 'even': courtIndex % 2 === 1}" style="text-align: center;"> <div class="bubble" :class="{'running': !match.ended && match.started, 'even': courtIndex % 2 === 1}" style="text-align: center;">
<div class="matchtitle" x-text="match.group_stage_name ? match.group_stage_name : match.title"></div> <div class="bold" x-text="match.group_stage_name ? match.group_stage_name : match.title"></div>
<template x-if="match.tournament_title"> <template x-if="match.tournament_title">
<div class="minor-info semibold" x-text="match.tournament_title"></div> <div class="minor-info semibold" x-text="match.tournament_title"></div>
</template> </template>
@ -263,7 +310,7 @@
<footer class="footer-broadcast"> <footer class="footer-broadcast">
{% if tournament.event.images.exists %} {% if tournament.event.images.exists %}
<div class="bubble-footer"> <div class="bubble-footer" style="max-height: 16vh;">
<div class="bubble-sponsor"> <div class="bubble-sponsor">
{% for image in tournament.event.images.all %} {% for image in tournament.event.images.all %}
<img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}" <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"

Write Preview
Loading…
Cancel
Save