Did some things
This commit is contained in:
Kacper Zacharski
parent
9e47086bb5
commit
0e91544061
|
|
@ -1,7 +1,7 @@
|
|||
import { CapacitorConfig } from '@capacitor/cli';
|
||||
|
||||
const config: CapacitorConfig = {
|
||||
appId: 'io.ionic.starter',
|
||||
appId: 'xyz.puffercat.apps',
|
||||
appName: 'Puffercat Apps',
|
||||
webDir: 'dist',
|
||||
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">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Ionic App</title>
|
||||
<title>Puffercat Apps</title>
|
||||
|
||||
<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> = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/tabs/tab1'
|
||||
redirect: '/tabs/apps'
|
||||
},
|
||||
{
|
||||
path: '/tabs/',
|
||||
|
|
@ -13,19 +13,15 @@ const routes: Array<RouteRecordRaw> = [
|
|||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirect: '/tabs/tab1'
|
||||
redirect: '/tabs/apps'
|
||||
},
|
||||
{
|
||||
path: 'tab1',
|
||||
component: () => import('@/views/Tab1Page.vue')
|
||||
path: 'apps',
|
||||
component: () => import('@/views/Apps.vue')
|
||||
},
|
||||
{
|
||||
path: 'tab2',
|
||||
component: () => import('@/views/Tab2Page.vue')
|
||||
},
|
||||
{
|
||||
path: 'tab3',
|
||||
component: () => import('@/views/Tab3Page.vue')
|
||||
path: 'soon',
|
||||
component: () => import('@/views/ComingSoon.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,28 +4,26 @@ http://ionicframework.com/docs/theming/ */
|
|||
/** Ionic CSS Variables **/
|
||||
:root {
|
||||
/** primary **/
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary: #009473;
|
||||
--ion-color-primary-rgb: 0,148,115;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
--ion-color-primary-shade: #008265;
|
||||
--ion-color-primary-tint: #1a9f81;
|
||||
|
||||
/** secondary **/
|
||||
--ion-color-secondary: #3dc2ff;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary: #00726A;
|
||||
--ion-color-secondary-rgb: 0,114,106;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
--ion-color-secondary-shade: #00645d;
|
||||
--ion-color-secondary-tint: #1a8079;
|
||||
|
||||
/** tertiary **/
|
||||
--ion-color-tertiary: #5260ff;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary: #005060;
|
||||
--ion-color-tertiary-rgb: 0,80,96;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-shade: #4854e0;
|
||||
--ion-color-tertiary-tint: #6370ff;
|
||||
--ion-color-tertiary-shade: #004654;
|
||||
--ion-color-tertiary-tint: #1a6270;
|
||||
|
||||
/** success **/
|
||||
--ion-color-success: #2dd36f;
|
||||
|
|
@ -83,26 +81,26 @@ http://ionicframework.com/docs/theming/ */
|
|||
*/
|
||||
|
||||
body {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66,140,255;
|
||||
--ion-color-primary: #009473;
|
||||
--ion-color-primary-rgb: 0,148,115;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
--ion-color-primary-shade: #008265;
|
||||
--ion-color-primary-tint: #1a9f81;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80,200,255;
|
||||
--ion-color-secondary: #00726A;
|
||||
--ion-color-secondary-rgb: 0,114,106;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
--ion-color-secondary-shade: #00645d;
|
||||
--ion-color-secondary-tint: #1a8079;
|
||||
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106,100,255;
|
||||
--ion-color-tertiary: #005060;
|
||||
--ion-color-tertiary-rgb: 0,80,96;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
--ion-color-tertiary-shade: #004654;
|
||||
--ion-color-tertiary-tint: #1a6270;
|
||||
|
||||
--ion-color-success: #2fdf75;
|
||||
--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-router-outlet></ion-router-outlet>
|
||||
<ion-tab-bar slot="bottom">
|
||||
<ion-tab-button tab="tab1" href="/tabs/tab1">
|
||||
<ion-icon :icon="triangle" />
|
||||
<ion-label>Tab 1</ion-label>
|
||||
<ion-tab-button tab="apps" href="/tabs/apps">
|
||||
<ion-icon :icon="apps" />
|
||||
<ion-label>Apps</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="tab2" href="/tabs/tab2">
|
||||
<ion-icon :icon="ellipse" />
|
||||
<ion-label>Tab 2</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 tab="soon" href="/tabs/soon">
|
||||
<ion-icon :icon="time" />
|
||||
<ion-label>Coming Soon</ion-label>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
</ion-tabs>
|
||||
|
|
@ -25,7 +20,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent } from '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({
|
||||
name: 'TabsPage',
|
||||
|
|
@ -35,6 +30,8 @@ export default defineComponent({
|
|||
ellipse,
|
||||
square,
|
||||
triangle,
|
||||
apps,
|
||||
time,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { mount } from '@vue/test-utils'
|
||||
import Tab1Page from '@/views/Tab1Page.vue'
|
||||
import Tab1Page from '@/views/Apps.vue'
|
||||
|
||||
describe('Tab1Page.vue', () => {
|
||||
it('renders tab 1 Tab1Page', () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue