diff --git a/js/workflows/usb.js b/js/workflows/usb.js index 00b6ca0..36605ad 100644 --- a/js/workflows/usb.js +++ b/js/workflows/usb.js @@ -124,10 +124,6 @@ class USBWorkflow extends Workflow { device = await navigator.serial.requestPort(); console.log(device); } - - // TODO: Make it more obvious to user that something happened for smaller screens - // Perhaps providing checkmarks by adding a css class when a step is complete would be helpful - // This would help with other workflows as well } else { console.log('Requesting any serial device...'); try { @@ -171,7 +167,7 @@ class USBWorkflow extends Workflow { btnSelectHostFolder.disabled = true; let serialConnect = async (event) => { try { - await this.showBusy(this.connectToSerial()); + await this.connectToSerial(); } catch (e) { //console.log(e); //alert(e.message); @@ -291,7 +287,7 @@ class USBWorkflow extends Workflow { // At this point we should see if we should init the file client and check if have a saved dir handle let fileops = new FileOps(this.repl, false); - if (await fileops.isReadOnly()) { + if (await this.showBusy(fileops.isReadOnly())) { // UID Only needed for matching the CIRCUITPY drive with the Serial Terminal await this.showBusy(this._getDeviceUid()); let modal = this.connectDialog.getModal(); diff --git a/sass/base/_base.scss b/sass/base/_base.scss index eaca655..7440279 100644 --- a/sass/base/_base.scss +++ b/sass/base/_base.scss @@ -1,3 +1,6 @@ +@use "../base/variables" as *; +@use "sass:color"; + html { box-sizing: border-box; } @@ -64,7 +67,7 @@ h5 { } &:hover { - background-color: darken($purple, 15%); + background-color: color.adjust($purple, $lightness: -15%); } &.hidden { @@ -77,7 +80,7 @@ h5 { background-color: $gray; &:hover { - background-color: darken($gray, 15%); + background-color: color.adjust($gray, $lightness: -15%); } } diff --git a/sass/layout/_grid.scss b/sass/layout/_grid.scss index 36c9221..8ce727e 100644 --- a/sass/layout/_grid.scss +++ b/sass/layout/_grid.scss @@ -1,3 +1,5 @@ +@use "../base/variables" as *; + .container { width: 100%; margin: 0 auto; diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss index 28ec9ee..4de3d11 100644 --- a/sass/layout/_header.scss +++ b/sass/layout/_header.scss @@ -1,3 +1,6 @@ +@use "../base/variables" as *; +@use "../base/mixins" as *; + #site-header { display: grid; grid-template-rows: 1fr 3px; diff --git a/sass/layout/_header_mobile.scss b/sass/layout/_header_mobile.scss index 669be50..b3ed46a 100644 --- a/sass/layout/_header_mobile.scss +++ b/sass/layout/_header_mobile.scss @@ -1,3 +1,5 @@ +@use "../base/variables" as *; + #mobile-header { display: none; background-color: #333; diff --git a/sass/layout/_layout.scss b/sass/layout/_layout.scss index e2fa129..ef987e4 100644 --- a/sass/layout/_layout.scss +++ b/sass/layout/_layout.scss @@ -1,3 +1,6 @@ +@use "../base/variables" as *; +@use "sass:color"; + .layout { height: 100vh; height: calc(var(--vh, 1vh) * 100); @@ -170,7 +173,7 @@ background-color: $gray; &:hover { - background-color: darken($gray, 15%); + background-color: color.adjust($gray, $lightness: -15%); } &.active { diff --git a/sass/style.scss b/sass/style.scss index b26a5c0..a53a15e 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,17 +1,17 @@ @charset "utf-8"; -@import '/node_modules/@fortawesome/fontawesome-free/css/all.min.css'; -@import '/node_modules/@xterm/xterm/css/xterm.css'; +@use '/node_modules/@fortawesome/fontawesome-free/css/all.min.css'; +@use '/node_modules/@xterm/xterm/css/xterm.css'; -@import './vendors/normalize'; +@use 'vendors/normalize'; -@import './base/variables'; -@import './base/typography'; -@import './base/mixins'; -@import './base/base'; +@use 'base/variables'; +@use 'base/typography'; +@use 'base/mixins'; +@use 'base/base'; -@import './layout/layout'; -@import './layout/grid'; -@import './layout/editor'; -@import './layout/header'; -@import './layout/header_mobile'; +@use 'layout/layout'; +@use 'layout/grid'; +@use 'layout/editor'; +@use 'layout/header'; +@use 'layout/header_mobile';