4 次程式碼提交

作者 SHA1 備註 提交日期
  poohr c474cce848 Merge branch 'master' into develop 3 週之前
  poohr 6e6dcb77e5 Merge branch 'master' into develop 3 週之前
  poohr 3a98ee37ad [add] 3 週之前
  poohr 941fefd91e [add] 3 週之前

+ 1
- 1
src/app/pages/danka-edit/danka-edit.html 查看文件

7
   <main class="danka-edit-main">
7
   <main class="danka-edit-main">
8
     <section class="edit-panel">
8
     <section class="edit-panel">
9
       <div class="page-title-area">
9
       <div class="page-title-area">
10
-        <h1>檀家(世帯)編集</h1>
10
+        <h1>{{ danka ? '檀家編集' : '檀家登録' }}</h1>
11
       </div>
11
       </div>
12
 
12
 
13
       <form [formGroup]="dankaForm" class="edit-form">
13
       <form [formGroup]="dankaForm" class="edit-form">

+ 60
- 43
src/app/pages/danka-edit/danka-edit.scss 查看文件

7
 }
7
 }
8
 
8
 
9
 .danka-edit-page {
9
 .danka-edit-page {
10
-  display: flex;
11
-  align-items: flex-start;
12
-  gap: 8px;
10
+  display: grid;
11
+  grid-template-columns: 172px minmax(0, 1fr);
12
+  gap: 20px;
13
+  padding: 0 38px 36px 0;
13
   background: #f4eee4;
14
   background: #f4eee4;
14
 }
15
 }
15
 
16
 
16
 .danka-edit-main {
17
 .danka-edit-main {
17
-  flex: 1;
18
-  padding-right: 34px;
18
+  min-width: 0;
19
   box-sizing: border-box;
19
   box-sizing: border-box;
20
 }
20
 }
21
 
21
 
22
 .edit-panel {
22
 .edit-panel {
23
-  min-height: 650px;
24
-  padding: 26px 34px 36px;
23
+  min-height: 760px;
24
+  padding: 34px 42px 40px;
25
   background: #ffffff;
25
   background: #ffffff;
26
   border: 2px solid #d8caba;
26
   border: 2px solid #d8caba;
27
-  border-radius: 76px;
27
+  border-radius: 64px;
28
   box-sizing: border-box;
28
   box-sizing: border-box;
29
 }
29
 }
30
 
30
 
31
 .page-title-area {
31
 .page-title-area {
32
-  margin-bottom: 8px;
32
+  margin-bottom: 22px;
33
 }
33
 }
34
 
34
 
35
 .page-title-area h1 {
35
 .page-title-area h1 {
36
   margin: 0;
36
   margin: 0;
37
   color: #2f2720;
37
   color: #2f2720;
38
-  font-size: 32px;
39
-  line-height: 1.2;
38
+  font-size: 34px;
39
+  line-height: 1.1;
40
   font-weight: 800;
40
   font-weight: 800;
41
-  letter-spacing: 0.02em;
42
 }
41
 }
43
 
42
 
44
 .edit-form {
43
 .edit-form {
56
 
55
 
57
 .edit-content {
56
 .edit-content {
58
   display: grid;
57
   display: grid;
59
-  grid-template-columns: minmax(0, 1fr) 520px;
60
-  gap: 48px;
58
+  grid-template-columns: minmax(0, 1fr) 500px;
59
+  gap: 32px;
61
   align-items: start;
60
   align-items: start;
62
 }
61
 }
63
 
62
 
64
 .basic-edit-section,
63
 .basic-edit-section,
65
 .phone-edit-section {
64
 .phone-edit-section {
66
-  padding-top: 4px;
65
+  padding-top: 0;
67
 }
66
 }
68
 
67
 
69
 .basic-edit-section h2,
68
 .basic-edit-section h2,
72
   margin: 0;
71
   margin: 0;
73
   color: #2f2720;
72
   color: #2f2720;
74
   font-size: 22px;
73
   font-size: 22px;
74
+  line-height: 1.3;
75
   font-weight: 800;
75
   font-weight: 800;
76
 }
76
 }
