diff --git a/www/css/main.css b/www/css/main.css index 7558e15..d23c653 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -101,6 +101,14 @@ main{ background-color:#202020; } +main>div.box { + display: block; + position: relative; + width: 100%; + height: 100%; + flex-grow: 1; + overflow-y: scroll; +} main>nav{ display:flex; diff --git a/www/css/ui.css b/www/css/ui.css index d21534c..66f6814 100644 --- a/www/css/ui.css +++ b/www/css/ui.css @@ -1,15 +1,15 @@ -main>table.list{ +main table.list{ width:100%; border-collapse:collapse; } -main>table.list tr{ +main table.list tr{ height:2.5rem; background-color:#242424; } -main>table.list tr:nth-child(odd){ +main table.list tr:nth-child(odd){ background-color:#262626; } -main>table.list th{ +main table.list th{ width:1px; padding:0 2rem 0 2rem; @@ -22,7 +22,7 @@ main>table.list th{ color:#f0f0f0; border-bottom:1px solid #404040; } -main>table.list td{ +main table.list td{ width:1px; height:100%; padding:0 2rem 0 2rem; @@ -34,24 +34,24 @@ main>table.list td{ color:#f0f0f0; border-right: 1px solid #282828; } -main>table.list td:last-child, main>table.list th:last-child{ +main table.list td:last-child, main table.list th:last-child{ width:auto; padding:0; text-align:left; } -main>table.list td:last-child{ +main table.list td:last-child{ background-color: #282828; border:0; } -main>table.list.session th:nth-child(1){width:10rem;} -main>table.list.session th:nth-child(2){width:10rem;} +main table.list.session th:nth-child(1){width:10rem;} +main table.list.session th:nth-child(2){width:10rem;} -main>table.list.session-resume th:nth-child(1){width:10rem;} +main table.list.session-resume th:nth-child(1){width:10rem;} -main>table.list.challenge th:nth-child(2){width:10rem;} +main table.list.challenge th:nth-child(2){width:10rem;} -main>table.list td:last-child>button{ +main table.list td:last-child>button{ display:inline-block; position:relative; min-width:8rem; @@ -67,14 +67,14 @@ main>table.list td:last-child>button{ border:0; outline:0; } -main>table.list td:last-child>button.highlight { +main table.list td:last-child>button.highlight { background-color:#772d43; } -main>table.list td:last-child>button:hover{ +main table.list td:last-child>button:hover{ background-color:#303030; } -main>table.list td>canvas { +main table.list td>canvas { display: block; position: relative; width: 8em; @@ -82,7 +82,7 @@ main>table.list td>canvas { margin: 0 -1.5rem 0 -1.5rem; } -main>article{ +main article{ display:block; position:relative; width:100%; @@ -97,7 +97,7 @@ main>article{ overflow:auto; } -main>article>h1{ +main article>h1{ padding:0.5rem; margin:0 0 0.5rem 0; @@ -106,7 +106,7 @@ main>article>h1{ background-color:#a0a0a0; color:#202020; } -main>article>h2{ +main article>h2{ padding:0 0 0.5rem 0.25rem; margin:1.5rem 0 0.5rem 0; @@ -115,7 +115,7 @@ main>article>h2{ border-bottom:2px solid #c0c0c0; color:#c0c0c0; } -main>article>h3{ +main article>h3{ padding:0 0 0 0.25rem; margin:1.5rem 0 0.5rem 0; @@ -124,7 +124,7 @@ main>article>h3{ text-decoration:underline; color:#b0b0b0; } -main>article>h4{ +main article>h4{ padding:0 0 0 0.25rem; margin:1.5rem 0 0.5rem 0; @@ -132,18 +132,18 @@ main>article>h4{ text-decoration:underline; color:#a0a0a0; } -main>article>p{ +main article>p{ padding:0 0.5rem 0 0.5rem; } -main>article a{ +main article a{ color:#db758e; text-decoration:none; } -main>article>a:hover{ +main article>a:hover{ text-decoration:underline; } -main>div.turn-slider-padding{ +main div.turn-slider-padding{ display:block; position:relative; width:100%; diff --git a/www/js/scene.js b/www/js/scene.js index 6640935..e2de2e4 100644 --- a/www/js/scene.js +++ b/www/js/scene.js @@ -256,7 +256,7 @@ const SCENES = { let table = document.createElement("table"); table.setAttribute("id", "content"); table.setAttribute("class", "list session"); - MAIN.appendChild(table); + UI.maincontent(table); SCENE.refresh(); @@ -320,7 +320,7 @@ const SCENES = { let table = document.createElement("table"); table.setAttribute("id", "content"); table.setAttribute("class", "list session-resume"); - MAIN.appendChild(table); + UI.maincontent(table); SCENE.refresh(); @@ -435,7 +435,7 @@ const SCENES = { let table = document.createElement("table"); table.setAttribute("id", "content"); table.setAttribute("class", "list session"); - MAIN.appendChild(table); + UI.maincontent(table); SCENE.refresh(); @@ -494,7 +494,7 @@ const SCENES = { let table = document.createElement("table"); table.setAttribute("id", "content"); table.setAttribute("class", "list session"); - MAIN.appendChild(table); + UI.maincontent(table); SCENE.refresh(); @@ -534,7 +534,7 @@ const SCENES = { let body = document.createElement("article"); body.setAttribute("id", "article"); - MAIN.appendChild(body); + UI.maincontent(body); this.refresh("game.html"); @@ -562,7 +562,7 @@ const SCENES = { let body = document.createElement("article"); body.setAttribute("id", "article"); - MAIN.appendChild(body); + UI.maincontent(body); this.refresh("main.html"); diff --git a/www/js/ui.js b/www/js/ui.js index d54c902..6ffc180 100644 --- a/www/js/ui.js +++ b/www/js/ui.js @@ -80,6 +80,13 @@ const UI = { return div; }, + maincontent(element) { + let box = document.createElement("div"); + box.setAttribute("class", "box"); + box.appendChild(element); + MAIN.appendChild(box); + }, + table_content(header, rows) { let tbody = document.createElement("tbody");