github/context-mod
1
1
Fork 0
mirror of https://github.com/FoxxMD/context-mod.git synced 2026-01-14 16:08:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

POC color improvements for color blindness

Browse Source 
Needs another pass and consolidate/clean up for pages other than status
This commit is contained in:
FoxxMD
2021-10-20 20:57:44 -04:00
parent 56c007c20d
commit ac409dce3d
5 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/Web/assets/public/app.css
View File

@@ -91,3 +91,19 @@ a {
pointer-events: initial; pointer-events: initial;
text-decoration: initial; text-decoration: initial;
} }
.blue {
color: rgb(97, 175, 239)
}
.red {
color: rgb(255 123 133);
}
.green {
color: rgb(170 255 109);
}
.purple {
color: rgb(224 124 253);
}
.yellow {
color: rgb(253 198 94);
}

2
src/Web/assets/views/partials/header.ejs
View File

@@ -1,4 +1,4 @@
<div class="space-x-4 p-6 md:px-10 md:py-6 leading-6 font-semibold bg-gray-800 text-white"> <div class="space-x-4 p-6 md:px-10 md:py-6 leading-6 font-semibold bg-gray-500 text-white">
<div class="container mx-auto"> <div class="container mx-auto">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center flex-grow pr-4"> <div class="flex items-center flex-grow pr-4">

2
src/Web/assets/views/partials/subredditsTab.ejs
View File

