ode-csslib 4.0.13-dev.202306051723 → 4.0.13-dev.202306091715

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/version.txt CHANGED
@@ -1 +1 @@
1
- entcore-css-lib=4.0-dev-SNAPSHOT 05/06/2023 17:24:16
1
+ entcore-css-lib=4.0-dev-SNAPSHOT 09/06/2023 17:15:50
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ode-csslib",
3
- "version": "4.0.13-dev.202306051723",
3
+ "version": "4.0.13-dev.202306091715",
4
4
  "description": "Open Digital Education Legacy CSS framework",
5
5
  "scripts": {
6
6
  "copy-fonts": "cpr node_modules/entcore-generic-icons/fonts/ assets/fonts/generic-icons/ -o",
@@ -101,6 +101,11 @@ i {
101
101
  content: "\F09C";
102
102
  }
103
103
 
104
+ &.i-earth::before {
105
+ font-family: 'formulaire-mdi';
106
+ content: "\F1E7";
107
+ }
108
+
104
109
  &.i-cancel::before {
105
110
  font-family: 'formulaire-mdi';
106
111
  content: "\F156";
@@ -1 +1,2 @@
1
- @import 'cursor/index';
1
+ @import 'cursor/index';
2
+ @import 'tree/tree';
@@ -0,0 +1,81 @@
1
+ .tree-view {
2
+ min-height: calc(100vh - 74px - 8px - 60px - 60px - 32px);
3
+ text-align: center;
4
+
5
+ .tree-legend{
6
+ display: flex;
7
+ flex-direction: column;
8
+ align-items: flex-start;
9
+ font-style: italic;
10
+ }
11
+
12
+ &-question {
13
+ background: white;
14
+ height: 32px;
15
+ width: calc(((100vw - 70px - 32px) / 3) - 16px);
16
+ min-width: calc(300px - 16px);
17
+ margin: 8px;
18
+ border-radius: 8px;
19
+ box-shadow: 0 2px 5px 2px #bfbfbf7d;
20
+ display: flex;
21
+ align-items: center;
22
+
23
+ img {
24
+ margin: 0 16px;
25
+ }
26
+ }
27
+
28
+ &-section {
29
+ background: white;
30
+ width: calc((100vw - 70px - 32px) /3);
31
+ min-width: 300px;
32
+ margin: 8px;
33
+ border-radius: 5px;
34
+ box-shadow: 0 2px 5px 2px #bfbfbf7d;
35
+ display: flex;
36
+ flex-direction: column;
37
+ align-items: center;
38
+ justify-content: center;
39
+
40
+ .top {
41
+ background: $formulaire-blue;
42
+ color: white;
43
+ min-height: 32px;
44
+ border-radius: 5px 5px 0 0;
45
+ display: flex;
46
+ align-items: center;
47
+
48
+
49
+ &.no-main {
50
+ border-radius: 3px 3px;
51
+ justify-content: center;
52
+ }
53
+
54
+ .title {
55
+ margin-left: 8px;
56
+ }
57
+ }
58
+
59
+ .main {
60
+ min-height: 32px;
61
+ padding: 8px 0;
62
+ display: flex;
63
+ flex-direction: column;
64
+ align-items: center;
65
+ text-align: center;
66
+ }
67
+ }
68
+
69
+ svg {
70
+ border: 1px solid #ddd;
71
+ .node rect {
72
+ fill: transparent;
73
+ }
74
+
75
+ .edgePath path {
76
+ stroke: $formulaire-blue;
77
+ fill: $formulaire-blue;
78
+ stroke-width: 1.5px;
79
+ }
80
+ }
81
+ }
@@ -5,6 +5,13 @@
5
5
  right: -250px;
6
6
  top: 146px;
7
7
  width: 290px;
8
+ bottom:0;
9
+ &-list{
10
+ position: absolute;
11
+ overflow-y: scroll;
12
+ height: 93%;
13
+ bottom: 0;
14
+ }
8
15
  &.show{
9
16
  right: 0px;
10
17
  transition: right 250ms ease;
@@ -4,7 +4,6 @@
4
4
  background: $magneto-white;
5
5
  padding: $spacing-M;
6
6
  padding-left: $spacing-XM;
7
- z-index: 2;
8
7
  @include noTextOverflow(1);
9
8
  h1 {
10
9
  font-family: $magneto-font-secondary;
@@ -25,13 +24,13 @@
25
24
  &-description {
26
25
  height: 64px;
27
26
  overflow-y: auto;
27
+ white-space: pre-line;
28
28
  }
29
29
  }
30
30
 
31
31
  &-header-mobile {
32
32
  background: $magneto-white;
33
- padding: $spacing-LXS;
34
- z-index: 2;
33
+ padding: $spacing-LXS $spacing-LXS $spacing-LXS 73px;
35
34
  top: -12px;
36
35
  @include noTextOverflow(1);
37
36
 
@@ -19,7 +19,6 @@
19
19
 
20
20
  @include mobile {
21
21
  width: 170px;
22
- height: 183px;
23
22
  }
24
23
 
25
24
  &-image {
@@ -32,13 +31,13 @@
32
31
  height: 100%;
33
32
  width: 100%;
34
33
  object-fit: cover;
35
- margin: 5px;
34
+ border-radius: 10px 10px 0 0;
36
35
  }
37
36
  }
38
37
 
39
38
  &-infos {
40
- height: 40%;
41
- margin: 4%;
39
+ height: 25%;
40
+ margin: 2% 4% 6% 4%;
42
41
  flex-direction: column;
43
42
 
44
43
  &-title {
@@ -11,6 +11,8 @@
11
11
  align-items: flex-start;
12
12
  justify-content: center;
13
13
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
14
+ overflow-y: auto;
15
+ overflow-x: hidden;
14
16
 
15
17
  a {
16
18
  color: $magneto-black !important;
@@ -38,8 +40,12 @@
38
40
  align-items: center;
39
41
  justify-content: space-between;
40
42
  flex-direction: column;
41
- margin-top: 200px;
43
+ margin-top: 180px;
42
44
  height: 72%;
45
+ transition: margin-top 0.2s ease-in-out;
46
+ @media screen and (max-height: $magneto-screen-mobile) {
47
+ margin-top: 60px;
48
+ }
43
49
 
44
50
  .item {
45
51
  display: block;
@@ -22,4 +22,6 @@
22
22
  @import "statements-absence-form";
23
23
  @import "editor";
24
24
  @import "events-legend";
25
- @import "events-table";
25
+ @import "events-table";
26
+ @import "init-1d-lightbox";
27
+ @import "init-teachers-lightbox";
@@ -0,0 +1,106 @@
1
+ .init-1d-lightbox {
2
+
3
+ .content {
4
+ width: 75%;
5
+
6
+ .init-1d-lightbox-body {
7
+ padding: 20px;
8
+
9
+ &-warning {
10
+ font-weight: bold;
11
+ }
12
+
13
+ &-schoolyear {
14
+ display: flex;
15
+ flex-direction: column;
16
+
17
+ &-title {
18
+ font-weight: bold;
19
+ }
20
+
21
+ &-content {
22
+ display: flex;
23
+
24
+ &-date {
25
+ margin-right: 16px;
26
+
27
+ .date-picker {
28
+ margin: 8px;
29
+ }
30
+ }
31
+ }
32
+
33
+ }
34
+
35
+ &-timetable {
36
+
37
+ &-title {
38
+ font-weight: bold;
39
+ }
40
+
41
+ &-content {
42
+ &-hours {
43
+ margin: 8px 0;
44
+
45
+ .card {
46
+ padding: 4px;
47
+ margin-right: 8px;
48
+ }
49
+
50
+ .time-picker {
51
+ input[type="time"] {
52
+ height: 15px !important;
53
+ }
54
+ input[type="time"]::-webkit-calendar-picker-indicator {
55
+ background: none;
56
+ display: none;
57
+ }
58
+ }
59
+ }
60
+ &-days {
61
+ display: flex;
62
+ margin: 16px 0;
63
+ align-items: center;
64
+ }
65
+ }
66
+ }
67
+
68
+ &-holidays {
69
+ &-title {
70
+ font-weight: bold;
71
+ }
72
+
73
+ &-content {
74
+ display: flex;
75
+ flex-direction: row;
76
+
77
+ &-system-select {
78
+ display: flex;
79
+ flex-direction: column;
80
+
81
+ .md-radio {
82
+ margin: 16px 0;
83
+ }
84
+ }
85
+
86
+ &-zone-select {
87
+ display: flex;
88
+ padding: 18px;
89
+
90
+ &-zones {
91
+ margin-left: 16px;
92
+ }
93
+ }
94
+ }
95
+ }
96
+
97
+
98
+ }
99
+
100
+ }
101
+
102
+
103
+
104
+
105
+
106
+ }
@@ -0,0 +1,71 @@
1
+ .init-teachers-lightbox {
2
+
3
+ .content {
4
+ width: 50%;
5
+ background: $presences-body;
6
+ }
7
+
8
+ &-head {
9
+ h3 {
10
+ // Styles
11
+ }
12
+ }
13
+
14
+ &-body {
15
+
16
+ &-info {
17
+ padding: 20px;
18
+ display: flex;
19
+ flex-direction: column;
20
+
21
+ b {
22
+ margin-bottom: 16px;
23
+ }
24
+ }
25
+
26
+ &-teachers {
27
+ padding: 20px;
28
+ background: $presences-white;
29
+
30
+ h2 {
31
+ // Styles
32
+ }
33
+
34
+ &-list {
35
+
36
+ height: 220px;
37
+ overflow-y: scroll;
38
+ background: $presences-body;
39
+
40
+ ul {
41
+ padding: 0;
42
+ margin: 0;
43
+ }
44
+
45
+ &-item {
46
+ display: flex;
47
+ flex-direction: row;
48
+ padding: 8px;
49
+ border-bottom: 1px solid $presences-grey-light;
50
+ align-items: center;
51
+
52
+ &-picture {
53
+ margin-right: 8px;
54
+ img {
55
+ border-radius: 50%;
56
+ }
57
+ }
58
+ }
59
+ }
60
+
61
+ &-count {
62
+ padding: 12px;
63
+ font-weight: bold;
64
+ display: flex;
65
+ flex-direction: row;
66
+ box-shadow: 0px 2px 4px 0px $presences-grey;
67
+ justify-content: flex-end;
68
+ }
69
+ }
70
+ }
71
+ }
@@ -295,6 +295,12 @@ $calendar-user-card-height: 56px;
295
295
 
296
296
  .data > em.metadata {
297
297
  margin-right: 4px;
298
+ max-width: -moz-calc(20% - 4px);
299
+ max-width: calc(20% - 4px);
300
+
301
+ text-overflow: ellipsis;
302
+ overflow: hidden;
303
+ white-space: nowrap;
298
304
  }
299
305
 
300
306
  &.contains-absence, &.contains-absenceReason {
@@ -507,7 +513,7 @@ $calendar-user-card-height: 56px;
507
513
  }
508
514
 
509
515
  > div {
510
- display: inline-block;
516
+ display: inline;
511
517
  }
512
518
  }
513
519
  }
@@ -1,16 +1,20 @@
1
1
  @font-face {
2
- font-family: 'material-icons';
3
- src: url('/webconference/public/font/material-design/fonts/materialdesignicons-webfont.eot');
4
- src: url('/webconference/public/font/material-design/fonts/materialdesignicons-webfont.eot') format('embedded-opentype'),
5
- url('/webconference/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff2'),
6
- url('/webconference/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff'),
7
- url('/webconference/public/font/material-design/fonts/materialdesignicons-webfont.ttf') format('truetype');
2
+ font-family: "material-icons";
3
+ src: url("/webconference/public/font/material-design/fonts/materialdesignicons-webfont.eot");
4
+ src: url("/webconference/public/font/material-design/fonts/materialdesignicons-webfont.eot")
5
+ format("embedded-opentype"),
6
+ url("/webconference/public/font/material-design/fonts/materialdesignicons-webfont.woff2")
7
+ format("woff2"),
8
+ url("/webconference/public/font/material-design/fonts/materialdesignicons-webfont.woff2")
9
+ format("woff"),
10
+ url("/webconference/public/font/material-design/fonts/materialdesignicons-webfont.ttf")
11
+ format("truetype");
8
12
  font-weight: normal;
9
13
  font-style: normal;
10
14
  }
11
15
 
12
16
  .wc {
13
- .header {
17
+ div.header {
14
18
  display: flex;
15
19
  height: 50px;
16
20
  .button {
@@ -65,7 +69,8 @@
65
69
  width: 30%;
66
70
  .img-container {
67
71
  border-radius: 4px;
68
- img, .img {
72
+ img,
73
+ .img {
69
74
  width: 25px;
70
75
  height: 25px;
71
76
  margin: 10px;
@@ -88,7 +93,7 @@
88
93
  margin: 1px; // separate buttons
89
94
  }
90
95
 
91
- .logos_div{
96
+ .logos_div {
92
97
  display: flex;
93
98
  justify-content: space-evenly;
94
99
  margin-block-start: auto;
@@ -97,13 +102,13 @@
97
102
  gap: 3px;
98
103
  }
99
104
  i.sharing::before {
100
- font-family: 'material-icons';
105
+ font-family: "material-icons";
101
106
  content: "\F497";
102
107
  font-size: 20px;
103
108
  vertical-align: top;
104
109
  }
105
110
  i.waitingRoom::before {
106
- font-family: 'material-icons';
111
+ font-family: "material-icons";
107
112
  content: "\FB32";
108
113
  font-size: 20px;
109
114
  vertical-align: top;
@@ -111,12 +116,12 @@
111
116
 
112
117
  i.streaming {
113
118
  &.active {
114
- color: #46BFAF;
119
+ color: #46bfaf;
115
120
  }
116
121
  }
117
122
 
118
123
  i.streaming::before {
119
- font-family: 'material-icons';
124
+ font-family: "material-icons";
120
125
  content: "\F118";
121
126
  font-size: 20px;
122
127
  vertical-align: top;
@@ -128,11 +133,11 @@
128
133
  float: right;
129
134
  }
130
135
  }
131
- .emptyscreen{
132
- margin-top:-25px;
133
- img{
134
- width:65%;
135
- height:auto;
136
+ .emptyscreen {
137
+ margin-top: -25px;
138
+ img {
139
+ width: 65%;
140
+ height: auto;
136
141
  }
137
142
  }
138
143
  .padding-bottom-15 {
@@ -156,13 +161,12 @@
156
161
  }
157
162
 
158
163
  .active-streaming {
159
-
160
164
  }
161
165
  }
162
166
 
163
167
  @media screen and (max-width: $tablette) {
164
168
  .grid {
165
- grid-template-columns: repeat(2, 1fr)!important;
169
+ grid-template-columns: repeat(2, 1fr) !important;
166
170
  }
167
171
  .rooms .title-container h2 {
168
172
  font-size: 24px;
@@ -195,9 +199,9 @@
195
199
  grid-template-columns: repeat(1, 1fr) !important;
196
200
  }
197
201
  dots-menu.right {
198
- .options{
202
+ .options {
199
203
  right: 20px;
200
204
  left: auto;
201
205
  }
202
206
  }
203
- }
207
+ }