Commit 1f6537ee5b47f8d5332b0334c11845264d6264d9
hash works
nomand committed on 6/6/2018, 7:01:43 AMParent: f9f124743c6d2ed1345bc16c37379f5fe5e01f47
Files changed
| css/style.css | changed |
| index.html | changed |
| js/letnice.js | changed |
| css/style.css | ||
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| 1 | 1 | html, |
| 2 | 2 | body { |
| 3 | + display: block; | |
| 3 | 4 | height: 100%; |
| 4 | 5 | width: 100%; |
| 5 | - display: block; | |
| 6 | 6 | padding: 0px; |
| 7 | 7 | margin: 0px; |
| 8 | 8 | font-family: 'input_mono_regular'; |
| 9 | 9 | text-transform: uppercase; |
| @@ -22,17 +22,19 @@ | ||
| 22 | 22 | text-align: center; |
| 23 | 23 | } |
| 24 | 24 | |
| 25 | 25 | .month { width:100px; margin: 10px; display: inline-block;} |
| 26 | -.header { margin-bottom: 40px; } | |
| 26 | +.header { margin: 0px 0px 40px 10px; text-align: left; align-content: flex-start;} | |
| 27 | 27 | |
| 28 | 28 | p { margin: 0px; } |
| 29 | -.m { font-size: 20px; font-weight: bold; margin-bottom: 5px; text-align: left; } | |
| 29 | + | |
| 30 | 30 | .y { font-size: 40px; font-weight: bold; } |
| 31 | -.y a { font-size: 20px; cursor: pointer; width: 24px; height: 24px; } | |
| 32 | -.y a:hover {color: #ffffff; background-color: #000000;} | |
| 33 | -.p { font-size: 20px; text-align: left; color: #8b8b8b} | |
| 31 | +.y a { text-align: center; color: #000; width: 30px; display: inline-block; margin-left: 10px;} | |
| 32 | +.y a:hover { color: #ffffff; background: #000; cursor: pointer;} | |
| 33 | +.p { font-size: 20px; color: #8b8b8b} | |
| 34 | 34 | |
| 35 | +.m { font-size: 20px; font-weight: bold; margin-bottom: 5px; text-align: left; } | |
| 36 | + | |
| 35 | 37 | svg.graph { color:white; width: 100%; } |
| 36 | 38 | svg.graph text {font-family: 'input_mono_regular'; stroke:none; fill:#8b8b8b; font-size:14px; text-anchor: middle; } |
| 37 | 39 | svg.graph text.dayLabel { font-size: 10px; } |
| 38 | 40 | svg.graph rect { stroke:none } |
| @@ -49,6 +51,5 @@ | ||
| 49 | 51 | @media only screen and (max-width: 1440px) |
| 50 | 52 | { section { width: 720px; }} |
| 51 | 53 | |
| 52 | 54 | @media only screen and (max-width: 720px) |
| 53 | -{ section { width: 360px; }} | |
| 54 | - | |
| 55 | +{ section { width: 360px; }} | |
| index.html | ||
|---|---|---|
| @@ -10,8 +10,8 @@ | ||
| 10 | 10 | <body> |
| 11 | 11 | <section id="center"> |
| 12 | 12 | </section> |
| 13 | 13 | <script> |
| 14 | - let letnice = new Year(location.hash); | |
| 14 | + let letnice = new Year(); | |
| 15 | 15 | </script> |
| 16 | 16 | </body> |
| 17 | 17 | </html> |
| js/letnice.js | ||
|---|---|---|
| @@ -3,10 +3,9 @@ | ||
| 3 | 3 | let base = document.getElementById("center"); |
| 4 | 4 | base.innerHTML = ""; |
| 5 | 5 | let year; |
| 6 | 6 | |
| 7 | - isNaN(letnice) ? year = new Date().getFullYear() : year = String(letnice).replace("#", "").substr(0,4); | |
| 8 | - | |
| 7 | + isNaN(letnice) || letnice==null ? year = new Date().getFullYear() : year = String(letnice).replace("#", "").substr(0,4); | |
| 9 | 8 | location.hash = year; |
| 10 | 9 | |
| 11 | 10 | const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; |
| 12 | 11 | const dayNames = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ] |
| @@ -14,12 +13,13 @@ | ||
| 14 | 13 | let month = 0; |
| 15 | 14 | let today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()-1, 0); |
| 16 | 15 | let style = ""; |
| 17 | 16 | |
| 17 | + base.innerHTML += doHeader(); | |
| 18 | + | |
| 18 | 19 | while(month < 12) |
| 19 | 20 | { |
| 20 | 21 | base.innerHTML += `<div class="month"> |
| 21 | - ${month==0?doHeader():""} | |
| 22 | 22 | <p class="m">${monthNames[new Date(year, month).getMonth()].substr(0,2)}</p> |
| 23 | 23 | <svg class="graph" id="${monthNames[month]}"> |
| 24 | 24 | ${doLabels()} |
| 25 | 25 | ${doMonth(month)} |
Built with git-ssb-web