From fb8e04fee57fc2edf7009179ec1c6d435581b03d Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sat, 10 Feb 2024 09:07:03 +0100
Subject: [PATCH] swipe test view

---
 vue/src/apps/TestView/TestView.vue | 93 +++++++++++++++++++++++++-----
 1 file changed, 78 insertions(+), 15 deletions(-)

diff --git a/vue/src/apps/TestView/TestView.vue b/vue/src/apps/TestView/TestView.vue
index d1faca5c..dcef3101 100644
--- a/vue/src/apps/TestView/TestView.vue
+++ b/vue/src/apps/TestView/TestView.vue
@@ -3,22 +3,44 @@
     <div id="app">
         <div>
 
-            <generic-multiselect
-                :model="Models.SHOPPING_CATEGORY"
-                :multiple="false"
-            ></generic-multiselect>
-            <generic-multiselect
-                :model="Models.SHOPPING_CATEGORY"
-                :multiple="false"
-            ></generic-multiselect>
-            <generic-multiselect
-                :model="Models.SHOPPING_CATEGORY"
-                :multiple="false"
-            ></generic-multiselect>
-            ----
+            <div class="swipe-container">
+                <div class="swipe-action bg-success">
+                    <i class="swipe-icon fa-fw fas fa-check"></i>
+                </div>
 
-            <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>
 </template>
@@ -45,7 +67,7 @@ Vue.use(BootstrapVue)
 export default {
     name: "TestView",
     mixins: [ApiMixin],
-    components: {GenericMultiselect, MarkdownEditorComponent},
+    components: {},
     computed: {},
     data() {
         return {}
@@ -64,5 +86,46 @@ export default {
 </script>
 
 <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>