Skip to content

Commit 3be1da6

Browse files
one-communityone-community
authored
Merge pull request #2826 from OneCommunityGlobal/Ramakrishna_Weeklysummary_functional_conversion
Honglin taking over for Ram - Update WeeklySummariesReport.jsx from a class component to a function component
2 parents 817a88e + a01ad58 commit 3be1da6

6 files changed

Lines changed: 1183 additions & 847 deletions

File tree

‎src/components/WeeklySummariesReport/WeeklySummariesReport.css‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
.bg--white-smoke {
2+
background-color: #f6f6f3;
3+
}
4+
5+
.nav-tabs .nav-link {
6+
cursor: pointer;
7+
}
8+
9+
.tab-content {
10+
background-color: #fff;
11+
border: 1px solid transparent;
12+
border-color: #fff #dee2e6 #dee2e6;
13+
}
14+
15+
.report-wrapper {
16+
padding: 20px 0;
17+
margin-top: 5px;
18+
border-bottom: 1px solid #828282;
19+
}
20+
21+
.bio-toggle {
22+
display: inline-block;
23+
}
24+
25+
.name-info {
26+
display: flex;
27+
}
28+
.total-valid-wrapper {
29+
display: flex;
30+
align-items: center;
31+
flex-direction: row;
32+
white-space: nowrap;
33+
}
34+
35+
.badge-tr {
36+
margin-left: 20px;
37+
display: block;
38+
}
39+
40+
.badge-td > img {
41+
float: left;
42+
height: 45px;
43+
width: 45px;
44+
margin: 5px;
45+
}
46+
47+
.nonsummary-wrapper {
48+
display: flex;
49+
flex-direction: row;
50+
}
51+
/* .text-right{
52+
margin
53+
} */
54+
55+
/** switch toggle*/
56+
.switch-toggle-control{
57+
position: relative;
58+
width: 25px;
59+
display: inline-block;
60+
text-align: left;
61+
top: 4px;
62+
margin-left: 5px;
63+
margin-right: 5px;
64+
}
65+
.switch-toggle{
66+
display: none;
67+
}
68+
.switch-toggle-label{
69+
display: block;
70+
overflow: hidden;
71+
cursor: pointer;
72+
border-radius: 10px;
73+
border: 1px solid #bbb;
74+
margin-bottom: 0.5rem;
75+
}
76+
77+
.switch-toggle-inner {
78+
display: block;
79+
width: 200%;
80+
margin-left: -100%;
81+
transition: margin 0.3s ease-in 0s;
82+
}
83+
.switch-toggle-inner:before,
84+
.switch-toggle-inner:after {
85+
float: left;
86+
width: 50%;
87+
height: 13px;
88+
padding: 0;
89+
line-height: 20px;
90+
color: #bbb;
91+
font-weight: bold;
92+
box-sizing: border-box;
93+
}
94+
.switch-toggle-inner:before {
95+
content: "";
96+
padding-left: 2px;
97+
background-color: #2ba6ed;
98+
}
99+
.switch-toggle-inner:after {
100+
content: "";
101+
padding-right: 2px;
102+
text-align: right;
103+
background-color: white;
104+
}
105+
.switch-toggle-switch {
106+
display: block;
107+
width: 9px;
108+
margin: 3px;
109+
background: #bbb;
110+
position: absolute;
111+
top: 0;
112+
bottom: 8px;
113+
right: 10px;
114+
border: 0 solid #827e7e;
115+
border-radius: 25px;
116+
transition: all 0.3s ease-in 0s;
117+
}
118+
.switch-toggle:checked + .switch-toggle-label .switch-toggle-inner {
119+
margin-left: 0;
120+
}
121+
.switch-toggle:checked + .switch-toggle-label .switch-toggle-switch {
122+
right: 0px;
123+
background: white;
124+
}
125+
126+
.weekly-summary-report-container {
127+
display: flex;
128+
flex-direction: row;
129+
}
130+
.weekly-summary-text {
131+
max-width: 100%;
132+
margin-right: 5px;
133+
}
134+
135+
.copy-icon {
136+
cursor: pointer;
137+
margin: 2px 2px;
138+
}
139+
140+
.filter-container {
141+
display: flex;
142+
justify-content: flex-end;
143+
}
144+
.filter-container-teamcode {
145+
display: flex;
146+
justify-content: space-between;
147+
}
148+
149+
150+
.filter-style {
151+
font-size: 0.7em;
152+
display: flex;
153+
align-items: center;
154+
}
155+
156+
157+
.margin-right {
158+
margin-right: 20px;
159+
}
160+
161+
162+
.container-wsr-wrapper {
163+
min-height: 100%;
164+
min-width: 100vw;
165+
}
166+
.hours-not-fulfilled {
167+
color: red;
168+
}
169+
170+
@media screen and (max-width: 544px) {
171+
.responsive-font-size {
172+
font-size: 0.75rem !important;
173+
}
174+
.switch-toggle-control{
175+
margin-left: -6px;
176+
}
177+
}
178+
@media screen and (max-width: 490px) {
179+
.responsive-font-size {
180+
font-size: 0.5rem !important;
181+
}
182+
.switch-toggle-control{
183+
width: 33px;
184+
}
185+
186+
}
187+
188+
@media screen and (max-width: 400px) {
189+
.responsive-font-size {
190+
font-size: 0.3rem !important;
191+
}
192+
.switch-toggle-control{
193+
width: 40px;
194+
}
195+
}
196+
197+
@media (min-width: 482px) {
198+
.teamcode-wrapper {
199+
display: flex;
200+
white-space: nowrap;
201+
align-items: center;
202+
}
203+
}
204+
205+
.code-alert {
206+
margin: 10px 0 0 0;
207+
padding: 8px;
208+
}
209+
210+
.multi-select-filter {
211+
.options {
212+
max-height: 570px;
213+
overflow-y: auto;
214+
font-family: 'Courier New', Courier, monospace;
215+
}
216+
217+
.options::-webkit-scrollbar {
218+
width: 5px;
219+
}
220+
221+
.options::-webkit-scrollbar-track {
222+
background: rgb(0, 0, 0, 0);
223+
}
224+
225+
.options::-webkit-scrollbar-thumb {
226+
background: rgb(206, 212, 218);
227+
border-radius: 8px;
228+
}
229+
230+
.select-item {
231+
padding: 5px 10px;
232+
margin-bottom: 0.25rem;
233+
}
234+
235+
.dropdown-container {
236+
z-index: 2;
237+
}
238+
239+
}

0 commit comments

Comments
 (0)