ode-csslib-panda-cg77 3.4.10 → 3.4.11-develop-integration.202504281223

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.
@@ -1,5 +1,6 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <!DOCTYPE html
3
+ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
4
5
 
5
6
  <head>
@@ -8,85 +9,192 @@
8
9
  * {
9
10
  box-sizing: border-box;
10
11
  }
12
+
11
13
  body {
12
14
  font-family: Arial, sans-serif;
13
15
  color: #555;
14
16
  line-height: 1.4;
17
+ margin: 0;
15
18
  }
19
+
16
20
  @page {
17
21
  size: A4;
22
+ margin: 5mm;
18
23
  }
24
+
19
25
  @media print {
20
- html, body {
26
+
27
+ html,
28
+ body {
21
29
  width: 210mm;
22
30
  height: 297mm;
23
31
  }
24
32
  }
33
+
25
34
  p {
26
35
  font-size: 12px;
27
36
  margin: 0;
28
37
  }
38
+
29
39
  strong {
30
40
  color: #444;
31
41
  }
42
+
32
43
  a {
33
44
  color: #3889c1;
34
45
  }
46
+
47
+ .page-container {
48
+ display: grid;
49
+ grid-template-columns: repeat(4, 1fr);
50
+ /* Create 4 equal columns */
51
+ gap: 5mm;
52
+ /* Spacing between cards */
53
+ padding: 5mm;
54
+ /* Consistent padding around the grid */
55
+ width: calc(210mm - 10mm);
56
+ /* Adjust width for page margins */
57
+ min-height: calc(297mm - 10mm);
58
+ /* Adjust height for page margins */
59
+ box-sizing: border-box;
60
+ /* Ensure padding and border are inside the dimensions */
61
+ }
62
+
63
+ .page-break {
64
+ page-break-after: always;
65
+ }
66
+
67
+ .page {
68
+ display: flex;
69
+ flex-wrap: wrap;
70
+ justify-content: space-between;
71
+ align-content: flex-start;
72
+ width: 100%;
73
+ height: 100%;
74
+ page-break-after: always;
75
+ padding: 5mm;
76
+ }
77
+
35
78
  .card {
36
79
  float: left;
37
80
  width: 8cm;
38
- min-height: 5.9cm;
39
- max-height: 6cm;
81
+ min-height: 5.79cm;
82
+ max-height: none;
40
83
  border: 0.5px dashed #ccc;
41
84
  padding: 15px;
42
85
  margin: 0;
86
+ flex-direction: column;
87
+ position: relative;
88
+ overflow: hidden;
43
89
  }
90
+
44
91
  .logo {
45
- width: 100px;
92
+ width: 80px;
46
93
  float: right;
94
+ margin-left: 10px;
95
+ }
96
+
97
+ /* Target the paragraph containing the "relative" information and otherChildren */
98
+ .card>p:nth-child(8) {
99
+ overflow-wrap: break-word;
100
+ /* Adjust the nth-child if your structure changes */
101
+ word-break: break-word;
102
+ /* Ensure long words also break */
103
+ margin-right: 95px;
104
+ /* Forcing line breaks within words if needed */
47
105
  }
106
+
107
+ /* Create a pseudo-element to act as an exclusion zone for the text */
108
+ .card::after {
109
+ content: "";
110
+ position: absolute;
111
+ top: 15px;
112
+ /* Adjust to the top position of your QR code */
113
+ right: 15px;
114
+ /* Adjust to the right position of your QR code */
115
+ width: 90px;
116
+ /* Adjust to be slightly wider than your QR code */
117
+ height: 90px;
118
+ /* Adjust to be slightly taller than your QR code */
119
+ pointer-events: none;
120
+ /* Ensure it doesn't interfere with clicks */
121
+ shape-outside: rectangle(0px, 0px, 90px, 90px);
122
+ /* Define the exclusion shape */
123
+ float: right;
124
+ /* Make it float to influence inline content */
125
+ margin-left: 10px;
126
+ /* Add some spacing */
127
+ }
128
+
48
129
  .grade {
49
130
  display: inline-block;
50
131
  font-size: 11px;
51
- line-height: 12px;
52
- margin-bottom: 10px;
132
+ margin-bottom: 15px;
53
133
  font-style: oblique;
54
134
  }
55
- .relative {
56
- height: 48px;
57
- overflow: hidden;
58
- }
59
- .login {
60
- margin-top: 12px;
61
- }
135
+
62
136
  .name {
137
+ font-size: 16px;
63
138
  margin: 0;
64
- font-size: 14px;
65
139
  line-height: 1.1;
66
140
  }
141
+
67
142
  .activated {
68
143
  font-style: oblique;
69
144
  }
145
+
146
+ .qr {
147
+ width: 80px;
148
+ }
149
+
150
+ .qr-container {
151
+ display: flex;
152
+ flex-direction: column;
153
+ align-items: center;
154
+ text-align: center;
155
+ position: absolute;
156
+ top: 10px;
157
+ right: 10px;
158
+ width: 80px;
159
+ z-index: 1;
160
+ }
161
+
162
+ .qr-text {
163
+ font-size: 10px;
164
+ margin-top: 5px;
165
+ }
70
166
  </style>
71
167
  </head>
72
168
 
73
- <body>
169
+ <body class="page">
74
170
  {{#blocks}}
75
171
  <div style="page-break-after:always;">
76
172
  {{#users}}
77
173
  <div class="card">
78
- <img class="logo" src="logo.png"></img>
174
+ <div style="position: relative;">
175
+ <img class="logo" src="logo.png"></img>
176
+ <div class="qr-container">
177
+ <img class="qr" src="qr-code.png"></img>
178
+ <p class="qr-text">{{#i18n}}classAdmin.template.downloadAppInfo{{/i18n}}</p>
179
+ </div>
180
+ </div>
79
181
  <h2 class="name">{{displayName}}</h2>
80
182
  {{^isGuestOrPersonnel}}
81
- <strong class="grade">{{#i18n}}{{profile}}{{/i18n}}{{#firstClass}} {{#i18n}}classAdmin.template.class{{/i18n}} <strong>{{.}}</strong>{{#otherClasses}}, <strong>{{.}}</strong>{{/otherClasses}}{{/firstClass}}.</strong>
183
+ <strong class="grade">{{#i18n}}{{profile}}{{/i18n}}{{#firstClass}}
184
+ {{#i18n}}classAdmin.template.class{{/i18n}} <strong>{{.}}</strong>{{#otherClasses}},
185
+ <strong>{{.}}</strong>{{/otherClasses}}{{/firstClass}}.</strong>
186
+ <br />
82
187
  {{/isGuestOrPersonnel}}
83
188
  {{#isGuestOrPersonnel}}
84
189
  <strong class="grade">{{#i18n}}{{profile}}{{/i18n}}</strong>
190
+ <br />
85
191
  {{/isGuestOrPersonnel}}
86
192
  {{#firstChild}}
87
- <p class="relative"><strong>{{#i18n}}classAdmin.template.relative{{/i18n}} : </strong><br />{{firstName}} {{lastName}}{{#otherChildren}}, {{firstName}} {{lastName}}{{/otherChildren}}</p>
193
+ <p><strong>{{#i18n}}classAdmin.template.relative{{/i18n}} : </strong><br />{{firstName}}
194
+ {{lastName}}</p>
195
+ <br />
88
196
  {{/firstChild}}
89
- <p class="login"><strong>{{#i18n}}classAdmin.template.id{{/i18n}} : </strong>{{login}}</p>
197
+ <p><strong>{{#i18n}}classAdmin.template.id{{/i18n}} : </strong>{{login}}</p>
90
198
  {{#activationCode}}
91
199
  <p><strong>{{#i18n}}classAdmin.template.code{{/i18n}} : </strong>{{activationCode}}</p>
92
200
  {{/activationCode}}
@@ -112,4 +220,5 @@
112
220
  </div>
113
221
  {{/blocks}}
114
222
  </body>
223
+
115
224
  </html>
package/dist/version.txt CHANGED
@@ -1,2 +1,2 @@
1
- entcore-css-lib 03/03/2025 11:39:15
2
- ode-csslib-panda-cg77 13/03/2025 12:49:06
1
+ entcore-css-lib 26/03/2025 20:54:01
2
+ ode-csslib-panda-cg77 28/04/2025 12:23:57
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ode-csslib-panda-cg77",
3
- "version": "3.4.10",
3
+ "version": "3.4.11-develop-integration.202504281223",
4
4
  "description": "Panda theme by Edifice",
5
5
  "repository": {
6
6
  "type": "git",
@@ -14,7 +14,7 @@
14
14
  "author": "Edifice",
15
15
  "license": "NONE",
16
16
  "dependencies": {
17
- "entcore-css-lib": "npm:ode-csslib@main"
17
+ "entcore-css-lib": "npm:ode-csslib@develop-integration"
18
18
  },
19
19
  "devDependencies": {
20
20
  "concurrently": "5.3.0",