2021-1-capstone-design2 / 2015104215

Go to a project
Toggle navigation Toggle navigation pinning
jaehyuk-jang
2dfd0cb3 1 parent 192f2e37

Add scss for layout

Inline Side-by-side
Showing 10 changed files with 311 additions and 4 deletions
...@@ -28,7 +28,7 @@ export class PostService { ...@@ -28,7 +28,7 @@ export class PostService {
28 async findSome(input: Partial<GetPostInput>): Promise<Post[]> { 28 async findSome(input: Partial<GetPostInput>): Promise<Post[]> {
29 return this.postRepository 29 return this.postRepository
30 .createQueryBuilder('post') 30 .createQueryBuilder('post')
31 - .where('post.id like :id', { id: input.id }) 31 + .orWhere('post.id = :id', { id: input.id })
32 .orWhere('post.author like :author', { author: input.author }) 32 .orWhere('post.author like :author', { author: input.author })
33 .orWhere('post.category like :category', { category: input.category }) 33 .orWhere('post.category like :category', { category: input.category })
34 .getMany() 34 .getMany()
......
1 +@import './shared.scss';
2 +
3 +html,
4 +body {
5 + height: 100%;
6 + width: 100%;
7 +}
8 +
9 +* {
10 + margin: 0;
11 + padding: 0;
12 + text-decoration: none;
13 +}
14 +
15 +#__next {
16 + height: 100%;
17 + min-width: 236px;
18 +}
19 +
20 +.app-layout {
21 + min-height: 100vh;
22 + height: auto;
23 + display: block;
24 +}
25 +
26 +.app-header {
27 + @media screen and (max-width: $medium_tablet_width) {
28 + padding: 0px;
29 + position: fixed;
30 + width: 100%;
31 + z-index: 1;
32 +
33 + .ant-menu-submenu-horizontal {
34 + float: right;
35 + }
36 + }
37 +}
38 +
39 +.outer-container {
40 + width: 100%;
41 + max-width: $window_max_width;
42 + min-height: calc(100vh - 64px);
43 + padding: 12px 50px;
44 + margin: 0 auto;
45 +
46 + overflow-y: scroll;
47 +
48 + @media screen and (max-width: $medium_tablet_width) {
49 + padding: 76px 16px 12px 16px;
50 + min-height: 100vh;
51 + }
52 +
53 + @media screen and (max-width: $small_smart_phone_width) {
54 + padding: 10px 8px;
55 + }
56 +}
1 +@import './shared.scss';
2 +
3 +.category-table-container {
4 + display: flex;
5 + flex-direction: column;
6 + align-items: stretch;
7 + justify-content: center;
8 +
9 + .ant-table {
10 + border-radius: $border_radius;
11 + overflow: hidden;
12 +
13 + .ant-table-title {
14 + width: 100%;
15 + display: flex;
16 + justify-content: space-between;
17 + align-items: center;
18 +
19 + margin: 0 4px;
20 + @media screen and (max-width: $medium_smart_phone_width) {
21 + h2 {
22 + font-size: 14px;
23 + }
24 + }
25 + }
26 +
27 + tr {
28 + @media screen and (max-width: $small_tablet_width) {
29 + .ant-table-cell:nth-child(3) {
30 + display: none;
31 + }
32 + }
33 +
34 + @media screen and (max-width: $medium_smart_phone_width) {
35 + .ant-table-cell:nth-child(1) {
36 + display: none;
37 + }
38 +
39 + .ant-table-cell:nth-child(2) {
40 + width: 100%;
41 + }
42 + }
43 +
44 + @media screen and (max-width: $small_smart_phone_width) {
45 + .ant-table-cell:nth-child(2) {
46 + font-size: 12px;
47 + }
48 + .ant-table-cell:nth-child(4) {
49 + font-size: 11px;
50 + }
51 + }
52 + }
53 + }
54 +}
1 +@import './shared.scss';
2 +
3 +.create-container {
4 + display: flex;
5 + flex-direction: column;
6 + justify-content: center;
7 + align-items: stretch;
8 +
9 + .form-container {
10 + border-radius: $border_radius;
11 + background-color: white;
12 + padding: 24px;
13 +
14 + form {
15 + height: 100%;
16 +
17 + .form-button {
18 + float: right;
19 +
20 + &.cancel-button {
21 + margin-right: 8px;
22 + }
23 + }
24 +
25 + #form-textarea {
26 + height: 50vh;
27 + }
28 + }
29 + }
30 +}
1 +@import './shared.scss';
2 +
3 +.main-card-container {
4 + display: flex;
5 + flex-wrap: wrap;
6 + justify-content: space-evenly;
7 + align-items: center;
8 +
9 + @media screen and (max-width: $medium_tablet_width) {
10 + display: block;
11 + }
12 +
13 + .main-card {
14 + width: 47%;
15 + height: 48%;
16 +
17 + border-radius: $border_radius;
18 +
19 + @media screen and (max-width: $medium_tablet_width) {
20 + width: 100%;
21 + height: 300px;
22 + margin-bottom: 12px;
23 + }
24 +
25 + @media screen and (max-width: $large_smart_phone_width) {
26 + height: 240px;
27 + }
28 +
29 + @media screen and (max-width: $medium_smart_phone_width) {
30 + height: 220px;
31 + }
32 +
33 + .ant-card-body {
34 + height: calc(100% - 58px);
35 +
36 + display: flex;
37 + flex-direction: column;
38 + justify-content: space-evenly;
39 + align-items: stretch;
40 +
41 + padding: 18px;
42 +
43 + .card-row {
44 + display: flex;
45 + justify-content: space-between;
46 + align-items: center;
47 + border-radius: $border_radius;
48 + padding: 5px 18px;
49 + height: 45px;
50 +
51 + @media screen and (max-width: $medium_tablet_width) {
52 + &:nth-child(4),
53 + &:nth-child(5) {
54 + display: none;
55 + }
56 + }
57 +
58 + &.has-content {
59 + transition: background-color 0.3s;
60 + padding: 2px 12px;
61 +
62 + &:hover {
63 + background-color: rgba(26, 144, 255, 0.2);
64 + transition: background-color 0.3s;
65 + }
66 + }
67 +
68 + .card-row-title {
69 + margin: 0;
70 + font-size: 17px;
71 + font-weight: 400;
72 +
73 + @media screen and (max-width: $large_smart_phone_width) {
74 + font-size: 14px;
75 + }
76 + }
77 +
78 + .card-row-recomment {
79 + color: $red;
80 + font-weight: 600;
81 + margin-left: 16px;
82 +
83 + @media screen and (max-width: $large_smart_phone_width) {
84 + font-size: 13px;
85 + }
86 +
87 + @media screen and (max-width: $medium_smart_phone_width) {
88 + display: none;
89 + }
90 + }
91 + }
92 + }
93 + }
94 +}
1 +@import './shared.scss';
2 +
3 +.post-container {
4 + display: flex;
5 + flex-direction: column;
6 + justify-content: space-between;
7 + align-items: stretch;
8 +
9 + height: 100%;
10 +
11 + .post-content {
12 + flex: 1;
13 + border-radius: $border_radius;
14 + margin-bottom: 24px;
15 + }
16 +
17 + .post-comments {
18 + min-height: $comment_height;
19 + border-radius: $border_radius;
20 + overflow-y: scroll;
21 +
22 + .post-comments-num {
23 + font-size: 14px;
24 + color: #888;
25 + }
26 + }
27 +}
28 +
29 +.comments-textarea {
30 + margin-top: 12px;
31 +}
32 +
33 +.comments-submit-button {
34 + float: right;
35 + margin-top: 8px;
36 +}
1 +$window_max_width: 1240px;
2 +$header_height: 64px;
3 +$border_radius: 10px;
4 +
5 +$comment_height: 158px;
6 +
7 +// color
8 +$black: #333;
9 +$red: #eb4d4b;
10 +
11 +// media query
12 +$large_tablet_width: 1024px;
13 +$medium_tablet_width: 768px;
14 +$small_tablet_width: 500px;
15 +$large_smart_phone_width: 444px;
16 +$medium_smart_phone_width: 370px;
17 +$small_smart_phone_width: 300px;
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
20 "graphql": "15.3.0", 20 "graphql": "15.3.0",
21 "next": "latest", 21 "next": "latest",
22 "react": "^16.13.1", 22 "react": "^16.13.1",
23 - "react-dom": "^16.13.1" 23 + "react-dom": "^16.13.1",
24 + "sass": "^1.34.1"
24 }, 25 },
25 "devDependencies": { 26 "devDependencies": {
26 "@graphql-codegen/cli": "^1.17.8", 27 "@graphql-codegen/cli": "^1.17.8",
......
...@@ -18,7 +18,19 @@ ...@@ -18,7 +18,19 @@
18 "resolveJsonModule": true, 18 "resolveJsonModule": true,
19 "skipLibCheck": true, 19 "skipLibCheck": true,
20 "target": "esnext", 20 "target": "esnext",
21 - "strict": false 21 + "strict": false,
22 + "baseUrl": ".",
23 + "rootDir": ".",
24 + "paths": {
25 + "@src/*": ["src/*"],
26 + "@components/*": ["src/components/*"],
27 + "@config/*": ["src/config/*"],
28 + "@constants/*": ["src/constants/*"],
29 + "@hooks/*": ["src/hooks/*"],
30 + "@gql/*": ["src/gql/*"],
31 + "@views/*": ["src/views/*"],
32 + "@shared/*": ["src/shared/*"]
33 + }
22 }, 34 },
23 "exclude": [ 35 "exclude": [
24 "node_modules" 36 "node_modules"
......
...@@ -5007,7 +5007,7 @@ chardet@^0.7.0: ...@@ -5007,7 +5007,7 @@ chardet@^0.7.0:
5007 resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" 5007 resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
5008 integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== 5008 integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
5009 5009
5010 -chokidar@3.5.1, chokidar@^3.4.2, chokidar@^3.5.1: 5010 +chokidar@3.5.1, "chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.1:
5011 version "3.5.1" 5011 version "3.5.1"
5012 resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" 5012 resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
5013 integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== 5013 integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
...@@ -12191,6 +12191,13 @@ sane@^4.0.3: ...@@ -12191,6 +12191,13 @@ sane@^4.0.3:
12191 minimist "^1.1.1" 12191 minimist "^1.1.1"
12192 walker "~1.0.5" 12192 walker "~1.0.5"
12193 12193
12194 +sass@^1.34.1:
12195 + version "1.34.1"
12196 + resolved "https://registry.yarnpkg.com/sass/-/sass-1.34.1.tgz#30f45c606c483d47b634f1e7371e13ff773c96ef"
12197 + integrity sha512-scLA7EIZM+MmYlej6sdVr0HRbZX5caX5ofDT9asWnUJj21oqgsC+1LuNfm0eg+vM0fCTZHhwImTiCU0sx9h9CQ==
12198 + dependencies:
12199 + chokidar ">=3.0.0 <4.0.0"
12200 +
12194 sax@>=0.6.0, sax@^1.2.4: 12201 sax@>=0.6.0, sax@^1.2.4:
12195 version "1.2.4" 12202 version "1.2.4"
12196 resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" 12203 resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
......