pr360-questionnaire 2.1.7 → 2.1.11

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/css/app.scss CHANGED
@@ -12,6 +12,8 @@
12
12
  @import './components/tables';
13
13
  @import './components/tabs';
14
14
  @import './components/modal';
15
+ @import './components/event-details';
16
+ @import './components/prospect-details';
15
17
  @import './components/flash-messages';
16
18
  @import './components/forms';
17
19
  @import './components/grid';
@@ -0,0 +1,92 @@
1
+ .event-details-card {
2
+ background: #fff;
3
+ border-radius: 16px;
4
+ box-shadow: 0 2px 4px rgba(0,0,0,0.08);
5
+ max-width: 700px;
6
+ width: 100%;
7
+ margin: 3vh auto;
8
+ padding: 2rem 2.5rem;
9
+ display: flex;
10
+ flex-direction: column;
11
+ align-items: stretch;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ .event-details-header {
16
+ display: flex;
17
+ align-items: flex-start;
18
+ justify-content: space-between;
19
+ margin-bottom: 1.5rem;
20
+ gap: 1rem;
21
+ }
22
+
23
+ .event-details-title {
24
+ font-size: 1.7rem;
25
+ font-weight: 700;
26
+ color: #222;
27
+ flex: 1;
28
+ word-break: break-word;
29
+ }
30
+
31
+ .event-details-actions {
32
+ display: flex;
33
+ gap: 1rem;
34
+ align-items: center;
35
+ }
36
+
37
+ .event-details-edit {
38
+ color: #2563eb;
39
+ font-size: 1.5rem;
40
+ transition: color 0.2s;
41
+ &:hover { color: #1d4ed8; }
42
+ }
43
+
44
+ .event-details-delete {
45
+ color: #dc2626;
46
+ font-size: 1.5rem;
47
+ transition: color 0.2s;
48
+ &:hover { color: #b91c1c; }
49
+ }
50
+
51
+ .event-details-list {
52
+ display: grid;
53
+ grid-template-columns: max-content 1fr;
54
+ row-gap: 0.7rem;
55
+ column-gap: 1.5rem;
56
+ font-size: 1.1rem;
57
+ width: 100%;
58
+ }
59
+
60
+ .event-details-list dt,
61
+ .event-details-list dd {
62
+ overflow-wrap: break-word;
63
+ word-break: break-word;
64
+ }
65
+
66
+ .event-details-list dt {
67
+ font-weight: 600;
68
+ color: #444;
69
+ text-align: right;
70
+ min-width: 120px;
71
+ }
72
+
73
+ .event-details-list dd {
74
+ margin: 0 0 0.7rem 0;
75
+ color: #222;
76
+ }
77
+
78
+ @media (max-width: 700px) {
79
+ .event-details-card {
80
+ padding: 1rem 0.5rem;
81
+ max-width: 98vw;
82
+ width: 98vw;
83
+ }
84
+ .event-details-title {
85
+ font-size: 1.2rem;
86
+ }
87
+ .event-details-list {
88
+ font-size: 1rem;
89
+ column-gap: 0.5rem;
90
+ width: 100%;
91
+ }
92
+ }
@@ -15,6 +15,7 @@
15
15
  top: 10%;
16
16
  left: 45%;
17
17
  margin-left: -240px;
18
+ z-index: 9999;
18
19
  padding: $space-md;
19
20
  -webkit-box-shadow: 3px 3px 15px 3px #ACACAC;
20
21
  box-shadow: 3px 3px 15px 3px #ACACAC;
@@ -0,0 +1,289 @@
1
+ .prospect-details-card {
2
+ background: #fff;
3
+ border-radius: 16px;
4
+ box-shadow: 0 2px 4px rgba(0,0,0,0.08);
5
+ max-width: 700px;
6
+ width: 100%;
7
+ margin: 3vh auto;
8
+ padding: 2rem 2.5rem;
9
+ display: flex;
10
+ flex-direction: column;
11
+ align-items: stretch;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ .prospect-details-header {
16
+ display: flex;
17
+ align-items: flex-start;
18
+ justify-content: space-between;
19
+ margin-bottom: 1.5rem;
20
+ gap: 1rem;
21
+ }
22
+
23
+ .prospect-details-title {
24
+ font-size: 1.7rem;
25
+ font-weight: 700;
26
+ color: #222;
27
+ flex: 1;
28
+ word-break: break-word;
29
+ }
30
+
31
+ .prospect-details-actions {
32
+ display: flex;
33
+ gap: 1rem;
34
+ align-items: center;
35
+ }
36
+
37
+ .prospect-details-edit {
38
+ color: #2563eb;
39
+ font-size: 1.5rem;
40
+ transition: color 0.2s;
41
+ &:hover { color: #1d4ed8; }
42
+ }
43
+
44
+ .prospect-details-move {
45
+ color: #059669;
46
+ font-size: 1.5rem;
47
+ transition: color 0.2s;
48
+ &:hover { color: #047857; }
49
+ }
50
+
51
+ .prospect-details-delete {
52
+ color: #dc2626;
53
+ font-size: 1.5rem;
54
+ transition: color 0.2s;
55
+ &:hover { color: #b91c1c; }
56
+ }
57
+
58
+ .prospect-details-list {
59
+ display: grid;
60
+ grid-template-columns: max-content 1fr;
61
+ row-gap: 0.7rem;
62
+ column-gap: 1.5rem;
63
+ font-size: 1.1rem;
64
+ width: 100%;
65
+ }
66
+
67
+ .prospect-details-list dt,
68
+ .prospect-details-list dd {
69
+ overflow-wrap: break-word;
70
+ word-break: break-word;
71
+ }
72
+
73
+ .prospect-details-list dt {
74
+ font-weight: 600;
75
+ color: #444;
76
+ text-align: right;
77
+ min-width: 120px;
78
+ }
79
+
80
+ .prospect-details-list dd {
81
+ margin: 0 0 0.7rem 0;
82
+ color: #222;
83
+ }
84
+
85
+ .prospect-row-focused {
86
+ background: #f0f4ff !important;
87
+ transition: background 0.15s;
88
+ }
89
+
90
+ // Larger modal container for prospect details
91
+ #prospect-modal {
92
+ .modal--container {
93
+ background: $white;
94
+ width: 900px;
95
+ position: absolute;
96
+ top: 15%;
97
+ left: 42%;
98
+ margin-left: -380px;
99
+ z-index: 9999;
100
+ padding: $space-md;
101
+ -webkit-box-shadow: 3px 3px 15px 3px #ACACAC;
102
+ box-shadow: 3px 3px 15px 3px #ACACAC;
103
+
104
+ @media screen and (max-width: $screen-tablet) {
105
+ left: 56%;
106
+ }
107
+ }
108
+ }
109
+
110
+ @media (max-width: 700px) {
111
+ .prospect-details-card {
112
+ padding: 1rem 0.5rem;
113
+ max-width: 98vw;
114
+ width: 98vw;
115
+ }
116
+ .prospect-details-title {
117
+ font-size: 1.2rem;
118
+ }
119
+ .prospect-details-list {
120
+ font-size: 1rem;
121
+ column-gap: 0.5rem;
122
+ width: 100%;
123
+ }
124
+ }
125
+
126
+ .prospect-status-list {
127
+ margin-top: 2rem;
128
+ padding: 1.2rem 1.5rem;
129
+ background: #f9fafb;
130
+ border-radius: 10px;
131
+ box-shadow: 0 1px 3px rgba(0,0,0,0.04);
132
+ font-size: 1rem;
133
+ color: #333;
134
+ min-height: 40px;
135
+ max-height: 220px;
136
+ overflow-y: auto;
137
+ display: flex;
138
+ flex-direction: column;
139
+ gap: 0.7rem;
140
+ }
141
+
142
+ .prospect-status-list div {
143
+ display: flex;
144
+ flex-direction: column;
145
+ gap: 0.1rem;
146
+ }
147
+
148
+ .prospect-status-list s {
149
+ color: #888;
150
+ margin-right: 0.3em;
151
+ }
152
+
153
+ .prospect-status-list .tooltip-hr hr {
154
+ border: none;
155
+ border-top: 1px solid #e5e7eb;
156
+ margin: 0.3em 0 0.7em 0;
157
+ }
158
+
159
+ .prospect-status-list strong {
160
+ color: #2563eb;
161
+ }
162
+
163
+ .prospect-status-list .arrow {
164
+ margin: 0 0.3em;
165
+ color: #2563eb;
166
+ font-weight: bold;
167
+ }
168
+
169
+ .prospect-status-list li {
170
+ display: flex;
171
+ justify-content: space-between;
172
+ align-items: center;
173
+ gap: 1em;
174
+ list-style: none;
175
+ padding-bottom: 0.7em;
176
+ border-bottom: 1px solid #e5e7eb;
177
+ }
178
+
179
+ .prospect-status-list li:last-child {
180
+ border-bottom: none;
181
+ }
182
+
183
+ .prospect-status-list .entry-main {
184
+ display: flex;
185
+ flex-direction: column;
186
+ min-width: 0;
187
+ flex: 1 1 0%;
188
+ }
189
+
190
+ .prospect-status-list .entry-main span,
191
+ .prospect-status-list .entry-main strong,
192
+ .prospect-status-list .entry-main > span:last-child {
193
+ word-break: break-word;
194
+ white-space: normal;
195
+ }
196
+
197
+ .prospect-status-list .entry-delete {
198
+ margin-left: 1em;
199
+ flex-shrink: 0;
200
+ align-self: center;
201
+ display: flex;
202
+ align-items: center;
203
+ }
204
+
205
+ // Notes field styling
206
+ .notes-display-field {
207
+ cursor: pointer;
208
+ border: 1px solid #d1d5db;
209
+ border-radius: 6px;
210
+ padding: 8px;
211
+ min-height: 32px;
212
+ background-color: white;
213
+ transition: all 0.2s ease;
214
+ width: 75%;
215
+
216
+ &:hover {
217
+ background-color: #f9fafb;
218
+ border-color: #9ca3af;
219
+ }
220
+ }
221
+
222
+ .notes-content {
223
+ font-size: 14px;
224
+ color: #374151;
225
+ white-space: pre-wrap;
226
+ }
227
+
228
+ .notes-placeholder {
229
+ font-size: 14px;
230
+ color: #6b7280;
231
+ font-style: italic;
232
+ }
233
+
234
+ .notes-textarea {
235
+ width: 75%;
236
+ padding: 8px;
237
+ border: 1px solid #d1d5db;
238
+ border-radius: 6px;
239
+ font-size: 14px;
240
+ min-height: 64px;
241
+ resize: vertical;
242
+ }
243
+
244
+ // UTM tracking list styling
245
+ .prospect-utm-tracking-list {
246
+ margin-top: 1.5rem;
247
+ padding: 1.2rem 1.5rem;
248
+ background: #f9fafb;
249
+ border-radius: 10px;
250
+ box-shadow: 0 1px 3px rgba(0,0,0,0.04);
251
+ font-size: 1rem;
252
+ color: #333;
253
+ min-height: 40px;
254
+ max-height: 220px;
255
+ overflow-y: auto;
256
+ display: flex;
257
+ flex-direction: column;
258
+ gap: 0.7rem;
259
+ }
260
+
261
+ .prospect-utm-tracking-list li {
262
+ display: flex;
263
+ justify-content: space-between;
264
+ align-items: center;
265
+ gap: 1em;
266
+ list-style: none;
267
+ padding-bottom: 0.7em;
268
+ border-bottom: 1px solid #e5e7eb;
269
+ }
270
+
271
+ .prospect-utm-tracking-list li:last-child {
272
+ border-bottom: none;
273
+ }
274
+
275
+ .prospect-utm-tracking-list .entry-main {
276
+ display: flex;
277
+ flex-direction: column;
278
+ min-width: 0;
279
+ flex: 1 1 0%;
280
+ font-size: 0.95rem;
281
+ color: #333;
282
+ }
283
+
284
+ .prospect-utm-tracking-list .entry-main span,
285
+ .prospect-utm-tracking-list .entry-main strong,
286
+ .prospect-utm-tracking-list .entry-main > span:last-child {
287
+ word-break: break-word;
288
+ white-space: normal;
289
+ }