added the other components of the solution page
This commit is contained in:
@ -37,7 +37,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
198
components/server/Solution.vue
Normal file
198
components/server/Solution.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<section class="information">
|
||||
<h2 class="solution-name">Solution name</h2>
|
||||
<div class="solution-data">
|
||||
<div class="client-asset">
|
||||
<div class="data-field" id="client">
|
||||
<pre class="label">Client:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="asset">
|
||||
<pre class="label">Asset:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="data-field" id="user">
|
||||
<pre class="label">User:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
<div class="type-state">
|
||||
<div class="data-field" id="type">
|
||||
<pre class="label">Type:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="state">
|
||||
<pre class="label">State:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-data">
|
||||
<div class="additional">
|
||||
<div class="description">
|
||||
<h3 class="area-title">Description of the problem/intended use:</h3>
|
||||
<pre class="data" id="description">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-data">
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 class="area-title">Notes:</h3>
|
||||
<pre class="data" id="notes">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "Solution",
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
|
||||
.solution-name {
|
||||
align-self: stretch;
|
||||
padding: 1rem 0;
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.data-field#street-name {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.data-field#street-no {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.solution-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.client-asset,
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
line-height: normal;
|
||||
width: 50%;
|
||||
padding: 0 0;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.additional {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
padding: 0rem 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.type-state {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
padding: 0 1.875rem 0 0;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.data#notes,
|
||||
.data#description {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||
}
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
117
components/server/SolutionChecklist.vue
Normal file
117
components/server/SolutionChecklist.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="data">
|
||||
<div class="label">Checklist:</div>
|
||||
<table class="data-table" id="solution-checkklist">
|
||||
<tr class="table-row" id="table-head">
|
||||
<th class="Step">Step</th>
|
||||
<th class="Asset">Asset</th>
|
||||
<th class="Task">Task</th>
|
||||
<th class="Comments">Comments</th>
|
||||
</tr>
|
||||
<tr class="table-row" id="row-1">
|
||||
<td class="Step">...</td>
|
||||
<td class="Asset">...</td>
|
||||
<td class="Task">...</td>
|
||||
<td class="Comments">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "SolutionChecklist",
|
||||
|
||||
}
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
|
||||
.Step {
|
||||
width: 8%;
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Asset {
|
||||
width: 22%;
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Task {
|
||||
width: 35%;
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Comments {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.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>
|
||||
116
components/server/SolutionTableNoClient.vue
Normal file
116
components/server/SolutionTableNoClient.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="data">
|
||||
<div class="label">Solutions:</div>
|
||||
<table class="data-table" id="solution-table">
|
||||
<tr class="table-row" id="table-head">
|
||||
<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="Name">...</td>
|
||||
<td class="Asset">...</td>
|
||||
<td class="Type">...</td>
|
||||
<td class="User">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "SolutionTableNoClient",
|
||||
|
||||
}
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.Name {
|
||||
width: 45%;
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Asset {
|
||||
width: 22.5%;
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Type {
|
||||
width: 22.5%;
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.User {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -6,6 +6,9 @@
|
||||
<div id="content-body">
|
||||
<ClientSearch />
|
||||
<SolutionTable />
|
||||
<SolutionTableNoClient />
|
||||
<Solution />
|
||||
<SolutionChecklist />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -20,12 +23,18 @@
|
||||
<script>
|
||||
import ClientSearch from "../components/ClientSearch.vue";
|
||||
import SolutionTable from "../components/server/SolutionTable.vue";
|
||||
import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vue";
|
||||
import Solution from "../components/server/Solution.vue";
|
||||
import SolutionChecklist from "../components/server/SolutionChecklist.vue";
|
||||
|
||||
export default {
|
||||
name: "AssetPage",
|
||||
components: {
|
||||
ClientSearch,
|
||||
SolutionTable,
|
||||
SolutionTableNoClient,
|
||||
Solution,
|
||||
SolutionChecklist,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user