handle long strings better

dashboard/guilds.js

@@ -42,9 +42,13 @@ function dashboard_guilds(res, dashboardLang, theme, userSession, reqURL, action
 	`).insertBefore('script#langjs');
 	$('head title').text(dashboardLang.get('general.title'));
 	$('.channel#settings div').text(dashboardLang.get('general.settings'));
+	$('.channel#settings').attr('title', dashboardLang.get('general.settings'));
 	$('.channel#verification div').text(dashboardLang.get('general.verification'));
+	$('.channel#verification').attr('title', dashboardLang.get('general.verification'));
 	$('.channel#rcscript div').text(dashboardLang.get('general.rcscript'));
+	$('.channel#rcscript').attr('title', dashboardLang.get('general.rcscript'));
 	$('.channel#slash div').text(dashboardLang.get('general.slash'));
+	$('.channel#slash').attr('title', dashboardLang.get('general.slash'));
 	$('.guild#invite a').attr('alt', dashboardLang.get('general.invite'));
 	$('.guild#refresh a').attr('alt', dashboardLang.get('general.refresh'));
 	$('.guild#theme-dark a').attr('alt', dashboardLang.get('general.theme-dark'));
@@ -127,7 +131,7 @@ function dashboard_guilds(res, dashboardLang, theme, userSession, reqURL, action
 		$('<a class="channel channel-header">').attr('href', url).append(
 			$('<img>').attr('src', '/src/settings.svg'),
 			$('<div>').text(dashboardLang.get('general.invite'))
-		).appendTo('#channellist');
+		).attr('title', dashboardLang.get('general.invite')).appendTo('#channellist');
 		$('#text .description').append(
 			$('<p>').html(dashboardLang.get('selector.invite', true, $('<code>').text(guild.name), $('<a>').attr('href', url))),
 			$('<a id="login-button">').attr('href', url).text(dashboardLang.get('general.invite')).prepend(
@@ -167,7 +171,7 @@ function dashboard_guilds(res, dashboardLang, theme, userSession, reqURL, action
 			$('<a class="channel">').attr('href', '#with-wikibot').append(
 				$('<img>').attr('src', '/src/channel.svg'),
 				$('<div>').text(dashboardLang.get('selector.with'))
-			).appendTo('#channellist');
+			).attr('title', dashboardLang.get('selector.with')).appendTo('#channellist');
 			$('<div class="server-selector" id="isMember">').appendTo('#text');
 			settings.guilds.isMember.forEach( guild => {
 				$('<a class="server">').attr('href', `/guild/${guild.id}/settings`).append(
@@ -183,7 +187,7 @@ function dashboard_guilds(res, dashboardLang, theme, userSession, reqURL, action
 			$('<a class="channel">').attr('href', '#without-wikibot').append(
 				$('<img>').attr('src', '/src/channel.svg'),
 				$('<div>').text(dashboardLang.get('selector.without'))
-			).appendTo('#channellist');
+			).attr('title', dashboardLang.get('selector.without')).appendTo('#channellist');
 			$('<div class="server-selector" id="notMember">').appendTo('#text');
 			settings.guilds.notMember.forEach( guild => {
 				$('<a class="server">').attr('href', `/guild/${guild.id}`).append(
@@ -202,7 +206,7 @@ function dashboard_guilds(res, dashboardLang, theme, userSession, reqURL, action
 			$('<a class="channel channel-header">').attr('href', url).append(
 				$('<img>').attr('src', '/src/settings.svg'),
 				$('<div>').text(dashboardLang.get('selector.switch'))
-			).appendTo('#channellist');
+			).attr('title', dashboardLang.get('selector.switch')).appendTo('#channellist');
 			$('#text .description').append(
 				$('<p>').html(dashboardLang.get('selector.none', true, $('<code>'))),
 				$('<a id="login-button">').attr('href', url).text(dashboardLang.get('selector.switch')).prepend(

dashboard/index.html

@@ -21,19 +21,19 @@
 	</div>
 	<div class="scrollbar" id="sidebar">
 		<div class="scrollbar" id="channellist">
-			<a class="channel channel-header" id="settings">
+			<a class="channel channel-header" id="settings" title="Settings">
 				<img src="/src/settings.svg" alt="Settings">
 				<div>Settings</div>
 			</a>
-			<a class="channel channel-header" id="verification">
+			<a class="channel channel-header" id="verification" title="Verifications">
 				<img src="/src/settings.svg" alt="Settings">
 				<div>Verifications</div>
 			</a>
-			<a class="channel channel-header" id="rcscript">
+			<a class="channel channel-header" id="rcscript" title="Recent Changes">
 				<img src="/src/settings.svg" alt="Settings">
 				<div>Recent Changes</div>
 			</a>
-			<a class="channel channel-header" id="slash">
+			<a class="channel channel-header" id="slash" title="Slash Commands">
 				<img src="/src/settings.svg" alt="Settings">
 				<div>Slash Commands</div>
 			</a>

dashboard/login.html

@@ -37,11 +37,11 @@
 	</div>
 	<div class="scrollbar" id="sidebar">
 		<div class="scrollbar" id="channellist">
-			<a class="channel channel-header" id="login">
+			<a class="channel channel-header" id="login" title="Login">
 				<img src="/src/settings.svg" alt="Settings">
 				<div>Login</div>
 			</a>
-			<a class="channel" id="invite-wikibot" href="https://discord.com/oauth2/authorize?client_id=461189216198590464&permissions=939904064&scope=bot%20applications.commands">
+			<a class="channel" id="invite-wikibot" href="https://discord.com/oauth2/authorize?client_id=461189216198590464&permissions=939904064&scope=bot%20applications.commands" title="Invite Wiki-Bot">
 				<img src="/src/channel.svg" alt="Channel">
 				<div>Invite Wiki-Bot</div>
 			</a>

dashboard/oauth.js

@@ -32,7 +32,9 @@ function dashboard_login(res, dashboardLang, theme, state, action) {
 	`).insertBefore('script#langjs');
 	$('head title').text(dashboardLang.get('general.login') + ' – ' + dashboardLang.get('general.title'));
 	$('#login-button span, .channel#login div').text(dashboardLang.get('general.login'));
