Hugging Face's logo

Spaces:
UcsTurkey
/
flare
Running

App Files Community
1
ciyidogan commited on
Commit
7a1ee96
·
verified ·
1 Parent(s): 6e7afa4

Update flare-ui/src/app/components/test/test.component.scss

Browse files
Files changed (1) hide show
  1. flare-ui/src/app/components/test/test.component.scss +198 -95
flare-ui/src/app/components/test/test.component.scss CHANGED
@@ -1,131 +1,209 @@
1
  .test-container {
2
- h2 {
3
- margin-bottom: 24px;
4
- }
5
 
6
- .test-controls {
7
- display: flex;
8
- gap: 12px;
9
- margin-bottom: 24px;
10
- flex-wrap: wrap;
 
 
 
11
 
12
- button {
13
  mat-icon {
14
- margin-right: 4px;
 
15
  }
16
  }
 
 
 
 
 
17
  }
18
 
19
- .test-categories {
 
 
 
20
  margin-bottom: 24px;
21
- padding: 20px;
22
 
23
- > mat-checkbox {
24
- margin-bottom: 20px;
25
- display: block;
 
 
 
 
 
 
 
26
  }
27
 
28
- mat-accordion {
29
- mat-expansion-panel {
30
- margin-bottom: 8px;
 
31
 
32
- mat-checkbox {
33
- margin-right: 12px;
34
- }
 
 
35
 
36
- .category-status {
37
- margin-right: 16px;
38
 
39
- mat-chip {
40
- font-size: 11px;
41
- min-height: 20px;
42
- padding: 2px 8px;
43
- margin: 0 2px;
44
 
45
- &.success-chip {
46
- background-color: #e8f5e9;
47
- color: #2e7d32;
48
- }
49
 
50
- &.error-chip {
51
- background-color: #ffebee;
52
- color: #c62828;
53
- }
54
- }
55
- }
56
 
57
- mat-list-item {
58
- .status-PASS { color: #4caf50; }
59
- .status-FAIL { color: #f44336; }
60
- .status-RUNNING { color: #ff9800; }
61
- .status-pending { color: #9e9e9e; }
62
-
63
- .test-duration {
64
- color: #666;
65
- font-size: 12px;
66
- margin-left: 8px;
67
- }
68
 
69
- .test-details {
70
- color: #666;
71
- font-size: 12px;
 
 
72
  }
73
 
74
- .test-error {
75
- color: #f44336;
76
- font-size: 12px;
77
  }
78
 
79
- .running-icon {
80
- animation: spin 1s linear infinite;
81
  }
82
  }
83
  }
84
  }
85
  }
86
 
87
- .test-results {
88
- mat-card-header {
89
- margin-bottom: 16px;
90
- }
91
 
92
- mat-progress-bar {
93
- margin-bottom: 24px;
94
- }
95
 
96
- .test-summary {
97
- display: flex;
98
- gap: 32px;
99
- justify-content: center;
100
- margin-bottom: 16px;
101
 
102
- .summary-item {
103
- display: flex;
104
- align-items: center;
105
- gap: 8px;
106
 
107
- mat-icon {
108
- &.success { color: #4caf50; }
109
- &.error { color: #f44336; }
110
- }
111
 
112
- span {
113
- font-size: 16px;
114
- font-weight: 500;
 
 
 
 
 
 
 
 
 
 
 
 
115
  }
116
  }
117
- }
118
 
119
- .current-test {
120
- text-align: center;
121
- color: #666;
122
- display: flex;
123
- align-items: center;
124
- justify-content: center;
125
- gap: 8px;
126
 
127
- mat-icon {
128
- animation: spin 1s linear infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  }
130
  }
131
  }
@@ -133,23 +211,48 @@
133
  .empty-state {
134
  text-align: center;
135
  padding: 60px 20px;
136
- background: white;
137
- border-radius: 4px;
138
 
139
  mat-icon {
140
  font-size: 64px;
141
  width: 64px;
142
  height: 64px;
143
- color: #e0e0e0;
144
  margin-bottom: 16px;
 
 
 
 
 
 
145
  }
146
 
147
  p {
148
- color: #666;
 
149
  }
150
  }
151
  }
152
 
153
  @keyframes spin {
154
- to { transform: rotate(360deg); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
155
  }
 
1
  .test-container {
2
+ padding: 24px;
3
+ max-width: 1200px;
4
+ margin: 0 auto;
5
 
6
+ .header {
7
+ margin-bottom: 32px;
8
+
9
+ h2 {
10
+ margin: 0 0 8px 0;
11
+ display: flex;
12
+ align-items: center;
13
+ gap: 12px;
14
 
 
15
  mat-icon {
16
+ color: #666;
17
+ vertical-align: middle;
18
  }
19
  }
20
+
21
+ p {
22
+ color: #666;
23
+ margin: 0;
24
+ }
25
  }
26
 
27
+ .actions {
28
+ display: flex;
29
+ gap: 16px;
30
+ align-items: center;
31
  margin-bottom: 24px;
 
32
 
33
+ .run-buttons {
34
+ display: flex;
35
+ gap: 12px;
36
+ align-items: center;
37
+
38
+ .selected-count {
39
+ color: #666;
40
+ font-size: 14px;
41
+ margin-left: 8px;
42
+ }
43
  }
44
 
45
+ .select-all {
46
+ margin-left: auto;
47
+ display: flex;
48
+ align-items: center;
49
 
50
+ mat-checkbox {
51
+ vertical-align: middle;
52
+ }
53
+ }
54
+ }
55
 
56
+ .test-progress {
57
+ margin-bottom: 32px;
58
 
59
+ mat-progress-bar {
60
+ margin-bottom: 8px;
61
+ }
 
 
62
 
63
+ .progress-info {
64
+ display: flex;
65
+ justify-content: space-between;
66
+ align-items: center;
67
 
68
+ .current-test {
69
+ color: #666;
70
+ font-size: 14px;
71
+ }
 
 
72
 
73
+ .test-stats {
74
+ display: flex;
75
+ gap: 16px;
76
+ font-size: 14px;
77
+
78
+ .stat {
79
+ display: flex;
80
+ align-items: center;
81
+ gap: 4px;
 
 
82
 
83
+ mat-icon {
84
+ font-size: 18px;
85
+ width: 18px;
86
+ height: 18px;
87
+ vertical-align: middle;
88
  }
89
 
90
+ &.passed {
91
+ color: #4caf50;
 
92
  }
93
 
94
+ &.failed {
95
+ color: #f44336;
96
  }
97
  }
98
  }
99
  }
100
  }
101
 
102
+ .test-categories {
103
+ mat-expansion-panel {
104
+ margin-bottom: 8px;
 
105
 
106
+ mat-expansion-panel-header {
107
+ padding: 0 24px;
 
108
 
109
+ .category-header {
110
+ display: flex;
111
+ align-items: center;
112
+ width: 100%;
 
113
 
114
+ mat-checkbox {
115
+ margin-right: 16px;
116
+ vertical-align: middle;
117
+ }
118
 
119
+ .category-info {
120
+ flex: 1;
 
 
121
 
122
+ .category-name {
123
+ font-weight: 500;
124
+ }
125
+ }
126
+
127
+ .category-stats {
128
+ display: flex;
129
+ gap: 12px;
130
+ align-items: center;
131
+
132
+ mat-chip {
133
+ min-height: 24px;
134
+ font-size: 12px;
135
+ }
136
+ }
137
  }
138
  }
 
139
 
140
+ .test-list {
141
+ padding: 0 24px 16px 24px;
 
 
 
 
 
142
 
143
+ mat-list-item {
144
+ height: auto;
145
+ padding: 8px 0;
146
+
147
+ .test-item {
148
+ display: flex;
149
+ align-items: center;
150
+ width: 100%;
151
+ gap: 16px;
152
+
153
+ mat-checkbox {
154
+ flex-shrink: 0;
155
+ vertical-align: middle;
156
+ }
157
+
158
+ .test-name {
159
+ flex: 1;
160
+ font-size: 14px;
161
+ }
162
+
163
+ .test-result {
164
+ display: flex;
165
+ align-items: center;
166
+ gap: 8px;
167
+
168
+ mat-icon {
169
+ font-size: 20px;
170
+ width: 20px;
171
+ height: 20px;
172
+ vertical-align: middle;
173
+ }
174
+
175
+ .duration {
176
+ font-size: 12px;
177
+ color: #666;
178
+ }
179
+
180
+ &.pass mat-icon {
181
+ color: #4caf50;
182
+ }
183
+
184
+ &.fail {
185
+ mat-icon {
186
+ color: #f44336;
187
+ }
188
+
189
+ .error-details {
190
+ margin-left: 8px;
191
+ font-size: 12px;
192
+ color: #f44336;
193
+ max-width: 300px;
194
+ white-space: nowrap;
195
+ overflow: hidden;
196
+ text-overflow: ellipsis;
197
+ }
198
+ }
199
+
200
+ &.running mat-icon {
201
+ color: #2196f3;
202
+ animation: spin 1s linear infinite;
203
+ }
204
+ }
205
+ }
206
+ }
207
  }
208
  }
209
  }
 
211
  .empty-state {
212
  text-align: center;
213
  padding: 60px 20px;
214
+ color: #666;
 
215
 
216
  mat-icon {
217
  font-size: 64px;
218
  width: 64px;
219
  height: 64px;
 
220
  margin-bottom: 16px;
221
+ opacity: 0.3;
222
+ }
223
+
224
+ h3 {
225
+ margin: 0 0 8px 0;
226
+ font-weight: normal;
227
  }
228
 
229
  p {
230
+ margin: 0;
231
+ font-size: 14px;
232
  }
233
  }
234
  }
235
 
236
  @keyframes spin {
237
+ from {
238
+ transform: rotate(0deg);
239
+ }
240
+ to {
241
+ transform: rotate(360deg);
242
+ }
243
+ }
244
+
245
+ // Material overrides
246
+ ::ng-deep {
247
+ .mat-mdc-list-item {
248
+ height: auto !important;
249
+ }
250
+
251
+ .mat-expansion-panel-header {
252
+ height: 64px;
253
+ }
254
+
255
+ .mat-expansion-panel-header-title {
256
+ align-items: center;
257
+ }
258
  }