~pistos/remoteku

8de9f5c4c493113080ad614f01e6cd5704135aa3 — Pistos 1 year, 5 months ago 0f4ffae
Make layout mobile-friendly
2 files changed, 17 insertions(+), 4 deletions(-)

M frontend/src/App.vue
M frontend/src/views/Home.vue
M frontend/src/App.vue => frontend/src/App.vue +8 -1
@@ 4,7 4,14 @@

<style lang="scss">
#app {
  margin: 5rem;
  @media screen and (min-device-width: 400px) {
    margin: 5rem;
  }
  text-align: center;
}

body {
  margin-left: auto;
  margin-right: auto;
}
</style>

M frontend/src/views/Home.vue => frontend/src/views/Home.vue +9 -3
@@ 40,7 40,7 @@
        <area shape="rect" coords="284,409,306,457" title="Mute" @click="apiPress('mute')"/>
      </map>
    </div>
    <div>
    <div class="text-entry">
      <label>
        Type text:
        <input


@@ 119,13 119,19 @@ export default {
}
</script>

<style lang="scss">
<style lang="scss" scoped>
img {
  margin: 2rem;
  margin-top: 2rem;
}

map {
  area {
    cursor: pointer;
  }
}

.text-entry {
  display: flex;
  max-width: 100%;
}
</style>