wtg / shuttle-tracker-web Goto Github PK

License: Mozilla Public License 2.0

HTML 1.51% JavaScript 8.78% Vue 89.71%

shuttle-tracker-web's Issues

Old web interface link should be darker/lighter

Is your feature request related to a problem? Please describe.
I noticed the new Shuttle Tracker launched recently. At the bottom of the page, there is a link that says "Old Web Interface," and it lets you use Shuttle Tracker in its original appearance. The problem with this is the text color for this link does not contrast well enough with the background. On light mode, it is a light gray that almost blends in with the white background, and on dark mode, it is completely black and is hard to see on a near-black background.

Describe the solution you'd like
I think it would be best to make the text color on light mode darker and the text color on dark mode much brighter. With these changes, this text will contrast more with the background and be more visible to the user.

Screenshots
Light mode text color:

Dark mode text color:

`apple-app-site-association` file

We need to add an apple-app-site-association file. This file must be formatted in JSON with the following content, exactly verbatim:

{
	"appclips": {
		"apps": [
			"SYBLH277NF.com.gerzer.shuttletracker.appclip"
		]
	}
}

It must be accessible at this exact URL: https://web.shuttletracker.app/.well-known/apple-app-site-association
(Note the . in .well-known and the lack of a file extension.)

This file is necessary to make the iOS App Clip work properly.

Add new color-blind icons

Add the green crosshair and purple exclamation mark icons for color blind mode.

Full-screen mode

Web UI on large screens (union especially) looks weird. Add a full screen mode support to solve it.

Add App Clip Code to full-screen mode

Let the user change light/dark mode

Make it easier for the user to change light and dark mode than changing the system's settings.
Add the switch (similar to the colorblind switch) under settings.

Create Dev Mode

Create a dev mode that adds both high quality and low quality data to the map.

Add Rounded corners to map.

Our map is now a square, sad. Lets change it back to have rounded corners.

[Bug Fix] Put Bus Icon above Stops Icon

Stop markers cover the bus information right now. Fix it by making the bus stop transparent.

Announcement API

Parse announcements from server and display it in the frontend.

Web accessibility improvements

Add an <html lang="en"> to identify the language of the page.

Move server status

Try moving server status to the top left corner of the map.

Make modal prettier

for the bus icon descriptions, show icon images rather than using descriptive text

Change color-blind bus icons

change the H, L colorblind bus icons to plus and exclamation mark

Add RCOS info in footer

add rcos image and link to github in the footer

Update API version

Our API is dead :(

Hard to see "H" against green background in color-blind mode

Take a look at this screenshot:

[New Feature] Add color blind mode

Add option to change to colorblind mode; if in it, have different emojis for high quality/low quality buses.

Replace "iOS App" download text with an App Store icon image

Make status update expandable

Merge all server status indicators into one. Only shows the detail (expand back to 4 badges) when clicked.

Add an option to simulate announcements in development mode

Add a switch to settings in dev mode to show the announcements bar even when there are no actual announcements.

Update shuttle schedule

Update to Spring 2022 schedule.

Dynamically update schedule

Update the schedule to reflect the current week's times

Link to old Web interface

I've been told that we need to add a link to the old Web interface prior to our coordinated public launch. The link should direct to https://old.shuttletracker.app.

Add bus schedule in full-screen mode

Add a bus schedule that only appears on the map when full-screen mode is enabled.

[Bug Fix] Texts not in the same line in mobile phone

"This map refreshed every 5 seconds" and "Download iOS app" are not in the same line in the explorer of mobile phone.
They are defined in Footer.vue

Reduce bullet size in schedule

Added some CSS to the schedule to reduce the size of the bullets and change the padding

Outdated link to TestFlight

This link redirects you to the testflight link, which is outdated since we have the app in appstore already. Link it to the official appstore link.

Change background color in dark mode

[New Feature] Add schedule in the home page

Add a static schedule (operational hours) just under the map as a new Vue component.
Something like this from the old shuttle tracker.

[New Feature] Add links to IOS app

Add a link to the IOS app in the footer.

Move footer up

Move the footer of the page with the "refresh map message" and IOS link right under the map.

Text wrapped on mobile device

Move iOS/iPadOS/macOS download link to Settings block to fix mobile view

Make station popup prettier

Make the station popup prettier. Probably add hover too.

`<meta>` tag for App Clip

We need to add the following <meta> tag:

<meta name="apple-itunes-app" content="app-id=1583503452, app-clip-bundle-id=com.gerzer.shuttletracker.appclip, app-clip-display=card">

Layout issues with bus icons in modal

The green and red backgrounds aren't circular, and the emojis are off-center.

[New Feature] Add favicons

Add favicons to the shuttle tracker site. This includes:

android icons of different sizes
apple icons of different sizes
regular favicons of different sizes

Also include a manifest file in the header to manage the icons. Checkout this site for more info. All of these files can be generated with an online tool.

wtg / shuttle-tracker-web Goto Github PK

shuttle-tracker-web's Issues

Recommend Projects

Recommend Topics

Recommend Org