Skip to content

Commit

Permalink
Generalising some of the paramsTable css into eagleTable for use in g…
Browse files Browse the repository at this point in the history 
…raph configs table
  • Loading branch information
@james-strauss-uwa
james-strauss-uwa committed Aug 22, 2024
1 parent 1ea4f5e commit 1df155d
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 149 deletions.
293 changes: 151 additions & 142 deletions static/tables.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
#paramsTableWrapper {
width: 100%;
top: 24px;
position: absolute;
}

#parameterTableModal .tableReadonlyCell button{
margin-left: 50%;
transform: translate(-50%, 2px);
}

#parameterTableModal #tableInspector{
Expand All @@ -15,12 +8,6 @@
z-index: 111;
}

#parameterTableModal thead{
position: sticky;
z-index: 111;
top: 24px;
}

#tableInspector{
width:100%;
padding:0px;
Expand All @@ -40,11 +27,6 @@
margin: 0px;
}

#parameterTableModal .componentSearchBar{
border: none;
outline: none;
}

#tableInspectorValue:focus, #tableInspectorSelection:focus {
border: none;
outline: none;
Expand All @@ -55,89 +37,11 @@
position: absolute;
}

#parameterTableModal .modal-dialog{
max-width: 1230px;
}

#parameterTableModal .modal-dialog input, #editFieldModal .modal-dialog .dropdown input{
border: none;
width:100%;
}

#parameterTableModal .modal-dialog input:read-only{
color: rgb(91 91 91);
}

#tableInspectorSelection{
color: black !important;
font-weight: 500;
}

#parameterTableModal .modal-dialog input[type="checkbox"]{
height:fit-content;
width: fit-content;
margin-left: 50%;
transform: translateX(-50%);
}

#parameterTableModal .modal-dialog input[type="checkbox"]:focus{
box-shadow: 0 0 0 3px rgb(0, 89, 165);
}

#parameterTableModal .modal-dialog td{
padding:0px 3px;
/* overflow: hidden; */
border-right: 1px solid rgb(14 2 76 / 16%);
position: relative;
}

#parameterTableModal .modal-dialog td i,#editFieldModal .modal-body .dropdown-item i{
margin-left: 50%;
transform: translate(-50%, 2px);
}

#parameterTableModal .typeSelectDelete,#editFieldModal .typeSelectDelete{
position: absolute;
right:5px
}

#parameterTableModal .dropdown-item,#editFieldModal .dropdown-item{
padding:1px 5px;
}

#parameterTableModal .dropdown-item.add,#editFieldModal .dropdown-item.add{
background-color: rgb(235 236 241);
cursor: pointer;
}

#parameterTableModal .dropdown-menu,#editFieldModal .dropdown-menu{
padding: 0px;
border:1px solid black;
overflow: hidden;
min-width: 9rem;
max-height:200px;
overflow-y: auto;
}

#parameterTableModal .modal-dialog .typesInput{
padding: 0px;
height: 35px;
width: 100%;
outline: none;
color: black;
height: fit-content;
border-right: solid 1px #bbbbbb;
}

#parameterTableModal .modal-dialog .input-group{
border:black solid 1px;
border-radius: 2px;
flex-wrap: unset;
height: fit-content;
background-color: white;
padding-left:2px;
}

.parameterTableTypeCustomSelect a {
color: #000;
border: 1px solid black;
Expand Down Expand Up @@ -169,36 +73,6 @@ td:first-child input {
font-weight: 700;
}

#parameterTableModal .modal-dialog td button,#editFieldModal .dropdown-menu button{
border: none;
background-color: transparent;
color: #002e5f;
display: inline-block;
padding: 0px;
height:20px;
width:20px;
border-radius: 10px;
}

#parameterTableModal .modal-dialog td button:disabled{
color: rgb(113 113 113);
}

#parameterTableModal .modal-dialog td button.parameterTableDescriptionBtn, #parameterTableModal .modal-dialog td button.parameterTableCommentBtn {
position: absolute;
right: 4px;
top: 2px;
background-color: #002e5f;
color: white;
display: none;
padding: 1% 0px 0px 0px;
font-size: 12px;
}

#parameterTableModal .column_Encoding .faded{
color: #5b5b5b;
}

#parameterTableVisibilityContainer{
position:absolute;
right: 320px;
Expand Down Expand Up @@ -316,6 +190,10 @@ td:first-child input {
visibility:visible !important;
}

#parameterTableModal .column_Encoding .faded{
color: #5b5b5b;
}

#parameter_table_name{
width: 160px;
}
Expand Down Expand Up @@ -350,12 +228,18 @@ td:first-child input {
padding: 0px;
}

#paramsTableWrapper{
.eagleTableWrapper{
width: 100%;
table-layout: fixed;
position: absolute;
}

.eagleTableWrapper thead{
position: sticky;
z-index: 111;
}

