Merge pull request #25 from byrdsandbytes/feature/sc-2040-add-back-buttons-to-sub-pages

Feature/sc 2040 add back buttons to sub pages

Author: Idrimi

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.3.0] - 2025-08-30
+
+### Added
+- Add livereload command for native platform development
+
+### Fixed
+- Fix tabbar issue on iPad
+
+
 ## [0.2.2] - 2025-08-12
 
 ### Added

ionic.config.json

@@ -1,5 +1,7 @@
 {
   "name": "beatnik",
-  "integrations": {},
+  "integrations": {
+    "capacitor": {}
+  },
   "type": "angular"
 }

package-lock.json

@@ -1,8 +1,8 @@
 {
   "name": "beatnik",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "author": "byrds & bytes gmbh",
-  "homepage": "https://beatnik.ch",
+  "homepage": "https://beatnik.audio",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -13,7 +13,9 @@
     "generate:service": "ionic g service services/$npm_config_name && ng generate --skip-tests=true class model/$npm_config_name --type=model",
     "generate:component": "ionic g component $npm_config_name && ng generate module $npm_config_name",
     "generate:page": "ionic g page pages/$npm_config_name",
-    "generate:guard": "ng g guard guards/$npm_config_name"
+    "generate:guard": "ng g guard guards/$npm_config_name",
+    "ios": "ionic cap run ios -l --external",
+    "android": "ionic cap run android -l --external"
   },
   "private": true,
   "dependencies": {
@@ -26,9 +28,9 @@
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
     "@capacitor/android": "^7.2.0",
-    "@capacitor/app": "^7.0.1",
-    "@capacitor/core": "^7.2.0",
-    "@capacitor/haptics": "^7.0.1",
+    "@capacitor/app": "7.0.2",
+    "@capacitor/core": "7.4.2",
+    "@capacitor/haptics": "7.0.2",
     "@capacitor/ios": "^7.2.0",
     "@capacitor/keyboard": "7.0.1",
     "@capacitor/preferences": "^7.0.1",
@@ -56,7 +58,7 @@
     "@angular/compiler-cli": "^19.0.0",
     "@angular/language-service": "^19.0.0",
     "@capacitor/assets": "^3.0.5",
-    "@capacitor/cli": "^7.2.0",
+    "@capacitor/cli": "7.4.2",
     "@ionic/angular-toolkit": "^12.0.0",
     "@types/jasmine": "~5.1.0",
     "@typescript-eslint/eslint-plugin": "^8.18.0",

package.json

@@ -25,6 +25,10 @@
         <ion-icon slot="start" name="information-circle"></ion-icon>
         <ion-label>About</ion-label>
       </ion-item>
+      <ion-item lines="none">
+      </ion-item>
     </ion-list>
   </div>
+          <p class="version-label">v.{{version}}</p>
+
 </ion-content>

src/app/pages/menu/menu.page.html

@@ -0,0 +1,6 @@
+.version-label {
+  font-size: 12px;
+  color: gray;
+  text-align: center;
+  margin-top: 16px;
+}

src/app/pages/menu/menu.page.scss

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import packageJson from '../../../../package.json';
 
 @Component({
   selector: 'app-menu',
@@ -8,9 +9,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MenuPage implements OnInit {
 
+  version: string = '0.0.0';
+
   constructor() { }
 
   ngOnInit() {
+       this.version = packageJson.version;
+
+  }
+
+  async getVersion() {
+    // get version from package.json
   }
+  
 
 }

src/app/pages/menu/menu.page.ts

@@ -1,4 +1,4 @@
-<ion-tabs>
+<ion-tabs >
   <div class="page-padding-bottom">
     </div>
   <ion-tab-bar class="tabbar" slot="bottom" color="dark">

src/app/tabs/tabs.page.html

@@ -1,35 +0,0 @@
-.bottom-sheet {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 40px;                // stays under the tab-bar
-    height: 90vh;                // <-- max-height breakpoint
-    background: var(--ion-color-dark);
-    border-radius: 16px 16px 0 0;
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
-    transition: transform 0.3s ease;
-    z-index: 10;
-    will-change: transform;
-    /* Optional, avoids flash of full sheet before TS runs */
-    transform: translateY(calc(90vh - 120px));   // collapsed offset (min-height)
-  }
-  
-  .drag-handle {
-    width: 40px;
-    height: 5px;
-    background: #ccc;
-    border-radius: 5px;
-    margin: 10px auto;
-  }
-  
-  .backdrop {
-    position: fixed;
-    inset: 0;                                   // shorthand for top/left/right/bottom
-    background: rgba(0,0,0,.3);
-    z-index: 5;
-  }
-
-  .page-padding-bottom {
-    margin-bottom: 300px; // Adjust as needed to ensure content is not obscured by the tab bar
-  }
-  

src/app/tabs/tabs.page.scss

@@ -55,12 +55,14 @@
     // --height: 50%;
     --border-radius: 16px;
     // --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    margin-bottom: calc(50px + var(--ion-safe-area-bottom, 0));
+    margin-bottom: calc(8vh + var(--ion-safe-area-bottom, 12px)); // Adjust for tab bar and safe area
     // margin-bottom: (var(--ion-safe-area-bottom, 0) + 50px);
     --width: 100%;
   }
 
-  /* src/global.scss */
+ion-tab-bar {
+  height: 8vh; /* Sets height to 8% of the viewport's height */
+}
 
 /* Regular */
 @font-face {