jyio/nuVistA
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fullwidth toggle

Browse Source
This commit is contained in:
Jiang Yio 2023-05-16 23:19:36 -04:00
parent 1825edc637
commit 0c9e428186
1 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
htdocs/App.vue
View File

@ -3,14 +3,39 @@
<div class="container-fluid" style="padding-top: 5rem;">
<Navbar v-model:server="server" :user="user" />
<Throbber :client="client" />
<div class="container">
<div :class="localstate.fullwidth ? 'container-fluid' : 'container'">
<Login :secret="secret" v-model:client="client" v-model:server="server" v-model:user="user" />
<router-view v-if="user" :client="client"></router-view>
</div>
<button class="control-fullwidth btn btn-light" @click="localstate.fullwidth = !localstate.fullwidth"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi" viewBox="0 0 16 16"><path v-if="localstate.fullwidth" d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z" /><path v-else d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z" /></svg></button>
</div>
</template>
<style>
.bi {
display: inline-block;
vertical-align: -.125em;
fill: currentcolor;
}
</style>
<style scoped>
button.control-fullwidth {
display: none;
}
@media (min-width: 576px) {
button.control-fullwidth {
display: inline-block;
position: fixed;
bottom: 0.5rem;
right: 0.5rem;
}
}
</style>
<script>
import { localstate } from './vistax.mjs';
import Submenu from './Submenu.vue';
import Navbar from './Navbar.vue';
import Throbber from './Throbber.vue';
@ -37,6 +62,7 @@
},
data() {
return {
localstate,
client: null,
server: null,
user: null,