RickRongen/WallE
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: improved camera view and sounds view

Browse Source
This commit is contained in:
Rick Rongen
2020-12-23 14:45:33 +01:00
parent 56fa2a92a9
commit bea32d07e0
5 changed files with 94 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
client/public/index.html
View File

@@ -1,17 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>reset.css">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
</noscript> Please enable it to continue.</strong>
<div id="app"></div> </noscript>
<!-- built files will be auto injected --> <div id="app"></div>
</body> <!-- built files will be auto injected -->
</body>
</html> </html>

48
client/public/reset.css Normal file
View File

@@ -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;
}

16
client/src/App.vue
View File

@@ -6,7 +6,7 @@
<router-link to="/control">Control</router-link> | <router-link to="/control">Control</router-link> |
<router-link to="/sounds">Sounds</router-link> <router-link to="/sounds">Sounds</router-link>
</div> </div>
<router-view/> <router-view id="view"/>
</div> </div>
</template> </template>
@@ -33,10 +33,18 @@ export default {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
display: grid;
grid-template-rows: 36px auto;
height: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
} }
#nav { #nav {
padding: 30px; line-height: 36px;
div.nav-item { div.nav-item {
display: inline; display: inline;
@@ -54,4 +62,8 @@ export default {
} }
} }
} }
#view {
overflow-y: scroll;
}
</style> </style>

5
client/src/components/ImageStream.vue
View File

@@ -20,6 +20,9 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.video-stream { .video-stream {
width: 100%; max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
} }
</style> </style>

23
client/src/views/SoundBoard.vue
View File

@@ -1,7 +1,9 @@
<template> <template>
<div class="sounds"> <div>
<div :key="`sound-${sound.name}`" class="sound" v-for="sound in sounds"> <div id="sound-list">
<h2 @click="emitSound(sound.name)">{{ sound.name }}</h2> <div :key="`sound-${sound.name}`" class="sound" v-for="sound in sounds">
<h2 @click="emitSound(sound.name)">{{ sound.title }}</h2>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -11,8 +13,7 @@ import axios from 'axios';
export default { export default {
name: 'SoundBoard', name: 'SoundBoard',
components: { components: {},
},
data() { data() {
return { return {
sounds: [], sounds: [],
@@ -32,4 +33,14 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
#sound-list {
display: grid;
grid-template-columns: 33% 33% 33%;
}
.sound {
background: lightblue;
border: 1px solid black;
}
</style>