Skip to content

Commit

Permalink
merged feature/react
Browse files Browse the repository at this point in the history
  • Loading branch information
kobakazu0429 committed May 12, 2019
2 parents 935a619 + b602959 commit 4fb11f9
Show file tree
Hide file tree
Showing 32 changed files with 801 additions and 314 deletions.
Binary file added frontend/images/apple-2385198_1280-1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/images/sidebar-radio-img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 5 additions & 4 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,16 @@
"css-loader": "^0.28.11",
"source-map-loader": "^0.2.3",
"style-loader": "^0.21.0",
"typescript": "^2.9.1",
"typescript": "^3.4.5",
"webpack": "^4.10.2",
"webpack-cli": "^2.1.4"
},
"dependencies": {
"@types/react": "^16.3.16",
"@types/react-dom": "^16.0.5",
"@types/react-router-dom": "^4.2.7",
"@types/react-slick": "^0.23.1",
"@types/react-slick": "^0.23.4",
"@types/styled-components": "^4.1.6",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"clean-webpack-plugin": "^1.0.0",
Expand All @@ -39,10 +40,10 @@
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-router-dom": "^4.3.1",
"react-slick": "^0.23.1",
"react-slick": "^0.24.0",
"react-twitter-widgets": "^1.7.1",
"slick-carousel": "^1.8.1",
"styled-components": "^3.3.2",
"styled-components": "^4.1.3",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.17.0",
"tslint-plugin-prettier": "^2.0.1",
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import { Main } from "./layouts/Main";
import { Footer } from "./layouts/Footer";

export const App = () => (
<div>
<React.Fragment>
<Header />
<Main />
<Footer />
</div>
</React.Fragment>
);
4 changes: 2 additions & 2 deletions frontend/src/api/ContactApi.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import RestClient from "./RestClient";

export default class ContactApi {
restClient: RestClient;
public restClient: RestClient;

constructor(restClient: RestClient) {
this.restClient = restClient;
}

saveContact(json: object, succussed: (res: object) => void, errored: (err: object) => void, always = () => {}) {
public saveContact(json: object, succussed: (res: object) => void, errored: (err: object) => void, always = () => {}) {
return this.restClient.post("/api/v1/contacts", json, succussed, errored, always);
}
}
16 changes: 8 additions & 8 deletions frontend/src/api/RestClient.ts
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
export default class RestClient {
axios: any;
public axios: any;

constructor(baseUrl: string) {
const axiosBase = require("axios");
const csrfToken = (<HTMLMetaElement>document.querySelector("meta[name=csrf-token]")).content;
const csrfToken = (document.querySelector("meta[name=csrf-token]") as HTMLMetaElement).content;

this.axios = axiosBase.create({
baseURL: baseUrl,
timeout: 1000,
headers: {
"Content-Type": "application/json",
"X-CSRF-TOKEN": csrfToken,
},
"X-CSRF-TOKEN": csrfToken
}
});
}

get(
public get(
path: string,
params: object,
successed: (res: object) => void,
errored: (res: object) => void,
always = () => {}
) {
return this.axios
.get(path, { params: params })
.get(path, { params })
.then((result: object) => {
console.log(`GET ${this.axios.baseURL}/${path}`);
console.log(`result: ${JSON.stringify(result)}`);
Expand All @@ -37,7 +37,7 @@ export default class RestClient {
.then(always());
}

post(
public post(
path: string,
params: object,
successed: (res: object) => void,
Expand All @@ -59,7 +59,7 @@ export default class RestClient {
.then(always());
}

delete(
public delete(
path: string,
params: object,
successed: (res: object) => void,
Expand Down
75 changes: 65 additions & 10 deletions frontend/src/commons/ChkButtonBase.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,72 @@
import styled from "styled-components";
import * as React from "react";
import { Link } from "react-router-dom";
import styled, { css } from "styled-components";

import { chkColors } from "./color";

export const ChkButtonBase = styled.div`
interface IPropsCss {
color?: string;
bgcolor?: string;
border?: string;
}

interface IPropsChkButtonBase extends IPropsCss {
to?: string;
text: string | React.ReactNode;
name?: string;
}

const ChkButtonBase = (props: IPropsChkButtonBase) => {
const { to, text, name } = props;
const { color, bgcolor, border } = props;

if (to) {
if (to.startsWith("http")) {
return (
<ATag color={color} bgcolor={bgcolor} border={border} href={to}>
{text}
</ATag>
);
} else {
return (
<LinkTag color={color} bgcolor={bgcolor} border={border} to={to}>
{text}
</LinkTag>
);
}
} else {
return (
<ButtonTag name={name} color={color} bgcolor={bgcolor} border={border}>
{text}
</ButtonTag>
);
}
};

const ButtonStyle = css`
display: block;
color: white;
width: 100%;
margin: 0;
padding: 10px;
outline: none;
border-style: none;
box-shadow: 4px 3px 10px 0px ${chkColors.shadow};
border-radius: 20px;
text-align: center;
margin: 0;
padding: 10px;
width: 100%;
line-height: 1.5rem;
border-radius: 1.5rem;
background-color: ${chkColors.orange};
color: ${(props: IPropsCss) => (props.color ? chkColors[props.color] : chkColors.white)};
border: ${(props: IPropsCss) => (props.border ? `2px solid ${chkColors[props.border]}` : "none")};
background-color: ${(props: IPropsCss) => (props.bgcolor ? chkColors[props.bgcolor] : chkColors.orange)};
`;

const ButtonTag = styled.button`
${ButtonStyle}
`;

const LinkTag = styled(Link)`
${ButtonStyle}
`;

const ATag = styled.a`
${ButtonStyle}
`;

export default ChkButtonBase;
10 changes: 8 additions & 2 deletions frontend/src/commons/color.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
export const chkColors = {
interface IColor {
[key: string]: string;
}

export const chkColors: IColor = {
orange: "#edb600",
blue: "#66C9DB",
skyblue: "#A8E1E3",
black: "#565A62",
gray: "#7f8287",
shadow: "#14141433",
white: "#ffffff",
placeholder: "#b0bec5"
placeholder: "#b0bec5",
aqua: "#b3dfe2",
darkenAqua: "#50AAB7"
};
34 changes: 16 additions & 18 deletions frontend/src/commons/font.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { injectGlobal } from "styled-components";
import { css } from "styled-components";
import * as Quicksand300Woff from "./../../fonts/quicksand-v7-latin/quicksand-v7-latin-300.woff";
import * as Quicksand300Woff2 from "./../../fonts/quicksand-v7-latin/quicksand-v7-latin-300.woff2";
import * as Quicksand500Woff from "./../../fonts/quicksand-v7-latin/quicksand-v7-latin-500.woff";
Expand All @@ -8,46 +8,44 @@ import * as Quicksand700Woff2 from "./../../fonts/quicksand-v7-latin/quicksand-v
import * as QuicksandRegularWoff from "./../../fonts/quicksand-v7-latin/quicksand-v7-latin-regular.woff";
import * as QuicksandRegularWoff2 from "./../../fonts/quicksand-v7-latin/quicksand-v7-latin-regular.woff2";

injectGlobal`
const GlobalFonts = css`
/* quicksand-300 - latin */
@font-face {
font-family: 'Quicksand';
font-family: "Quicksand";
font-style: normal;
font-weight: 300;
src: local('Quicksand Light'), local('Quicksand-Light'),
url(${Quicksand300Woff2}) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(${Quicksand300Woff}) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
src: local("Quicksand Light"), local("Quicksand-Light"), url(${Quicksand300Woff2}) format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */ url(${Quicksand300Woff}) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* quicksand-regular - latin */
@font-face {
font-family: 'Quicksand';
font-family: "Quicksand";
font-style: normal;
font-weight: 400;
src: local('Quicksand Regular'), local('Quicksand-Regular'),
url(${QuicksandRegularWoff2}) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(${QuicksandRegularWoff}) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
src: local("Quicksand Regular"), local("Quicksand-Regular"), url(${QuicksandRegularWoff2}) format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */ url(${QuicksandRegularWoff}) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* quicksand-500 - latin */
@font-face {
font-family: 'Quicksand';
font-family: "Quicksand";
font-style: normal;
font-weight: 500;
src: local('Quicksand Medium'), local('Quicksand-Medium'),
url(${Quicksand500Woff2}) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(${Quicksand500Woff}) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
src: local("Quicksand Medium"), local("Quicksand-Medium"), url(${Quicksand500Woff2}) format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */ url(${Quicksand500Woff}) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* quicksand-700 - latin */
@font-face {
font-family: 'Quicksand';
font-family: "Quicksand";
font-style: normal;
font-weight: 700;
src: local('Quicksand Bold'), local('Quicksand-Bold'),
url(${Quicksand700Woff2}) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(${Quicksand700Woff}) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
src: local("Quicksand Bold"), local("Quicksand-Bold"), url(${Quicksand700Woff2}) format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */ url(${Quicksand700Woff}) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
font-family: "Quicksand";
font-weight: 400;
}
`;

export default GlobalFonts;
46 changes: 27 additions & 19 deletions frontend/src/commons/style.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { injectGlobal } from "styled-components";
import { createGlobalStyle, css } from "styled-components";
import GlobalFonts from "./font";

const breakpoints = {
mobile: "40.0rem",
Expand All @@ -10,35 +11,40 @@ export const media = {
tablet: `screen and (min-width: ${breakpoints.mobile}) and (max-width: ${breakpoints.tablet})`
};

export const title = `
export const title = css`
padding-top: 2rem;
padding-bottom: 1rem;
font-size: 1.5rem;
text-align: left;
color: #00afec;
`;

export const goodSpace = `
display: box;
display: -webkit-box;
display: -moz-box;
display: -o-box;
display: -ms-box;
box-pack: justify;
-moz-box-pack: justify;
-webkit-box-pack: justify;
-o-box-pack: justify;
-ms-box-pack: justify;
export const goodSpace = css`
display: box;
display: -webkit-box;
display: -moz-box;
display: -o-box;
display: -ms-box;
box-pack: justify;
-moz-box-pack: justify;
-webkit-box-pack: justify;
-o-box-pack: justify;
-ms-box-pack: justify;
`;

injectGlobal`
*, *:before, *:after {
const GlobalStyle = createGlobalStyle`
${GlobalFonts}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
}
Expand All @@ -47,3 +53,5 @@ injectGlobal`
display: inline;
}
`;

export default GlobalStyle;
15 changes: 6 additions & 9 deletions frontend/src/components/AboutBottom.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import * as React from "react";
import styled from "styled-components";

import { Link } from "react-router-dom";
import { media } from "./../commons/style";
import { ChkButtonBase } from "./../commons/ChkButtonBase";
import { chkColors } from "./../commons/color";
import ChkButtonBase from "./../commons/ChkButtonBase";

import * as img from "./../../images/bg.jpg";

Expand All @@ -16,9 +15,9 @@ export const AboutBottom = () => (
<ParagraphStyle>
インキュベーションワークが始まった2015年頃から、呉高専の学生は縦のつながりと横のつながりが広がっていきました。しかし、まだ多くの学生は同じクラス、部活動の友だちなどのコミュニティで完結してしまっています。私たちはこれまで多様な人とつながったことで、将来の選択肢が増えていきました。後輩たちにも同じようにもっとたくさんの人とつながりを作って、多くの経験をしてほしいという想いから、この活動を開始しました。
</ParagraphStyle>
<ToContact to="/contact">
<ButtonStyle>contact</ButtonStyle>
</ToContact>
<ButtonWrapper>
<ButtonStyle to="/contact" text="contact" />
</ButtonWrapper>
</ContentStyle>
</MaskStyle>
</AboutBottomStyle>
Expand Down Expand Up @@ -62,11 +61,9 @@ const ParagraphStyle = styled.p`
line-height: 1.42em;
`;

const ButtonStyle = ChkButtonBase.extend`
const ButtonWrapper = styled.div`
margin: 80px auto 0;
width: 40%;
`;

const ToContact = styled(Link)`
text-decoration: "none";
`;
const ButtonStyle = styled(ChkButtonBase)``;
Loading

0 comments on commit 4fb11f9

Please sign in to comment.