77
 
77
 
78
 .section-heading p {
78
 .section-heading p {
79
-  margin: 6px 0 14px;
79
+  margin: 4px 0 12px;
80
   color: #7b6b5c;
80
   color: #7b6b5c;
81
-  font-size: 15px;
81
+  font-size: 14px;
82
 }
82
 }
83
 
83
 
84
 /* 基本情報 */
84
 /* 基本情報 */
85
 .form-list {
85
 .form-list {
86
-  margin-top: 14px;
86
+  margin-top: 12px;
87
 }
87
 }
88
 
88
 
89
 .form-field {
89
 .form-field {
94
 
94
 
95
 .form-row {
95
 .form-row {
96
   display: grid;
96
   display: grid;
97
-  grid-template-columns: 160px 1fr;
97
+  grid-template-columns: 140px 1fr;
98
   align-items: center;
98
   align-items: center;
99
-  gap: 16px;
100
-  margin-bottom: 14px;
99
+  gap: 14px;
100
+  margin-bottom: 12px;
101
 }
101
 }
102
 
102
 
103
 .form-row label {
103
 .form-row label {
104
   color: #4b3c31;
104
   color: #4b3c31;
105
-  font-size: 17px;
105
+  font-size: 15px;
106
   font-weight: 800;
106
   font-weight: 800;
107
 }
107
 }
108
 
108
 
113
   border-radius: 8px;
113
   border-radius: 8px;
114
   background: #fffdf9;
114
   background: #fffdf9;
115
   color: #2f2720;
115
   color: #2f2720;
116
-  font-size: 18px;
116
+  font-size: 16px;
117
   font-weight: 600;
117
   font-weight: 600;
118
   box-sizing: border-box;
118
   box-sizing: border-box;
119
   outline: none;
119
   outline: none;
120
 }
120
 }
121
 
121
 
122
 .form-row input {
122
 .form-row input {
123
-  height: 54px;
123
+  height: 46px;
124
   padding: 0 14px;
124
   padding: 0 14px;
125
 }
125
 }
126
 
126
 
127
 .form-row textarea {
127
 .form-row textarea {
128
-  min-height: 112px;
128
+  min-height: 104px;
129
   padding: 12px 14px;
129
   padding: 12px 14px;
130
   line-height: 1.6;
130
   line-height: 1.6;
131
   resize: vertical;
131
   resize: vertical;
148
 /* 電話番号 */
148
 /* 電話番号 */
149
 .phone-table {
149
 .phone-table {
150
   width: 100%;
150
   width: 100%;
151
+  overflow: hidden;
152
+  border: 2px solid #d8caba;
153
+  border-radius: 8px;
154
+  background: #fffdf9;
151
 }
155
 }
152
 
156
 
153
 .phone-table-header,
157
 .phone-table-header,
155
   display: grid;
159
   display: grid;
156
   grid-template-columns: 1.35fr 1.45fr 84px;
160
   grid-template-columns: 1.35fr 1.45fr 84px;
157
   align-items: center;
161
   align-items: center;
158
-  column-gap: 10px;
162
+  gap: 10px;
159
 }
163
 }
160
 
164
 
161
 .phone-table-header {
165
 .phone-table-header {
162
-  min-height: 38px;
163
-  padding: 0 10px;
164
-  border: 2px solid #d8caba;
165
-  border-radius: 6px;
166
+  min-height: 40px;
167
+  padding: 0 12px;
166
   background: #eadfce;
168
   background: #eadfce;
167
   color: #5a4a3c;
169
   color: #5a4a3c;
168
-  font-size: 15px;
170
+  font-size: 14px;
169
   font-weight: 800;
171
   font-weight: 800;
170
   box-sizing: border-box;
172
   box-sizing: border-box;
171
 }
173
 }
172
 
174
 
