From 6c264beb588cfb5894dddc9470c9151322390a36 Mon Sep 17 00:00:00 2001 From: Marko Kuosmanen Date: Fri, 27 Sep 2024 11:04:15 +0300 Subject: [PATCH] Added large option --- MMM-school-schedule.css | 48 ---------------------------------- MMM-school-schedule.js | 17 ++++++++---- README.md | 4 ++- css/styles.css | 49 ++++++++++++++++++++++++++++++++++ css/styles.css.map | 1 + css/styles.scss | 58 +++++++++++++++++++++++++++++++++++++++++ 6 files changed, 123 insertions(+), 54 deletions(-) delete mode 100644 MMM-school-schedule.css create mode 100644 css/styles.css create mode 100644 css/styles.css.map create mode 100644 css/styles.scss diff --git a/MMM-school-schedule.css b/MMM-school-schedule.css deleted file mode 100644 index 7a7acde..0000000 --- a/MMM-school-schedule.css +++ /dev/null @@ -1,48 +0,0 @@ -table.school-schedule-table { - border-collapse: collapse; - margin: 25px 0; - font-size: 14px; - font-family: sans-serif; - /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);*/ - border: 1px solid #fff; -} - -table.school-schedule-table thead tr { - background-color: #fff; - color: #000000; - text-align: left; -} - -.school-schedule-th, -.school-schedule-td { - padding: 6px 6px; - text-align: center; - font-size: 16px; - font-family: var(--font-primary), sans-serif; - font-weight: 300; - line-height: 1.25; - width: 85px; -} - -table.school-schedule-table th:first-child, -table.school-schedule-table td:first-child { - width: 100px; -} - -.school-schedule-th { - font-weight: 600; -} - -table.school-schedule-table th, table.school-schedule-table td { - border-left: 1px solid rgba(255,255,255,0.5); -} - -table.school-schedule-table tbody tr { - border-bottom: 1px solid #dddddd; - background-color: #000000; -} - -table.school-schedule-table td.active { - font-weight: bold; - background-color: rgb(30, 24, 66); -} \ No newline at end of file diff --git a/MMM-school-schedule.js b/MMM-school-schedule.js index 331428a..fb25a44 100644 --- a/MMM-school-schedule.js +++ b/MMM-school-schedule.js @@ -14,6 +14,7 @@ Module.register('MMM-school-schedule', { defaults: { updateInterval: 1 * 60 * 60 * 1000, // 1 hour fadeSpeed: 4000, + large: false, }, requiresVersion: '2.1.0', // Required version of MagicMirror @@ -25,7 +26,7 @@ Module.register('MMM-school-schedule', { * @returns {Array} styles array */ getStyles: function () { - return [this.file('MMM-school-schedule.css')]; + return [this.file('css/styles.css')]; }, /** @@ -119,7 +120,8 @@ Module.register('MMM-school-schedule', { thead_tr_th_clock.appendChild( document.createTextNode(this.translate('clock')) ); - thead_tr_th_clock.className = 'school-schedule-th'; + thead_tr_th_clock.className = + 'school-schedule-th' + self.config.large ? ' large' : ''; thead_tr.appendChild(thead_tr_th_clock); // Create body @@ -135,7 +137,8 @@ Module.register('MMM-school-schedule', { const localeDay = weekdaysCurrentLoc[index]; const thead_tr_th_day = document.createElement('th'); - thead_tr_th_day.className = 'school-schedule-th'; + thead_tr_th_day.className = + 'school-schedule-th' + self.config.large ? ' large' : ''; thead_tr_th_day.appendChild( document.createTextNode(localeDay.toUpperCase()) ); @@ -147,7 +150,9 @@ Module.register('MMM-school-schedule', { times.forEach((t, i) => { const tbody_tr = document.createElement('tr'); const tbody_tr_td = document.createElement('td'); - tbody_tr_td.className = 'school-schedule-td bright'; + tbody_tr_td.className = + 'school-schedule-td' + + (self.config.large ? ' large bright' : ' bright'); tbody_tr_td.appendChild(document.createTextNode(t.toUpperCase())); tbody_tr.appendChild(tbody_tr_td); @@ -159,7 +164,9 @@ Module.register('MMM-school-schedule', { const tbody_tr_td_day = document.createElement('td'); const activeClass = lowerCaseDay === dow ? 'active' : ''; tbody_tr_td_day.className = - 'school-schedule-td bright ' + activeClass; + 'school-schedule-td' + + (self.config.large ? ' large bright ' : ' bright ') + + activeClass; tbody_tr_td_day.appendChild(document.createTextNode(text)); tbody_tr.appendChild(tbody_tr_td_day); } diff --git a/README.md b/README.md index fa0f34c..9dc37f8 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,8 @@ modules: [ to: '2023-05-18 16:00:00' // valid to } }], - updateInterval: 1 * 60 * 60 * 1000 // every hour + updateInterval: 1 * 60 * 60 * 1000, // every hour + large: false } }] ``` @@ -50,3 +51,4 @@ The following properties can be configured: | `schedules` | Schedules Array of Schedule Object(s), contains `times`, `days` keys and optionally also `valid` Object with optional `from` and/or `to` keys. | | Schedule Object:
`times`Times String array
`days`Days keys and String array of lessons. Days can be `mo`, `tu`, `we `, `th`, `fr`, `sa` or `su`. And value is Array of lessons (same length. than times Array)
`valid`When schedule is valid. Object contains `from` or `to` keys or both `from` and `to` keys.
`from`Optional start time when schelude is valid, format `yyyy-mm-dd hh:mm:ss`
`to`Optional end time when schelude is valid, format `yyyy-mm-dd hh:mm:ss`
| `updateInterval` | Update interval in milliseconds, default `1800000` +| `large` | `false` | Need to use larger experience ? diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..3ca882c --- /dev/null +++ b/css/styles.css @@ -0,0 +1,49 @@ +table.school-schedule-table { + border-collapse: collapse; + margin: 25px 0; + font-size: 14px; + font-family: sans-serif; + border: 1px solid #fff; +} +table.school-schedule-table thead tr { + background-color: #fff; + color: #000000; + text-align: left; +} +table.school-schedule-table .school-schedule-th, +table.school-schedule-table .school-schedule-td { + padding: 6px 6px; + text-align: center; + font-size: 16px; + font-family: var(--font-primary), sans-serif; + font-weight: 300; + line-height: 1.25; + width: 85px; +} +table.school-schedule-table .school-schedule-th.large, +table.school-schedule-table .school-schedule-td.large { + font-size: 32px; + width: 110px; +} +table.school-schedule-table th:first-child, +table.school-schedule-table td:first-child { + width: 100px; +} +table.school-schedule-table th:first-child.large, +table.school-schedule-table td:first-child.large { + width: 180px; +} +table.school-schedule-table .school-schedule-th { + font-weight: 600; +} +table.school-schedule-table th, table.school-schedule-table td { + border-left: 1px solid rgba(255, 255, 255, 0.5); +} +table.school-schedule-table tbody tr { + border-bottom: 1px solid #dddddd; + background-color: #000000; +} +table.school-schedule-table td.active { + font-weight: bold; + background-color: rgb(30, 24, 66); +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/css/styles.css.map b/css/styles.css.map new file mode 100644 index 0000000..e6f90e7 --- /dev/null +++ b/css/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAAA;EACI,yBAAA;EACA,cAAA;EACA,eAAA;EACA,uBAAA;EACA,sBAAA;ACCJ;ADCI;EACI,sBAAA;EACA,cAAA;EACA,gBAAA;ACCR;ADEI;;EAEI,gBAAA;EACA,kBAAA;EACA,eAAA;EACA,4CAAA;EACA,gBAAA;EACA,iBAAA;EACA,WAAA;ACAR;ADEQ;;EACI,eAAA;EACA,YAAA;ACCZ;ADGI;;EAEI,YAAA;ACDR;ADGQ;;EACI,YAAA;ACAZ;ADII;EACI,gBAAA;ACFR;ADKI;EACI,+CAAA;ACHR;ADMI;EACI,gCAAA;EACA,yBAAA;ACJR;ADOI;EACI,iBAAA;EACA,iCAAA;ACLR","file":"styles.css"} \ No newline at end of file diff --git a/css/styles.scss b/css/styles.scss new file mode 100644 index 0000000..36afb17 --- /dev/null +++ b/css/styles.scss @@ -0,0 +1,58 @@ +table.school-schedule-table { + border-collapse: collapse; + margin: 25px 0; + font-size: 14px; + font-family: sans-serif; + border: 1px solid #fff; + + thead tr { + background-color: #fff; + color: #000000; + text-align: left; + } + + .school-schedule-th, + .school-schedule-td { + padding: 6px 6px; + text-align: center; + font-size: 16px; + font-family: var(--font-primary), sans-serif; + font-weight: 300; + line-height: 1.25; + width: 85px; + + &.large { + font-size: 32px; + width: 110px; + } + } + + th:first-child, + td:first-child { + width: 100px; + + &.large { + width: 180px; + } + } + + .school-schedule-th { + font-weight: 600; + } + + th, td { + border-left: 1px solid rgba(255,255,255,0.5); + } + + tbody tr { + border-bottom: 1px solid #dddddd; + background-color: #000000; + } + + td.active { + font-weight: bold; + background-color: rgb(30, 24, 66); + } +} + +