+	$('.channel#login').attr('title', dashboardLang.get('general.login'));
 	$('.channel#invite-wikibot div').text(dashboardLang.get('general.invite'));
+	$('.channel#invite-wikibot').attr('title', dashboardLang.get('general.invite'));
 	$('.guild#invite a').attr('alt', dashboardLang.get('general.invite'));
 	$('.guild#theme-dark a').attr('alt', dashboardLang.get('general.theme-dark'));
 	$('.guild#theme-light a').attr('alt', dashboardLang.get('general.theme-light'));

dashboard/rcscript.js

@@ -209,12 +209,13 @@ function dashboard_rcscript(res, $, guild, args, dashboardLang) {
 			let suffix = ( args[0] === 'owner' ? '?owner=true' : '' );
 			$('#channellist #rcscript').after(
 				...rows.map( row => {
+					let text = `${row.configid} - ${( guild.channels.find( channel => {
+						return channel.id === row.channel;
+					} )?.name || row.channel )}`;
 					return $('<a class="channel">').attr('id', `channel-${row.configid}`).append(
 						$('<img>').attr('src', '/src/channel.svg'),
-						$('<div>').text(`${row.configid} - ${( guild.channels.find( channel => {
-							return channel.id === row.channel;
-						} )?.name || row.channel )}`)
-					).attr('href', `/guild/${guild.id}/rcscript/${row.configid}${suffix}`);
+						$('<div>').text(text)
+					).attr('title', text).attr('href', `/guild/${guild.id}/rcscript/${row.configid}${suffix}`);
 				} ),
 				( process.env.READONLY || rows.length >= rcgcdwLimit[( guild.patreon ? 'patreon' : 'default' )] ? '' :
 				$('<a class="channel" id="channel-new">').append(

dashboard/settings.js

@@ -200,7 +200,7 @@ function dashboard_settings(res, $, guild, args, dashboardLang) {
 						$('<img>').attr('src', '/src/channel.svg'),
 						$('<div>').text(channel.name)]
 					)
-				).attr('href', `/guild/${guild.id}/settings/${channel.id}${suffix}`).attr('title', channel.id);
+				).attr('title', `${channel.id} - ${channel.name}`).attr('href', `/guild/${guild.id}/settings/${channel.id}${suffix}`);
 			} ),
 			( process.env.READONLY || !guild.channels.filter( channel => {
 				return ( hasPerm(channel.userPermissions, 'VIEW_CHANNEL', 'SEND_MESSAGES') && !rows.some( row => row.channel === ( channel.isCategory ? '#' : '' ) + channel.id ) );
@@ -208,7 +208,7 @@ function dashboard_settings(res, $, guild, args, dashboardLang) {
 			$('<a class="channel" id="channel-new">').append(
 				$('<img>').attr('src', '/src/channel.svg'),
 				$('<div>').text(dashboardLang.get('settings.new'))
-			).attr('href', `/guild/${guild.id}/settings/new${suffix}`) )
+			).attr('title', dashboardLang.get('settings.new')).attr('href', `/guild/${guild.id}/settings/new${suffix}`) )
 		);
 		if ( args[4] === 'new' && !process.env.READONLY ) {
 			$('.channel#channel-new').addClass('selected');

dashboard/slash.js

@@ -106,7 +106,7 @@ function dashboard_slash(res, $, guild, args, dashboardLang) {
 			return $('<a class="channel">').attr('id', `channel-${slashCommand.id}`).append(
 				$('<img>').attr('src', '/src/channel.svg'),
 				$('<div>').text(slashCommand.name)
-			).attr('href', `/guild/${guild.id}/slash/${slashCommand.id}${suffix}`);
+			).attr('title', slashCommand.name).attr('href', `/guild/${guild.id}/slash/${slashCommand.id}${suffix}`);
 		} )
 	);
 	if ( args[4] ) {

dashboard/src/index.css

@@ -25,7 +25,7 @@ a[alt]:hover:after {
 	color: #dcddde;
 	font-weight: bold;
 	font-size: 90%;
-	word-break: break-word;
+	overflow-wrap: break-word;
 	border-radius: 4px;
 	padding: 8px;
 	box-shadow: 0 8px 16px rgba(0,0,0,0.24);
@@ -220,9 +220,9 @@ a[alt]:hover:after {
 	background-color: #f2f3f5;
 }
 .channel {
-	padding: 0 8px;
+	padding: 3px 8px;
 	margin: 0 8px 2px 12px;
-	height: 32px;
+	min-height: 26px;
 	border-radius: 4px;
 	display: flex;
 	align-items: center;
@@ -240,7 +240,7 @@ a[alt]:hover:after {
 	font-size: 16px;
 	line-height: 20px;
 	text-shadow: 0 0 1px;
-	white-space: nowrap;
+	overflow-wrap: break-word;
 	overflow: hidden;
 }
 .channel div.category {
@@ -271,8 +271,9 @@ a[alt]:hover:after {
 	color: #060607;
 }
 .channel-header {
+	padding: 5px 8px;
 	margin-left: 8px;
-	height: 44px;
+	min-height: 34px;
 }
 .channel-header img {
 	width: 24px;
@@ -478,7 +479,7 @@ code {
 }
 .server .server-name {
 	padding: 8px 12px;
-	word-break: break-word;
+	overflow-wrap: break-word;
 	font-weight: bold;
 	font-size: 90%;
 }

dashboard/verification.js

@@ -254,14 +254,15 @@ function dashboard_verification(res, $, guild, args, dashboardLang) {
 		let suffix = ( args[0] === 'owner' ? '?owner=true' : '' );
 		$('#channellist #verification').after(
 			...rows.map( row => {
+				let text = `${row.configid} - ${( guild.roles.find( role => {
+					return role.id === row.role.split('|')[0];
+				} )?.name || guild.channels.find( channel => {
+					return channel.id === row.channel.split('|')[1];
+				} )?.name || row.usergroup.split('|')[( row.usergroup.startsWith('AND|') ? 1 : 0 )] )}`;
 				return $('<a class="channel">').attr('id', `channel-${row.configid}`).append(
 					$('<img>').attr('src', '/src/channel.svg'),
-					$('<div>').text(`${row.configid} - ${( guild.roles.find( role => {
-						return role.id === row.role.split('|')[0];
-					} )?.name || guild.channels.find( channel => {
-						return channel.id === row.channel.split('|')[1];
-					} )?.name || row.usergroup.split('|')[( row.usergroup.startsWith('AND|') ? 1 : 0 )] )}`)
-				).attr('href', `/guild/${guild.id}/verification/${row.configid}${suffix}`);
+					$('<div>').text(text)
+				).attr('title', text).attr('href', `/guild/${guild.id}/verification/${row.configid}${suffix}`);
 			} ),
 			( process.env.READONLY || rows.length >= verificationLimit[( guild.patreon ? 'patreon' : 'default' )] ? '' :
 			$('<a class="channel" id="channel-new">').append(