From bea32d07e06e39d88cf18d7b3f4dac4b316cb2f6 Mon Sep 17 00:00:00 2001 From: Rick Rongen Date: Wed, 23 Dec 2020 14:45:33 +0100 Subject: [PATCH] feat: improved camera view and sounds view --- client/public/index.html | 20 ++++++----- client/public/reset.css | 48 +++++++++++++++++++++++++++ client/src/App.vue | 16 +++++++-- client/src/components/ImageStream.vue | 5 ++- client/src/views/SoundBoard.vue | 23 +++++++++---- 5 files changed, 94 insertions(+), 18 deletions(-) create mode 100644 client/public/reset.css diff --git a/client/public/index.html b/client/public/index.html index 4123528..a451d8f 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -1,17 +1,19 @@ - + + <%= htmlWebpackPlugin.options.title %> - - - -
- - + + + +
+ + diff --git a/client/public/reset.css b/client/public/reset.css new file mode 100644 index 0000000..cf3d1dd --- /dev/null +++ b/client/public/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/client/src/App.vue b/client/src/App.vue index 917c198..5524c25 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -6,7 +6,7 @@ Control | Sounds - + @@ -33,10 +33,18 @@ export default { -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; + display: grid; + grid-template-rows: 36px auto; + height: 100%; + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; } #nav { - padding: 30px; + line-height: 36px; div.nav-item { display: inline; @@ -54,4 +62,8 @@ export default { } } } + +#view { + overflow-y: scroll; +} diff --git a/client/src/components/ImageStream.vue b/client/src/components/ImageStream.vue index 38fb74a..a6af424 100644 --- a/client/src/components/ImageStream.vue +++ b/client/src/components/ImageStream.vue @@ -20,6 +20,9 @@ export default { diff --git a/client/src/views/SoundBoard.vue b/client/src/views/SoundBoard.vue index 3f976b3..868172c 100644 --- a/client/src/views/SoundBoard.vue +++ b/client/src/views/SoundBoard.vue @@ -1,7 +1,9 @@ @@ -11,8 +13,7 @@ import axios from 'axios'; export default { name: 'SoundBoard', - components: { - }, + components: {}, data() { return { sounds: [], @@ -32,4 +33,14 @@ export default { }; - +