Skip to content

feat(app): update design and functionality to match other conference apps and migrate google maps to leaflet #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 30 commits into from
Apr 18, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
36437ea
fix(app): use proper navigation and styles for menu
brandyscarney Apr 15, 2025
5310e33
refactor(): update data to match other conference apps
brandyscarney Apr 16, 2025
076063c
fix(about): update to match other conference apps
brandyscarney Apr 16, 2025
a5f87eb
fix(session-list): properly display and filter session data
brandyscarney Apr 16, 2025
4a2f892
fix(session-detail): update to match other conference apps
brandyscarney Apr 16, 2025
35b9ae2
fix(menu): correct menu header
brandyscarney Apr 16, 2025
0a7b669
fix(speaker-detail): update design and functionality to match other apps
brandyscarney Apr 16, 2025
d428f84
fix(app): fixing some errors and inconsistent names/colors
brandyscarney Apr 16, 2025
5013344
fix(images): update images & favicon
brandyscarney Apr 16, 2025
6ece13e
fix(speakers): update speaker list and detail view to match other apps
brandyscarney Apr 16, 2025
b8771de
fix(split-pane): remove color-scheme for proper border color
brandyscarney Apr 16, 2025
7f6e5b9
fix(account): proper designs for login, signup and support
brandyscarney Apr 16, 2025
b931776
chore: cleanup
brandyscarney Apr 16, 2025
59408d0
style
brandyscarney Apr 16, 2025
6676848
refactor(map): migrate from google maps to leaflet
brandyscarney Apr 16, 2025
bde3ce5
chore: delete unused file
brandyscarney Apr 16, 2025
fd606ed
removed import that was needed
brandyscarney Apr 16, 2025
8075012
fix vercel
brandyscarney Apr 16, 2025
2dc8418
Merge branch 'main' into bc/fix-navigation-and-design
brandyscarney Apr 16, 2025
3cf5e2d
refactor(map): remove unneeded styles
brandyscarney Apr 16, 2025
1a9d6be
chore: fix build warnings
brandyscarney Apr 16, 2025
da06b0d
fix(session): add missing pm and group by the data's time
brandyscarney Apr 17, 2025
31e323f
fix(app): change angular to vue and use the defined css variables for…
brandyscarney Apr 17, 2025
d4a96e9
fix(session-list): properly present card modal
brandyscarney Apr 17, 2025
06e5184
docs(): update readme and add contributing
brandyscarney Apr 17, 2025
0eab8f1
docs: link to license
brandyscarney Apr 17, 2025
9a58ec3
chore: MIT license
brandyscarney Apr 17, 2025
48c26f2
docs(contributing): readme url
brandyscarney Apr 17, 2025
2e88b3d
fix(map): fix markers on vercel
brandyscarney Apr 17, 2025
4ccaab9
feat(tutorial): remove swiper and migrate to scroll snap
brandyscarney Apr 17, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions .github/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# Contributing to the Ionic Vue Conference Application

Thank you for taking the time to contribute! :tada::+1:

The following is a set of guidelines for contributing to the conference app. These are just guidelines, not rules, use your best judgment and feel free to propose changes to this document in a pull request.

