Skip to content

Commit 2b6ec96

Browse files
KoushikphyKoushikphy
committed
new dash board style
1 parent 07da3ee commit 2b6ec96

File tree

6 files changed

+178
-156
lines changed

6 files changed

+178
-156
lines changed

‎src/css/style.css‎

Lines changed: 56 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -643,7 +643,7 @@ a:focus{
643643

644644
#figurecontainer{
645645
flex: 1;
646-
z-index: -99;
646+
/* z-index: -99; */
647647
}
648648

649649
#full {
@@ -766,35 +766,6 @@ a:focus{
766766
}
767767

768768

769-
770-
771-
772-
773-
774-
775-
776-
777-
778-
779-
780-
781-
782-
783-
784-
785-
786-
787-
788-
789-
790-
791-
792-
793-
794-
795-
796-
797-
798769
#sidebar{
799770
/* background-color: rgb(243, 243, 243); */
800771
width:0;
@@ -851,96 +822,87 @@ a:focus{
851822

852823
#files{
853824
text-align: left;
854-
font-size: 18px;
825+
font-size: 20px;
855826
height: 100%;
856827
overflow: auto;
857828
}
858829

859830

860831
.fName{
861-
display: inline-block;
862-
width: 95%;
863832
overflow: hidden;
864833
text-overflow: ellipsis;
865-
white-space: nowrap;
866834
margin-left: 5px;
835+
margin-right: 5px;
836+
flex-grow: 1;
867837
}
868838
.fList{
869839
padding: 3px;
870-
margin: 0 0 2px 0;
871-
/* background-color: #1299E6; */
840+
margin: 0 0 10px 2px;
841+
border: 1px solid;
842+
border-radius: 5px 5px 0 0 ;
843+
/* border-style: outset; */
844+
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
845+
transition: .1s;
846+
border-style: solid;
872847
}
873848
.fList:hover{
874-
background-color: #ececec !important;
875-
text-shadow: rgb(10, 10, 10);
876-
padding-left: 1px;
877-
}
878-
.flTools{
879-
display: none;
880-
float:right;
881-
width: fit-content;
849+
box-shadow: 0 8px 7px 0 rgb(0 0 0 / 20%);
882850
}
883-
/* .fList:hover .fclsBtn{
884-
display: inline;
885-
background-color: #ececec !important;
886-
}
887-
.fList:hover .fcpyBtn{
888-
display: inline;
889-
background-color: #ececec !important;
890-
} */
891-
.fList:hover .fName{
892-
width: calc(95% - 7pc);
851+
852+
.nameBar{
853+
display: flex;
854+
margin-bottom: 5px;
893855
}
894856

895-
.fList:hover .flTools{
896-
display: inline !important;
857+
.selected{
858+
background-color: #f5f4f4;
859+
border-width: 1px;
860+
border-style: solid;
861+
box-shadow: 0 10px 7px 0 rgb(0 0 0 / 20%);
862+
background-image: linear-gradient(180deg, #c1c1c1, transparent);
897863
}
898864

865+
866+
867+
.colBar{
868+
text-align: center;
869+
width: fit-content;
870+
margin: auto;
871+
}
899872
.fclsBtn,.fcpyBtn{
900-
/* float: right; */
901873
margin-left: 5px;
902-
display: inline-block;
903874
cursor: pointer;
904-
height: 1.25pc;
905-
width: 1.25pc;
906-
z-index: -1;
907-
background-color: #dbdbdb;
875+
}
876+
.nameBar img{
877+
height: 19px;
908878
}
909879

910-
.flSelect{
911-
/* width: 3pc; */
912-
/* margin-right: 3px; */
913-
/* margin-left: 3px; */
914-
/* cursor: pointer; */
915-
/* font-family: sans-serif; */
916-
font-size: 100%;
917-
/* padding: 3px; */
918-
color: #444;
919-
border: none;
920-
background-color: transparent;
921-
text-decoration: none;
922-
border-radius: 0px;
923-
/* display: inline-block; */
924-
/* zoom: 1; */
925-
/* line-height: normal; */
926-
white-space: nowrap;
927-
padding: 0px;
928-
margin: 0px;
929-
vertical-align: top;
930-
/* text-align: center;*/
931-
-webkit-appearance: none;
932-
width: 2pc;
880+
.sideBar{
881+
background-color: rgb(255, 255, 255);
882+
display: inline-flex;
883+
font-size: 1.05pc;
884+
border: 1px solid black;
885+
border-radius: 2.3px;
886+
/* margin: 0px 5px 0 3px; */
933887
}
934-
.flSelect:active,.flSelect:hover,.flSelect:focus{
935-
box-shadow: none;
888+
889+
.sideBar select{
890+
width: 2.1pc;
891+
border: none;
892+
padding: 0 !important;
893+
margin: 0 !important;
894+
min-width: 2pc !important;
895+
padding-left: 3px;
896+
font-size: 1.05pc !important;
897+
border-left: 1px solid black;
898+
background-color: rgb(255, 255, 255);
899+
text-align-last: center;
936900
}
937901

938-
.selected{
939-
background-color: #dbdbdb;
940-
border-width: 1px;
941-
/* border-style: outset; */
902+
.sideBar span{
903+
min-width: 1.5pc;
904+
text-align: center;
942905
}
943906

944-
/* #lockAxes{
945-
margin: 0 5px 21px 7px;
946-
} */
907+
908+

‎src/html/close.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/html/copy.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/html/index.html‎

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,46 @@
4040
<div id="split-bar"></div>
4141
<div class="closebtn" onclick="closeNav()">X</div>
4242
<div class="sideheader"> Plots</div>
43-
<!-- <div id="lockAllAxes"> onclick="isAxesLocked =!isAxesLocked; document.getElementById('lockAxes').checked=isAxesLocked">
44-
<input type="checkbox" id="lockAxes" name="axes" value="lockAxes" onclick="isAxesLocked =this.checked">
45-
<span for="lockAxes">Lock Axes</span>
46-
</div> -->
47-
<div id="files"></div>
43+
<div id="files">
44+
<div class="fList">
45+
<div class="nameBar">
46+
<div class="fName" title='file name' onclick="console.log('name click')">
47+
1. my_file_name_fheuig_fegbu4ig_UGyugu_fuegeu
48+
</div>
49+
<img class="fcpyBtn" title='Use this file' src="./copy.svg" onclick="console.log('button click');">
50+
<img class="fclsBtn" title='Remove this file' src="./close.svg">
51+
</div>
52+
53+
<div class="colBar">
54+
<div class="sideBar 3D" >
55+
<span>X</span>
56+
<select >
57+
<option value="1">1</option>
58+
<option value="2">2</option>
59+
<option value="3">3</option>
60+
</select>
61+
</div>
62+
63+
<div class="sideBar">
64+
<span>Y</span>
65+
<select >
66+
<option value="1">1</option>
67+
<option value="2">2</option>
68+
<option value="3">3</option>
69+
</select>
70+
</div>
71+
<div class="sideBar">
72+
<span>Z</span>
73+
<select>
74+
<option value="1">1</option>
75+
<option value="2">2</option>
76+
<option value="3">3</option>
77+
</select>
78+
</div>
79+
</div>
80+
81+
</div>
82+
</div>
4883
</div>
4984

5085

@@ -56,13 +91,13 @@
5691

5792
<div class="mySelect 3D" >
5893
<span id='xLabel'>X</span>
59-
<select class="testSelect sWheel" id="xCol" onchange="updateData();this.blur()">
60-
</select></div>
94+
<select class="testSelect sWheel" id="xCol" onchange="updateData();this.blur()"></select>
95+
</div>
6196

6297
<div class="mySelect">
6398
<span id='yLabel'>Y</span>
64-
<select class="testSelect sWheel" id="yCol" onchange="updateData();this.blur()">
65-
</select></div>
99+
<select class="testSelect sWheel" id="yCol" onchange="updateData();this.blur()"></select>
100+
</div>
66101

67102
<div class="mySelect">
68103
<span id='zLabel'>Z</span>

0 commit comments

Comments
 (0)