add solution page

2023-11-15 09:56:14 +01:00
parent ea68f44194
commit 529292cea1
6 changed files with 211 additions and 4 deletions
--- a/components/server/SolutionTable.vue
+++ b/components/server/SolutionTable.vue
@ -0,0 +1,123 @@
+<template>
+    <div class="data">
+        <div class="label">Last viewed:</div>
+        <table class="data-table" id="solution-table">
+            <tr class="table-row" id="table-head">
+                <th class="Client">Client</th>
+                <th class="Name">Name</th>
+                <th class="Asset">Asset</th>
+                <th class="Type">Type</th>
+                <th class="User">User</th>
+            </tr>
+            <tr class="table-row" id="row-1">
+                <td class="Client">...</td>
+                <td class="Name">...</td>
+                <td class="Asset">...</td>
+                <td class="Type">...</td>
+                <td class="User">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "SolutionTable",
+
+}
+
+</script>
+  
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+    border-top: 0.0625rem solid #000000;
+}
+
+#table-head {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    color: #ffffff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Client {
+    width: 33.3%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name {
+    width: 33.3%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset {
+    width: 12.7%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type {
+    width: 12.7%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.User {
+    width: 8%;
+}
+
+.label {
+  width: 6.0625em;
+  height: 1.875em;
+  font-family: 'Overpass';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1em;
+  line-height: 1.875em;
+  letter-spacing: 0.05em;
+  color: #FFFFFF;
+}
+</style>