173
 .phone-table-row {
175
 .phone-table-row {
174
-  min-height: 56px;
175
-  margin-top: 4px;
176
-  padding: 6px 10px;
177
-  border: 2px solid #d8caba;
178
-  border-radius: 8px;
176
+  min-height: 54px;
177
+  padding: 8px 12px;
178
+  border-top: 1px solid #d8caba;
179
   background: #fffdf9;
179
   background: #fffdf9;
180
   color: #2f2720;
180
   color: #2f2720;
181
-  font-size: 16px;
181
+  font-size: 15px;
182
   box-sizing: border-box;
182
   box-sizing: border-box;
183
 }
183
 }
184
 
184
 
189
 
189
 
190
 .phone-table-row input {
190
 .phone-table-row input {
191
   width: 100%;
191
   width: 100%;
192
-  height: 38px;
192
+  height: 36px;
193
   padding: 0 10px;
193
   padding: 0 10px;
194
   border: none;
194
   border: none;
195
   border-radius: 6px;
195
   border-radius: 6px;
235
 .phone-action {
235
 .phone-action {
236
   display: flex;
236
   display: flex;
237
   justify-content: flex-end;
237
   justify-content: flex-end;
238
-  margin-top: 8px;
238
+  margin-top: 10px;
239
 }
239
 }
240
 
240
 
241
 .add-phone-button {
241
 .add-phone-button {
242
-  width: 170px;
242
+  width: 148px;
243
   height: 46px;
243
   height: 46px;
244
   border: 2px solid #d8caba;
244
   border: 2px solid #d8caba;
245
   border-radius: 8px;
245
   border-radius: 8px;
280
   justify-content: flex-end;
280
   justify-content: flex-end;
281
   align-items: center;
281
   align-items: center;
282
   gap: 12px;
282
   gap: 12px;
283
-  margin-top: 22px;
283
+  margin-top: 26px;
284
 }
284
 }
285
 
285
 
286
 .delete-button,
286
 .delete-button,
287
 .cancel-button,
287
 .cancel-button,
288
 .save-button {
288
 .save-button {
289
   min-width: 116px;
289
   min-width: 116px;
290
-  height: 52px;
290
+  height: 46px;
291
   border: 2px solid #d8caba;
291
   border: 2px solid #d8caba;
292
   border-radius: 8px;
292
   border-radius: 8px;
293
-  font-size: 17px;
293
+  font-size: 16px;
294
   font-weight: 800;
294
   font-weight: 800;
295
   cursor: pointer;
295
   cursor: pointer;
296
   box-sizing: border-box;
296
   box-sizing: border-box;
364
   opacity: 0.5;
364
   opacity: 0.5;
365
   cursor: not-allowed;
365
   cursor: not-allowed;
366
 }
366
 }
367
+
368
+@media (max-width: 1100px) {
369
+  .danka-edit-page {
370
+    grid-template-columns: 1fr;
371
+    padding: 0 24px 32px;
372
+  }
373
+
374
+  .edit-panel {
375
+    min-height: auto;
376
+    border-radius: 28px;
377
+    padding: 28px 24px 32px;
378
+  }
379
+
380
+  .edit-content {
381
+    grid-template-columns: 1fr;
382
+  }
383
+}

+ 65
- 33
src/app/pages/danka-list/danka-list.scss 查看文件

6
 }
6
 }
7
 
7
 
8
 .danka-list-page {
8
 .danka-list-page {
9
-  display: flex;
10
-  align-items: flex-start;
11
-  gap: 8px;
9
+  display: grid;
10
+  grid-template-columns: 172px minmax(0, 1fr);
11
+  gap: 20px;
12
+  padding: 0 38px 36px 0;
12
   background: #f4eee4;
13
   background: #f4eee4;
13
 }
14
 }
14
 
15
 
15
 .danka-list-main {
16
 .danka-list-main {
16
-  flex: 1;
17
-  padding-right: 34px;
17
+  min-width: 0;
18
   box-sizing: border-box;
18
   box-sizing: border-box;
19
 }
19
 }
20
 
20
 
