From ae968fcf46a2f79c76f9b43971727e39a4eea21e Mon Sep 17 00:00:00 2001 From: Laurent Date: Wed, 13 Mar 2024 15:53:51 +0100 Subject: [PATCH] Adds group stage page --- static/tournaments/Padeltest.html | 10 +- static/tournaments/css/broadcast.css | 19 ++ static/tournaments/css/style.css | 99 ++++++-- static/tournaments/js/alpine.min.js | 5 + static/tournaments/test.html | 228 +++++++----------- tournaments/models/group_stage.py | 91 ++++++- tournaments/models/team_score.py | 15 +- tournaments/models/tournament.py | 2 +- tournaments/static/tournaments/css/style.css | 23 ++ .../tournaments/group_stage_cell.html | 61 +++++ .../templates/tournaments/group_stages.html | 13 + tournaments/urls.py | 17 +- tournaments/utils/extensions.py | 4 + tournaments/views.py | 10 +- 14 files changed, 394 insertions(+), 203 deletions(-) create mode 100644 static/tournaments/css/broadcast.css create mode 100644 static/tournaments/js/alpine.min.js create mode 100644 tournaments/templates/tournaments/group_stage_cell.html create mode 100644 tournaments/templates/tournaments/group_stages.html create mode 100644 tournaments/utils/extensions.py diff --git a/static/tournaments/Padeltest.html b/static/tournaments/Padeltest.html index 7326b66..d389472 100644 --- a/static/tournaments/Padeltest.html +++ b/static/tournaments/Padeltest.html @@ -1,11 +1,11 @@ - - - - + + + + Padel @@ -31,7 +31,7 @@ -->
diff --git a/static/tournaments/css/broadcast.css b/static/tournaments/css/broadcast.css new file mode 100644 index 0000000..f5fd40a --- /dev/null +++ b/static/tournaments/css/broadcast.css @@ -0,0 +1,19 @@ +html, +body { + background: linear-gradient( + 20deg, + #1b223a 0 20%, + #e84038 20% 40%, + #f39200 40% 60%, + #ffd300 60% 80%, + #1b223a 80% 100% + ); +} + +.bubble { + padding: 20px; + background-color: white; + border-radius: 24px; + /* box-shadow: 0 0 0px 1px #fbead6; */ + box-shadow: 0 0 0px 0px #fbead6; +} diff --git a/static/tournaments/css/style.css b/static/tournaments/css/style.css index 9d6ea96..d69aacb 100644 --- a/static/tournaments/css/style.css +++ b/static/tournaments/css/style.css @@ -15,14 +15,7 @@ html, body { - background: linear-gradient( - 20deg, - #1b223a 0 20%, - #e84038 20% 40%, - #f39200 40% 60%, - #ffd300 60% 80%, - #1b223a 80% 100% - ); + background: #fff7ed; font-family: "Montserrat-Regular"; font-size: 16px; @@ -55,10 +48,6 @@ header { font-size: 20px; } -/* .page-body { - flex-grow: 1; -} */ - a { color: #707070; } @@ -76,6 +65,11 @@ a:hover { font-weight: 600; } */ +.container { + /* width: 100%; */ + /* text-align:center; */ +} + .wrapper { margin: 0px 10px; } @@ -85,6 +79,10 @@ a:hover { } } +.beige { + color: #fff7ed; +} + .mybox { color: #707070; padding: 8px 12px; @@ -151,6 +149,9 @@ tr { font-size: 18px; /* color: #707070; */ } +.semibold { + font-weight: 600; +} .info { font-family: "Montserrat-SemiBold"; @@ -185,6 +186,9 @@ tr { .names { /* width: 70%; */ } +.team-names-box { + height: 60px; +} .scores { vertical-align: middle; @@ -217,14 +221,14 @@ tr { } .my-block { - padding: 0px 10px; + padding: 10px 10px; } -@media print, screen and (min-width: 40em) { +/* @media print, screen and (min-width: 40em) { .my-block { padding: 10px 10px; } -} +} */ .red { background-color: red; @@ -234,7 +238,19 @@ tr { padding: 20px; background-color: white; border-radius: 24px; - /* box-shadow: 10px 10px lightblue; */ + box-shadow: 0 0 10px 5px #f9e7cf; +} + +.dark_bubble { + padding: 20px; + background-color: #1b223a; + color: white; + border-radius: 24px; + /* box-shadow: 0 0 10px 5px #f9e7cf; */ +} + +.white { + color: white; } .test { @@ -336,11 +352,6 @@ tr { align-items: center; } -.container { - width: 100%; - /* text-align:center; */ -} - .verticalmargin { margin: 10px 0px; } @@ -356,6 +367,8 @@ tr { .flex-row { display: flex; justify-content: space-between; + height: 29px; + align-items: center; /* vertical-align: middle; */ } @@ -420,19 +433,57 @@ tr { width: 100px; } -.table-row { +.table-row-2-colums { + display: grid; + grid-template-columns: 1px auto 40px; + align-items: center; /* Vertically center the content within each column */ + padding: 5px 0px; +} + +.table-row-3-colums { display: grid; grid-template-columns: auto 1fr auto; align-items: center; /* Vertically center the content within each column */ + padding: 5px 0px; +} + +.table-row-4-colums { + display: grid; + grid-template-columns: 1px auto 50px 70px 130px; /* first column is a hack */ + align-items: center; /* Vertically center the content within each column */ + padding: 5px 0px; +} + +.table-row-5-colums { + display: grid; + grid-template-columns: 60px auto 50px 70px 130px; + align-items: center; /* Vertically center the content within each column */ + padding: 5px 0px; } .table-cell { flex-grow: 1; - text-align: center; - padding: 10px; + /* text-align: center; */ + /* padding: 5px; */ } .table-cell-large { grid-column: 2 / span 1; /* Center column spans from column 2 to column 3 */ text-align: left; } + +.wrap { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 100vh; /*the height will need to be customized*/ + width: 50px; +} + +#xrow { + background: #000; + color: #fff; + height: 50px; + width: 50px; + margin-left: 10px; +} diff --git a/static/tournaments/js/alpine.min.js b/static/tournaments/js/alpine.min.js new file mode 100644 index 0000000..f750e64 --- /dev/null +++ b/static/tournaments/js/alpine.min.js @@ -0,0 +1,5 @@ +(()=>{var rt=!1,nt=!1,U=[],it=-1;function Vt(e){Sn(e)}function Sn(e){U.includes(e)||U.push(e),An()}function ve(e){let t=U.indexOf(e);t!==-1&&t>it&&U.splice(t,1)}function An(){!nt&&!rt&&(rt=!0,queueMicrotask(On))}function On(){rt=!1,nt=!0;for(let e=0;ee.effect(t,{scheduler:r=>{ot?Vt(r):r()}}),st=e.raw}function at(e){D=e}function Wt(e){let t=()=>{};return[n=>{let i=D(n);return e._x_effects||(e._x_effects=new Set,e._x_runEffects=()=>{e._x_effects.forEach(o=>o())}),e._x_effects.add(i),t=()=>{i!==void 0&&(e._x_effects.delete(i),L(i))},i},()=>{t()}]}function Se(e,t){let r=!0,n,i=D(()=>{let o=e();JSON.stringify(o),r?n=o:queueMicrotask(()=>{t(o,n),n=o}),r=!1});return()=>L(i)}function W(e,t,r={}){e.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:!0}))}function C(e,t){if(typeof ShadowRoot=="function"&&e instanceof ShadowRoot){Array.from(e.children).forEach(i=>C(i,t));return}let r=!1;if(t(e,()=>r=!0),r)return;let n=e.firstElementChild;for(;n;)C(n,t,!1),n=n.nextElementSibling}function E(e,...t){console.warn(`Alpine Warning: ${e}`,...t)}var Gt=!1;function Jt(){Gt&&E("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems."),Gt=!0,document.body||E("Unable to initialize. Trying to load Alpine before `` is available. Did you forget to add `defer` in Alpine's `