Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

table fixed

Browse Source
This commit is contained in:
Alessandro Francia
2018-06-25 10:00:19 +02:00
parent 7955c44d14
commit 245d8f91b2
9 changed files with 243 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/card.less
+43
View File
@@ -608,6 +608,7 @@
margin-left: 16px;
}
.card-folder-path-name{
width: 100%;
margin-left: 21px;
}
.card-folder-path-arrow{
@@ -616,4 +617,46 @@
margin-right: 21px;
justify-content: flex-end;
}
}
.card-element-queue{
width: 352px;
height: 64px;
display: flex;
flex-flow: row;
border-radius: 2px;
background-color: @color-background-white;
box-shadow: 0 1px 2px 0 @color-black-40;
.card-element-queue-name{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 14px;
color: @color-darkish-blue;
}
.card-element-queue-right{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
.square-number{
width: 48px;
height: 48px;
background-color: @color-duck-egg-blue;
text-align: center;
line-height: 48px;
margin-right: 8px;
label{
font-size: 18px;
color: @color-darkish-blue;
}
}
button.btn {
padding: 0 17px;
i.fa.fa-trash{
font-size: 24px;
}
}
}
}
Step/wwwroot/assets/styles/base/create-queue.less
+29 -2
View File
@@ -69,7 +69,7 @@
display: flex;
flex-flow: row;
.first-column{
height: 100%;
height: calc(~'100% - 19px');
width: 188px;
border-right: solid 2px @color-whitethree;
display: flex;
@@ -82,11 +82,38 @@
}
}
.second-column{
height: 100%;
height: calc(~'100% - 19px');
width: 343px;
border-right: solid 2px @color-whitethree;
display: flex;
flex-flow: column;
padding-top: 19px;
.content{
width: 94%;
height: 100%;
.card-folder-path{
width: 280px;
display: flex;
margin-top: 8px 0 8px 8px;
}
}
}
.third-column{
height: calc(~'100% - 19px');
width: 343px;
border-right: solid 2px @color-whitethree;
display: flex;
flex-flow: column;
padding-top: 19px;
.content{
width: 94%;
height: 100%;
.card-folder-path{
width: 280px;
display: flex;
margin-top: 8px 0 8px 8px;
}
}
}
}
.create-queue-add-queue-footer{
Step/wwwroot/assets/styles/base/maintenance.less
+22 -2
View File
@@ -89,6 +89,7 @@
position: relative;
border: solid 1px @color-label-grey;
table{
table-layout: fixed;
width: 100%;
border-collapse: collapse;
thead tr{
@@ -100,8 +101,27 @@
tr:nth-child(even) {background: #dddddd}
tr:nth-child(odd) {background: #FFF}
th,td{
width: 20%;
th:nth-child(1), td:nth-child(1){
width:190px;
}
th:nth-child(2), td:nth-child(2){
width:300px;
}
th:nth-child(3), td:nth-child(3){
width:150px;
}
th:nth-child(4), td:nth-child(4){
width:150px;
}
th:nth-child(5){
width:162px;
}
td:nth-child(5){
width:126px;
}
th, td{
overflow: hidden;
}
tbody{
display: block;
Step/wwwroot/assets/styles/style.css
+95 -3
View File
@@ -3813,6 +3813,7 @@ footer .container button.big:before {
margin-left: 16px;
}
.card-folder-path .card-folder-path-name {
width: 100%;
margin-left: 21px;
}
.card-folder-path .card-folder-path-arrow {
@@ -3821,6 +3822,47 @@ footer .container button.big:before {
margin-right: 21px;
justify-content: flex-end;
}
.card-element-queue {
width: 352px;
height: 64px;
display: flex;
flex-flow: row;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.card-element-queue .card-element-queue-name {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 14px;
color: #002680;
}
.card-element-queue .card-element-queue-right {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.card-element-queue .card-element-queue-right .square-number {
width: 48px;
height: 48px;
background-color: #e5f1f9;
text-align: center;
line-height: 48px;
margin-right: 8px;
}
.card-element-queue .card-element-queue-right .square-number label {
font-size: 18px;
color: #002680;
}
.card-element-queue .card-element-queue-right button.btn {
padding: 0 17px;
}
.card-element-queue .card-element-queue-right button.btn i.fa.fa-trash {
font-size: 24px;
}
@keyframes selectedanimation {
0% {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -8044,6 +8086,7 @@ footer .container button.big:before {
border: solid 1px #979797;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
@@ -8059,9 +8102,31 @@ footer .container button.big:before {
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tr:nth-child(odd) {
background: #FFF;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table th:nth-child(1),
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table td:nth-child(1) {
width: 190px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table th:nth-child(2),
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table td:nth-child(2) {
width: 300px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table th:nth-child(3),
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table td:nth-child(3) {
width: 150px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table th:nth-child(4),
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table td:nth-child(4) {
width: 150px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table th:nth-child(5) {
width: 162px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table td:nth-child(5) {
width: 126px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table th,
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table td {
width: 20%;
overflow: hidden;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody {
display: block;
@@ -9347,7 +9412,7 @@ footer .container button.big:before {
flex-flow: row;
}
.create-queue-container .create-queue-add-queue .create-queue-add-queue-body .first-column {
height: 100%;
height: calc(100% - 19px);
width: 188px;
border-right: solid 2px #e7e7e7;
display: flex;
@@ -9360,11 +9425,38 @@ footer .container button.big:before {
margin-top: 8px 0 8px 5px;
}
.create-queue-container .create-queue-add-queue .create-queue-add-queue-body .second-column {
height: 100%;
height: calc(100% - 19px);
width: 343px;
border-right: solid 2px #e7e7e7;
display: flex;
flex-flow: column;
padding-top: 19px;
}
.create-queue-container .create-queue-add-queue .create-queue-add-queue-body .second-column .content {
width: 94%;
height: 100%;
}
.create-queue-container .create-queue-add-queue .create-queue-add-queue-body .second-column .content .card-folder-path {
width: 280px;
display: flex;
margin-top: 8px 0 8px 8px;
}
.create-queue-container .create-queue-add-queue .create-queue-add-queue-body .third-column {
height: calc(100% - 19px);
width: 343px;
border-right: solid 2px #e7e7e7;
display: flex;
flex-flow: column;
padding-top: 19px;
}
.create-queue-container .create-queue-add-queue .create-queue-add-queue-body .third-column .content {
width: 94%;
height: 100%;
}
.create-queue-container .create-queue-add-queue .create-queue-add-queue-body .third-column .content .card-folder-path {
width: 280px;
display: flex;
margin-top: 8px 0 8px 8px;
}
.create-queue-container .create-queue-add-queue .create-queue-add-queue-footer {
height: 79px;
Step/wwwroot/src/app.modules.js
+3
View File
@@ -120,6 +120,9 @@ export const CardAxesProduction = () =>
export const CardFolderPath = () =>
import ("./modules/base-components/cards/card-folder-path.vue");
export const CardElementQueue = () =>
import ("./modules/base-components/cards/card-element-queue.vue");
// Test pages
export const TestLoader = () =>
import ("./components/test-loader.vue");
Step/wwwroot/src/app.routes.js
+3 -1
View File
@@ -35,7 +35,8 @@ import {
HeadProduction,
CardAxesProduction,
CardFolderPath,
ModalIframe
ModalIframe,
CardElementQueue
} from "./app.modules";
export let routes = [
@@ -64,6 +65,7 @@ export let routes = [
{ path: "/card-axes-production", component: CardAxesProduction, meta: { title: "Step - Card-Axes-Production", area: "card-axes-production" } },
{ path: "/card-folder-path", component: CardFolderPath, meta: { title: "Step - Card-Folder-Path", area: "card-folder-path" } },
{ path: "/card-element-queue", component: CardElementQueue, meta: { title: "Step - Card-Element-Queue", area: "card-element-queue" } },
{ path: "/card-assisted-tooling", component: CardAssistedTooling, meta: { title: "Step - Card-Assisted-Tooling", area: "card-assisted-tooling" } },
Step/wwwroot/src/components/create-queue.vue
+22 -9
View File
@@ -22,11 +22,18 @@
</div>
<div class="create-queue-add-queue-body">
<div class="first-column">
<card-folder-path @click="selectFolder()"></card-folder-path>
<card-folder-path @click="selectElementSecond()"></card-folder-path>
<card-folder-path name="CN"></card-folder-path>
</div>
<div class="second-column" v-if="enableFolder">
<card-folder-path></card-folder-path>
<div class="second-column" v-if="enableSecondColumn">
<div class="content scrollable">
<card-folder-path name="Cliente A" @click="selectElementThird()"></card-folder-path>
</div>
</div>
<div class="third-column" v-if="enableThirdColumn">
<div class="content scrollable">
<card-folder-path name="Cliente A" @click="selectFolder()" :with-arrow="false"></card-folder-path>
</div>
</div>
</div>
<div class="create-queue-add-queue-footer">
@@ -45,7 +52,7 @@
</div>
</div>
<div class="create-queue-queue-body">
<card-element-queue></card-element-queue>
</div>
<div class="create-queue-queue-footer">
<div class="label-footer">
@@ -60,19 +67,25 @@
</template>
<script>
import cardFolderPath from "../modules/base-components/cards/card-folder-path.vue";
import cardElementQueue from "../modules/base-components/cards/card-element-queue.vue";
export default {
components:{
cardFolderPath
cardFolderPath, cardElementQueue
},
data: function (){
return {
enableFolder: false,
selectedFolder: null
enableSecondColumn: false,
selectedFolder: null,
enableThirdColumn: false
}
},
methods:{
selectFolder(){
this.enableFolder = true;
selectElementSecond(){
this.enableSecondColumn = true;
this.selectedFolder = {};
},
selectElementThird(){
this.enableThirdColumn = true;
this.selectedFolder = {};
}
}
Step/wwwroot/src/modules/base-components/cards/card-element-queue.vue
+23
View File
@@ -0,0 +1,23 @@
<template>
<!-- <div class="test-container"> -->
<div class="card-element-queue">
<div class="card-element-queue-name">
<label>{{name}}</label>
</div>
<div class="card-element-queue-right">
<div class="square-number">
<label>x{{number}}</label>
</div>
<button class="btn"><i class="fa fa-trash"></i></button>
</div>
</div>
<!-- </div> -->
</template>
<script>
export default {
props:{
name: {default: "Part program 01"},
number: { default: 2}
}
};
</script>
Step/wwwroot/src/modules/base-components/cards/card-folder-path.vue
+3 -2
View File
@@ -7,7 +7,7 @@
<div class="card-folder-path-name">
<label>{{name}}</label>
</div>
<div class="card-folder-path-arrow">
<div class="card-folder-path-arrow" v-if="withArrow">
<img src="/assets/icons/_png/caret-right-blu-24x24.png">
</div>
</div>
@@ -17,7 +17,8 @@
export default {
props:{
imgSource: { default: "/assets/icons/_png/folder-closed-25x25.png"},
name:{ default: "PC"}
name:{ default: "PC"},
withArrow: {default: true}
},
methods:{
onClick(){