Any suggestions on how to make my list look better?

Coding Help
, ,
1

Hello all. I am trying to make a good list but I just can’t find a good place to start my code.

I legit have this…

image
image654×521 5.94 KB

Can anyone send me a suggestion on how to make my list look better.

Heres the code:

<%- include("partials/header", { bot, user, path, title: "Twintails🎀 - Bot Dashboard" }) %>
<link rel="shortcut icon" href="https://i.imgur.com/NgV0KSf.png">

<% user.guilds.forEach(guild => {
    const permsOnGuild = new perms(guild.permissions);
    if(!permsOnGuild.has("MANAGE_GUILD")) return;
  %>

<p><%= guild.name %></p>
<% if (bot.guilds.cache.get(guild.id)) { %>
<a href="/dashboard/<%= guild.id %>">Edit Settings</a>
<% } else { %>
<a
  href="<%= `https://discordapp.com/oauth2/authorize?client_id=${bot.user.id}&scope=bot&guild_id=${guild.id}&response_type=code&redirect_uri=${encodeURIComponent(`${bot.config.domain}${bot.config.port == 80 ? "" : `:${bot.config.port}`}/callback`)}` %>">Add
  Bot</a>
<% } %>
<% }); %>
<%- include("partials/footer") %>

uwu, thanks!

2

How you expect the item to look like?

Like this?
[Server Name] [Edit Settings]

3

I was thinking more of a clean design like that of mee6

image
image885×499 23 KB

1 Like
4

I would suggest you to search on google on how to in css, so you can learn more about styling. I will try to play with css and see if there is nice design that I can suggest you.

5

Ight, thanks.

6

Okay, this is quick design that I made:

image
image2048×325 29.3 KB

test.js - just for test purposes JavaScript file

["server1", "server2", "server3"].forEach((name) => {
  var item = document.createElement("div");
  item.classList.add("server");
  document.body.appendChild(item);
  var div = document.createElement("div");
  div.classList.add("name");
  div.innerHTML = name;
  item.appendChild(div);
  var button = document.createElement("button");
  button.innerHTML = "Edit";
  button.classList.add("edit");
  item.appendChild(button);
});

style.css - actual style file

.server { background: #303030; padding: 10px; margin: 0; display: block; }
.server * { -webkit-appearance: none; box-sizing: border-box; color: #eee; display: inline-block; font-family: Arial; }
.server .name { width: 87.5vw; padding: 5px; }
.server .edit { background: #505050; border: none; outline: none; border-radius: 15px; padding: 5px; padding-left: 25px; padding-right: 25px; }

Keep in mind this may not be responsive and it contains Arial font, so you may want to remove it from css.

1 Like
7

Oh wow, thanks!!

1 Like
8

What would you call something like this? Just for reference. A list, or what?

9

You mean the classname for those div’s?

10

I just mean in general, what would you call something that has a Name and button option.

11

A list, specifically for this list, an server-list.

12

omg, that was at the tip of my tongue for so long, thanks.

1 Like
13

Here is my advice:

  1. Don’t use w3css. Its a bit boring an overused, I would recommend that you use another CSS framework.

  2. Center all the items on the list and replace the plain a tags with buttons.

14

Lol, why use any framework when you can write it yourself

15

My advice is add some padding around your list. Then you can round some corners, play with units and colors until you get to something good looking. Tbh i’m not really proud of my open radio selector list either but it’s sufficent

image
image1173×615 7.65 KB

and all I used with padding and some cool selector magic to pick the right colors

16

My creative skills are in the negatives, mind you.