Merge pull request #18 from Smidra/Stepan-about_odkazy

Added about
Smidra · Feb 17, 2024 · e78b4af · e78b4af
2 parents 7ab7c37 + e79bb01
commit e78b4af
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 29 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="app">
         <ais-instant-search :search-client="searchClient" index-name="firmy">
-            <ais-configure :query="searchQuery" :hitsPerPage="hitsPerPage" :page="page - 1" />
+            <ais-configure :query="searchQuery" />
             <!-- Header -->
             <cv-header aria-label="Carbon header">
                 <cv-header-menu-button class="hamburger-menu" aria-label="Header menu" aria-controls="side-nav"
@@ -27,48 +27,38 @@
                         <cv-button kind="ghost" class="grey-text" @click="showModal = true">
                             Přidat novou firmu<add-icon />
                         </cv-button>
-
                         <EditModal v-model:visible="showModal" />
 
+
+                        <cv-button kind="ghost" class="grey-text" @click="showAbout = true">
+                            O nás
+                        </cv-button>
+                        <AboutModal v-model:visible="showAbout" />
+
                     </cv-side-nav>
                 </template>
 
             </cv-header>
 
             <!-- Main Content -->
-            <main id="#main-content">
-                <div class="top-pagination">
-                    <ais-pagination>
-                        <template v-slot="{ nbHits }">
-                            <cv-pagination @change="onPaginationChange" :number-of-items="nbHits" :page="page" :pageSizes="[
-                                12, { 'value': 15, 'selected': true }, 24, 48]" pageSizesLabel="Firem na stránku:">
-                                <template v-slot:range-text="{ scope }">
-                                    <span>{{ scope.start }}-{{ scope.end }} ze {{ scope.items }}</span>
-                                </template>
-                                <template v-slot:of-n-pages="{ scope }">
-                                    <span>ze {{ scope.pages }} stránek</span>
-                                </template>
-                            </cv-pagination>
-                        </template>
-                    </ais-pagination>
-                </div>
+            <main>
                 <ais-hits>
                     <template v-slot="{ items }">
                         <div class="tile-container">
-                            <ItemTile v-for=" item  in  items " :key="item.objectID" :item="item" />
+                            <ItemTile v-for="item in items" :key="item.objectID" :item="item" />
                         </div>
                     </template>
                 </ais-hits>
             </main>
 
         </ais-instant-search>
+        <AboutModal/>
     </div>
 </template>
 
 <script src="./script.js"></script>
 
-<style src="./style.css">
-</style>
+<style src="./style.css"></style>
 <style scoped>
 :deep(.hamburger-menu) {
     display: none;

diff --git a/src/components/AboutModal.vue b/src/components/AboutModal.vue
@@ -0,0 +1,49 @@
+<template>
+  <cv-modal>
+    <template v-slot:title>
+      <div class="modal-title-container">
+        <h2 class="modal-title">O nás</h2>
+      </div>
+    </template>
+    <!-- Content of the modal -->
+    <template v-slot:content>
+      <div class="modal-content">
+        <!-- Carbon design system form to modify data in Algolia -->
+        <p>
+          Webová stránka Datoun je inovativní platforma, která poskytuje
+          uživatelům možnost snadno a rychle vyhledávat české firmy. S důrazem
+          na přehlednost a uživatelskou přívětivost nabízí Datoun širokou škálu
+          funkcí a možností pro efektivní procházení produktů vyráběných v České republice.
+        </p>
+        <div class="about-section">
+      <a href="https://discord.com" class="about-button">Discord</a>
+      <a href="https://github.com/Smidra/datoun-katalog" class="about-button">Git hub</a>
+      <a href="https://docs.google.com/spreadsheets/d/1AEe_-kzGD-3siz9b7oaILM2IbTCpfKinbhFcpNSnlOg/edit#gid=0" class="about-button">Seznam firem</a>
+    </div>
+      </div>
+    </template>
+  </cv-modal>
+</template>
+
+<style scoped>
+
+.about-section {
+  text-align: center;
+  margin: auto;
+  margin-top: 20px;
+  max-width: 600px;
+}
+.about-button {
+  display: inline-block;
+  padding: 15px;
+  background-color: #007bff;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 5px;
+  margin: 20px 40px 0 20px;
+  cursor: pointer;
+}
+.about-button:hover {
+  background-color: #0056b3;
+}
+</style>
diff --git a/src/script.js b/src/script.js
@@ -1,10 +1,11 @@
 import { CvHeader, CvHeaderMenuButton, CvSkipToContent, CvHeaderName, CvSearch, CvSideNav } from '@carbon/vue';
-import { AisInstantSearch, AisHits, AisHierarchicalMenu, AisConfigure, AisPagination, AisStateResults } from 'vue-instantsearch/vue3/es';
+import { AisInstantSearch, AisHits, AisHierarchicalMenu, AisConfigure, AisStateResults } from 'vue-instantsearch/vue3/es';
 import algoliasearch from 'algoliasearch';
 import HierarchicalMenu from './components/HierarchicalMenu.vue';
 import ItemTile from './components/ItemTile.vue';
 import Add16 from '@carbon/icons-vue/es/add/16';
 import EditModal from './components/EditModal.vue';
+import AboutModal from './components/AboutModal.vue';
 
 export default {
     name: 'App',
@@ -21,21 +22,20 @@ export default {
         AisHits,
         AisHierarchicalMenu,
         AisConfigure,
-        AisPagination,
         AisStateResults,
         'add-icon': Add16,
         EditModal,
+        AboutModal,
     },
     data() {
         return {
             expandedSideNav: window.innerWidth > 768,
             useFixed: true,
-            hitsPerPage: 20,
-            page: 1,
             searchQuery: '',
             searchResults: [],
             searchClient: algoliasearch('S27OT8U78J', '995efbd2d821e03836317ed9c20812a3'),
             showModal: false,
+            showAbout: false,
         };
     },
     mounted() {
@@ -59,10 +59,6 @@ export default {
         handleClick(item, refine) {
             refine(item.value);
         },
-        onPaginationChange(data) {
-            this.hitsPerPage = data.length;
-            this.page = data.page;
-        },
         reloadPage() {
             location.reload();
         },