adjusts styles

Author: mvrpl

app.go

@@ -73,7 +73,8 @@ func (a *App) GetCheatSheet(program string) string {
 		var session string
 		_ = rows.Scan(&command, &about, &session)
 		commands := map[string]string{
-			command: about,
+			"command": command,
+			"about":   about,
 		}
 		data[session] = append(data[session], commands)
 	}

frontend/package-lock.json

@@ -1,21 +1,23 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@primeuix/themes": "^1.0.1",
+    "primevue": "^4.3.3",
     "vue": "^3.2.37"
   },
   "devDependencies": {
+    "@babel/types": "^7.18.10",
     "@vitejs/plugin-vue": "^3.0.3",
     "typescript": "^4.6.4",
     "vite": "^3.0.7",
-    "vue-tsc": "^1.8.27",
-    "@babel/types": "^7.18.10"
+    "vue-tsc": "^1.8.27"
   }
 }

frontend/package.json

@@ -1 +1 @@
-bb7ffb87329c9ad4990374471d4ce9a4
+ced8d5b88095d219f174b5ebe09e134e

frontend/package.json.md5

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
 import { GetPrograms, GetCheatSheet } from '../wailsjs/go/main/App'
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Menu from 'primevue/menu';
 
 const data = reactive({
   programs: [],
@@ -28,13 +31,11 @@ listPrograms()
       <br>
     </div>
     <div v-for="(value, key) in data.currentContent" class="content-area">
-      <h4 id="tabela1">{{ key }}</h4>
-      <table v-for="vvalue in value">
-        <tr v-for="(chv, vle) in vvalue">
-          <td>{{ chv }}</td>
-          <td>{{ vle }}</td>
-        </tr>
-      </table>
+      <h4>{{ key }}</h4>
+      <DataTable :value="value">
+        <Column field="command"></Column>
+        <Column field="about"></Column>
+      </DataTable>
     </div>
   </div>
 </template>
@@ -49,7 +50,6 @@ listPrograms()
 .vertical-menu {
   width: 200px;
   height: 100vh;
-  background-color: #f8f9fa;
   padding: 10px;
   position: fixed;
   overflow-y: scroll;
@@ -60,17 +60,13 @@ listPrograms()
 .vertical-menu a {
   display: block;
   padding: 10px;
-  color: #333;
   text-decoration: none;
 }
 
-.vertical-menu a:hover {
-  background-color: #ddd;
-}
-
 .content-area {
   margin-left: 220px;
-  padding: 20px;
+  padding-left: 20px;
+  padding-top: 5px;
   width: calc(100% - 220px);
 }
 </style>

frontend/src/App.vue

@@ -1,5 +1,18 @@
 import {createApp} from 'vue'
 import App from './App.vue'
 import './style.css';
+import PrimeVue from 'primevue/config'
+import Aura from '@primeuix/themes/aura'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.mount('#app')
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura,
+        options: {
+            prefix: 'p',
+            darkModeSelector: 'system',
+            cssLayer: false
+        }
+    }
+ })

frontend/src/main.ts

@@ -1,7 +1,3 @@
-html {
-    background-color: rgb(226, 226, 226);
-}
-
 body {
     margin: 0;
     display: flex;
@@ -22,37 +18,6 @@ body {
     height: 100vh;
 }
 
-.menu {
-    width: 200px;
-    height: 1000px;
-    background-color: #f4f4f4;
-    padding: 15px;
-    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-}
-.menu a {
-    display: block;
-    padding: 10px;
-    text-decoration: none;
-    color: #333;
-}
-.menu a:hover {
-    background-color: #ddd;
-}
-.content_tables {
-    flex-grow: 1;
-    flex: 1;
-    padding: 15px;
-}
-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 20px;
-}
-th, td {
-    border: 1px solid #ccc;
-    padding: 10px;
-    text-align: left;
-}
-th {
-    background-color: #f2f2f2;
+.p-datatable .p-datatable-thead {
+    display: none;
 }

frontend/src/style.css

@@ -13,7 +13,7 @@
   "info": {
     "companyName": "mvrpl_br",
     "productName": "Desktop Cheat Sheet",
-    "productVersion": "0.1.0"
+    "productVersion": "0.2.0"
   },
   "nsisType": "single"
 }