jaehyuk-jang

Add scss for layout

......@@ -28,7 +28,7 @@ export class PostService {
async findSome(input: Partial<GetPostInput>): Promise<Post[]> {
return this.postRepository
.createQueryBuilder('post')
.where('post.id like :id', { id: input.id })
.orWhere('post.id = :id', { id: input.id })
.orWhere('post.author like :author', { author: input.author })
.orWhere('post.category like :category', { category: input.category })
.getMany()
......
@import './shared.scss';
html,
body {
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
}
#__next {
height: 100%;
min-width: 236px;
}
.app-layout {
min-height: 100vh;
height: auto;
display: block;
}
.app-header {
@media screen and (max-width: $medium_tablet_width) {
padding: 0px;
position: fixed;
width: 100%;
z-index: 1;
.ant-menu-submenu-horizontal {
float: right;
}
}
}
.outer-container {
width: 100%;
max-width: $window_max_width;
min-height: calc(100vh - 64px);
padding: 12px 50px;
margin: 0 auto;
overflow-y: scroll;
@media screen and (max-width: $medium_tablet_width) {
padding: 76px 16px 12px 16px;
min-height: 100vh;
}
@media screen and (max-width: $small_smart_phone_width) {
padding: 10px 8px;
}
}
@import './shared.scss';
.category-table-container {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
.ant-table {
border-radius: $border_radius;
overflow: hidden;
.ant-table-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 4px;
@media screen and (max-width: $medium_smart_phone_width) {
h2 {
font-size: 14px;
}
}
}
tr {
@media screen and (max-width: $small_tablet_width) {
.ant-table-cell:nth-child(3) {
display: none;
}
}
@media screen and (max-width: $medium_smart_phone_width) {
.ant-table-cell:nth-child(1) {
display: none;
}
.ant-table-cell:nth-child(2) {
width: 100%;
}
}
@media screen and (max-width: $small_smart_phone_width) {
.ant-table-cell:nth-child(2) {
font-size: 12px;
}
.ant-table-cell:nth-child(4) {
font-size: 11px;
}
}
}
}
}
@import './shared.scss';
.create-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
.form-container {
border-radius: $border_radius;
background-color: white;
padding: 24px;
form {
height: 100%;
.form-button {
float: right;
&.cancel-button {
margin-right: 8px;
}
}
#form-textarea {
height: 50vh;
}
}
}
}
@import './shared.scss';
.main-card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
@media screen and (max-width: $medium_tablet_width) {
display: block;
}
.main-card {
width: 47%;
height: 48%;
border-radius: $border_radius;
@media screen and (max-width: $medium_tablet_width) {
width: 100%;
height: 300px;
margin-bottom: 12px;
}
@media screen and (max-width: $large_smart_phone_width) {
height: 240px;
}
@media screen and (max-width: $medium_smart_phone_width) {
height: 220px;
}
.ant-card-body {
height: calc(100% - 58px);
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: stretch;
padding: 18px;
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
border-radius: $border_radius;
padding: 5px 18px;
height: 45px;
@media screen and (max-width: $medium_tablet_width) {
&:nth-child(4),
&:nth-child(5) {
display: none;
}
}
&.has-content {
transition: background-color 0.3s;
padding: 2px 12px;
&:hover {
background-color: rgba(26, 144, 255, 0.2);
transition: background-color 0.3s;
}
}
.card-row-title {
margin: 0;
font-size: 17px;
font-weight: 400;
@media screen and (max-width: $large_smart_phone_width) {
font-size: 14px;
}
}
.card-row-recomment {
color: $red;
font-weight: 600;
margin-left: 16px;
@media screen and (max-width: $large_smart_phone_width) {
font-size: 13px;
}
@media screen and (max-width: $medium_smart_phone_width) {
display: none;
}
}
}
}
}
}
@import './shared.scss';
.post-container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
height: 100%;
.post-content {
flex: 1;
border-radius: $border_radius;
margin-bottom: 24px;
}
.post-comments {
min-height: $comment_height;
border-radius: $border_radius;
overflow-y: scroll;
.post-comments-num {
font-size: 14px;
color: #888;
}
}
}
.comments-textarea {
margin-top: 12px;
}
.comments-submit-button {
float: right;
margin-top: 8px;
}
$window_max_width: 1240px;
$header_height: 64px;
$border_radius: 10px;
$comment_height: 158px;
// color
$black: #333;
$red: #eb4d4b;
// media query
$large_tablet_width: 1024px;
$medium_tablet_width: 768px;
$small_tablet_width: 500px;
$large_smart_phone_width: 444px;
$medium_smart_phone_width: 370px;
$small_smart_phone_width: 300px;
......@@ -20,7 +20,8 @@
"graphql": "15.3.0",
"next": "latest",
"react": "^16.13.1",
"react-dom": "^16.13.1"
"react-dom": "^16.13.1",
"sass": "^1.34.1"
},
"devDependencies": {
"@graphql-codegen/cli": "^1.17.8",
......
......@@ -18,7 +18,19 @@
"resolveJsonModule": true,
"skipLibCheck": true,
"target": "esnext",
"strict": false
"strict": false,
"baseUrl": ".",
"rootDir": ".",
"paths": {
"@src/*": ["src/*"],
"@components/*": ["src/components/*"],
"@config/*": ["src/config/*"],
"@constants/*": ["src/constants/*"],
"@hooks/*": ["src/hooks/*"],
"@gql/*": ["src/gql/*"],
"@views/*": ["src/views/*"],
"@shared/*": ["src/shared/*"]
}
},
"exclude": [
"node_modules"
......
......@@ -5007,7 +5007,7 @@ chardet@^0.7.0:
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
chokidar@3.5.1, chokidar@^3.4.2, chokidar@^3.5.1:
chokidar@3.5.1, "chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
......@@ -12191,6 +12191,13 @@ sane@^4.0.3:
minimist "^1.1.1"
walker "~1.0.5"
sass@^1.34.1:
version "1.34.1"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.34.1.tgz#30f45c606c483d47b634f1e7371e13ff773c96ef"
integrity sha512-scLA7EIZM+MmYlej6sdVr0HRbZX5caX5ofDT9asWnUJj21oqgsC+1LuNfm0eg+vM0fCTZHhwImTiCU0sx9h9CQ==
dependencies:
chokidar ">=3.0.0 <4.0.0"
sax@>=0.6.0, sax@^1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
......