Did some things
This commit is contained in:
Kacper Zacharski
parent
9e47086bb5
commit
0e91544061
|
|
@ -1,7 +1,7 @@
|
||||||
import { CapacitorConfig } from '@capacitor/cli';
|
import { CapacitorConfig } from '@capacitor/cli';
|
||||||
|
|
||||||
const config: CapacitorConfig = {
|
const config: CapacitorConfig = {
|
||||||
appId: 'io.ionic.starter',
|
appId: 'xyz.puffercat.apps',
|
||||||
appName: 'Puffercat Apps',
|
appName: 'Puffercat Apps',
|
||||||
webDir: 'dist',
|
webDir: 'dist',
|
||||||
bundledWebRuntime: false
|
bundledWebRuntime: false
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 930 B After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 143 KiB |
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Ionic App</title>
|
<title>Puffercat Apps</title>
|
||||||
|
|
||||||
<base href="/" />
|
<base href="/" />
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 808 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 455 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -5,7 +5,7 @@ import TabsPage from '../views/TabsPage.vue'
|
||||||
const routes: Array<RouteRecordRaw> = [
|
const routes: Array<RouteRecordRaw> = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
redirect: '/tabs/tab1'
|
redirect: '/tabs/apps'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/tabs/',
|
path: '/tabs/',
|
||||||
|
|
@ -13,19 +13,15 @@ const routes: Array<RouteRecordRaw> = [
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
redirect: '/tabs/tab1'
|
redirect: '/tabs/apps'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'tab1',
|
path: 'apps',
|
||||||
component: () => import('@/views/Tab1Page.vue')
|
component: () => import('@/views/Apps.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'tab2',
|
path: 'soon',
|
||||||
component: () => import('@/views/Tab2Page.vue')
|
component: () => import('@/views/ComingSoon.vue')
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'tab3',
|
|
||||||
component: () => import('@/views/Tab3Page.vue')
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,28 +4,26 @@ http://ionicframework.com/docs/theming/ */
|
||||||
/** Ionic CSS Variables **/
|
/** Ionic CSS Variables **/
|
||||||
:root {
|
:root {
|
||||||
/** primary **/
|
/** primary **/
|
||||||
--ion-color-primary: #3880ff;
|
--ion-color-primary: #009473;
|
||||||
--ion-color-primary-rgb: 56, 128, 255;
|
--ion-color-primary-rgb: 0,148,115;
|
||||||
--ion-color-primary-contrast: #ffffff;
|
--ion-color-primary-contrast: #ffffff;
|
||||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||||
--ion-color-primary-shade: #3171e0;
|
--ion-color-primary-shade: #008265;
|
||||||
--ion-color-primary-tint: #4c8dff;
|
--ion-color-primary-tint: #1a9f81;
|
||||||
|
|
||||||
/** secondary **/
|
--ion-color-secondary: #00726A;
|
||||||
--ion-color-secondary: #3dc2ff;
|
--ion-color-secondary-rgb: 0,114,106;
|
||||||
--ion-color-secondary-rgb: 61, 194, 255;
|
--ion-color-secondary-contrast: #ffffff;
|
||||||
--ion-color-secondary-contrast: #ffffff;
|
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
--ion-color-secondary-shade: #00645d;
|
||||||
--ion-color-secondary-shade: #36abe0;
|
--ion-color-secondary-tint: #1a8079;
|
||||||
--ion-color-secondary-tint: #50c8ff;
|
|
||||||
|
|
||||||
/** tertiary **/
|
--ion-color-tertiary: #005060;
|
||||||
--ion-color-tertiary: #5260ff;
|
--ion-color-tertiary-rgb: 0,80,96;
|
||||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
--ion-color-tertiary-contrast: #ffffff;
|
||||||
--ion-color-tertiary-contrast: #ffffff;
|
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
--ion-color-tertiary-shade: #004654;
|
||||||
--ion-color-tertiary-shade: #4854e0;
|
--ion-color-tertiary-tint: #1a6270;
|
||||||
--ion-color-tertiary-tint: #6370ff;
|
|
||||||
|
|
||||||
/** success **/
|
/** success **/
|
||||||
--ion-color-success: #2dd36f;
|
--ion-color-success: #2dd36f;
|
||||||
|
|
@ -83,26 +81,26 @@ http://ionicframework.com/docs/theming/ */
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
--ion-color-primary: #428cff;
|
--ion-color-primary: #009473;
|
||||||
--ion-color-primary-rgb: 66,140,255;
|
--ion-color-primary-rgb: 0,148,115;
|
||||||
--ion-color-primary-contrast: #ffffff;
|
--ion-color-primary-contrast: #ffffff;
|
||||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||||
--ion-color-primary-shade: #3a7be0;
|
--ion-color-primary-shade: #008265;
|
||||||
--ion-color-primary-tint: #5598ff;
|
--ion-color-primary-tint: #1a9f81;
|
||||||
|
|
||||||
--ion-color-secondary: #50c8ff;
|
--ion-color-secondary: #00726A;
|
||||||
--ion-color-secondary-rgb: 80,200,255;
|
--ion-color-secondary-rgb: 0,114,106;
|
||||||
--ion-color-secondary-contrast: #ffffff;
|
--ion-color-secondary-contrast: #ffffff;
|
||||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||||
--ion-color-secondary-shade: #46b0e0;
|
--ion-color-secondary-shade: #00645d;
|
||||||
--ion-color-secondary-tint: #62ceff;
|
--ion-color-secondary-tint: #1a8079;
|
||||||
|
|
||||||
--ion-color-tertiary: #6a64ff;
|
--ion-color-tertiary: #005060;
|
||||||
--ion-color-tertiary-rgb: 106,100,255;
|
--ion-color-tertiary-rgb: 0,80,96;
|
||||||
--ion-color-tertiary-contrast: #ffffff;
|
--ion-color-tertiary-contrast: #ffffff;
|
||||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||||
--ion-color-tertiary-shade: #5d58e0;
|
--ion-color-tertiary-shade: #004654;
|
||||||
--ion-color-tertiary-tint: #7974ff;
|
--ion-color-tertiary-tint: #1a6270;
|
||||||
|
|
||||||
--ion-color-success: #2fdf75;
|
--ion-color-success: #2fdf75;
|
||||||
--ion-color-success-rgb: 47,223,117;
|
--ion-color-success-rgb: 47,223,117;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
<template>
|
||||||
|
<ion-page>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-buttons slot="primary">
|
||||||
|
<ion-button id="menu-trigger2">
|
||||||
|
<ion-icon slot="icon-only" :icon="ellipsisVertical" ></ion-icon>
|
||||||
|
</ion-button>
|
||||||
|
<ion-popover trigger="menu-trigger2" triggerAction="click">
|
||||||
|
<ng-template>
|
||||||
|
<ion-content>
|
||||||
|
<ion-list>
|
||||||
|
<ion-item :button="true" :detail="false" lines="none" id="open-about2">About</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
<ion-modal ref="modal" trigger="open-about2">
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>About Puffercat Apps</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button @click="dismiss()">Close</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content class="ion-padding modalContent">
|
||||||
|
<img src="../assets/Icon_Puffercat_Apps.png" class="logoAbout">
|
||||||
|
<h1>Puffercat Apps</h1>
|
||||||
|
<h4>v0.0.1 alpha</h4>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<div class="tableLabel">
|
||||||
|
<ion-label color="medium" class="tableLabel" style="padding-left: 30px;">Made by Puffercat</ion-label>
|
||||||
|
<ion-list :inset="true" style="border-radius: 25px;">
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://puffercat.xyz?utm_source=Puffercat+Apps">Website</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://twitter.com/@puffercatt">Twitter</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://mastodon.social/@puffercat">Mastodon</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://github.com/KZacharski">GitHub</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://puffercatchannel.t.me">Telegram channel</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://puffercat.t.me">Telegram profile</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="mailto:puffercatt+pufferapps@gmail.com">E-Mail</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
<br>
|
||||||
|
<ion-label color="medium" class="tableLabel" style="padding-left: 30px;">Made with</ion-label>
|
||||||
|
<ion-list :inset="true" style="border-radius: 25px;">
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://vuejs.org/">
|
||||||
|
<img src="../assets/Logo_Vue.png" class="vueLogoLight aboutFrameworkLogo">
|
||||||
|
<img src="../assets/Logo_Vue_Dark.png" class="vueLogoDark aboutFrameworkLogo">
|
||||||
|
</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://ionicframework.com"><img src="../assets/Logo_Ionic.png" class="aboutFrameworkLogo"></a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
<br><br><br>
|
||||||
|
</div>
|
||||||
|
</ion-content>
|
||||||
|
</ion-modal>
|
||||||
|
</ion-content>
|
||||||
|
</ng-template>
|
||||||
|
</ion-popover>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Apps</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content :fullscreen="true">
|
||||||
|
<ion-header collapse="condense">
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title size="large">Apps</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-grid>
|
||||||
|
<ion-row class="column-standard">
|
||||||
|
<ion-col size="auto">
|
||||||
|
<img src="../assets/Icon_PufferIcons.png" class="icon">
|
||||||
|
</ion-col>
|
||||||
|
<ion-col size="auto" class="description-column">
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><h4 class="size-appname">PufferIcons</h4></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col class="download-column">
|
||||||
|
<ion-button shape="round"><ion-icon :icon="arrowDown" /></ion-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row class="column-standard">
|
||||||
|
<ion-col size="auto">
|
||||||
|
<img src="../assets/Icon_Puffercat_Apps.png" class="icon">
|
||||||
|
</ion-col>
|
||||||
|
<ion-col size="auto" class="description-column">
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><h4 class="size-appname">Puffercat Apps</h4></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><ion-icon :icon="logoPwa" class="size-appname-icon"/></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col class="download-column">
|
||||||
|
<ion-button shape="round"><ion-icon :icon="arrowDown" /></ion-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row class="column-standard">
|
||||||
|
<ion-col size="auto">
|
||||||
|
<img src="../assets/Icon_Shapes.png" class="icon">
|
||||||
|
</ion-col>
|
||||||
|
<ion-col size="auto" class="description-column">
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><h4 class="size-appname">Shapes</h4></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col class="download-column">
|
||||||
|
<ion-button shape="round"><ion-icon :icon="arrowDown" /></ion-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row class="column-standard">
|
||||||
|
<ion-col size="auto">
|
||||||
|
<img src="../assets/Icon_Blurry.png" class="icon">
|
||||||
|
</ion-col>
|
||||||
|
<ion-col size="auto" class="description-column">
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><h4 class="size-appname">Blurry Wallpapers</h4></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col class="download-column">
|
||||||
|
<ion-button shape="round"><ion-icon :icon="arrowDown" /></ion-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row class="column-standard">
|
||||||
|
<ion-col size="auto">
|
||||||
|
<img src="../assets/Icon_Tipper.png" class="icon">
|
||||||
|
</ion-col>
|
||||||
|
<ion-col size="auto" class="description-column">
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><h4 class="size-appname">Tipper by myCALC</h4></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col class="download-column">
|
||||||
|
<ion-button shape="round"><ion-icon :icon="arrowDown" /></ion-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
</ion-grid>
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid, IonRow, IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton,
|
||||||
|
IonModal,
|
||||||
|
IonItem,
|
||||||
|
IonList,
|
||||||
|
IonAvatar,
|
||||||
|
IonImg,
|
||||||
|
IonLabel } from '@ionic/vue';
|
||||||
|
import ExploreContainer from '@/components/ExploreContainer.vue';
|
||||||
|
import { logoAndroid, arrowDown, logoPwa, ellipsisVertical } from 'ionicons/icons';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Tab1Page',
|
||||||
|
components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonButtons, IonIcon,
|
||||||
|
IonModal,
|
||||||
|
IonItem,
|
||||||
|
IonList },
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
logoAndroid,
|
||||||
|
arrowDown,
|
||||||
|
logoPwa,
|
||||||
|
ellipsisVertical
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
dismiss() {
|
||||||
|
this.$refs.modal.$el.dismiss();
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.column-standard {
|
||||||
|
background-color: var(--ion-color-light-shade);
|
||||||
|
color: var(--ion-color-light-contrast);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 25px;
|
||||||
|
margin: 5px;
|
||||||
|
margin-top: 15px;
|
||||||
|
} .icon {
|
||||||
|
width: 70px;
|
||||||
|
margin-right: 5px;
|
||||||
|
} ion-button {
|
||||||
|
--box-shadow: 0px;
|
||||||
|
} .download-column {
|
||||||
|
text-align: right;
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
align-items: center;
|
||||||
|
} .description-column {
|
||||||
|
align-items: center;
|
||||||
|
} .size-appname {
|
||||||
|
font-size: 18px;
|
||||||
|
} .size-appname-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
} .logoAbout {
|
||||||
|
width: 125px;
|
||||||
|
margin: 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
} .modalContent {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
} .tableLabel {
|
||||||
|
text-align: left;
|
||||||
|
} .vueLogoLight {
|
||||||
|
display: inline;
|
||||||
|
} .vueLogoDark {
|
||||||
|
display: none;
|
||||||
|
} @media (prefers-color-scheme: dark) {
|
||||||
|
.vueLogoLight {
|
||||||
|
display: none;
|
||||||
|
} .vueLogoDark {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
} .aboutFrameworkLogo {
|
||||||
|
width: 175px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,220 @@
|
||||||
|
<template>
|
||||||
|
<ion-page>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-buttons slot="primary">
|
||||||
|
<ion-button id="menu-trigger">
|
||||||
|
<ion-icon slot="icon-only" :icon="ellipsisVertical" ></ion-icon>
|
||||||
|
</ion-button>
|
||||||
|
<ion-popover trigger="menu-trigger" triggerAction="click">
|
||||||
|
<ng-template>
|
||||||
|
<ion-content>
|
||||||
|
<ion-list>
|
||||||
|
<ion-item :button="true" :detail="false" lines="none" id="open-about">About</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
<ion-modal ref="modal" trigger="open-about">
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>About Puffercat Apps</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button @click="dismiss()">Close</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content class="ion-padding modalContent">
|
||||||
|
<img src="../assets/Icon_Puffercat_Apps.png" class="logoAbout">
|
||||||
|
<h1>Puffercat Apps</h1>
|
||||||
|
<h4>v0.0.1 alpha</h4>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<div class="tableLabel">
|
||||||
|
<ion-label color="medium" class="tableLabel" style="padding-left: 30px;">Made by Puffercat</ion-label>
|
||||||
|
<ion-list :inset="true" style="border-radius: 25px;">
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://puffercat.xyz?utm_source=Puffercat+Apps">Website</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://twitter.com/@puffercatt">Twitter</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://mastodon.social/@puffercat">Mastodon</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://github.com/KZacharski">GitHub</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://puffercatchannel.t.me">Telegram channel</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://puffercat.t.me">Telegram profile</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="mailto:puffercatt+pufferapps@gmail.com">E-Mail</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
<br>
|
||||||
|
<ion-label color="medium" class="tableLabel" style="padding-left: 30px;">Made with</ion-label>
|
||||||
|
<ion-list :inset="true" style="border-radius: 25px;">
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://vuejs.org/">
|
||||||
|
<img src="../assets/Logo_Vue.png" class="vueLogoLight aboutFrameworkLogo">
|
||||||
|
<img src="../assets/Logo_Vue_Dark.png" class="vueLogoDark aboutFrameworkLogo">
|
||||||
|
</a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label><a href="https://ionicframework.com"><img src="../assets/Logo_Ionic.png" class="aboutFrameworkLogo"></a></ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
<br><br><br>
|
||||||
|
</div>
|
||||||
|
</ion-content>
|
||||||
|
</ion-modal>
|
||||||
|
</ion-content>
|
||||||
|
</ng-template>
|
||||||
|
</ion-popover>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Coming Soon</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content :fullscreen="true">
|
||||||
|
<ion-header collapse="condense">
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title size="large">Coming Soon</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-grid>
|
||||||
|
<ion-row class="column-standard">
|
||||||
|
<ion-col size="auto">
|
||||||
|
<img src="../assets/Icon_PufferIcons_Filled.png" class="icon">
|
||||||
|
</ion-col>
|
||||||
|
<ion-col size="auto" class="description-column">
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><h4 class="size-appname">PufferIcons Filled</h4></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col class="download-column">
|
||||||
|
<ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row class="column-standard">
|
||||||
|
<ion-col size="auto">
|
||||||
|
<img src="../assets/Icon_WallCat.png" class="icon">
|
||||||
|
</ion-col>
|
||||||
|
<ion-col size="auto" class="description-column">
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><h4 class="size-appname">WallCat</h4></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col class="download-column">
|
||||||
|
<ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row class="column-standard">
|
||||||
|
<ion-col size="auto">
|
||||||
|
<img src="../assets/Icon_Tipper3.png" class="icon">
|
||||||
|
</ion-col>
|
||||||
|
<ion-col size="auto" class="description-column">
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><h4 class="size-appname">Tipper3</h4></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row>
|
||||||
|
<ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
|
||||||
|
</ion-row>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col class="download-column">
|
||||||
|
<ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
</ion-grid>
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid, IonRow, IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton,
|
||||||
|
IonModal,
|
||||||
|
IonItem,
|
||||||
|
IonList,
|
||||||
|
IonAvatar,
|
||||||
|
IonImg,
|
||||||
|
IonLabel } from '@ionic/vue';
|
||||||
|
import ExploreContainer from '@/components/ExploreContainer.vue';
|
||||||
|
import { logoAndroid, arrowDown, logoPwa, ellipsisVertical } from 'ionicons/icons';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Tab1Page',
|
||||||
|
components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonButtons, IonIcon,
|
||||||
|
IonModal,
|
||||||
|
IonItem,
|
||||||
|
IonList },
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
logoAndroid,
|
||||||
|
arrowDown,
|
||||||
|
logoPwa,
|
||||||
|
ellipsisVertical
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
dismiss() {
|
||||||
|
this.$refs.modal.$el.dismiss();
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.column-standard {
|
||||||
|
background-color: var(--ion-color-light-shade);
|
||||||
|
color: var(--ion-color-light-contrast);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 25px;
|
||||||
|
margin: 5px;
|
||||||
|
margin-top: 15px;
|
||||||
|
} .icon {
|
||||||
|
width: 70px;
|
||||||
|
margin-right: 5px;
|
||||||
|
} ion-button {
|
||||||
|
--box-shadow: 0px;
|
||||||
|
} .download-column {
|
||||||
|
text-align: right;
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
align-items: center;
|
||||||
|
} .description-column {
|
||||||
|
align-items: center;
|
||||||
|
} .size-appname {
|
||||||
|
font-size: 18px;
|
||||||
|
} .size-appname-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
} .logoAbout {
|
||||||
|
width: 125px;
|
||||||
|
margin: 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
} .modalContent {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
} .tableLabel {
|
||||||
|
text-align: left;
|
||||||
|
} .vueLogoLight {
|
||||||
|
display: inline;
|
||||||
|
} .vueLogoDark {
|
||||||
|
display: none;
|
||||||
|
} @media (prefers-color-scheme: dark) {
|
||||||
|
.vueLogoLight {
|
||||||
|
display: none;
|
||||||
|
} .vueLogoDark {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
} .aboutFrameworkLogo {
|
||||||
|
width: 175px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<template>
|
|
||||||
<ion-page>
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Tab 1</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content :fullscreen="true">
|
|
||||||
<ion-header collapse="condense">
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title size="large">Tab 1</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ExploreContainer name="Tab 1 page" />
|
|
||||||
</ion-content>
|
|
||||||
</ion-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
|
|
||||||
import ExploreContainer from '@/components/ExploreContainer.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'Tab1Page',
|
|
||||||
components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<template>
|
|
||||||
<ion-page>
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Tab 2</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content :fullscreen="true">
|
|
||||||
<ion-header collapse="condense">
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title size="large">Tab 2</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ExploreContainer name="Tab 2 page" />
|
|
||||||
</ion-content>
|
|
||||||
</ion-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
|
|
||||||
import ExploreContainer from '@/components/ExploreContainer.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'Tab2Page',
|
|
||||||
components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<template>
|
|
||||||
<ion-page>
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Tab 3</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content :fullscreen="true">
|
|
||||||
<ion-header collapse="condense">
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title size="large">Tab 3</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ExploreContainer name="Tab 3 page" />
|
|
||||||
</ion-content>
|
|
||||||
</ion-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
|
|
||||||
import ExploreContainer from '@/components/ExploreContainer.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'Tab3Page',
|
|
||||||
components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -3,19 +3,14 @@
|
||||||
<ion-tabs>
|
<ion-tabs>
|
||||||
<ion-router-outlet></ion-router-outlet>
|
<ion-router-outlet></ion-router-outlet>
|
||||||
<ion-tab-bar slot="bottom">
|
<ion-tab-bar slot="bottom">
|
||||||
<ion-tab-button tab="tab1" href="/tabs/tab1">
|
<ion-tab-button tab="apps" href="/tabs/apps">
|
||||||
<ion-icon :icon="triangle" />
|
<ion-icon :icon="apps" />
|
||||||
<ion-label>Tab 1</ion-label>
|
<ion-label>Apps</ion-label>
|
||||||
</ion-tab-button>
|
</ion-tab-button>
|
||||||
|
|
||||||
<ion-tab-button tab="tab2" href="/tabs/tab2">
|
<ion-tab-button tab="soon" href="/tabs/soon">
|
||||||
<ion-icon :icon="ellipse" />
|
<ion-icon :icon="time" />
|
||||||
<ion-label>Tab 2</ion-label>
|
<ion-label>Coming Soon</ion-label>
|
||||||
</ion-tab-button>
|
|
||||||
|
|
||||||
<ion-tab-button tab="tab3" href="/tabs/tab3">
|
|
||||||
<ion-icon :icon="square" />
|
|
||||||
<ion-label>Tab 3</ion-label>
|
|
||||||
</ion-tab-button>
|
</ion-tab-button>
|
||||||
</ion-tab-bar>
|
</ion-tab-bar>
|
||||||
</ion-tabs>
|
</ion-tabs>
|
||||||
|
|
@ -25,7 +20,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
|
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
|
||||||
import { ellipse, square, triangle } from 'ionicons/icons';
|
import { ellipse, square, triangle, apps, time } from 'ionicons/icons';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'TabsPage',
|
name: 'TabsPage',
|
||||||
|
|
@ -35,6 +30,8 @@ export default defineComponent({
|
||||||
ellipse,
|
ellipse,
|
||||||
square,
|
square,
|
||||||
triangle,
|
triangle,
|
||||||
|
apps,
|
||||||
|
time,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { mount } from '@vue/test-utils'
|
import { mount } from '@vue/test-utils'
|
||||||
import Tab1Page from '@/views/Tab1Page.vue'
|
import Tab1Page from '@/views/Apps.vue'
|
||||||
|
|
||||||
describe('Tab1Page.vue', () => {
|
describe('Tab1Page.vue', () => {
|
||||||
it('renders tab 1 Tab1Page', () => {
|
it('renders tab 1 Tab1Page', () => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue