Commit c745fe77bdac98673209f311adf6180dcb1dcaba
footer setup
nomand committed on 6/7/2018, 4:50:46 AMParent: ac07cc9bbc36e3c887cf7d617c0129eb96f5f45b
Files changed
| css/style.css | changed |
| js/letnice.js | changed |
| css/style.css | ||
|---|---|---|
| @@ -21,10 +21,11 @@ | ||
| 21 | 21 | transform: translateY(-50%); |
| 22 | 22 | text-align: center; |
| 23 | 23 | } |
| 24 | 24 | |
| 25 | -.month { width:100px; margin: 10px; display: inline-block;} | |
| 25 | +.month { margin: 10px; display: inline-block; width:100px; height: 130px; } | |
| 26 | 26 | .header { margin: 0px 0px 40px 10px; text-align: left; align-content: flex-start;} |
| 27 | +.footer { margin: 40px 0px 0px 10px; text-align: left; height: 20px;} | |
| 27 | 28 | |
| 28 | 29 | p { margin: 0px; } |
| 29 | 30 | |
| 30 | 31 | .y { font-size: 40px; font-weight: bold; } |
| @@ -33,12 +34,13 @@ | ||
| 33 | 34 | .p { font-size: 20px; color: #8b8b8b} |
| 34 | 35 | |
| 35 | 36 | .m { font-size: 20px; font-weight: bold; margin-bottom: 5px; text-align: left; } |
| 36 | 37 | |
| 37 | -svg.graph { color:white; width: 100%; } | |
| 38 | +svg.graph { color:white; width: 100%; height: 100px; } | |
| 38 | 39 | svg.graph text {font-family: 'input_mono_regular'; stroke:none; fill:#8b8b8b; font-size:14px; text-anchor: middle; } |
| 39 | 40 | svg.graph text.dayLabel { font-size: 10px; } |
| 40 | -svg.graph rect { stroke:none } | |
| 41 | +svg.graph rect { stroke:none; } | |
| 42 | +svg.graph rect:hover { fill: #f011f0 ; cursor:pointer} | |
| 41 | 43 | svg.graph rect.null { fill: none; stroke: none;} |
| 42 | 44 | svg.graph rect.today { fill:#ff1e00; } |
| 43 | 45 | svg.graph rect.day { fill:#8b8b8b; } |
| 44 | 46 | svg.graph rect.weekend { fill:#747474 } |
| js/letnice.js | ||
|---|---|---|
| @@ -12,9 +12,10 @@ | ||
| 12 | 12 | |
| 13 | 13 | let month = 0; |
| 14 | 14 | let today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()-1, 0); |
| 15 | 15 | let style = ""; |
| 16 | - | |
| 16 | + let footer = ""; | |
| 17 | + | |
| 17 | 18 | base.innerHTML += doHeader(); |
| 18 | 19 | |
| 19 | 20 | while(month < 12) |
| 20 | 21 | { |
| @@ -26,13 +27,20 @@ | ||
| 26 | 27 | </svg></div>` |
| 27 | 28 | month++ |
| 28 | 29 | } |
| 29 | 30 | |
| 31 | + base.innerHTML += doFooter(); | |
| 32 | + | |
| 30 | 33 | function doHeader() |
| 31 | 34 | { |
| 32 | 35 | return `<div class="header"><p class="y">${year}<a onclick="scrollYear(-1);">-</a><a onclick="scrollYear(1);">+</a></p><p class="p">${yearProgress(year)}</p></div>`; |
| 33 | 36 | } |
| 34 | 37 | |
| 38 | + function doFooter(content) | |
| 39 | + { | |
| 40 | + return `<div class="footer">${footer}</div>`; | |
| 41 | + } | |
| 42 | + | |
| 35 | 43 | function yearProgress(year) |
| 36 | 44 | { |
| 37 | 45 | diff = new Date() - new Date(year, 0, 1, 0); |
| 38 | 46 | progress = ((diff/31536000000)*100).toFixed(2); |
| @@ -47,9 +55,9 @@ | ||
| 47 | 55 | let y = 0; |
| 48 | 56 | |
| 49 | 57 | for(i = 0; i < 7; i++) |
| 50 | 58 | { |
| 51 | - y = (i * 14) + 1; | |
| 59 | + y = (i * 14); | |
| 52 | 60 | html += `<text class="dayLabel" x="5" y='${y}' dy="10">${dayNames[i].substr(0,1)}</text>` |
| 53 | 61 | } |
| 54 | 62 | return html; |
| 55 | 63 | } |
| @@ -68,9 +76,9 @@ | ||
| 68 | 76 | let week = 0; |
| 69 | 77 | |
| 70 | 78 | while(week < 7 && date != monthLength) |
| 71 | 79 | { |
| 72 | - y = week * 14 + 2; | |
| 80 | + y = week * 14; | |
| 73 | 81 | let day = new Date(year, month, date, 0); |
| 74 | 82 | |
| 75 | 83 | if(day.getDay() != week) |
| 76 | 84 | { |
| @@ -92,9 +100,9 @@ | ||
| 92 | 100 | else |
| 93 | 101 | { |
| 94 | 102 | style = "day"; |
| 95 | 103 | } |
| 96 | - html += `<rect class='${style}' x='${x}' y='${y}' title='${(date+1) == 0 ? "null" : dayNames[week] + " " + (date+1)}' width="12px" height="12px" rx="2" ry="2" onclick=""></rect>` | |
| 104 | + html += `<rect class='${style}' x='${x}' y='${y}' title='${(date+1) == 0 ? "null" : dayNames[week] + " " + (date+1)}' width="12px" height="12px" rx="2" ry="2" onclick="doFooter()"></rect>` | |
| 97 | 105 | week++ |
| 98 | 106 | date++ |
| 99 | 107 | } |
| 100 | 108 | } |
Built with git-ssb-web