## Table of Contents
- [Reporting Issues](#reporting-issues)
- [Before Submitting an Issue](#before-submitting-an-issue)
- [Determining the Repository](#determining-the-repository)
- [Submitting the Issue](#submitting-the-issue)
- [Submitting a Pull Request](#submitting-a-pull-request)
- [Guidelines for Submitting](#guidelines-for-submitting)
- [Code Style](#code-style)

## Reporting Issues

Before submitting an issue, please go through [the list below](#before-submitting-an-issue) as you might find a solution to your issue.

### Before Submitting an Issue

* Make sure you get the latest version of the code and run through the [Getting Started](https://github.com/ionic-team/ionic-vue-conference-app#getting-started) steps to see if this resolves your issue.
* Check the [forum](https://forum.ionicframework.com) for similar questions and answers.
* Go through [all issues](https://github.com/ionic-team/ionic-vue-conference-app/issues?utf8=%E2%9C%93&q=is%3Aissue) on this repository to see if the issue has already been created. It could have been closed with a resolution, so check closed issues, too.
* Chat with us on [Discord](https://ionic.link/discord) to see if we can find a solution to the problem!
* [Determine which repository](#determining-the-repository) the problem should be reported in.

### Determining the Repository

There are several repositories being used for Ionic, which makes it difficult to determine which one to report an issue to. Don't worry if you aren't sure, we can always move it!

* The [Ionic Framework repository](https://github.com/ionic-team/ionic-framework) is a repository for all things related to the Ionic Framework. If you are able to reproduce the issue in any of the Ionic starters (or an existing project), you'll want to submit the issue [here](https://github.com/ionic-team/ionic-framework/issues).
* The [Ionic CLI repository](https://github.com/ionic-team/ionic-cli) contains all of the code that allows you to run `ionic` commands from a terminal window. It is safe to put any issues [here](https://github.com/ionic-team/ionic-cli/issues) that relate to running an `ionic` command.
* **This repository** is a demo of the Ionic Framework. If you find an issue with this app that does not occur on [a new app](https://ionicframework.com/docs/intro/cli#start-an-app), please submit the issue [here](https://github.com/ionic-team/ionic-vue-conference-app/issues).

### Submitting the Issue

* **Use a clear and descriptive title** for the issue to identify the problem. This makes it easier for others to find.
* **Describe the exact steps to reproduce the problem** with as many details as needed.
* **Provide your configuration** by running `ionic info` in a terminal from *within* the project folder and pasting this information in the issue.

## Submitting a Pull Request

### Guidelines for Submitting

When in doubt, keep your pull requests small. To give a PR the best chance of getting accepted, do not bundle more than one "feature" or bug fix per PR. Doing so makes it very hard to accept it if one of the fixes has issues.

It's always best to create two smaller PRs than one big one.

Talk to us before creating a PR that refactors the code or directory structure of the project. This project is constantly changing to reflect the latest version of Ionic Framework so sometimes it will be in the process of getting fixed.

### Code Style

Make sure to follow the existing code style as much as possible.

* No underscores prefixing JS functions.
* Use flat Sass:
* **Don't** use [BEM conventions](https://css-tricks.com/bem-101/)
* Avoid nesting selectors. This is done to make it easier for users without Sass experience to understand and read.
98 changes: 53 additions & 45 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,62 +1,70 @@
# Ionic Vue Conference Application
# Ionic Vue Conference App

[![Built with Ionic](https://img.shields.io/badge/-Built%20with%20Ionic-3880FF?style=flat&logo=ionic&logoColor=white)](https://ionicframework.com)
[![Vue.js](https://img.shields.io/badge/-Vue.js-4FC08D?style=flat&logo=vue.js&logoColor=white)](https://vuejs.org)
[![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

This application is purely a kitchen-sink demo of the Ionic Framework and Vue.
This is a **kitchen-sink demo application** built with **Ionic Framework** and **Vue**. It showcases a wide range of Ionic components and features in the context of a fictional tech conference app.

**There is not an actual Ionic Conference at this time.** This project is just to show off Ionic components in a real-world application.
**Note**: There is no actual Ionic Conference. This project is purely for demonstration purposes.

## React and Angular versions
👉 [Try the Live Demo](https://ionic-vue-conference-app-git-main-ionic1.vercel.app/tutorial)

We've built versions of this Conference app in React and Angular for developers that would prefer to use one of those framework options:
## 🧱 Framework Variants

https://github.com/ionic-team/ionic-react-conference-app
This app is also available in other frameworks:

https://github.com/ionic-team/ionic-conference-app
- 🔗 [Ionic Angular Conference App](https://github.com/ionic-team/ionic-conference-app)
- 🔗 [Ionic React Conference App](https://github.com/ionic-team/ionic-react-conference-app)
- ✅ **You're viewing the Vue version**

## Table of Contents
- [Getting Started](#getting-started)
- [App Preview](#app-preview)
## ✨ Features

## Getting Started
- Browse conference schedule with filtering
- View speaker bios and session details
- User authentication and profile management
- Interactive maps for venue navigation
- Push notifications support
- Dark/Light mode toggling
- Cross-platform support: iOS, Android, and Web

* [Download the installer](https://nodejs.org/) for Node LTS.
* Install the ionic CLI globally: `npm install -g ionic`
* Clone this repository: `git clone https://github.com/ionic-team/ionic-vue-conference-app.git`.
* Run `npm install` from the project root.
* Run `ionic serve` in a terminal from the project root.
* Profit. :tada:
## ⚙️ Getting Started

## App Preview
### Prerequisites

### [Menu](https://github.com/ionic-team/ionic-vue-conference-app/blob/main/src/components/Menu.vue)
- Node.js (LTS version recommended) → [Download](https://nodejs.org/)
- npm (included with Node.js)
- Ionic CLI → Install globally:
```bash
npm install -g @ionic/cli
```

| Material Design | iOS |
| -----------------| -----|
| ![Android Menu](/resources/screenshots/android-menu.png) | ![iOS Menu](/resources/screenshots/ios-menu.png) |
### Installation
1. Clone the repository:
```bash
git clone https://github.com/ionic-team/ionic-vue-conference-app.git
```
2. Navigate into the project:
```bash
cd ionic-vue-conference-app
```
3. Install dependencies:
```bash
npm install
```
4. Start the dev server:
```bash
ionic serve
```
5. Open your browser to:
```
http://localhost:8100
```

## 🤝 Contributing

### [Schedule Page](https://github.com/ionic-team/ionic-vue-conference-app/blob/main/src/views/SessionList.vue)

| Material Design | iOS |
| -----------------| -----|
| ![Android Schedule](/resources/screenshots/android-schedule.png) | ![iOS Schedule](/resources/screenshots/ios-schedule.png) |

### [Speakers Page](https://github.com/ionic-team/ionic-vue-conference-app/blob/main/src/views/SpeakerList.vue)

| Material Design | iOS |
| -----------------| -----|
| ![Android Speakers](/resources/screenshots/android-speakers.png) | ![iOS Speakers](/resources/screenshots/ios-speakers.png) |

### [Speaker Detail Page](https://github.com/ionic-team/ionic-vue-conference-app/blob/main/src/views/SpeakerDetail.vue)

| Material Design | iOS |
| -----------------| -----|
| ![Android Speaker Detail](/resources/screenshots/android-speaker-detail.png) | ![iOS Speaker Detail](/resources/screenshots/ios-speaker-detail.png) |

### [About Page](https://github.com/ionic-team/ionic-vue-conference-app/blob/main/src/views/About.vue)

| Material Design | iOS |
| -----------------| -----|
| ![Android About](/resources/screenshots/android-about.png) | ![iOS About](/resources/screenshots/ios-about.png) |
We welcome contributions! Please see our [Contributing Guide](.github/CONTRIBUTING.md) for details on how to submit pull requests, report issues, and contribute to the project.

## 📄 License

This project is licensed under the MIT [License](./LICENSE).
9 changes: 4 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,22 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<title>Ionic Conference App</title>

<base href="/" />

<meta name="color-scheme" content="light dark" />
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />

<link rel="shortcut icon" type="image/png" href="/public/favicon.ico" />
<link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png" />

<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic Conference App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

Expand Down
47 changes: 26 additions & 21 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 7 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
{
"name": "ionic-conference-app-vue",
"version": "0.1.0",
"private": true,
"version": "0.0.0",
"description": "Ionic Conference App",
"author": "Ionic Team <[email protected]>",
"license": "MIT",
"type": "module",
"scripts": {
"dev": "vite",
Expand All @@ -20,9 +22,10 @@
"@ionic/storage": "^4.0.0",
"@ionic/vue": "^8.0.0",
"@ionic/vue-router": "^8.0.0",
"@types/leaflet": "^1.9.17",
"date-fns": "^2.30.0",
"ionicons": "^7.0.0",
"swiper": "^10.3.0",
"leaflet": "^1.9.4",
"vue": "^3.4.21",
"vue-router": "^4.3.0",
"vuex": "^4.1.0"
Expand All @@ -41,6 +44,5 @@
"vite": "^4.3.9",
"vitest": "^0.32.2",
"vue-tsc": "^1.0.24"
},
"description": "An Ionic project"
}
}
Binary file added public/assets/icon/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/assets/img/appicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 2 additions & 3 deletions public/assets/img/appicon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/img/speaker-background.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading