Skip to content

Commit

Permalink
Merge pull request #55 from DhayanandhS/master
Browse files Browse the repository at this point in the history 
created css variables for colors properties in ejs
  • Loading branch information
@Bhanu-code
Bhanu-code authored May 16, 2024
2 parents 90168dd + 4fdc1e1 commit df36c02
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 115 deletions.
16 changes: 9 additions & 7 deletions public/styles/prisma.css
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
/* styles.css */

body {
font-family: "Reddit Mono", monospace;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}

table {

table.modelTable {

border-collapse: collapse;
margin: auto;
background-color: rgb(252, 252, 216);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.table-name {
text-align: center;
}

th,
th.modelName,
td {
text-align: left;
padding: 8px;
Expand All @@ -42,6 +41,8 @@ tr:nth-child(even) {
z-index: 9999;
}



.modelName {
text-align: center;
font-size: 1.5rem;
Expand All @@ -54,4 +55,5 @@ tr:nth-child(even) {
margin: 20px auto;
}
/* external prisma stylesheet
*/
*/

23 changes: 23 additions & 0 deletions public/styles/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
:root {
/* mongo.ejs */
--required-color: rgb(146, 248, 143);
--unique-color: rgb(79, 79, 253);
/* prisma.ejs */
--default-color: rgb(25, 246, 220);
--primary-key-color: rgb(217, 31, 31);
--auto-generated-color: rgb(233, 169, 59);
--Unique-Color: rgb(26, 186, 112);
--optional-color: rgb(217, 99, 176);
--relational-color: rgb(0, 132, 255);
--default-color: rgb(25, 246, 220);
--primary-key-color: rgb(217, 31, 31);
/* sqlz.ejs */
--allow-null-color: rgb(248, 252, 59);
--requiredcolor: rgb(93, 204, 89);
--auto-increment-color: rgb(243, 74, 52);
--uniquecolor: rgb(42, 241, 241);
--unique-text-color: black;
--primary-key-bg-color: blue;
--references-color: rgb(208, 42, 241);
--references-text-color: rgb(65, 61, 61);
}
22 changes: 12 additions & 10 deletions views/mongo.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
<script src="https://cdn.jsdelivr.net/npm/arrow-line/dist/arrow-line.min.js">
</script>
<link rel="stylesheet" type="text/css" href="/styles/mongo.css">
<link rel="stylesheet" type="text/css" href="/styles/style.css">

</head>

<body>
Expand Down Expand Up @@ -38,18 +40,18 @@
<%= modelsArr[index].schema.path(i).instance %>
</td>
<% if(field[i].required===true){ %>
<% if (field[i].required === true) { %>
<td>
<button class="flag" style="background-color:rgb(146, 248, 143)">required</button>
<button class="flag" style="background-color: var(--required-color)">required</button>
</td>
<% } %>
<% if(field[i].unique===true){ %>
<td>
<button class="flag"
style="background-color:rgb(79, 79, 253)">unique</button>
</td>
<% } %>
<% } %>
<% if (field[i].unique === true) { %>
<td>
<button class="flag" style="background-color: var(--unique-color)">unique</button>
</td>
<% } %>
</tr>
<% }) %>
Expand Down
182 changes: 90 additions & 92 deletions views/prisma.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,100 +5,98 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prisma Visualizer</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/arrow-line/dist/arrow-line.min.js"></script>
<link rel="stylesheet" href="/styles/prisma.css" />
</head>
<link rel="stylesheet" href="./styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/arrow-line/dist/arrow-line.min.js">
</script>
<link rel="stylesheet" type="text/css" href="/styles/prisma.css">
<link rel="stylesheet" type="text/css" href="/styles/style.css">

<body>

</head>
<body>
<% for(let i = 0; i < modelsArr.length; i++) { %>
<table class="modelTable">
<thead>
<tr>
<th
class="modelName"
colspan="<%= Object.keys(fieldsArr[i]).length %>"
>
<%= modelsArr[i] %>
</th>
</tr>
</thead>
<tbody>
<% for(var key in fieldsArr[i]) { %>
<tr>
<td><%= key.toUpperCase() %></td>
<% fieldsArr[i][key].forEach(function(attr) { %>
<%if(attr.includes('default')){%>
<td>
<button class="flag" style="background-color: rgb(25, 246, 220)">
Default
</button>
</td>
<%}%> <%if(attr.includes('@id')){%>
<td>
<button class="flag" style="background-color: rgb(217, 31, 31)">
Primary Key
</button>
</td>
<%}%> <%if(attr.includes('Int')){%>
<td>
<b>Integer</b>
</td>
<%}%> <%if(attr.includes('String'||'string') &&
!attr.endsWith('[]')){%>
<td>
<b>String</b>
</td>
<%}%> <%if(attr.includes('Date'||'Time')){%>
<td>
<b>Date</b>
</td>
<%}%> <%if(attr.includes('autoincrement')){%>
<td>
<button class="flag" style="background-color: rgb(233, 169, 59)">
Auto Generated
</button>
</td>
<%}%> <%if(attr.includes('Float')){%>
<td>
<b>Float</b>
</td>
<%}%> <%if(attr.includes('unique')){%>
<td>
<button class="flag" style="background-color: rgb(26, 186, 112)">
Unique
</button>
</td>
<%}%> <%if(attr.endsWith('?')){%>
<td>
<button class="flag" style="background-color: rgb(217, 99, 176)">
Optional
</button>
</td>
<%}%> <%if(attr.includes("Big")){%>
<td>
<b>Big Int</b>
</td>
<%}%> <%if(attr.includes('relation')){%>
<td>
<button class="flag" style="background-color: rgb(0, 132, 255)">
Relational
</button>
</td>
<%}%> <%if(attr.endsWith('[]')){%>
<td>
<b> <%= attr.slice(0, -2) %> [Array]</b>
</td>
<%}%> <% }); %>
</tr>
<% } %>
</tbody>
</table>
<table class="modelTable">
<thead>
<tr>
<th class="modelName" colspan="<%= Object.keys(fieldsArr[i]).length %>"><%= modelsArr[i] %></th>
</tr>
</thead>
<tbody>
<% for(var key in fieldsArr[i]) { %>
<tr>
<td><%= key.toUpperCase() %></td>
<% fieldsArr[i][key].forEach(function(attr) { %>
<%if(attr.includes('default')){%>
<td>
<button class="flag" style="background-color:var(--default-color)">Default</button>
</td>
<%}%>
<%if(attr.includes('@id')){%>
<td>
<button class="flag" style="background-color:var(--primary-key-color)">Primary Key</button>
</td>
<%}%>
<%if(attr.includes('Int')){%>
<td>
<b>Integer</b>
</td>
<%}%>
<%if(attr.includes('String'||'string') && !attr.endsWith('[]')){%>
<td>
<b>String</b>
</td>
<%}%>
<%if(attr.includes('Date'||'Time')){%>
<td>
<b>Date</b>
</td>
<%}%>
<%if(attr.includes('autoincrement')){%>
<td>
<button class="flag" style="background-color:var(--auto-generated-color)">Auto Generated</button>
</td>
<%}%>
<%if(attr.includes('Float')){%>
<td>
<b>Float</b>
</td>
<%}%>
<%if(attr.includes('unique')){%>
<td>
<button class="flag" style="background-color:var(--Unique-Color)">Unique</button>
</td>
<%}%>
<%if(attr.endsWith('?')){%>
<td>
<button class="flag" style="background-color:var(--optional-color)">Optional</button>
</td>
<%}%>
<%if(attr.includes("Big")){%>
<td>
<b>Big Int</b>
</td>
<%}%>
<%if(attr.includes('relation')){%>
<td>
<button class="flag" style="background-color:var(--relational-color)">Relational</button>
</td>
<%}%>
<%if(attr.endsWith('[]')){%>
<td>
<b> <%= attr.slice(0, -2) %> [Array]</b>
</td>
<%}%>
%>
<% }); %>
</tr>
<% } %>
</tbody>
</table>
<% } %>
<a
href="https://github.com/Bhanu-code/db-drawer"
Expand Down
13 changes: 7 additions & 6 deletions views/sqlz.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<link href="https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/arrow-line/dist/arrow-line.min.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/sqlz.css">
<link rel="stylesheet" type="text/css" href="/styles/style.css">

</head>

Expand Down Expand Up @@ -56,32 +57,32 @@
<% if(item.allowNull===true){ %>
<td>
<button class="flag" style="background-color:rgb(248, 252, 59)">allowNull</button>
<button class="flag" style="background-color:var(--allow-null-color)">allowNull</button>
</td>
<% } %>
<% if(item.required===true){ %>
<td>
<button class="flag" style="background-color:rgb(93, 204, 89)">required</button>
<button class="flag" style="background-color: var(--requiredcolor)">required</button>
</td>
<% } %>
<% if(item.autoIncrement===true){ %>
<td>
<button class="flag" style="background-color:rgb(243, 74, 52)">autoIncrement</button>
<button class="flag" style="background-color: var(--auto-increment-color)">autoIncrement</button>
</td>
<% } %>
<% if(item.unique===true){ %>
<td>
<button class="flag"
style="background-color:rgb(42, 241, 241); color: black;">unique</button>
style="background-color: var(--uniquecolor); color: var(--unique-text-color);">unique</button>
</td>
<% } %>
<% if(item.primaryKey===true){ %>
<td id="st">
<button class="flag" style="background-color:blue">primary key</button>
<button class="flag" style="background-color:var(--primary-key-bg-color)">primary key</button>
</td>
<% } %>
Expand All @@ -92,7 +93,7 @@
<td id="end">
<button class="flag"
style="background-color:rgb(208, 42, 241); color:rgb(65, 61, 61)">
style="background-color:var(--references-color); color:var(--references-text-color)">
references <%= refmodel %>.
<%= key %>
</button>
Expand Down

0 comments on commit df36c02

Please sign in to comment.