Skip to content

Commit eedb3ba

Browse files
sergiu-ojocsergiu-ojoc
authored
Merge pull request #301 from HDI-Project/cssBootstrap
Css bootstrap
2 parents 4a2db0c + 66f96d8 commit eedb3ba

File tree

4 files changed

+194
-37
lines changed

4 files changed

+194
-37
lines changed

‎client/public/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
<link rel="shortcut icon" type="image/png" href="./img/favicon.png" />
99
<base href="/" />
1010
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
11-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
1211
</head>
1312
<body>
1413
<noscript>You need to enable JavaScript to run this app.</noscript>

‎client/src/assets/sass/_modal.scss‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
.modal {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
z-index: 1050;
6+
display: none;
7+
width: 100%;
8+
height: 100%;
9+
outline: 0;
10+
11+
.modal-dialog {
12+
max-width: 500px;
13+
min-height: calc(100% - 3.5rem);
14+
display: flex;
15+
align-items: center;
16+
margin: 20px auto;
17+
position: relative;
18+
width: auto;
19+
font-size: 14px;
20+
}
21+
22+
.modal-content {
23+
position: relative;
24+
display: flex;
25+
flex-direction: column;
26+
width: 100%;
27+
pointer-events: auto;
28+
border: 1px solid rgba(0,0,0,.2);
29+
border-radius: 4px;
30+
padding: 30px;
31+
background: $second-color;
32+
33+
.modal-header{
34+
font-size: 20px;
35+
padding: 0 0 30px 0;
36+
37+
button{
38+
&.close{
39+
float: right;
40+
background: transparent;
41+
font-size: 24px;
42+
border: none;
43+
cursor: pointer;
44+
margin-top: -6px;
45+
}
46+
}
47+
}
48+
49+
.modal-body {
50+
position: relative;
51+
flex: 1 1 auto;
52+
}
53+
54+
.modal-footer {
55+
margin-top: 30px;
56+
display: flex;
57+
flex-wrap: wrap;
58+
align-items: center;
59+
justify-content: flex-end;
60+
border-bottom-right-radius: calc(.3rem - 1px);
61+
border-bottom-left-radius: calc(.3rem - 1px);
62+
color: #fff;
63+
font-size: 14px;
64+
65+
button{
66+
font-size: 14px;
67+
}
68+
}
69+
}
70+
}
71+
72+
.modal-open {
73+
.modal {
74+
overflow-x: hidden;
75+
overflow-y: auto;
76+
position: fixed;
77+
top: 0;
78+
left: 0;
79+
z-index: 1050;
80+
width: 100%;
81+
height: 100%;
82+
overflow: hidden;
83+
outline: 0;
84+
85+
&.show{
86+
.modal-dialog{
87+
transform: none;
88+
}
89+
}
90+
91+
&.fade {
92+
.modal-dialog {
93+
transition: transform .3s ease-out;
94+
transform: translate(0, -50px);
95+
}
96+
}
97+
}
98+
}
99+
100+
.modal-backdrop {
101+
position: fixed;
102+
top: 0;
103+
left: 0;
104+
z-index: 1040;
105+
width: 100vw;
106+
height: 100vh;
107+
background-color: #000;
108+
109+
&.fade {
110+
opacity: 0;
111+
}
112+
113+
&.show {
114+
opacity: .5;
115+
}
116+
}
117+
118+
.fade {
119+
transition: opacity .15s linear;
120+
}

‎client/src/components/Timeseries/UploadEvents/UploadEvents.scss‎

Lines changed: 70 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,100 @@
11
@import '../../../assets/sass/colors';
2+
@import '../../../assets/sass/modal';
3+
24
button, input, div{
35
outline: none;
46
}
7+
58
// Overwrite modal defaults
69
.upload-modal {
710
border-radius: 4px;
8-
.modal-header{
9-
border-bottom: none;
10-
font-size: 20px;
11-
padding: 30px;
12-
13-
.close{
14-
text-shadow: none;
15-
&.close:hover{
16-
color: #fff;
17-
}
18-
}
19-
}
2011
button{
2112
color: #fff;
2213
font-weight: normal;
23-
outline: none
14+
outline: none;
15+
cursor: pointer;
2416
}
25-
.modal-content{
26-
background: $second-color;
27-
.modal-body{
28-
padding: 0 30px;
17+
18+
.upload-info {
19+
label{
20+
cursor: pointer;
21+
position: relative;
22+
padding-left: 25px;
23+
24+
&:before, &:after {
25+
position: absolute;
26+
}
27+
28+
&:before{
29+
content: "";
30+
top: 2px;
31+
left: 0px;
32+
width: 12px;
33+
height: 12px;
34+
border: 1px solid #fff;
35+
}
36+
37+
&:after {
38+
font-size: 12px;
39+
text-align: center;
40+
content: "\2713";
41+
line-height: 11px;
42+
left: 2px;
43+
top: 4px;
44+
opacity: 0;
45+
transition: all .2s ease-in-out;
46+
}
47+
48+
}
49+
50+
input{
51+
&[type="checkbox"] {
52+
width: 0;
53+
height: 0;
54+
opacity: 0;
55+
position: absolute;
56+
57+
&:checked + label:after {
58+
opacity: 1;
59+
}
60+
}
2961
}
3062
}
63+
3164
.modal-footer{
32-
border-top: none;
33-
color: #fff;
34-
font-size: 14px;
3565
li{
3666
display: inline-block;
3767
margin-right: 5px;
3868
}
69+
3970
button{
4071
background: transparent;
4172
border: none;
4273
padding: 8px 16px;
4374
border-radius: 4px;
4475
color: #fff;
4576
}
46-
.btn-controls{
47-
&.load{
48-
li{
49-
margin-right: 16px;
50-
}
51-
button{
52-
text-transform: uppercase;
53-
&.upload{
54-
background: #2474F4;
55-
opacity: 1;
56-
&:disabled{
57-
cursor: not-allowed;
58-
opacity: 0.5;
59-
}
60-
}
77+
li{
78+
margin-right: 6px;
79+
80+
&:last-child{
81+
margin-right: 0;
82+
}
83+
}
84+
85+
button{
86+
text-transform: uppercase;
87+
&.upload{
88+
background: #2474F4;
89+
opacity: 1;
90+
&:disabled{
91+
cursor: not-allowed;
92+
opacity: 0.5;
6193
}
6294
}
6395
}
6496
}
97+
6598
pre{
6699
margin-top: 30px;
67100
background: $main-color !important;
@@ -70,9 +103,10 @@ button, input, div{
70103
.drop-zone {
71104
border: 2px dashed #787C9D;
72105
padding: 16px;
106+
border-radius: 5px;
73107
p{
74108
cursor: pointer;
75-
margin-bottom: 0;
109+
margin: 0;
76110
text-align: center;
77111
span{
78112
color: #0073FD

‎client/src/components/Timeseries/UploadEvents/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,10 @@ class UploadEvents extends Component<Props, State> {
111111
<div>
112112
<p>Your .JSON file should follow this example:</p>
113113
<SyntaxHighlighter style={dracula}>{codeString}</SyntaxHighlighter>
114+
<div className="upload-info">
115+
<input type="checkbox" id="hideInfo"></input>
116+
<label htmlFor="hideInfo">Do not show me again</label>
117+
</div>
114118
</div>
115119
);
116120
case 2:

0 commit comments

Comments
 (0)