poohr 3 недель назад
Родитель
Сommit
ade8d77d9d
3 измененных файлов: 102 добавлений и 107 удалений
  1. 25
    29
      src/app/pages/event/event.scss
  2. 25
    29
      src/app/pages/memorial-list/memorial-list.scss
  3. 52
    49
      src/app/pages/search/search.scss

+ 25
- 29
src/app/pages/event/event.scss Просмотреть файл

7
 }
7
 }
8
 
8
 
9
 .event-page {
9
 .event-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
 .event-main {
17
 .event-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
 .event-panel {
22
 .event-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
 
45
 .page-title-row h1 {
45
 .page-title-row h1 {
46
   margin: 0;
46
   margin: 0;
47
   color: #2f2720;
47
   color: #2f2720;
48
-  font-size: 32px;
49
-  line-height: 1.2;
48
+  font-size: 34px;
49
+  line-height: 1.1;
50
   font-weight: 800;
50
   font-weight: 800;
51
-  letter-spacing: 0.02em;
52
 }
51
 }
53
 
52
 
54
 .filter-row {
53
 .filter-row {
74
 
73
 
75
 .filter-field select,
74
 .filter-field select,
76
 .search-field input {
75
 .search-field input {
77
-  height: 38px;
76
+  height: 46px;
78
   padding: 0 14px;
77
   padding: 0 14px;
79
   border: 2px solid #d8caba;
78
   border: 2px solid #d8caba;
80
   border-radius: 8px;
79
   border-radius: 8px;
116
 .list-header-row h2 {
115
 .list-header-row h2 {
117
   margin: 0;
116
   margin: 0;
118
   color: #2f2720;
117
   color: #2f2720;
119
-  font-size: 26px;
118
+  font-size: 22px;
120
   font-weight: 800;
119
   font-weight: 800;
121
 }
120
 }
122
 
121
 
147
 }
146
 }
148
 
147
 
149
 .event-table-header {
148
 .event-table-header {
150
-  min-height: 46px;
149
+  min-height: 40px;
151
   padding: 0 14px;
150
   padding: 0 14px;
152
   background: #efe4d6;
151
   background: #efe4d6;
153
   color: #111111;
152
   color: #111111;
157
 }
156
 }
158
 
157
 
159
 .event-table-row {
158
 .event-table-row {
160
-  min-height: 78px;
159
+  min-height: 62px;
161
   padding: 10px 14px;
160
   padding: 10px 14px;
162
   border-top: 1px solid #d8c2aa;
161
   border-top: 1px solid #d8c2aa;
163
   background: #fffdf9;
162
   background: #fffdf9;
234
 }
233
 }
235
 
234
 
236
 @media (max-width: 1100px) {
235
 @media (max-width: 1100px) {
236
+  .event-page {
237
+    grid-template-columns: 1fr;
238
+    padding: 0 24px 32px;
239
+  }
240
+
241
+  .event-panel {
242
+    min-height: auto;
243
+    border-radius: 28px;
244
+    padding: 28px 24px 32px;
245
+  }
246
+
237
   .page-title-row {
247
   .page-title-row {
238
     flex-direction: column;
248
     flex-direction: column;
239
   }
249
   }
249
 }
259
 }
250
 
260
 
251
 @media (max-width: 800px) {
261
 @media (max-width: 800px) {
252
-  .event-page {
253
-    flex-direction: column;
254
-  }
255
-
256
-  .event-main {
257
-    width: 100%;
258
-    padding: 16px 20px 32px;
259
-  }
260
-
261
-  .event-panel {
262
-    padding: 24px 20px 30px;
263
-    border-radius: 32px;
264
-  }
265
-
266
   .page-title-row h1 {
262
   .page-title-row h1 {
267
     font-size: 26px;
263
     font-size: 26px;
268
   }
264
   }

+ 25
- 29
src/app/pages/memorial-list/memorial-list.scss Просмотреть файл

7
 }
7
 }
8
 
8
 
9
 .memorial-list-page {
9
 .memorial-list-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
 .memorial-list-main {
17
 .memorial-list-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
 .memorial-panel {
22
 .memorial-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
 
45
 .page-title-row h1 {
45
 .page-title-row h1 {
46
   margin: 0;
46
   margin: 0;
47
   color: #2f2720;
47
   color: #2f2720;
48
-  font-size: 32px;
49
-  line-height: 1.2;
48
+  font-size: 34px;
49
+  line-height: 1.1;
50
   font-weight: 800;
50
   font-weight: 800;
51
-  letter-spacing: 0.02em;
52
 }
51
 }
53
 
52
 
54
 .filter-row {
53
 .filter-row {
74
 
73
 
75
 .filter-field select,
74
 .filter-field select,
76
 .search-field input {
75
 .search-field input {
77
-  height: 38px;
76
+  height: 46px;
78
   padding: 0 14px;
77
   padding: 0 14px;
79
   border: 2px solid #d8caba;
78
   border: 2px solid #d8caba;
80
   border-radius: 8px;
79
   border-radius: 8px;
120
 .list-header-row h2 {
119
 .list-header-row h2 {
121
   margin: 0;
120
   margin: 0;
122
   color: #2f2720;
121
   color: #2f2720;
123
-  font-size: 26px;
122
+  font-size: 22px;
124
   font-weight: 800;
123
   font-weight: 800;
125
 }
124
 }
126
 
125
 
151
 }
150
 }
152
 
151
 
153
 .memorial-table-header {
152
 .memorial-table-header {
154
-  min-height: 46px;
153
+  min-height: 40px;
155
   padding: 0 14px;
154
   padding: 0 14px;
156
   background: #efe4d6;
155
   background: #efe4d6;
157
   color: #111111;
156
   color: #111111;
161
 }
160
 }
162
 
161
 
163
 .memorial-table-row {
162
 .memorial-table-row {
164
-  min-height: 78px;
163
+  min-height: 62px;
165
   padding: 10px 14px;
164
   padding: 10px 14px;
166
   border-top: 1px solid #d8c2aa;
165
   border-top: 1px solid #d8c2aa;
167
   background: #fffdf9;
166
   background: #fffdf9;
223
 }
222
 }
224
 
223
 
225
 @media (max-width: 1100px) {
224
 @media (max-width: 1100px) {
225
+  .memorial-list-page {
226
+    grid-template-columns: 1fr;
227
+    padding: 0 24px 32px;
228
+  }
229
+
230
+  .memorial-panel {
231
+    min-height: auto;
232
+    border-radius: 28px;
233
+    padding: 28px 24px 32px;
234
+  }
235
+
226
   .page-title-row {
236
   .page-title-row {
227
     flex-direction: column;
237
     flex-direction: column;
228
   }
238
   }
238
 }
248
 }
239
 
249
 
240
 @media (max-width: 800px) {
250
 @media (max-width: 800px) {
241
-  .memorial-list-page {
242
-    flex-direction: column;
243
-  }
244
-
245
-  .memorial-list-main {
246
-    width: 100%;
247
-    padding: 16px 20px 32px;
248
-  }
249
-
250
-  .memorial-panel {
251
-    padding: 24px 20px 30px;
252
-    border-radius: 32px;
253
-  }
254
-
255
   .page-title-row h1 {
251
   .page-title-row h1 {
256
     font-size: 26px;
252
     font-size: 26px;
257
   }
253
   }

+ 52
- 49
src/app/pages/search/search.scss Просмотреть файл

7
 }
7
 }
8
 
8
 
9
 .search-page {
9
 .search-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
 .search-main {
17
 .search-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
 .search-panel {
22
 .search-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
 
33
   justify-content: space-between;
33
   justify-content: space-between;
34
   align-items: flex-start;
34
   align-items: flex-start;
35
   gap: 24px;
35
   gap: 24px;
36
+  margin-bottom: 22px;
36
 }
37
 }
37
 
38
 
38
 .page-title-row h1 {
39
 .page-title-row h1 {
39
   margin: 0;
40
   margin: 0;
40
   color: #2f2720;
41
   color: #2f2720;
41
-  font-size: 32px;
42
-  line-height: 1.2;
42
+  font-size: 34px;
43
+  line-height: 1.1;
43
   font-weight: 800;
44
   font-weight: 800;
44
-  letter-spacing: 0.02em;
45
 }
45
 }
46
 
46
 
47
 .top-action-list {
47
 .top-action-list {
71
 }
71
 }
72
 
72
 
73
 .search-condition-area {
73
 .search-condition-area {
74
-  margin-top: 8px;
74
+  margin-top: 0;
75
 }
75
 }
76
 
76
 
77
 .search-input-row {
77
 .search-input-row {
78
   display: grid;
78
   display: grid;
79
-  grid-template-columns: minmax(0, 1fr) 120px 140px 150px;
80
-  gap: 18px;
79
+  grid-template-columns: minmax(0, 1fr) 104px 104px;
80
+  gap: 12px;
81
   align-items: center;
81
   align-items: center;
82
 }
82
 }
83
 
83
 
84
 .search-input-box {
84
 .search-input-box {
85
-  height: 56px;
85
+  height: 46px;
86
   border: 2px solid #d8caba;
86
   border: 2px solid #d8caba;
87
-  border-radius: 8px;
87
+  border-radius: 6px;
88
   background: #fffdf9;
88
   background: #fffdf9;
89
   display: flex;
89
   display: flex;
90
   align-items: center;
90
   align-items: center;
105
   outline: none;
105
   outline: none;
106
   background: transparent;
106
   background: transparent;
107
   color: #2f2720;
107
   color: #2f2720;
108
-  font-size: 18px;
108
+  font-size: 16px;
109
+  font-weight: 700;
109
   font-family: inherit;
110
   font-family: inherit;
110
 }
111
 }
111
 
112
 
112
 .search-input-box input::placeholder {
113
 .search-input-box input::placeholder {
113
   color: #7b6b5c;
114
   color: #7b6b5c;
115
+  font-weight: 600;
114
 }
116
 }
115
 
117
 
116
 .search-button,
118
 .search-button,
117
 .filter-button-main,
119
 .filter-button-main,
118
 .back-list-button {
120
 .back-list-button {
119
-  height: 56px;
120
-  border-radius: 8px;
121
-  font-size: 18px;
121
+  height: 46px;
122
+  border-radius: 6px;
123
+  font-size: 16px;
122
   font-weight: 800;
124
   font-weight: 800;
123
   cursor: pointer;
125
   cursor: pointer;
124
   box-sizing: border-box;
126
   box-sizing: border-box;
154
   display: flex;
156
   display: flex;
155
   flex-wrap: wrap;
157
   flex-wrap: wrap;
156
   gap: 8px;
158
   gap: 8px;
157
-  margin-top: 16px;
159
+  margin-top: 12px;
158
 }
160
 }
159
 
161
 
160
 .search-filter-button {
162
 .search-filter-button {
161
   min-width: 120px;
163
   min-width: 120px;
162
-  height: 38px;
163
-  padding: 0 18px;
164
+  height: 34px;
165
+  padding: 0 14px;
164
   border: 2px solid #d8caba;
166
   border: 2px solid #d8caba;
165
   border-radius: 6px;
167
   border-radius: 6px;
166
   background: #f1e7d8;
168
   background: #f1e7d8;
167
   color: #2f2720;
169
   color: #2f2720;
168
-  font-size: 15px;
170
+  font-size: 14px;
169
   font-weight: 700;
171
   font-weight: 700;
170
   cursor: pointer;
172
   cursor: pointer;
171
   box-sizing: border-box;
173
   box-sizing: border-box;
183
 
185
 
184
 .search-result-panel {
186
 .search-result-panel {
185
   margin-top: 16px;
187
   margin-top: 16px;
186
-  padding: 28px 28px 34px;
188
+  padding: 0;
187
   border: 2px solid #d8caba;
189
   border: 2px solid #d8caba;
188
-  border-radius: 62px;
190
+  border-radius: 8px;
189
   background: #fffdf9;
191
   background: #fffdf9;
190
   box-sizing: border-box;
192
   box-sizing: border-box;
193
+  overflow: hidden;
191
 }
194
 }
192
 
195
 
193
 .search-result-panel h2 {
196
 .search-result-panel h2 {
194
-  margin: 0 0 12px;
197
+  min-height: 40px;
198
+  margin: 0;
199
+  padding: 0 14px;
200
+  background: #efe4d6;
195
   color: #2f2720;
201
   color: #2f2720;
196
-  font-size: 24px;
202
+  font-size: 22px;
197
   font-weight: 800;
203
   font-weight: 800;
204
+  display: flex;
205
+  align-items: center;
198
 }
206
 }
199
 
207
 
200
 .result-group {
208
 .result-group {
201
-  margin-top: 16px;
209
+  margin-top: 0;
210
+  padding: 14px;
211
+  border-top: 1px solid #d8caba;
202
 }
212
 }
203
 
213
 
204
 .result-group h3 {
214
 .result-group h3 {
209
 }
219
 }
210
 
220
 
211
 .result-row {
221
 .result-row {
212
-  min-height: 56px;
222
+  min-height: 52px;
213
   margin-top: 6px;
223
   margin-top: 6px;
214
   padding: 0 12px;
224
   padding: 0 12px;
215
   border: 2px solid #d8caba;
225
   border: 2px solid #d8caba;
279
 }
289
 }
280
 
290
 
281
 @media (max-width: 1100px) {
291
 @media (max-width: 1100px) {
292
+  .search-page {
293
+    grid-template-columns: 1fr;
294
+    padding: 0 24px 32px;
295
+  }
296
+
297
+  .search-panel {
298
+    min-height: auto;
299
+    border-radius: 28px;
300
+    padding: 28px 24px 32px;
301
+  }
302
+
282
   .search-input-row {
303
   .search-input-row {
283
-    grid-template-columns: 1fr 120px;
304
+    grid-template-columns: 1fr 104px 104px;
284
   }
305
   }
285
 
306
 
286
   .filter-button-main,
307
   .filter-button-main,
288
     width: 100%;
309
     width: 100%;
289
   }
310
   }
290
 
311
 
291
-  .search-result-panel {
292
-    border-radius: 36px;
293
-  }
294
-
295
   .result-row {
312
   .result-row {
296
     overflow-x: auto;
313
     overflow-x: auto;
297
   }
314
   }
304
 }
321
 }
305
 
322
 
306
 @media (max-width: 800px) {
323
 @media (max-width: 800px) {
307
-  .search-page {
308
-    flex-direction: column;
309
-  }
310
-
311
-  .search-main {
312
-    width: 100%;
313
-    padding: 16px 20px 32px;
314
-  }
315
-
316
-  .search-panel {
317
-    padding: 24px 20px 30px;
318
-    border-radius: 32px;
319
-  }
320
-
321
   .page-title-row {
324
   .page-title-row {
322
     flex-direction: column;
325
     flex-direction: column;
323
   }
326
   }

Загрузка…
Отмена
Сохранить