#paramsTableWrapper th{
.eagleTableWrapper th{
background-color: #002349;
color: white;
padding: 5px;
Expand All @@ -371,47 +255,164 @@ td:first-child input {

}

#paramsTableWrapper tr {
.eagleTableWrapper tr {
background-color: white;
}

#paramsTableWrapper tr:nth-child(even) {
.eagleTableWrapper tr:nth-child(even) {
background-color: rgba(214, 219, 239, 0.95);
}

#paramsTableWrapper td.selectedTableParameter {
.eagleTableWrapper tr.highlighted{
background: #8ec0ff;
}

.eagleTableWrapper td.selectedTableParameter {
background-color: rgb(162 202 255 / 95%);
border: #002e5f 2px solid;
}

#paramsTableWrapper td:nth-child(even).selectedTableParameter {
.eagleTableWrapper td:nth-child(even).selectedTableParameter {
background-color: rgb(162 202 255 / 95%);
border: #002e5f 2px solid;
}

#paramsTableWrapper select{
.eagleTableWrapper select{
padding: 0px;
height: fit-content;
margin: 0px;
width: 100%;
}

#paramsTableWrapper input{
.eagleTableWrapper input{
background-color: transparent;
}

#paramsTableWrapper th, #paramsTableWrapper td, #paramsTableWrapper input{
.eagleTableWrapper th, .eagleTableWrapper td, .eagleTableWrapper input{
font-size: 14px;
}

#paramsTableWrapper i{
.eagleTableWrapper i{
font-size:20px;
}

#paramsTableWrapper input:focus{
.eagleTableWrapper input:focus{
outline: none;
}

.eagleTableWrapper .tableReadonlyCell button{
margin-left: 50%;
transform: translate(-50%, 2px);
}

.eagleTableModal .componentSearchBar{
border: none;
outline: none;
}

.eagleTableModal .modal-dialog{
max-width: 1230px;
}

.eagleTableModal .modal-dialog input, #editFieldModal .modal-dialog .dropdown input{
border: none;
width:100%;
}

.eagleTableModal .modal-dialog input:read-only{
color: rgb(91 91 91);
}

.eagleTableModal .modal-dialog input[type="checkbox"]{
height:fit-content;
width: fit-content;
margin-left: 50%;
transform: translateX(-50%);
}

.eagleTableModal .modal-dialog input[type="checkbox"]:focus{
box-shadow: 0 0 0 3px rgb(0, 89, 165);
}

.eagleTableModal .modal-dialog td{
padding:0px 3px;
/* overflow: hidden; */
border-right: 1px solid rgb(14 2 76 / 16%);
position: relative;
}

.eagleTableModal .modal-dialog td i, #editFieldModal .modal-body .dropdown-item i{
margin-left: 50%;
transform: translate(-50%, 2px);
}

.eagleTableModal .typeSelectDelete, #editFieldModal .typeSelectDelete{
position: absolute;
right:5px
}

.eagleTableModal .dropdown-item, #editFieldModal .dropdown-item{
padding:1px 5px;
}

.eagleTableModal .dropdown-item.add, #editFieldModal .dropdown-item.add{
background-color: rgb(235 236 241);
cursor: pointer;
}

.eagleTableModal .dropdown-menu, #editFieldModal .dropdown-menu{
padding: 0px;
border:1px solid black;
overflow: hidden;
min-width: 9rem;
max-height:200px;
overflow-y: auto;
}

.eagleTableModal .modal-dialog .typesInput{
padding: 0px;
height: 35px;
width: 100%;
outline: none;
color: black;
height: fit-content;
border-right: solid 1px #bbbbbb;
}

.eagleTableModal .modal-dialog .input-group{
border:black solid 1px;
border-radius: 2px;
flex-wrap: unset;
height: fit-content;
background-color: white;
padding-left:2px;
}

.eagleTableModal .modal-dialog td button, #editFieldModal .dropdown-menu button{
border: none;
background-color: transparent;
color: #002e5f;
display: inline-block;
padding: 0px;
height:20px;
width:20px;
border-radius: 10px;
}

.eagleTableModal .modal-dialog td button:disabled{
color: rgb(113 113 113);
}

.eagleTableModal .modal-dialog td button.parameterTableDescriptionBtn, .eagleTableModal .modal-dialog td button.parameterTableCommentBtn {
position: absolute;
right: 4px;
top: 2px;
background-color: #002e5f;
color: white;
display: none;
padding: 1% 0px 0px 0px;
font-size: 12px;
}

@media only screen and (max-width: 2010px) {

Expand Down Expand Up @@ -451,15 +452,23 @@ td:first-child input {
cursor: col-resize;
}

#parameterTableModal tr.highlighted{
background: #8ec0ff;
}





#tableOpenDocker{
position: absolute;
left: 160px;
}

#graphConfigurationsTableWrapper {
}

#graphConfigurationsTableModal .modal-body{
padding: 0px;
}

#graph_configurations_table_sort_column{
width: 27px;
min-width: 27px;
max-width: 27px;
}
Loading

0 comments on commit 1df155d

Please sign in to comment.