pr360-questionnaire 2.1.6 → 2.1.10

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,10 +12,13 @@
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';
18
20
  @import './components/questionnaire';
21
+ @import './components/site-rules';
19
22
 
20
23
  // Imported last to take precedence in the cascade
21
24
  @import './base/utilities';
@@ -25,6 +25,7 @@ $gray: hsl(46, 3%, 58%);
25
25
  $gray-dark: hsl(46, 3%, 35%);
26
26
  $gray-darkest: hsl(46, 3%, 25%);
27
27
  $black: #1d1d1d;
28
+ $danger: #f02e2e;
28
29
 
29
30
 
30
31
  // SPACING
@@ -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,203 @@
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
+ }
@@ -0,0 +1,189 @@
1
+
2
+ #move-rules-modal {
3
+ .mr-4 {
4
+ margin-right: 16px ;
5
+ }
6
+ .mt-5 {
7
+ margin-top: 20px;
8
+ }
9
+
10
+ .mb-2 {
11
+ margin-bottom: 8px;
12
+ }
13
+ .text-5 {
14
+ font-size: 20px
15
+ }
16
+ .text-6 {
17
+ font-size: 24px
18
+ }
19
+
20
+ .title-alignment {
21
+ display: flex;
22
+ align-items: center;
23
+ }
24
+
25
+ .rules-header {
26
+ display: flex;
27
+ justify-content: space-between;
28
+ align-items: center;
29
+
30
+ h2 {
31
+ font-weight: bolder;
32
+ }
33
+ }
34
+
35
+ .rules-list {
36
+ max-height: 400px;
37
+ overflow-y: scroll;
38
+ margin-bottom: 8px;
39
+ border: 1px solid #bebebe;
40
+ border-radius: 5px;
41
+ padding: 12px 10px;
42
+ }
43
+
44
+ .modal-title {
45
+ margin-top: 20px;
46
+ margin-bottom: 8px;
47
+ font-weight: bolder;
48
+ }
49
+
50
+ .empty-list {
51
+ text-align: center;
52
+ margin-top: 24px;
53
+ font-weight: lighter;
54
+ }
55
+
56
+ .row-container:not(:last-child) {
57
+ margin-bottom: 12px;
58
+ padding-bottom: 6px;
59
+ border-bottom: 1px solid #d8d8d8;
60
+ }
61
+
62
+ .row-container {
63
+ display: flex;
64
+ justify-content: space-between;
65
+ align-items: center;
66
+ }
67
+
68
+ .row {
69
+ display: flex;
70
+ justify-content: space-between;
71
+ align-items: center;
72
+ font-size: 18px;
73
+ }
74
+
75
+ .drag-icon {
76
+ font-size: 20px;
77
+ font-weight: bold;
78
+ margin-right: 12px;
79
+ }
80
+
81
+ .position-text {
82
+ margin-right: 4px;
83
+ }
84
+
85
+ .text-container {
86
+ display: flex;
87
+ align-items: center;
88
+ gap: 6px
89
+ }
90
+
91
+ .quick-actions {
92
+ display: flex;
93
+ align-items: center;
94
+ gap: 16px;
95
+
96
+ }
97
+
98
+ .icon-btn {
99
+ background: transparent;
100
+ padding: 0;
101
+ cursor: pointer;
102
+
103
+ }
104
+
105
+ .site-pill {
106
+ font-size: 12px;
107
+ display: inline;
108
+ font-weight: bold;
109
+ border-radius: 10px;
110
+ background: gray;
111
+ padding: 4px 9px;
112
+ color: white;
113
+ }
114
+
115
+ .rule-form-row {
116
+ display: flex;
117
+ align-items: center;
118
+ gap: 6px;
119
+ padding-top: 10px;
120
+
121
+ textarea {
122
+ resize: both;
123
+ overflow: auto;
124
+ max-width: 786px;
125
+ max-height: 120px;
126
+ width: 100%;
127
+ height: 100%;
128
+ }
129
+ }
130
+
131
+ .rule-form-actions {
132
+ margin-top: 24px;
133
+ }
134
+
135
+ .zip-list-modal{
136
+ border: 1px solid #a3a3a3;
137
+ border-radius: 5px;
138
+ padding: 12px 10px;
139
+ }
140
+
141
+ .zip-list-box{
142
+ overflow-y: scroll;
143
+ border: 1px solid #e2dada;
144
+ border-radius: 5px;
145
+ padding: 6px 5px;
146
+ }
147
+
148
+ .close-btn{
149
+ margin-top: 5px;
150
+ }
151
+
152
+ .alert_error{
153
+ background-color: #ff2424;
154
+ padding: 10px 5px;
155
+ border: 1px solid #0c0909;
156
+ border-radius: 5px;
157
+ width: 786px;
158
+
159
+ h3 {
160
+ display: flex;
161
+ justify-content: space-between;
162
+ align-items: center;
163
+ color: #150f0f;
164
+ }
165
+ }
166
+
167
+
168
+
169
+
170
+ .modal--container{
171
+ background: $white;
172
+ width: 850px;
173
+ position: absolute;
174
+ top: 20%;
175
+ left: 43%;
176
+ margin-left: -330px;
177
+ padding: $space-md;
178
+ -webkit-box-shadow: 3px 3px 15px 3px #ACACAC;
179
+ box-shadow: 3px 3px 15px 3px #ACACAC;
180
+
181
+ @media screen and (max-width: $screen-tablet) {
182
+ left: 56%;
183
+ }
184
+ }
185
+
186
+ .rule-form-modal Select {
187
+ max-width: 150px;
188
+ }
189
+ }