최원석 / 2021-1-database-project

Go to a project
Toggle navigation Toggle navigation pinning
1seok2
b0a0bde5 1 parent 1d5c3304

add basic styles

Inline Side-by-side
Showing 14 changed files with 85 additions and 11 deletions
......@@ -2,12 +2,32 @@
Lookup ID, and Compare!
<span style="font-size:24px;">SPA</span> with <span style="font-size:16px;">Vanilla Typescript</span>
and <span style="font-size:24px;">Page Transitions</span> with <span style="font-size:16px;">Scss</span>
and <span style="font-size:24px;">Instagram Crawler</span> with <span style="font-size:16px;">Python</span>
---
### Using ...
- Typescript
- Webpack
- Scss
- Flask
## Execute server
listing for __*localhost:8080*__
```shell
python -m pipenv shell
python server.py
```
or
> just run server with **Pycharm**
## Execute only frontend
[link](https://github.com/1Seok2/check-your-instagram/tree/master/app)
......
......@@ -6,9 +6,9 @@
* 컴포넌트 제작 후 반환
**/
import Header from "./views/header/Header";
import Body from "./views/body/Body";
import Footer from "./views/footer/Footer";
import Header from "./views/header";
import Body from "./views/body";
import Footer from "./views/footer";
import './assets/style/App.scss';
import './assets/style/PageTransition.scss';
......@@ -16,11 +16,10 @@ const App = (pathname : string) : string => {
history.pushState('','', pathname);
return `
<div>
<div class="container">
${Header()}
${Body(pathname)}
${Footer()}
<a href="/wonseog" id="nav-button" data-link>wonseok!!</a>
</div>
`;
}
......
body{
body {
margin: 0;
padding: 0;
}
.container {
border: 1px solid green;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 250px;
min-height: 500px;
width: 90%;
height: 100%;
}
\ No newline at end of file
......
.body {
border: 1px solid gray;
width: 100%;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
\ No newline at end of file
.footer {
height: 50px;
background-color: #afafaf;
display: flex;
justify-content: center;
align-items: center;
font-size: .8rem;
width: 100%;
color: #fafafa;
}
\ No newline at end of file
.header {
height: 70px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.8rem;
width: 100%;
}
\ No newline at end of file
......@@ -4,6 +4,7 @@
<base href="/" />
<meta charset="UTF-8">
<title>home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="App"></div>
......
......@@ -23,7 +23,7 @@ window.addEventListener('DOMContentLoaded', () => {
/* change url */
window.addEventListener('popstate', ()=>{
$App && ($App.innerHTML = App(pathname))
$App && ($App.innerHTML = App(pathname));
});
/* initial render */
......@@ -52,9 +52,11 @@ window.addEventListener('DOMContentLoaded', () => {
} catch (e){
console.log(e);
} finally {
console.log(result)
result && $App && ($App.innerHTML = App('main'))
console.log(result);
result && $App && ($App.innerHTML = App('main'));
}
} else {
alert('아이디를 입력하세요');
}
}
});
......
......@@ -4,21 +4,24 @@
* @description : 페이지 내용
**/
import Home from "./contents/Home";
import '../../assets/style/Body.scss';
const Body = (pathname: string) : string => {
let contentsContainer = '';
switch (pathname){
case 'compare':
/* 팔로워, 팔로잉 비교*/
break;
case 'main':
/* 아이디 조회 후 */
break;
default:
contentsContainer = Home();
}
return `
<div class="Body">
<div class="body">
${contentsContainer}
</div>
`;
......
export {default} from './Body'
\ No newline at end of file
......@@ -4,10 +4,12 @@
* @description : 페이지 푸터
**/
import '../../assets/style/Footer.scss'
const Footer = () : string => {
return `
<div class="Footer">Its my Footer</div>
<div class="footer">Its my Footer</div>
`;
}
......
export {default} from './Footer'
\ No newline at end of file
......@@ -5,6 +5,7 @@
**/
import Title from "../../components/title";
import '../../assets/style/Header.scss'
const Header = () : string => `
<div class="header">
......
export {default} from './Header'
\ No newline at end of file