Fixed layout for mobile users

[roylaza]

Hi Everyone

I'm playing mostly on mobile and so I went ahead and created a fix for the game layout which will make it more streamlined to play on mobile, this is a local fix so it doesn't require a developer to implement it and I'm posting it here for anyone interested in trying it out.






Instructions:

1. Download Kiwi Browser from the Google Play Store - this is a browser that supports Chrome Extensions (if you're on IOS you'll need to find the alternatives)
2. Install the "User JavaScript and CSS" extension by navigating to https://chrome.google.com/webstore/deta ... lmkecfmpld in Kiwi Browser and clicking Add to Chrome
3. Go to aaonline.fr in Kiwi Browser and select the "User JavaScript and CSS" option from the menu (3 dots) - it should be at the very bottom
4. Click "Add a new site" or select aaonline.fr if it already exists
5. Paste the below code under CSS:

Code: Select all

body {
	
	width: 100%;
	touch-action: manipulation;
}

#player-parametres, #courtrecord, #screens {
	
	position: inherit;
	zoom: 3.75;
}

#cr_evidence_list, #cr_profiles_list {
	
	position: inherit;
}

#courtrecord .evidence_display {
	
	zoom: 0.85;
}

#player-parametres {
	
	width: 100%;
	box-sizing: border-box;
}

.textbox.bottom.dialogue {
	
	width: 100%;
	padding: 2px 2px 2px 5px;
}

.details.thin-bars {
	
	top: -42px;
}

#screen-cr-item-check {
	
	position: fixed;
	left: 5px;
	right: 5px;
	top: 5px;
	bottom: 5px;
	height: 24vh;
}

#cr-item-check-contents {
	
	left: 0;
	top: 77px;
	height: 19vh;
}

#cr-item-check-pagination {
	
	width: 100%;
	height: 50px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

#cr-item-check-pagination a {
	
	display: inline-block;
	vertical-align: top;
	margin-bottom: 0px;
	margin-right: 5px;
}

6. Paste the below code under JS: (this is optional and will simply disable the context menu when long pressing on the proceed button):

Code: Select all

window.oncontextmenu = function(event) {
	
     event.preventDefault();
     event.stopPropagation();
     return false;
};

7. Under options (3 lines left of the save button) check "Highest CSS priority"
8. Click save and then hit back a few times to return to aaonline.fr
9. Refresh the page

Now every time you start a game you'll have a nice layout without needing to zoom in and scroll awkwardly

Have fun!

[marysu]

I gave this a whirl for a few hours, and it kicks ass. Thanks so much for making this.

Who would have guessed an engine based on a DS game ported from a GBA game would work super well on a portable platform like a phone? It really does work great. This is almost everything I would want from a mobile layout of this website.

There are tech hiccups, but on the end of the browser extension, and only on page load. Nothing wrong with your work there. This shouldn't scare people off trying the extension either - just reload the page until it works. Once it loads right at the start, the hiccups are over.

I do think there's a lot of scrolling. I think navigation buttons to jump to the top or court record or the options at the bottom would help navigation. I don't know how this would be implemented. Even with all the scrolling, it is an improvement of the vanilla mobile experience of zooming around.

I do think a mobile layout should be added to this site, but this is great until that happens. Good stuff. Cheers.

[roylaza]

Thank you very much! It's great to learn that someone else is enjoying this fix.

If the developers decide to implement a proper fix, there's so much more that can be done, including having the court record appear over the game window when the court record button is tapped (similar to what happens in the real game) and than scrolling away from the game window won't be required.

This would be the ultimate solution in my view.