diff options
author | Asizon <43983086+Asizon@users.noreply.github.com> | 2022-05-08 10:28:57 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-08 10:28:57 +0300 |
commit | 6319421e3d00d1ec7e664247dc1221185c74b8c6 (patch) | |
tree | d9618c6537025a0c24a5d175894a2828737a07eb | |
parent | e24920507f83f7729978a43af0c1e45e9afbf664 (diff) | |
parent | a85cdfd5b71f37cc6ca84e8e86c2808cf8920c98 (diff) |
Merge pull request #2908 from chmelevskij/chore/move-styles-into-components
refactor: move styles closer to the components
-rw-r--r-- | src/components/quad-status/BatteryLegend.vue | 16 | ||||
-rw-r--r-- | src/components/status-bar/StatusBar.vue | 36 | ||||
-rw-r--r-- | src/components/status-bar/StatusBarVersion.vue | 17 | ||||
-rw-r--r-- | src/css/dark-theme.css | 1 | ||||
-rw-r--r-- | src/css/main.css | 52 |
5 files changed, 62 insertions, 60 deletions
diff --git a/src/components/quad-status/BatteryLegend.vue b/src/components/quad-status/BatteryLegend.vue index 1e15fa02..e13a872e 100644 --- a/src/components/quad-status/BatteryLegend.vue +++ b/src/components/quad-status/BatteryLegend.vue @@ -32,3 +32,19 @@ export default { }, }; </script> + +<style> +.battery-legend { + display: inline; + position: relative; + top: -2px; + margin-top: 0; + left: 0; + right: 0; + width: 40px; + text-align: left; + color: silver; + margin-left: -8px; + padding-right: 4px; +} +</style> diff --git a/src/components/status-bar/StatusBar.vue b/src/components/status-bar/StatusBar.vue index 70c916c6..d71a57ec 100644 --- a/src/components/status-bar/StatusBar.vue +++ b/src/components/status-bar/StatusBar.vue @@ -69,20 +69,48 @@ export default { configuratorVersion: { type: String, - default: '', + default: "", }, firmwareVersion: { type: String, - default: '', + default: "", }, firmwareId: { type: String, - default: '', + default: "", }, hardwareId: { type: String, - default: '', + default: "", }, }, }; </script> + +<style> +/** Status bar **/ +#status-bar { + position: fixed; + display: flex; + bottom: 0; + width: calc(100% - 20px); + height: 20px; + line-height: 20px; + padding: 0 10px 0 10px; + border-top: 1px solid #7d7d79; + background-color: #bfbeb5; +} + +#status-bar > * ~ * { + padding-left: 10px; + margin-left: 10px; + border-left: 1px solid #7d7d79; +} + +/** Status bar (phones) **/ +@media all and (max-width: 575px) { + #status-bar { + display: none; + } +} +</style> diff --git a/src/components/status-bar/StatusBarVersion.vue b/src/components/status-bar/StatusBarVersion.vue index adb735b3..9bdb0a1c 100644 --- a/src/components/status-bar/StatusBarVersion.vue +++ b/src/components/status-bar/StatusBarVersion.vue @@ -16,20 +16,29 @@ export default { props: { configuratorVersion: { type: String, - default: '', + default: "", }, firmwareVersion: { type: String, - default: '', + default: "", }, firmwareId: { type: String, - default: '', + default: "", }, hardwareId: { type: String, - default: '', + default: "", }, }, }; </script> + +<style> +.version { + margin: 0; + padding: 0; + border: 0; + margin-left: auto; +} +</style> diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css index 18d51e55..f488e8ab 100644 --- a/src/css/dark-theme.css +++ b/src/css/dark-theme.css @@ -46,6 +46,7 @@ body { background-color: #393b3a; } +/* NOTE: need to think on how to load the dark theme with vue */ #status-bar { background-color: #414443; } diff --git a/src/css/main.css b/src/css/main.css index bf799c9d..23767233 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -656,21 +656,6 @@ input[type="number"]::-webkit-inner-spin-button { width: 31px; } - -.battery-legend { - display: inline; - position: relative; - top: -2px; - margin-top: 0; - left: 0; - right: 0; - width: 40px; - text-align: left; - color: silver; - margin-left: -8px; - padding-right: 4px -} - .quad-status-contents progress::-webkit-progress-bar { height: 12px; background-color: #eee; @@ -1457,43 +1442,6 @@ li.active .ic_mission { } } - - -/** Status bar **/ -#status-bar { - position: fixed; - display: flex; - bottom: 0; - width: calc(100% - 20px); - height: 20px; - line-height: 20px; - padding: 0 10px 0 10px; - border-top: 1px solid #7d7d79; - background-color: #bfbeb5; -} - -#status-bar > * ~ * { - padding-left: 10px; - margin-left: 10px; - border-left: 1px solid #7d7d79; -} - -#status-bar .version { - margin: 0; - padding: 0; - border: 0; - margin-left: auto; -} - -/** Status bar (phones) **/ -@media all and (max-width: 575px) { - #status-bar { - display: none; - } -} - - - #cache { display: none; } |