21
 .danka-list-panel {
21
 .danka-list-panel {
22
   position: relative;
22
   position: relative;
23
-  min-height: 650px;
24
-  padding: 26px 36px 40px;
23
+  min-height: 760px;
24
+  padding: 34px 42px 40px;
25
   background: #ffffff;
25
   background: #ffffff;
26
   border: 2px solid #d8caba;
26
   border: 2px solid #d8caba;
27
-  border-radius: 76px;
27
+  border-radius: 64px;
28
   box-sizing: border-box;
28
   box-sizing: border-box;
29
 }
29
 }
30
 
30
 
31
 .page-title-area {
31
 .page-title-area {
32
-  margin-bottom: 8px;
32
+  margin-bottom: 22px;
33
 }
33
 }
34
 
34
 
35
 .page-title-area h1 {
35
 .page-title-area h1 {
36
   margin: 0;
36
   margin: 0;
37
-  font-size: 32px;
38
-  line-height: 1.2;
37
+  font-size: 34px;
38
+  line-height: 1.1;
39
   font-weight: 800;
39
   font-weight: 800;
40
   color: #2f2720;
40
   color: #2f2720;
41
-  letter-spacing: 0.02em;
42
 }
41
 }
43
 
42
 
44
 .search-area {
43
 .search-area {
45
   display: grid;
44
   display: grid;
46
-  grid-template-columns: 1fr 140px 140px;
47
-  gap: 18px;
45
+  grid-template-columns: 1fr 104px 104px;
46
+  gap: 12px;
48
   align-items: center;
47
   align-items: center;
49
-  margin-bottom: 18px;
48
+  margin-bottom: 16px;
50
 }
49
 }
51
 
50
 
52
 .search-box {
51
 .search-box {
53
-  height: 58px;
52
+  height: 46px;
54
   position: relative;
53
   position: relative;
55
   display: flex;
54
   display: flex;
56
   align-items: center;
55
   align-items: center;
57
   background: #ffffff;
56
   background: #ffffff;
58
   border: 2px solid #d8caba;
57
   border: 2px solid #d8caba;
59
-  border-radius: 8px;
58
+  border-radius: 6px;
60
   box-sizing: border-box;
59
   box-sizing: border-box;
61
 }
60
 }
62
 
61
 
63
 .search-icon {
62
 .search-icon {
64
-  width: 42px;
63
+  width: 38px;
65
   display: flex;
64
   display: flex;
66
   align-items: center;
65
   align-items: center;
67
   justify-content: center;
66
   justify-content: center;
68
   color: #6f6257;
67
   color: #6f6257;
69
-  font-size: 34px;
68
+  font-size: 28px;
70
   line-height: 1;
69
   line-height: 1;
71
 }
70
 }
72
 
71
 
78
   outline: none;
77
   outline: none;
79
   background: transparent;
78
   background: transparent;
80
   color: #2f2720;
79
   color: #2f2720;
81
-  font-size: 17px;
80
+  font-size: 16px;
81
+  font-weight: 700;
82
   box-sizing: border-box;
82
   box-sizing: border-box;
83
 }
83
 }
84
 
84
 
85
 .search-box input::placeholder {
85
 .search-box input::placeholder {
86
   color: #6f6257;
86
   color: #6f6257;
87
+  font-weight: 600;
87
 }
88
 }
88
 
89
 
89
 .search-button,
90
 .search-button,
90
 .new-button,
91
 .new-button,
91
 .condition-button {
92
 .condition-button {
92
-  height: 58px;
93
+  height: 46px;
93
   border: 2px solid #8a6543;
94
   border: 2px solid #8a6543;
94
-  border-radius: 8px;
95
+  border-radius: 6px;
95
   background: #ffffff;
96
   background: #ffffff;
96
   color: #8a6543;
97
   color: #8a6543;
97
-  font-size: 18px;
98
+  font-size: 16px;
98
   font-weight: 800;
99
   font-weight: 800;
99
   cursor: pointer;
100
   cursor: pointer;
100
   box-sizing: border-box;
101
   box-sizing: border-box;
115
   align-items: center;
116
   align-items: center;
116
   justify-content: space-between;
117
   justify-content: space-between;
117
   gap: 16px;
118
   gap: 16px;
118
-  margin-bottom: 14px;
119
-  padding: 12px 14px;
119
+  margin-bottom: 16px;
120
+  padding: 10px 12px;
120
   background: #fffdf9;
121
   background: #fffdf9;
121
   border: 2px solid #d8caba;
122
   border: 2px solid #d8caba;
122
-  border-radius: 10px;
123
+  border-radius: 8px;
123
 }
124
 }
