Hi, I'm working with this Minetest Server GUI. It's my first time with vue js as frontend framework and this is what I've done until now. Any suggestion on the design? (It will be open source as soon as I manage to pack frontend and backend in the same place)

@SonoMichele it's really good! the changes I'd make are convert the start/stop buttons to icons and maybe put them up somewhere on the homescreen, and also make the console replace spaces with ` ` tags to make the Minetest banner look nice.

@kqldm Hey! Thank you for your feedback. I didn’t thought about using   I’ll do it soon! And moving the buttons on the home makes sense, I just have to think for a design and what to put in the home. The icons I don’t know because it could be hard to understand(?)

@SonoMichele icons are actually quite easy to use, you can either download individual icons (in svg/png format) from iconpacks like font awesome or, if you have a lot of icons, you can instead use the entire iconpack (usually comes with some font files and a css file you include in your page), and then you just put them in your <button> elements

@kqldm I usually use but what could I use as restart icon? I can’t of an icon that says “restart”, I mean, not literally

@SonoMichele something like "refresh" works for most management consoles and its present in heroicons

@kqldm @SonoMichele I wouldn't do this. Start and stop should be out of the way; accidentally stopping your server should be hard (but being able to do it quickly is important).

@wizzwizz4 @kqldm so I should just put a fast start button on home but keep also everything else on the console page?

@SonoMichele @kqldm Seems like a good plan to me. Make sure they can find the “stop” button after clicking “start” though.

@wizzwizz4 @kqldm maybe adding a confirmation modal when you click the stop button on the homepage?

@wizzwizz4 quite a sensible idea actually! for stop confirmation maybe double click confirmation would work? basically you'd click the button once and it would just pop out a small message saying "to stop the server please click again". but if you click it twice - it would stop the server. although muscle memory might be a problem...

@kqldm You could make it only work for two single clicks, not a double-click.

Alternatively, you could make it so you have to type the server's name into a box… but being able to shut the server down quickly in the event of griefers is a little important. (Then again, most people will have rollback enabled.)

@wizzwizz4 this is actually what i meant by doubleclick! about confirmation by server name: imo server name might take too long to type (if it's long and contains a lot of characters) so maybe introduce some sort of a server ID (like for example creative-server and survival-server)? this would also simplify implementing multiple instances of servers (in case you need that functionality)

@wizzwizz4 @kqldm You can’t connect different servers (like different servers on hypixel on Minecraft for mini games), you can’t neither have different maps on the same server on minetest so that won’t be a problem but I think I’ll go for the double click on the stop button. I’ll have to figure out how to do it in vue although I have an idea

@SonoMichele @kqldm v-on:click to trigger another element / a state change for the next click is probably your best bet.

@SonoMichele @kqldm Though if you want an actual double click, v-on:dblclick would work.

@wizzwizz4 @kqldm Thank you I’ll try later, didn’t know about the existence of dblclick, I’ll try to do something later

@wizzwizz4 @kqldm I've opted for this solution (btw using &nbsp; still doesn't fixes MINETEST banner but breaks everything else)

@SonoMichele are you replacing it in JS? it might replace only one occurence of a character if you just use a string and the builtin "replace" method on a string. you may want to try a regexp which matches a space

@kqldm this is what happens using this code: newLine = newLine.replace(/ /g, "&nbsp;")

@SonoMichele hmm, maybe dont replace anything and just use <pre>? it should work

@kqldm With pre the banner works but still breaks everything on small screens (it works well only when my browser takes all my screen in width)

@SonoMichele hmm, i just thought about this and I think something like <code> or <samp> might work properly

@kqldm I think I'll use samp, it doesn't break everything and you can almost read "minetest"

Sign in to participate in the conversation

Fosstodon is an English speaking Mastodon instance that is open to anyone who is interested in technology; particularly free & open source software.