ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Basic setup (#1)

Browse Source 
Initial adjustments to project docs and trimming of start page down to likely needed components.

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: Georgi_Lab/ALVINN_f7#1
This commit is contained in:
Justin Georgi
2023-11-09 19:42:46 -07:00
parent f6ffb10c07
commit 24c38af0c8
5 changed files with 11 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/app.vue
View File

@@ -5,28 +5,15 @@
<f7-panel left cover dark>
<f7-view>
<f7-page>
<f7-navbar title="Left Panel"></f7-navbar>
<f7-block>Left panel content goes here</f7-block>
<f7-navbar title="ALVINN"></f7-navbar>
<f7-block>Menu Settings Here</f7-block>
</f7-page>
</f7-view>
</f7-panel>
<!-- Right panel with reveal effect-->
<f7-panel right reveal dark>
<f7-view>
<f7-page>
<f7-navbar title="Right Panel"></f7-navbar>
<f7-block>Right panel content goes here</f7-block>
</f7-page>
</f7-view>
</f7-panel>
<!-- Your main view, should have "view-main" class -->
<f7-view main class="safe-areas" url="/"></f7-view>
<!-- Popup -->
<f7-popup id="my-popup">
<f7-view>
@@ -43,33 +30,6 @@
</f7-view>
</f7-popup>
<f7-login-screen id="my-login-screen">
<f7-view>
<f7-page login-screen>
<f7-login-screen-title>Login</f7-login-screen-title>
<f7-list form>
<f7-list-input
type="text"
name="username"
placeholder="Your username"
v-model:value="username"
></f7-list-input>
<f7-list-input
type="password"
name="password"
placeholder="Your password"
v-model:value="password"
></f7-list-input>
</f7-list>
<f7-list>
<f7-list-button title="Sign In" @click="alertLoginData"></f7-list-button>
<f7-block-footer>
Some text about login information.<br>Click "Sign In" to close Login Screen
</f7-block-footer>
</f7-list>
</f7-page>
</f7-view>
</f7-login-screen>
</f7-app>
</template>
<script>
@@ -92,8 +52,6 @@
primary: '#002f65',
},
// App store
store: store,
// App routes
@@ -115,15 +73,6 @@
androidOverlaysWebView: false,
},
};
// Login screen data
const username = ref('');
const password = ref('');
const alertLoginData = () => {
f7.dialog.alert('Username: ' + username.value + '<br>Password: ' + password.value, () => {
f7.loginScreen.close();
});
}
onMounted(() => {
f7ready(() => {
// Init cordova APIs (see cordova-app.js)
@@ -136,10 +85,7 @@
});
return {
f7params,
username,
password,
alertLoginData
f7params
}
}
}

86
src/pages/form.vue
View File

@@ -1,86 +0,0 @@
<template>
<f7-page name="form">
<f7-navbar title="Form" back-link="Back"></f7-navbar>
<f7-block-title>Form Example</f7-block-title>
<f7-list strong-ios dividers-ios outline-ios>
<f7-list-input label="Name" type="text" placeholder="Your name"></f7-list-input>
<f7-list-input label="E-mail" type="email" placeholder="E-mail"></f7-list-input>
<f7-list-input label="URL" type="url" placeholder="URL"></f7-list-input>
<f7-list-input label="Password" type="password" placeholder="Password"></f7-list-input>
<f7-list-input label="Phone" type="tel" placeholder="Phone"></f7-list-input>
<f7-list-input label="Gender" type="select">
<option>Male</option>
<option>Female</option>
</f7-list-input>
<f7-list-input
label="Birth date"
type="date"
placeholder="Birth day"
defaultValue="2014-04-30"
></f7-list-input>
<f7-list-item title="Toggle">
<template #after>
<f7-toggle />
</template>
</f7-list-item>
<f7-list-input label="Range" :input="false">
<template #input>
<f7-range :value="50" :min="0" :max="100" :step="1" />
</template>
</f7-list-input>
<f7-list-input type="textarea" label="Textarea" placeholder="Bio"></f7-list-input>
<f7-list-input type="textarea" label="Resizable" placeholder="Bio" resizable></f7-list-input>
</f7-list>
<f7-block-title>Buttons</f7-block-title>
<f7-block strong-ios outline-ios class="grid grid-cols-2 grid-gap">
<f7-button>Button</f7-button>
<f7-button fill>Fill</f7-button>
<f7-button raised>Raised</f7-button>
<f7-button raised fill>Raised Fill</f7-button>
<f7-button round>Round</f7-button>
<f7-button round fill>Round Fill</f7-button>
<f7-button outline>Outline</f7-button>
<f7-button round outline>Outline Round</f7-button>
<f7-button small outline>Small</f7-button>
<f7-button small round outline>Small Round</f7-button>
<f7-button small fill>Small</f7-button>
<f7-button small round fill>Small Round</f7-button>
<f7-button large raised>Large</f7-button>
<f7-button large fill raised>Large Fill</f7-button>
<f7-button large fill raised color="red">Large Red</f7-button>
<f7-button large fill raised color="green">Large Green</f7-button>
</f7-block>
<f7-block-title>Checkbox group</f7-block-title>
<f7-list strong-ios outline-ios dividers-ios>
<f7-list-item checkbox name="my-checkbox" value="Books" title="Books"></f7-list-item>
<f7-list-item checkbox name="my-checkbox" value="Movies" title="Movies"></f7-list-item>
<f7-list-item checkbox name="my-checkbox" value="Food" title="Food"></f7-list-item>
</f7-list>
<f7-block-title>Radio buttons group</f7-block-title>
<f7-list strong-ios outline-ios dividers-ios>
<f7-list-item radio name="radio" value="Books" title="Books"></f7-list-item>
<f7-list-item radio name="radio" value="Movies" title="Movies"></f7-list-item>
<f7-list-item radio name="radio" value="Food" title="Food"></f7-list-item>
</f7-list>
</f7-page>
</template>

15
src/pages/home.vue
View File

@@ -6,10 +6,7 @@
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
</f7-nav-left>
<f7-nav-title sliding>ALVINN</f7-nav-title>
<f7-nav-right>
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="right"></f7-link>
</f7-nav-right>
<f7-nav-title-large>ALVINN</f7-nav-title-large>
<f7-nav-title-large>A.L.V.I.N.N.</f7-nav-title-large>
</f7-navbar>
<!-- Toolbar-->
<f7-toolbar bottom>
@@ -18,24 +15,16 @@
</f7-toolbar>
<!-- Page content-->
<f7-block>
<p>Here is your blank Framework7 app. Let's see what we have here.</p>
<p>Anatomy Lab Visual Identification Neural Network</p>
</f7-block>
<f7-block-title>Navigation</f7-block-title>
<f7-list strong inset dividersIos>
<f7-list-item link="/about/" title="About"></f7-list-item>
<f7-list-item link="/form/" title="Form"></f7-list-item>
</f7-list>
<f7-block-title>Modals</f7-block-title>
<f7-block class="grid grid-cols-2 grid-gap">
<f7-button fill popup-open="#my-popup">Popup</f7-button>
<f7-button fill login-screen-open="#my-login-screen">Login Screen</f7-button>
</f7-block>
<f7-block-title>Panels</f7-block-title>
<f7-block class="grid grid-cols-2 grid-gap">
<f7-button fill panel-open="left">Left Panel</f7-button>
<f7-button fill panel-open="right">Right Panel</f7-button>
</f7-block>
<f7-list strong inset dividersIos>