From 07f9fb9e845bf7bb56d575ea851bdf18b9943261 Mon Sep 17 00:00:00 2001 From: tconey23 <145934889+tconey23@users.noreply.github.com> Date: Sun, 25 Feb 2024 13:18:15 -0700 Subject: [PATCH] Admin view upgrades and CSS fixes Co-authored-by: Theo M. Co-authored-by: Edwin Chalmers " Co-authored-by: Theo M. Co-authored-by: Edwin Chalmers --- dist/index.html | 184 +++++++++++---------- src/chartSetup.js | 10 +- src/css/index.scss | 146 +++++++++++++++++ src/css/styles.css | 167 ++++++++++--------- src/css/variables.scss | 362 +++++++++++++++++++++++++++++++++++++++++ src/domUpdates.js | 12 +- src/scripts.js | 83 +++++----- webpack.config.js | 2 +- 8 files changed, 749 insertions(+), 217 deletions(-) create mode 100644 src/css/index.scss create mode 100644 src/css/variables.scss diff --git a/dist/index.html b/dist/index.html index 6532515bac..c61f3c578f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -20,8 +20,7 @@ @@ -38,101 +37,112 @@

welcome back (person.name)

-
-
-
-
-
-

👣

+
+
+
+
+

👣

+

Activity Data

+

Activity Data

-
-

Activity Data

- -
-
-
-
-
-

💧

-

Hydration Data

-
-

Average Hydration Data (oz)

- -

Weekly Hydration Data (oz)

- -
- - - -
-
-
-
-
-
-

🛏

-

Sleep Data

-
-
- - -
- - - -
-
- +
+
+
+

💧

+

Hydration Data

+
+

Average Hydration Data (oz)

+ +

Weekly Hydration Data (oz)

+ +
+ + + +
+
+
+
+
+
+

🛏

+

Sleep Data

+
+
+ + +
+ + + +
+
+ -

Address:

address

 -

Email:

email

 -

Stride Length:

stride length

 -

Daily Step Goal:

daily step goal

 -

Friends:

friends

 - +
- +

ADMIN CONTROLS

+
+ + +
+ + + + + +
+
+ +
+
+ +
+ + + +
+
+
+
-

Select chart options below

-
- - - - - -
-
-
-
- -
- - - +
+ +
+
+ +
+
+ +
+
+
-
-
-
-
- - - -
diff --git a/src/chartSetup.js b/src/chartSetup.js index ef19b8a06c..efc914bd6c 100644 --- a/src/chartSetup.js +++ b/src/chartSetup.js @@ -32,12 +32,16 @@ const adminSleepCtx = document.getElementById('adminSleepChart').getContext('2d' const adminHydrationCtx = document.getElementById('adminHydrationChart').getContext('2d'); const adminActivityCtx = document.getElementById('adminActivityChart').getContext('2d'); -stepCtx.canvas.height = 200; +stepCtx.canvas.height = 100; wklyHydCtx.canvas.height = 100; hydCtx.canvas.height = 100; sleepCtx.canvas.height = 60; -avgSleepCtx.canvas.height = 60; -wklySleepCtx.canvas.height = 100; +avgSleepCtx.canvas.height = 150; +wklySleepCtx.canvas.height = 80; +adminCtx.canvas.height = 200; +adminSleepCtx.canvas.height = 100; +adminHydrationCtx.canvas.height = 100; +adminActivityCtx.canvas.height = 100; const stepChartData = { labels: ['Your step goal', 'Average step goal'], diff --git a/src/css/index.scss b/src/css/index.scss new file mode 100644 index 0000000000..262a5fe80c --- /dev/null +++ b/src/css/index.scss @@ -0,0 +1,146 @@ + +* { + font-family: "Libre Baskerville"; + font-style: normal; + } + body, html { + scroll-behavior: smooth; + background: $main-background; + background-size: 100% 100%; + } + + main{ + @include main + } + + .condensed{ + @include condensed + } + + input { + background-color: white; + border-radius: 7px; + box-shadow: 4px 7px 20px 2px rgba(33, 30, 30, 0.7607843137); + color: black; + } + + h3 { + font-weight: normal; + margin-right: 36px; + } + + p { + font-weight: bold; + margin-right: 10px; + font-size: larger; + } + + .topNav { + overflow: hidden; + background:rgba(0, 0, 0, 0); + color: #1a1a1a; + position: fixed; + top: 10px; + width: 100%; + height: 2em; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + z-index: 30; + } + + .sideNav { + display: flex; + flex-direction: column; + position: fixed; + top: 7em; + width: 20%; + align-items: flex-end; + } + + nav a { + color: black; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 22px; + font-variant: unicase; + font-weight: bolder; + margin: 10px; + mix-blend-mode: color-burn; + } + + nav a:hover { + text-shadow: 0px 0px 11px rgb(0, 0, 0); + } + + .underline { + text-decoration: underline; + } + + .shadow { + box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px; + } + + span { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + .full { + mix-blend-mode: color-burn; + } + + .welcome-message{ + margin-top: 20rem; + } + + canvas { + z-index: 2; + width: 500px; + } + + .viewMenu { + position: fixed; + background: rgba(0, 0, 0, 0.3019607843); + width: 217px; + height: 68px; + z-index: 30; + ul{ + list-style-type: none; + margin-left: -37px; + display: flex; + flex-direction: column; + align-items: flex-start; + :hover{ + background-color: red; + color: white; + } + li{ + margin-top: 1px; + margin-bottom: 1px; + width: 100%; + font-size: smaller; + } + } + } + + .dateSelector{ + z-index: 2; + width: 10rem; + text-align: center; + margin-left: 1rem; + margin-right: 1rem; + } + + .dateSection { + z-index: 2; + text-align: center; + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + } diff --git a/src/css/styles.css b/src/css/styles.css index 8197424420..6e02c2154d 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -10,12 +10,10 @@ body, html { } main { - .sortContainer{ - display: none; - } display: flex; flex-direction: column; align-items: center; + article { display: flex; flex-wrap: nowrap; @@ -28,7 +26,11 @@ main { position: fixed; } } - .sizeableContainer { + .adminControls{ + display: none; + } + + .sortContainer { width: 90%; display: flex; flex-direction: column; @@ -230,50 +232,62 @@ canvas { .condensed { display: flex; - flex-direction: row; - justify-content: flex-end; + flex-direction: row-reverse; + justify-content: space-between; + flex-wrap: wrap; align-items: flex-start; - .sizeableContainer { - width: 25%; - margin-top: 90px; - display: flex; - flex-direction: column; + .sortContainer{ + + width: 45%; + height: 75%; + margin-right: 20px; + box-shadow: inset rgba(0, 0, 0, 0.5411764706) -1px -2px 20px 14px; + border-radius: 25px; + flex-direction: row; align-items: center; + display: flex; justify-content: flex-start; + overflow: overlay; + flex-wrap: wrap; .info-card { - width: 75%; - height: 100%; + width: 50%; + height: 181px; padding: 0px; - margin: 5px; display: flex; justify-content: center; flex-wrap: wrap; flex-direction: row; align-content: flex-start; font-size: 10px; + margin-bottom: 110px; + align-items: center; .section-text { width: 75%; - height: 30vh; - padding: 0%; + height: 100%; + padding-top: 20px; + padding-bottom: 60px; margin: 0px; display: flex; - justify-content: center; - flex-direction: column; - align-items: center; + justify-content: space-around; border-radius: 5%; box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px; background: transparent; - padding: 0px; + overflow: overlay; + align-content: flex-start; + flex-wrap: wrap; + flex-direction: row; + align-items: center; + scroll-margin-top: 220px } .iconSection { height: 28px; z-index: 10; font-size: 10px; - margin-bottom: 5px; + margin-bottom: 35px; justify-content: center; &:hover { @@ -293,6 +307,11 @@ canvas { width: 560px; height: 250px; box-shadow: none !important; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: flex-start; + justify-content: center; .section-text{ box-shadow: none !important; @@ -306,9 +325,8 @@ canvas { article { padding: 0px; - position: fixed; - top: 15px; - left: 13px; + width: 100%; + height: 200px; h1 { display: none; @@ -324,20 +342,18 @@ canvas { .adminControls { display: flex; - width: 60%; - height: 500px; + width: 45%; + height: 75%; border-radius: 25px; flex-direction: column; align-items: center; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - background: white; - z-index: 10; + background: rgba(255, 255, 255, 0); box-shadow: rgba(120, 37, 37, 0.561) 8px 7px 18px 11px; overflow: hidden; border: black solid thin; + overflow: overlay; + margin-left: 20px; + z-index: 10; .titleBlock { width: 100%; @@ -349,32 +365,44 @@ canvas { .container { width: 100%; - height: 88%; display: flex; flex-direction: row; - justify-content: center; - align-items: flex-start; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; .contentContainer:nth-child(1) { - width: 33%; + width: 50%; display: flex; - flex-direction: row; - flex-wrap: wrap; - align-content: stretch; - justify-content: space-around; + flex-direction: column; + align-items: center; + justify-content: flex-start; + /* padding-top: 11px; */ + + label{ + /* margin-bottom: 20px; + margin-top: 19px; */ + } + + .fa > p { + position: absolute; + top: 120px; + left: 143px; + } .chartOptions, .options { border: black solid thin; box-shadow: black 0 0; border-radius: 10px; - height: 200px; - width: 173px; - padding-top: 10px; + min-height: 65px; + width: 215px; + padding: 10px 10px; font-size: 10px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; + margin-top: 10px; } option { @@ -396,17 +424,22 @@ canvas { } .contentContainer:nth-child(2) { - width: 33%; + width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; - padding-top: 11px; + /* padding-top: 11px; */ - p { + .fa > p { position: absolute; - top: 30px; - left: 430px; + top: 380px; + left: 370px; + } + + input { + margin-top: 10px; + box-shadow: none; } .dropdown-content { @@ -422,7 +455,7 @@ canvas { flex-wrap: nowrap; align-items: center; margin-top: 24px; - left: 530px; + left: 200px; option { color: #FFFFFF !important; @@ -445,7 +478,7 @@ canvas { } .userList { - width: 200px; + width: 215px; border: black solid thin; height: 210px; margin-top: 18px; @@ -479,12 +512,16 @@ canvas { } .contentContainer:nth-child(3) { - width: 33%; + width: 100%; display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; - padding-top: 70px; + flex-wrap: wrap; + .chartContainer{ + width: 45%; + height: 50%; + } } } @@ -493,31 +530,11 @@ canvas { h2 { font-size: medium; + width: 100%; + text-align: center; + margin-top: 0; } } - - /* element.style { - position: absolute; - left: 60px; - top: 80px; - border: black solid thin; - box-shadow: black 0 0; - border-radius: 25px; - height: 200px; - padding-top: 10px; - } */ - - .sortContainer { - display: flex; - width: 35%; - height: 100vh; - margin-top: 90px; - margin-right: 150px; - box-shadow: inset rgba(0, 0, 0, 0.5411764706) -1px -2px 20px 14px; - border-radius: 25px; - flex-direction: column; - align-items: center; - } } .collapsed { diff --git a/src/css/variables.scss b/src/css/variables.scss new file mode 100644 index 0000000000..6eb6f2eb53 --- /dev/null +++ b/src/css/variables.scss @@ -0,0 +1,362 @@ +$main-background: url('../images/white-texture.png') repeat-x; + +$font: "Libre Baskerville"; +$font-style: normal; + +@mixin main { + .sortContainer{ + display: none; + } + display: flex; + flex-direction: column; + align-items: center; + article { + display: flex; + flex-wrap: nowrap; + align-items: center; + flex-direction: column; + padding-top: 10em; + height: 100vh; + img { + z-index: 0; + position: fixed; + } + } + .sizeableContainer { + width: 90%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + .info-card { + width: 75%; + height: 100vh; + padding: 6%; + margin: 10px; + display: flex; + justify-content: center; + + .section-text { + border-radius: 5%; + width: 75%; + height: 75%; + display: flex; + box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px; + overflow: hidden; + max-width: 75%; + padding: 10px; + background: transparent; + flex-direction: column; + justify-content: space-around; + align-items: center; + } + } + } +} + +@mixin condensed { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: flex-start; + + .sizeableContainer { + width: 25%; + margin-top: 90px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + .info-card { + width: 100%; + height: 181px; + padding: 0px; + display: flex; + justify-content: center; + flex-wrap: wrap; + flex-direction: row; + align-content: flex-start; + font-size: 10px; + margin-bottom: 110px; + align-items: center; + + .section-text { + width: 75%; + height: 100%; + padding-top: 20px; + padding-bottom: 60px; + margin: 0px; + display: flex; + justify-content: space-around; + border-radius: 5%; + box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px; + background: transparent; + overflow: overlay; + align-content: flex-start; + flex-wrap: wrap; + flex-direction: row; + align-items: center; + scroll-margin-top: 220px + } + + .iconSection { + height: 28px; + z-index: 10; + font-size: 10px; + margin-bottom: 35px; + justify-content: center; + + &:hover { + cursor: grab; + } + } + + p { + font-size: 10px; + } + } + + .account-main { + position: absolute; + left: 70px; + top: 0px; + width: 560px; + height: 250px; + box-shadow: none !important; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: center; + justify-content: center; + + .section-text{ + box-shadow: none !important; + } + + .iconSection { + display: none; + } + } + } + + article { + padding: 0px; + position: fixed; + top: 15px; + left: 13px; + + h1 { + display: none; + } + + img { + width: 70px; + position: absolute; + left: 0; + } + + } + + .adminControls { + display: flex; + width: 29%; + height: 870px; + border-radius: 25px; + flex-direction: column; + align-items: center; + position: absolute; + left: 17%; + top: 58%; + transform: translate(-50%, -50%); + background: rgba(255, 255, 255, 0); + z-index: 10; + box-shadow: rgba(120, 37, 37, 0.561) 8px 7px 18px 11px; + overflow: hidden; + border: black solid thin; + overflow: overlay; + + .titleBlock { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + + .container { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + + .contentContainer:nth-child(1) { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + justify-content: space-around; + .fa > p { + position: absolute; + top: 120px; + left: 143px; + } + .chartOptions, + .options { + border: black solid thin; + box-shadow: black 0 0; + border-radius: 10px; + height: 200px; + width: 173px; + padding-top: 10px; + font-size: 10px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + } + + option { + color: #FFFFFF !important; + font-size: 12px; + padding: 4px 40px; + border-radius: 6px; + border: 2px solid #B5B5B5; + background: linear-gradient(to top, #050A0D, #949494); + width: 90px; + + &:hover { + color: #000000 !important; + background: #CFCFCF; + background: linear-gradient(to top, #CFCFCF, #828282); + cursor: pointer; + } + } + } + + .contentContainer:nth-child(2) { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + padding-top: 11px; + + .fa > p { + position: absolute; + top: 380px; + left: 370px; + } + + .dropdown-content { + position: absolute; + background-color: #f6f6f6; + min-width: 230px; + overflow: scroll; + border: 1px solid #ddd; + z-index: 10; + max-height: 360px; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + margin-top: 24px; + left: 200px; + + option { + color: #FFFFFF !important; + font-size: 12px; + padding: 4px 40px; + border-radius: 6px; + border: 2px solid #B5B5B5; + background: linear-gradient(to top, #050A0D, #949494); + width: 100%; + text-align: center; + + &:hover { + color: #000000 !important; + background: #CFCFCF; + background: linear-gradient(to top, #CFCFCF, #828282); + cursor: pointer; + } + } + } + } + + .userList { + width: 200px; + border: black solid thin; + height: 210px; + margin-top: 18px; + border-radius: 10px; + display: flex; + flex-direction: column; + overflow: overlay; + justify-content: flex-start; + flex-wrap: wrap; + align-content: stretch; + + .delete { + font-size: smaller; + align-self: center; + margin: 0px; + border-radius: 6px; + border: 2px solid #B5B5B5; + background: linear-gradient(to top, #050A0D, #949494); + color: white; + padding: 4px; + width: 100%; + + &:hover { + color: #000000 !important; + background: #CFCFCF; + background: linear-gradient(to top, #CFCFCF, #828282); + cursor: pointer; + } + } + } + } + + .contentContainer:nth-child(3) { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: flex-start; + padding-top: 70px; + } + } + + .contentContainer { + height: 360px; + + h2 { + font-size: medium; + width: 100%; + text-align: center; + } + } + .sortContainer { + display: flex; + width: 35%; + height: 100vh; + margin-top: 90px; + margin-right: 150px; + box-shadow: inset rgba(0, 0, 0, 0.5411764706) -1px -2px 20px 14px; + border-radius: 25px; + flex-direction: column; + align-items: center; + } +} + +@mixin hide { + display: none; +} + +@mixin draggables { + +} \ No newline at end of file diff --git a/src/domUpdates.js b/src/domUpdates.js index 6ae66d238d..b1212cc179 100644 --- a/src/domUpdates.js +++ b/src/domUpdates.js @@ -114,16 +114,6 @@ function sleepChartUpdate(randomUser, allUsers) { wklySleepChart.update(); } -function adminSleepChartUpdate(userId) { - const userData = appState.sleep.sleepData.filter(data => data.userID === userId); - const sleepHours = userData.map(data => data.hoursSlept); - const sleepQuality = userData.map(data => data.sleepQuality); - - adminSleepChart.data.datasets[0].data = [average(sleepHours), average(sleepQuality)]; - adminSleepChart.update(); -} - - export { updateDom, @@ -131,6 +121,6 @@ export { updateAccountData, displaySpecificDayOunces, sleepChartUpdate, - adminSleepChartUpdate, + //adminSleepChartUpdate, }; diff --git a/src/scripts.js b/src/scripts.js index f933222323..c57012b871 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -1,9 +1,10 @@ import './css/styles.css'; +// import './css/index.scss'; import './images/fitlit-logo.png'; import './images/white-texture.png'; import { updateDom, sleepChartUpdate, updateAccountData, } from './domUpdates'; import { fetchUserData, fetchHydrationData, fetchSleepData, fetchActivityData, postHydrationData } from './apiCalls'; -import { adminChart,stepChart,sleepChart,hydChart } from './chartSetup'; +import { adminChart,stepChart,sleepChart,hydChart,adminSleepChart,adminHydrationChart,adminActivityChart } from './chartSetup'; let appState = { @@ -108,33 +109,8 @@ function getAverageSleepHours(randomUser) { return averageSleepHours.toFixed(2) } +//Admin Chart Functions function adminChartUpdate() { - /*const totalAverageSleepQuality = getTotalAverageSleepData(appState.sleepData, 'sleepQuality') - const totalAverageSleepHours = getTotalAverageSleepData(appState.sleepData, 'hoursSlept') - const totalAverageHydration = getTotalAverageNumOunces() - const totalAverageActiveMins = getTotalAverageActivityData(appState.activityData, 'minutesActive') - const totalAverageFlightsOfStairs = getTotalAverageActivityData(appState.activityData, 'flightsOfStairs') - - const charts = { - step: stepChart.data.datasets[0].data, - sleep: sleepChart.data.datasets[0].data - } - const adminChartData = Object.values(chartUpdate.children).reduce((acc, child) => { - acc.push(charts[child.value]) - console.log(charts[child.value]) - return acc - },[]) - console.log(adminChart.data.datasets) - adminChart.data.datasets[0].data = adminChartData -//adminChart.data.labels = charts.step.labels -//adminChart.data.datasets[0].data = charts.step.datasets[0].data = [totalAverageSleepHours] - - - console.log('TEST', adminChart.data.datasets[0].data) - adminChart.update() - - */ - let chartLabels = []; let chartData = []; @@ -188,13 +164,43 @@ function adminChartUpdate() { } -/* example -sleepChart.data.datasets[0].data = [hoursSleptRecentDay, sleepQualityRecentDay]; -sleepChart.options.scales.x.ticks.max = Math.max(hoursSleptRecentDay, sleepQualityRecentDay) + 10; -*/ +function adminSleepChartUpdate(userId) { + + const userSleepData = appState.sleep.sleepData.filter(data => data.userID === userId); + //console.log('USER SLEEP:', userSleepData) + const totalSleepHours = userSleepData.reduce((acc, curr) => acc + curr.hoursSlept, 0); + const averageSleepHours = totalSleepHours / userSleepData.length; + + const totalSleepQuality = userSleepData.reduce((acc, curr) => acc + curr.sleepQuality, 0); + const averageSleepQuality = totalSleepQuality / userSleepData.length; + + adminSleepChart.data.labels = ['Average Sleep Hours', 'Average Sleep Quality']; + adminSleepChart.data.datasets[0].data = [averageSleepHours, averageSleepQuality]; + adminSleepChart.update(); +} + +function adminHydrationChartUpdate(userId) { + const userHydrationData = appState.hydration.hydrationData.filter(record => record.userID === userId); + const totalOunces = userHydrationData.reduce((acc, record) => acc + record.numOunces, 0); + const averageOunces = (totalOunces / userHydrationData.length).toFixed(2); + + adminHydrationChart.data.datasets[0].data = [averageOunces]; + adminHydrationChart.update(); +} + +function adminActivityChartUpdate(userId) { + const userActivityData = appState.activity.activityData.filter(record => record.userID === userId); + const totalMinutesActive = userActivityData.reduce((acc, record) => acc + record.minutesActive, 0); + const averageMinutesActive = (totalMinutesActive / userActivityData.length).toFixed(2); + const totalFlightsOfStairs = userActivityData.reduce((acc, record) => acc + record.flightsOfStairs, 0); + const averageFlightsOfStairs = (totalFlightsOfStairs / userActivityData.length).toFixed(2); + adminActivityChart.data.datasets[0].data = [averageMinutesActive, averageFlightsOfStairs]; + adminActivityChart.update(); +} +// function getAverageSleepQuality(randomUser) { let sameUserSleepData = getUserSleepData(randomUser) let averageSleepQuality = 0 @@ -319,10 +325,14 @@ document.getElementById('submitHydrationData').addEventListener('click', () => { return; } - postHydrationData(randomUser.id, date, numOunces) + postHydrationData(appState.randomUser, date, numOunces) }); - +document.querySelector('.userList').addEventListener('change', () => { + adminSleepChartUpdate(userId) + adminHydrationChartUpdate(userId) + adminActivityChartUpdate(userId) +}) ///////// export { @@ -349,17 +359,10 @@ const userSelect = document.querySelector('.userSelect') const userList = document.querySelector('.userList') const viewMenu = document.querySelector('.viewMenu') const adminPanel = document.querySelector('.adminControls') -const adminView = document.querySelector('.adminView') const chartOptions = document.querySelector('.chartOptions'); //add these to target the sections const chartUpdateSection = document.querySelector('.chartUpdate') const fuzzySearch = document.querySelector('#fuzzySearch') - -adminView.addEventListener('click', () => { - adminPanel.classList.toggle('collapsed') - viewMenu.classList.toggle('hidden') -}) - const sortContainer = document.querySelector('.sortContainer'); const chartUpdate = document.querySelector('.chartUpdate'); diff --git a/webpack.config.js b/webpack.config.js index 1f1eb1d034..6e09be097d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,7 +15,7 @@ module.exports = { "module": { "rules": [ { - test: /\.css$/i, + test: /\.scss$/i, use: ['style-loader', 'css-loader', 'sass-loader'], }, {