cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

swipe test view

Browse Source
This commit is contained in:
vabene1111 2024-02-10 09:07:03 +01:00
parent 03c775d1cc
commit fb8e04fee5
1 changed files with 78 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
vue/src/apps/TestView/TestView.vue
View File

@ -3,22 +3,44 @@
<div id="app"> <div id="app">
<div> <div>
<generic-multiselect <div class="swipe-container">
:model="Models.SHOPPING_CATEGORY" <div class="swipe-action bg-success">
:multiple="false" <i class="swipe-icon fa-fw fas fa-check"></i>
></generic-multiselect> </div>
<generic-multiselect
:model="Models.SHOPPING_CATEGORY"
:multiple="false"
></generic-multiselect>
<generic-multiselect
:model="Models.SHOPPING_CATEGORY"
:multiple="false"
></generic-multiselect>
----
<markdown-editor-component></markdown-editor-component> <b-button-group class="swipe-element">
<div class="card flex-grow-1 btn-block p-2">
<div class="d-flex">
<div class="d-flex flex-column pr-2">
<span>
<span><i class="fas fa-check"></i> <b>100 g </b></span>
<br/>
</span>
<span>
<span><i class="fas fa-check"></i> <b>200 kg </b></span>
<br/>
</span>
</div>
<div class="d-flex flex-column flex-grow-1 align-self-center">
Erdbeeren <br/>
<span><small class="text-muted">vabene111</small></span>
</div>
</div>
</div>
<b-button variant="success">
<i class="d-print-none fa-fw fas fa-check"></i>
</b-button>
</b-button-group>
<div class="swipe-action bg-primary justify-content-end">
<i class="fa-fw fas fa-hourglass-half swipe-icon"></i>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -45,7 +67,7 @@ Vue.use(BootstrapVue)
export default { export default {
name: "TestView", name: "TestView",
mixins: [ApiMixin], mixins: [ApiMixin],
components: {GenericMultiselect, MarkdownEditorComponent}, components: {},
computed: {}, computed: {},
data() { data() {
return {} return {}
@ -64,5 +86,46 @@ export default {
</script> </script>
<style> <style>
.swipe-container {
display: flex;
overflow: auto;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
/* scrollbar should be hidden */
.swipe-container::-webkit-scrollbar {
display: none;
}
.swipe-container {
scrollbar-width: none; /* For Firefox */
}
/* main element should always snap into view */
.swipe-element {
scroll-snap-align: start;
}
.swipe-icon {
color: white;
position: sticky;
left: 16px;
right: 16px;
}
/* swipe-actions and element should be 100% wide */
.swipe-action,
.swipe-element {
min-width: 100%;
}
.swipe-action {
display: flex;
align-items: center;
}
.right {
justify-content: flex-end;
}
</style> </style>