@@ -1,4 +1,4 @@
<div class="space-x-4 pt-2 md:px-5 leading-6 font-semibold bg-gray-white dark:bg-gray-500 text-white"> <div class="space-x-4 pt-2 md:px-5 leading-6 font-semibold bg-gray-white dark:bg-gray-800 text-white">
<div class="container mx-auto"> <div class="container mx-auto">
<% if(locals.bots !== undefined) { %> <% if(locals.bots !== undefined) { %>
<% bots.forEach(function (botData){ %> <% bots.forEach(function (botData){ %>

12
src/Web/assets/views/status.ejs
View File

@@ -2,19 +2,19 @@
<%- include('partials/head', {title: undefined}) %> <%- include('partials/head', {title: undefined}) %>
<body class=""> <body class="">
<script>localStorage.getItem('ms-dark') === 'no' ? document.body.classList.remove('dark') : document.body.classList.add('dark')</script> <script>localStorage.getItem('ms-dark') === 'no' ? document.body.classList.remove('dark') : document.body.classList.add('dark')</script>
<div class="min-w-screen min-h-screen bg-gray-100 bg-gray-100 dark:bg-gray-800 font-sans"> <div class="min-w-screen min-h-screen bg-gray-100 dark:bg-gray-900 font-sans">
<%- include('partials/header') %> <%- include('partials/header') %>
<%- include('partials/botsTab') %> <%- include('partials/botsTab') %>
<div class="container mx-auto"> <div class="container mx-auto">
<%- include('partials/subredditsTab') %> <%- include('partials/subredditsTab') %>
<div class="grid"> <div class="grid">
<div class="bg-white dark:bg-gray-500 dark:text-white"> <div class="bg-white dark:bg-gray-900 dark:text-white">
<div class="pb-6 md:px-7"> <div class="pb-6 md:px-7">
<% bots.forEach(function (bot){ %> <% bots.forEach(function (bot){ %>
<% bot.subreddits.forEach(function (data){ %> <% bot.subreddits.forEach(function (data){ %>
<div class="sub <%= bot.system.running ? '' : 'offline' %>" data-subreddit="<%= data.name %>" data-bot="<%= bot.system.name %>"> <div class="sub <%= bot.system.running ? '' : 'offline' %>" data-subreddit="<%= data.name %>" data-bot="<%= bot.system.name %>">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 gap-5"> <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 gap-5">
<div class="bg-white shadow-md rounded my-3 dark:bg-gray-500 dark:text-white"> <div class="bg-white shadow-md rounded my-3 dark:bg-gray-600 dark:text-white">
<div class="space-x-4 px-4 p-2 leading-2 font-semibold bg-gray-300 dark:bg-gray-700 dark:text-white"> <div class="space-x-4 px-4 p-2 leading-2 font-semibold bg-gray-300 dark:bg-gray-700 dark:text-white">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h4>Overview</h4> <h4>Overview</h4>
@@ -235,7 +235,7 @@
</div> </div>
</div> </div>
<% if (data.name === 'All') { %> <% if (data.name === 'All') { %>
<div class="bg-white shadow-md rounded my-3 dark:bg-gray-500 dark:text-white"> <div class="bg-white shadow-md rounded my-3 dark:bg-gray-600 dark:text-white">
<div class="space-x-4 px-4 p-2 leading-2 font-semibold bg-gray-300 dark:bg-gray-700 dark:text-white"> <div class="space-x-4 px-4 p-2 leading-2 font-semibold bg-gray-300 dark:bg-gray-700 dark:text-white">
<h4>API</h4> <h4>API</h4>
</div> </div>
@@ -264,7 +264,7 @@
</div> </div>
<% } %> <% } %>
<% if (data.name !== 'All') { %> <% if (data.name !== 'All') { %>
<div class="bg-white shadow-md rounded my-3 dark:bg-gray-500 dark:text-white"> <div class="bg-white shadow-md rounded my-3 dark:bg-gray-600 dark:text-white">
<div class="space-x-4 px-4 p-2 leading-2 font-semibold bg-gray-300 dark:bg-gray-700 dark:text-white"> <div class="space-x-4 px-4 p-2 leading-2 font-semibold bg-gray-300 dark:bg-gray-700 dark:text-white">
<h4>Config <h4>Config
<span> <span>
@@ -316,7 +316,7 @@
</div> </div>
</div> </div>
<% } %> <% } %>
<div class="bg-white shadow-md rounded my-3 dark:bg-gray-500 dark:text-white"> <div class="bg-white shadow-md rounded my-3 dark:bg-gray-600 dark:text-white">
<div class="space-x-4 px-4 p-2 leading-2 font-semibold bg-gray-300 dark:bg-gray-700 dark:text-white"> <div class="space-x-4 px-4 p-2 leading-2 font-semibold bg-gray-300 dark:bg-gray-700 dark:text-white">
<h4>Usage</h4> <h4>Usage</h4>
</div> </div>

10
src/util.ts
View File

@@ -756,11 +756,11 @@ export const formatLogLineToHtml = (log: string | LogInfo) => {
stripPrefix: false, stripPrefix: false,
sanitizeHtml: true, sanitizeHtml: true,
}) })
.replace(/(\s*debug\s*):/i, '<span class="debug text-pink-400">$1</span>:') .replace(/(\s*debug\s*):/i, '<span class="debug blue">$1</span>:')
.replace(/(\s*warn\s*):/i, '<span class="warn text-yellow-400">$1</span>:') .replace(/(\s*warn\s*):/i, '<span class="warn yellow">$1</span>:')
.replace(/(\s*info\s*):/i, '<span class="info text-blue-300">$1</span>:') .replace(/(\s*info\s*):/i, '<span class="info green">$1</span>:')
.replace(/(\s*error\s*):/i, '<span class="error text-red-400">$1</span>:') .replace(/(\s*error\s*):/i, '<span class="error red">$1</span>:')
.replace(/(\s*verbose\s*):/i, '<span class="error text-purple-400">$1</span>:') .replace(/(\s*verbose\s*):/i, '<span class="error purple">$1</span>:')
.replaceAll('\n', '<br />'); .replaceAll('\n', '<br />');
//.replace(HYPERLINK_REGEX, '<a target="_blank" href="$&">$&</a>'); //.replace(HYPERLINK_REGEX, '<a target="_blank" href="$&">$&</a>');
return `<div class="logLine">${logContent}</div>` return `<div class="logLine">${logContent}</div>`