I’m trying to create a website to host information about some fantasy soccer leagues for me and my friends and I’m struggling to find a good way to create a lineup graphic (search for soccer graphic lineup to see what I’m looking to recreate if you’re not sure) for each team which works on both a computer and on mobile devices. I’ve put something together here which works if looking on a computer but still doesn’t look fantastic and completely falls apart on mobile.
I don’t really have any front end experience so thought I’d post here to see if anyone has any ideas or tips to point me in the right direction maybe using custom elements or something?
Loaded your example and played with it a bit on both the desktop and mobile. I think getting stuff to display acceptable on both the desktop and mobile is going to be hard to do. One will likely need to comprise on the desktop design to accommodate the mobile side. With the number of columns in play I think it will be tough to get it to display properly on a mobile device.
Might have a look at https://cadayton.keybase.pub. This is a static single web page created with UD and displays ok on the mobile side in landscape mode. This dashboard is doing nothing special to make it display this way. Don’t think this is solution for you but should help generate some ideas on what to consider or not.
Hello @sk82jack, I did try your dashboard page you kindly uploaded to github, but it did not want to display for me 
so anyways I personally think this would be an amazing challenge to build your own custom component…I found this:-
https://www.npmjs.com/package/react-native-football-lineup
I also stumbled across this blog:-
https://medium.com/@deallen7/getting-started-with-react-9eebb4c7f68
So there is a few different ways out there already…Personally think the custom component would be a great way to solve your problem.
1 Like
Thanks both for your replies. Not sure why the dashboard didn’t work for you psDevUK - the website which were hosting the images did have some issues over the weekend so may have been related to that…not sure.
I can certainly have a crack at creating a custom component though I have no idea what that entails at the moment lol I think Adam did a couple of videos recently on custom components so I’ll check those out along with your links psDevUK and see what I can cook up.
I’m sure I’ll be back with questions!
1 Like
Right I’ve finally had a chance to look at this again and I appear to have fallen at the first hurdle 
I have cloned the ud-custom-control-template and run Invoke-Plaster on it to get my basic scaffolding. I’ve then been following along with Adam’s talk here but when I try and run build.ps1 I’m getting an error:
ERROR in index.20ff554ce395e431f5c5.bundle.js from Terser
Unexpected token: operator (-) [index.20ff554ce395e431f5c5.bundle.js:1,6]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! ud-soccer-lineup@0.1.0 build: webpack -p --env production
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the ud-soccer-lineup@0.1.0 build script.
And the stack trace in the logs is
13 verbose stack Error: ud-soccer-lineup@0.1.0 build: webpack -p --env production
13 verbose stack Exit status 2
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:210:5)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:210:5)
13 verbose stack at maybeClose (internal/child_process.js:1028:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
Anyone seen this before? Or can you replicate the issue if you clone my repo (or just spot where I’ve done something silly 
) ? https://github.com/sk82jack/ud-soccer-lineup
Ah wait - I figured it out. After I ran Invoke-Plaster I had to change some names because I was a bit confused about what was needed for each question and I didn’t update the library name in the webpack config. It’s building fine now. I’ll carry on and pop back if I run into any more issues.