124
 
125
 
125
 .filter-button-list {
126
 .filter-button-list {
131
 
132
 
132
 .filter-button {
133
 .filter-button {
133
   min-width: 56px;
134
   min-width: 56px;
134
-  height: 40px;
135
-  padding: 0 14px;
135
+  height: 34px;
136
+  padding: 0 12px;
136
   border: 2px solid #d8caba;
137
   border: 2px solid #d8caba;
137
-  border-radius: 8px;
138
+  border-radius: 6px;
138
   background: #f4eee4;
139
   background: #f4eee4;
139
   color: #2f2720;
140
   color: #2f2720;
140
-  font-size: 16px;
141
+  font-size: 14px;
141
   font-weight: 800;
142
   font-weight: 800;
142
   cursor: pointer;
143
   cursor: pointer;
143
   box-sizing: border-box;
144
   box-sizing: border-box;
160
 .result-count {
161
 .result-count {
161
   margin: 0;
162
   margin: 0;
162
   color: #8a7d6d;
163
   color: #8a7d6d;
163
-  font-size: 15px;
164
+  font-size: 14px;
164
   white-space: nowrap;
165
   white-space: nowrap;
165
 }
166
 }
166
 
167
 
188
 }
189
 }
189
 
190
 
190
 .danka-table-header {
191
 .danka-table-header {
191
-  min-height: 46px;
192
+  min-height: 40px;
192
   padding: 0 14px;
193
   padding: 0 14px;
193
   background: #efe4d6;
194
   background: #efe4d6;
194
   box-sizing: border-box;
195
   box-sizing: border-box;
198
 }
199
 }
199
 
200
 
200
 .danka-table-row {
201
 .danka-table-row {
201
-  min-height: 78px;
202
+  min-height: 62px;
202
   padding: 10px 14px;
203
   padding: 10px 14px;
203
   background: #fffdf9;
204
   background: #fffdf9;
204
   border-top: 1px solid #d8c2aa;
205
   border-top: 1px solid #d8c2aa;
233
   text-align: center;
234
   text-align: center;
234
 }
235
 }
235
 
236
 
237
+@media (max-width: 1100px) {
238
+  .danka-list-page {
239
+    grid-template-columns: 1fr;
240
+    padding: 0 24px 32px;
241
+  }
242
+
243
+  .danka-list-panel {
244
+    min-height: auto;
245
+    border-radius: 28px;
246
+    padding: 28px 24px 32px;
247
+  }
248
+
249
+  .search-area {
250
+    grid-template-columns: 1fr;
251
+  }
252
+
253
+  .filter-row {
254
+    align-items: flex-start;
255
+    flex-direction: column;
256
+  }
257
+
258
+  .danka-table {
259
+    overflow-x: auto;
260
+  }
261
+
262
+  .danka-table-header,
263
+  .danka-table-row {
264
+    min-width: 840px;
265
+  }
266
+}
267
+

+ 0
- 10
src/app/share/header/app-header.html 查看文件

2
   <div class="app-title">
2
   <div class="app-title">
3
     戒名・過去帳管理
3
     戒名・過去帳管理
4
   </div>
4
   </div>
5
-
6
-  <div class="header-actions">
7
-    <button type="button" class="header-button">
8
-      戻る
9
-    </button>
10
-
11
-    <button type="button" class="header-button">
12
-      ホーム
13
-    </button>
14
-  </div>
15
 </header>
5
 </header>

Loading…
取消
儲存