From d707c5ac659e613db5da322c8546fcbe7ae72e0b Mon Sep 17 00:00:00 2001 From: dhitapp Date: Tue, 25 Feb 2020 12:51:06 +0700 Subject: [PATCH 01/13] [REFACTOR] Menampilkan default layout --- frontend/src/pages/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js index 3c109c0..764da0f 100644 --- a/frontend/src/pages/index.js +++ b/frontend/src/pages/index.js @@ -4,13 +4,14 @@ import { Link } from "gatsby" import Layout from "../components/layout" import SEO from "../components/seo" +import Card from 'react-bootstrap/Card' +import Col from 'react-bootstrap/Col' +import logo from "src/images/logo.svg" + const IndexPage = () => ( -

Hi people

-

Welcome to your new Gatsby site.

-

Now go build something great.

- Go to page 2 +
) -- GitLab From 3fbbc8be7735f86c5ceeff444b81f55c3c51830c Mon Sep 17 00:00:00 2001 From: dhitapp Date: Tue, 25 Feb 2020 13:49:48 +0700 Subject: [PATCH 02/13] [REFACTOR] Menampilkan default layout dashboard --- frontend/src/pages/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js index 764da0f..8a85279 100644 --- a/frontend/src/pages/index.js +++ b/frontend/src/pages/index.js @@ -4,14 +4,10 @@ import { Link } from "gatsby" import Layout from "../components/layout" import SEO from "../components/seo" -import Card from 'react-bootstrap/Card' -import Col from 'react-bootstrap/Col' -import logo from "src/images/logo.svg" - const IndexPage = () => ( -
+ ) -- GitLab From 82662affd56407e0d7ec57f7a81b7988d5d08f21 Mon Sep 17 00:00:00 2001 From: dhitapp Date: Fri, 28 Feb 2020 15:46:40 +0700 Subject: [PATCH 03/13] [RED] Membuat test untuk menampilkan kartu donor darah di halaman profil user --- frontend/package-lock.json | 143 ++++++++++++++++++++++++++-- frontend/package.json | 7 +- frontend/src/components/layout.scss | 7 ++ frontend/src/components/navbar.js | 2 +- frontend/src/components/seo.js | 1 + frontend/src/images/PPL (1).svg | 3 + frontend/src/images/PPL.svg | 3 + frontend/src/images/letter_b.png | Bin 0 -> 19240 bytes frontend/src/pages/index.js | 14 --- frontend/src/pages/profile.js | 89 +++++++++++++++++ frontend/src/pages/profile.test.js | 30 ++++++ frontend/src/pages/temp | 107 +++++++++++++++++++++ 12 files changed, 378 insertions(+), 28 deletions(-) create mode 100644 frontend/src/images/PPL (1).svg create mode 100644 frontend/src/images/PPL.svg create mode 100644 frontend/src/images/letter_b.png delete mode 100644 frontend/src/pages/index.js create mode 100644 frontend/src/pages/profile.js create mode 100644 frontend/src/pages/profile.test.js create mode 100644 frontend/src/pages/temp diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 92490e8..7bbf509 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3909,6 +3909,15 @@ "@babel/types": "^7.3.0" } }, + "@types/cheerio": { + "version": "0.22.16", + "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.16.tgz", + "integrity": "sha512-bSbnU/D4yzFdzLpp3+rcDj0aQQMIRUBNJU7azPxdqMpnexjUSvGJyDuOBQBHeOZh1mMKgsJm6Dy+LLh80Ew4tQ==", + "dev": true, + "requires": { + "@types/node": "*" + } + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", @@ -8673,6 +8682,12 @@ } } }, + "defined": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", + "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=", + "dev": true + }, "del": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz", @@ -9907,6 +9922,12 @@ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz", "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==" }, + "esm": { + "version": "3.2.25", + "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", + "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==", + "dev": true + }, "espree": { "version": "6.1.2", "resolved": "https://registry.npmjs.org/espree/-/espree-6.1.2.tgz", @@ -22485,9 +22506,9 @@ "integrity": "sha512-dye+7rERqNf/6mDT1iwps+4Gf42420xuZgygF33uX178DxffqcyeuHbBuJ382FIcB5iP6mMZOhfW7kI0uXwb/Q==" }, "react": { - "version": "16.12.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz", - "integrity": "sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==", + "version": "16.13.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.13.0.tgz", + "integrity": "sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -22838,20 +22859,20 @@ } }, "react-dom": { - "version": "16.12.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz", - "integrity": "sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==", + "version": "16.13.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.0.tgz", + "integrity": "sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.18.0" + "scheduler": "^0.19.0" }, "dependencies": { "scheduler": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz", - "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.0.tgz", + "integrity": "sha512-xowbVaTPe9r7y7RUejcK73/j8tt2jfiyTednOvHbA8JoClvMYCp+r8QegLwK/n8zWQAtZb1fFnER4XLBZXrCxA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -23904,6 +23925,15 @@ "signal-exit": "^3.0.2" } }, + "resumer": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/resumer/-/resumer-0.0.0.tgz", + "integrity": "sha1-8ej0YeQGS6Oegq883CqMiT0HZ1k=", + "dev": true, + "requires": { + "through": "~2.3.4" + } + }, "ret": { "version": "0.1.15", "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", @@ -23946,6 +23976,44 @@ "inherits": "^2.0.1" } }, + "riteway": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/riteway/-/riteway-6.1.1.tgz", + "integrity": "sha512-HjvXuf/N5KcdUx4B7MYDDQguY53/d20X+0tvnXmFobf7ipE/V1mQYOMueNcawyrir1Iw2N3UBJTK/2BnbFRBtA==", + "dev": true, + "requires": { + "@types/cheerio": "^0.22.12", + "@types/react": "^16.8.24", + "cheerio": "1.0.0-rc.3", + "esm": "3.2.25", + "react-dom": "16.11.0", + "tape": "4.11.0" + }, + "dependencies": { + "react-dom": { + "version": "16.11.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.11.0.tgz", + "integrity": "sha512-nrRyIUE1e7j8PaXSPtyRKtz+2y9ubW/ghNgqKFHHAHaeP0fpF5uXR+sq8IMRHC+ZUxw7W9NyCDTBtwWxvkb0iA==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.17.0" + } + }, + "scheduler": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz", + "integrity": "sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, "rsvp": { "version": "4.8.5", "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz", @@ -25954,6 +26022,61 @@ "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==" }, + "tape": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/tape/-/tape-4.11.0.tgz", + "integrity": "sha512-yixvDMX7q7JIs/omJSzSZrqulOV51EC9dK8dM0TzImTIkHWfe2/kFyL5v+d9C+SrCMaICk59ujsqFAVidDqDaA==", + "dev": true, + "requires": { + "deep-equal": "~1.0.1", + "defined": "~1.0.0", + "for-each": "~0.3.3", + "function-bind": "~1.1.1", + "glob": "~7.1.4", + "has": "~1.0.3", + "inherits": "~2.0.4", + "minimist": "~1.2.0", + "object-inspect": "~1.6.0", + "resolve": "~1.11.1", + "resumer": "~0.0.0", + "string.prototype.trim": "~1.1.2", + "through": "~2.3.8" + }, + "dependencies": { + "deep-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz", + "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=", + "dev": true + }, + "object-inspect": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz", + "integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==", + "dev": true + }, + "resolve": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz", + "integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } + }, + "string.prototype.trim": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz", + "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=", + "dev": true, + "requires": { + "define-properties": "^1.1.2", + "es-abstract": "^1.5.0", + "function-bind": "^1.0.2" + } + } + } + }, "tar": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/tar/-/tar-5.0.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index ef0c490..9ade027 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,9 +22,9 @@ "netlify-cms-app": "^2.11.22", "node-sass": "^4.13.1", "prop-types": "^15.7.2", - "react": "^16.12.0", + "react": "^16.13.0", "react-bootstrap": "^1.0.0-beta.16", - "react-dom": "^16.12.0", + "react-dom": "^16.13.0", "react-helmet": "^5.2.1" }, "devDependencies": { @@ -37,7 +37,8 @@ "identity-obj-proxy": "^3.0.0", "jest": "^25.1.0", "prettier": "^1.19.1", - "react-test-renderer": "^16.12.0" + "react-test-renderer": "^16.12.0", + "riteway": "^6.1.1" }, "keywords": [ "gatsby" diff --git a/frontend/src/components/layout.scss b/frontend/src/components/layout.scss index e9e3836..b383217 100644 --- a/frontend/src/components/layout.scss +++ b/frontend/src/components/layout.scss @@ -1,3 +1,10 @@ #layout-content { min-height: 694px; } + +#container{ + padding: 1rem; + background-color: #FFF3DF; + height:100%; + border: 2px solid #fff; +} diff --git a/frontend/src/components/navbar.js b/frontend/src/components/navbar.js index ecd4b8e..a643008 100644 --- a/frontend/src/components/navbar.js +++ b/frontend/src/components/navbar.js @@ -19,7 +19,7 @@ const Navbar = () => ( Profil diff --git a/frontend/src/components/seo.js b/frontend/src/components/seo.js index e15f599..cbc2139 100644 --- a/frontend/src/components/seo.js +++ b/frontend/src/components/seo.js @@ -86,3 +86,4 @@ SEO.propTypes = { } export default SEO + diff --git a/frontend/src/images/PPL (1).svg b/frontend/src/images/PPL (1).svg new file mode 100644 index 0000000..6df70b1 --- /dev/null +++ b/frontend/src/images/PPL (1).svg @@ -0,0 +1,3 @@ + + +
Unit Transfusi Darah
PMI Kota Depok
Unit Transfusi Darah...Viewer does not support full SVG 1.1 \ No newline at end of file diff --git a/frontend/src/images/PPL.svg b/frontend/src/images/PPL.svg new file mode 100644 index 0000000..56f1a84 --- /dev/null +++ b/frontend/src/images/PPL.svg @@ -0,0 +1,3 @@ + + +
Unit Transfusi Darah
PMI Kota Depok
Unit Transfusi Darah...Viewer does not support full SVG 1.1 \ No newline at end of file diff --git a/frontend/src/images/letter_b.png b/frontend/src/images/letter_b.png new file mode 100644 index 0000000000000000000000000000000000000000..5238a4b0184296e7d7841e10c9e385e57f1c222a GIT binary patch literal 19240 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 ( - - - - -) - -export default IndexPage diff --git a/frontend/src/pages/profile.js b/frontend/src/pages/profile.js new file mode 100644 index 0000000..b6f2a8a --- /dev/null +++ b/frontend/src/pages/profile.js @@ -0,0 +1,89 @@ +import React from "react" +import { Link } from "gatsby" + +import Layout from "../components/layout" +import SEO from "../components/seo" +import { Card, Col, Container, Row } from 'react-bootstrap' +import logo from "../images/PPL (1).svg" + +const id = '111111111111' +const name = 'Dhita Putri Pratama' +const ProfilePage = ( {id, name, born_date}) => ( + + + +
+
+
+ + + +
+
+
B+
+ +
+ +

No. Kartu  :{id}

+

Nama     : {name}

+

Tanggal Lahir : {born_date}

+ + + + +
+
+
+
+
+ + Header + + Dark Card Title + + Some quick example text to build on the card title and make up the bulk + of the card's content. + + + +
+
+
+
+
+
+
+ + Header + + Dark Card Title + + Some quick example text to build on the card title and make up the bulk + of the card's content. + + + +
+
+
+
+
+ + Header + + Dark Card Title + + Some quick example text to build on the card title and make up the bulk + of the card's content. + + + +
+
+
+
+ + +) + +export default ProfilePage diff --git a/frontend/src/pages/profile.test.js b/frontend/src/pages/profile.test.js new file mode 100644 index 0000000..d138ecd --- /dev/null +++ b/frontend/src/pages/profile.test.js @@ -0,0 +1,30 @@ +import React from 'react' +//import { describe } from 'riteway'; +import renderer from "react-test-renderer" +//import { render }from 'riteway/render-component'; +import ProfilePage from './profile'; + +// You have to write data-testid + + +describe("ProfilePage", () => { + it("renders correctly", () => { + const tree = renderer + .create() + .toJSON() + expect(tree).toMatchSnapshot() + }) +}) + +describe('ProfilePage component', async assert => { + const name = 'Spiderman'; + const $ = render(); + assert({ + given: 'a name', + should: 'Render a card with the correct name.', + actual: $('.name') + .html() + .trim(), + expected: `Name : ${userName}!` + }); +}); diff --git a/frontend/src/pages/temp b/frontend/src/pages/temp new file mode 100644 index 0000000..fd13571 --- /dev/null +++ b/frontend/src/pages/temp @@ -0,0 +1,107 @@ +import React from "react" +import { Link } from "gatsby" + +import Layout from "../components/layout" +import SEO from "../components/seo" +import { Card, Col, Container, Row } from 'react-bootstrap' + +const ProfilePage = () => ( + + + + + +
+ + Header + + Dark Card Title + + Some quick example text to build on the card title and make up the bulk + of the card's content. + + + +
+
+ + +
+ + Header + + Dark Card Title + + Some quick example text to build on the card title and make up the bulk + of the card's content. + + + +
+
+ + + + + + +
+ + Header + + Dark Card Title + + Some quick example text to build on the card title and make up the bulk + of the card's content. + + + +
+
+ + +
+ + Header + + Dark Card Title + + Some quick example text to build on the card title and make up the bulk + of the card's content. + + + +
+
+ + + + + +) + +export default ProfilePage + +escribe(`ProfilePage`, () => { + + it(`contains a name`, () => { + const { getByText } = render() + + const data_nama = getByText("Nama") + + expect(data_nama).toBeInTheDocument() + }) +}) +describe('ProfilePage component', async assert => { + const name = 'Spiderman'; + const $ = render(); + assert({ + given: 'a name', + should: 'Render a card with the correct name.', + actual: $('.name') + .html() + .trim(), + expected: `Name : ${userName}!` + }); +}); + -- GitLab From 8907b2d66befe40d1ea18cb824f264917804148f Mon Sep 17 00:00:00 2001 From: dhitapp Date: Sat, 29 Feb 2020 11:33:06 +0700 Subject: [PATCH 04/13] [GREEN] Imlementasi Halaman Dashboard User --- frontend/src/components/layout.scss | 10 +- frontend/src/components/temp3 | 78 +++ .../src/images/{PPL (1).svg => PPL-1.svg} | 0 frontend/src/images/PPL.svg | 2 +- frontend/src/images/logo(1).svg | 570 +++++++++++++++++ frontend/src/images/logo.svg | 573 +----------------- frontend/src/pages/profile.js | 158 ++--- frontend/src/pages/profile.scss | 150 +++++ frontend/src/pages/profile.test.js | 27 +- frontend/src/pages/temp | 52 ++ frontend/src/pages/temp2 | 88 +++ 11 files changed, 1040 insertions(+), 668 deletions(-) create mode 100644 frontend/src/components/temp3 rename frontend/src/images/{PPL (1).svg => PPL-1.svg} (100%) create mode 100644 frontend/src/images/logo(1).svg create mode 100644 frontend/src/pages/profile.scss create mode 100644 frontend/src/pages/temp2 diff --git a/frontend/src/components/layout.scss b/frontend/src/components/layout.scss index b383217..dcaac53 100644 --- a/frontend/src/components/layout.scss +++ b/frontend/src/components/layout.scss @@ -1,10 +1,16 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); + #layout-content { - min-height: 694px; + min-height: 100%SS; } #container{ padding: 1rem; background-color: #FFF3DF; - height:100%; border: 2px solid #fff; } + +body { +font-family:'Poppins',; +} + diff --git a/frontend/src/components/temp3 b/frontend/src/components/temp3 new file mode 100644 index 0000000..d25889b --- /dev/null +++ b/frontend/src/components/temp3 @@ -0,0 +1,78 @@ +@media (width:320px) { + .responsive { + width:175px; + } + b { + font-size: 25px; + vertical-align: top; + margin-left:-1rem; + } + p { + font-size: 10px; + vertical-align: top; + } + col { + height : 50%; + } +} + + +@media (max-width: 360px) { + .responsive{ + width:220px; + } + .user_info { + margin-top:-1rem; + } + p { + font-size: 30px; + } + + b { + font-size: 25px; + vertical-align: top; + margin-left:-1rem; + } +} +@media (min-width: 768px) { + .card-deck { + + margin-top :2%; + margin-bottom :2%; + } + .card { + height: 17rem; + } +} + +@media (min-width: 992px) { + + .card-border { + margin-top :2%; + margin-bottom :2%; + } + .card { + height: 17rem; + } + +} + +@media (min-width: 1200px) { + + .card-deck { + margin-left:2%; + margin-right:2%; + } + .card { + height: 17rem; + } + div.left_card { + width:40rem; + margin-left:5%; + margin-right:8%; + } + div.right_card { + width:40rem; + margin-left:8%; + } +} diff --git a/frontend/src/images/PPL (1).svg b/frontend/src/images/PPL-1.svg similarity index 100% rename from frontend/src/images/PPL (1).svg rename to frontend/src/images/PPL-1.svg diff --git a/frontend/src/images/PPL.svg b/frontend/src/images/PPL.svg index 56f1a84..3ae84ed 100644 --- a/frontend/src/images/PPL.svg +++ b/frontend/src/images/PPL.svg @@ -1,3 +1,3 @@ -
Unit Transfusi Darah
PMI Kota Depok
Unit Transfusi Darah...Viewer does not support full SVG 1.1 \ No newline at end of file +
Unit Transfusi Darah
PMI Kota Depok
Unit Transfusi Darah...Viewer does not support full SVG 1.1 \ No newline at end of file diff --git a/frontend/src/images/logo(1).svg b/frontend/src/images/logo(1).svg new file mode 100644 index 0000000..594baf9 --- /dev/null +++ b/frontend/src/images/logo(1).svg @@ -0,0 +1,570 @@ + + + + + + + + + + image/svg+xml + + + + + + + D'Blood + UTD PMI Depok + + + diff --git a/frontend/src/images/logo.svg b/frontend/src/images/logo.svg index 594baf9..4587f24 100644 --- a/frontend/src/images/logo.svg +++ b/frontend/src/images/logo.svg @@ -1,570 +1,3 @@ - - - - - - - - - - image/svg+xml - - - - - - - D'Blood - UTD PMI Depok - - - + + +
D'Blood
UTD PMI Depok
D'Blood...Viewer does not support full SVG 1.1 \ No newline at end of file diff --git a/frontend/src/pages/profile.js b/frontend/src/pages/profile.js index b6f2a8a..59c7ca3 100644 --- a/frontend/src/pages/profile.js +++ b/frontend/src/pages/profile.js @@ -4,86 +4,96 @@ import { Link } from "gatsby" import Layout from "../components/layout" import SEO from "../components/seo" import { Card, Col, Container, Row } from 'react-bootstrap' -import logo from "../images/PPL (1).svg" +import logo from "../images/pmi.png" +import "./profile.scss" -const id = '111111111111' -const name = 'Dhita Putri Pratama' -const ProfilePage = ( {id, name, born_date}) => ( +var id = '1111111111' + +const ProfilePage = () => ( - - -
-
-
- - - -
-
-
B+
- -
- -

No. Kartu  :{id}

-

Nama     : {name}

-

Tanggal Lahir : {born_date}

- - - - -
+
+
+
+
+
+
+
+
+
+

Unit Transfusi Darah

+

PMI Kota Depok

+
+
B+
+
+ +

No. Kartu     : 1706039465

+

Nama       : Dhita Putri Pratama

+

Tanggal Lahir : 10 Agustus 2000

+ +
+
+
+
+
+
+
+
+
+

Unit Transfusi Darah

+

PMI Kota Depok

+
+
B+
+
+ +

No. Kartu     : 

+

Nama       : 

+

Tanggal Lahir : 

+ +
+
+
+
+
+
+
+
+
+
+

Unit Transfusi Darah

+

PMI Kota Depok

+
+
B+
+
+ +

No. Kartu     : 

+

Nama       : 

+

Tanggal Lahir : 

+
-
-
-
- - Header - - Dark Card Title - - Some quick example text to build on the card title and make up the bulk - of the card's content. - - - -
-
-
-
-
-
- - Header - - Dark Card Title - - Some quick example text to build on the card title and make up the bulk - of the card's content. - - - -
+
+
+
+
+
+
+
+

Unit Transfusi Darah

+

PMI Kota Depok

+
+
B+
+
+ +

No. Kartu     : 

+

Nama       : 

+

Tanggal Lahir : 

+
-
-
-
- - Header - - Dark Card Title - - Some quick example text to build on the card title and make up the bulk - of the card's content. - - - -
-
-
- +
+
+
+
) - export default ProfilePage diff --git a/frontend/src/pages/profile.scss b/frontend/src/pages/profile.scss new file mode 100644 index 0000000..a40f7b1 --- /dev/null +++ b/frontend/src/pages/profile.scss @@ -0,0 +1,150 @@ +@media (width:320px) { + .responsive { + width:40px; + } + .col-6 { + width:10rem; + } + b { + font-size: 20px; + vertical-align: top; + margin-right:-1rem; + + } + p { + font-size: 8px; + line-height:0.1; + } + .user_info { + margin-top:-1rem; + margin-left:0.5rem; + } + .col-6 { + margin-top:0.5rem; + } +} + +@media (min-width:360px) { + .col-3 { + margin-top:-1rem; + } + .col-6 { + margin-top:1rem; + margin-left:1rem; + } + .responsive { + width:50px; + } + b { + font-size: 20px; + } + p { + font-size: 10px; + line-height:0.2; + } + .user_info { + margin-top:1rem; + margin-left:0.5rem; + } +} + +@media (min-width: 576px) { + .responsive { + width:60px; + } + b { + font-size: 20px; + margin-right:-2rem; + } + p { + font-size: 10px; + vertical-align: top; + } + .col-6 { + margin-left:1.25rem; + } + + +} +@media (min-width: 768px) { + .responsive { + width:50px; + } + b { + font-size: 20px; + margin-right:-1rem; + } + p { + font-size: 10px; + vertical-align: top; + + } + .card-deck { + margin-left:3rem; + } + .user_info { + margin-top:1rem; + } +} + +@media (min-width: 992px) { + .responsive { + width:60px; + } + .card-border { + margin-top :2%; + } + .card { + height: 12rem; + } + .user_info { + margin-top:1rem; + } + .card-deck { + margin-left:9rem; + } + .col-6 { + margin-top:1rem; + margin-left:1.46rem; + } +} + +@media (min-width: 1200px) { + .responsive { + width:80px; + margin-left:1rem; + } + b { + font-size: 40px; + vertical-align: bottom; + margin-left:2rem; + } + p { + font-size: 20px; + vertical-align: top; + line-height:1; + } + .col-3{ + margin-top:0.5rem; + } + .card-deck { + margin-left:2%; + margin-right:2%; + } + .user_info { + margin-top:2rem; + margin-left:2rem; + } + .card { + height: 19rem; + } + div.left_card { + width:40rem; + margin-left:5%; + margin-right:8%; + } + div.right_card { + width:40rem; + margin-left:8%; + } +} diff --git a/frontend/src/pages/profile.test.js b/frontend/src/pages/profile.test.js index d138ecd..ace7552 100644 --- a/frontend/src/pages/profile.test.js +++ b/frontend/src/pages/profile.test.js @@ -1,30 +1,15 @@ import React from 'react' //import { describe } from 'riteway'; -import renderer from "react-test-renderer" -//import { render }from 'riteway/render-component'; +//import renderer from "react-test-renderer" +import { render }from '@testing-library/react'; import ProfilePage from './profile'; // You have to write data-testid -describe("ProfilePage", () => { - it("renders correctly", () => { - const tree = renderer - .create() - .toJSON() - expect(tree).toMatchSnapshot() +describe(`ProfilePage`, () => { + it(`contains name`, () => { + const { container } = render() + expect(container).toHaveTextContent("Nama") }) }) - -describe('ProfilePage component', async assert => { - const name = 'Spiderman'; - const $ = render(); - assert({ - given: 'a name', - should: 'Render a card with the correct name.', - actual: $('.name') - .html() - .trim(), - expected: `Name : ${userName}!` - }); -}); diff --git a/frontend/src/pages/temp b/frontend/src/pages/temp index fd13571..87afb5c 100644 --- a/frontend/src/pages/temp +++ b/frontend/src/pages/temp @@ -105,3 +105,55 @@ describe('ProfilePage component', async assert => { }); }); +mx-sm-n4 mb-sm-3 + +mr-sm-3 + + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} + +.column { + display: flex; + flex-direction: column; + flex-basis: 100%; + flex: 1; +} + +@media screen and (min-width: 800px) { + .column { + flex: 1 + } + +} + +.card-border-dark { + margin-bottom: -35rem; + } + + + + +@media (max-width: 576px) { + .container-fluid { + padding-left: 5px; + padding-right: 5px; + } + + .row { + margin-left: -5px; + margin-right: -5px; + } + .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { + padding-left: 5px; + padding-right: 5px; + } + .row.no-gutters { + margin-left: 0; + margin-right: 0; + } +} diff --git a/frontend/src/pages/temp2 b/frontend/src/pages/temp2 new file mode 100644 index 0000000..7af2b30 --- /dev/null +++ b/frontend/src/pages/temp2 @@ -0,0 +1,88 @@ +import React from "react" +import { Link } from "gatsby" + +import Layout from "../components/layout" +import SEO from "../components/seo" +import { Card, Col, Container, Row } from 'react-bootstrap' +import logo from "../images/PPL.svg" +import "./profile.scss" +' +const ProfilePage = ( {id, name, born_date}) => ( + + +
+
+
+
+ + +
+
+
+
B+
+ +
+ +

No. Kartu  :{id}

+

Nama     : {name}

+

Tanggal Lahir : {born_date}

+ +
+ + +
+
+
+
+
+ + Header + + Dark Card Title + + Some quick example text to build on the card title and make up the bulk + of the card's content. + + + +
+
+
+
+
+
+
+ + Header + + Dark Card Title + + Some quick example text to build on the card title and make up the bulk + of the card's content. + + + +
+
+
+
+
+ + Header + + Dark Card Title + + Some quick example text to build on the card title and make up the bulk + of the card's content. + + + +
+
+
+
+
+ +) + +export default ProfilePage -- GitLab From 1795daa5ba5656b0e88f61a1796dea8886c7abfc Mon Sep 17 00:00:00 2001 From: dhitapp Date: Sat, 29 Feb 2020 13:13:46 +0700 Subject: [PATCH 05/13] [REFACTOR] Mengubah direct link page navbar --- frontend/src/components/navbar.js | 4 ++-- frontend/src/pages/404.js | 1 - frontend/src/pages/404.test.js | 15 +++++++++++++++ frontend/src/pages/page-2.js | 16 ---------------- frontend/src/pages/profile.test.js | 2 ++ 5 files changed, 19 insertions(+), 19 deletions(-) create mode 100644 frontend/src/pages/404.test.js delete mode 100644 frontend/src/pages/page-2.js diff --git a/frontend/src/components/navbar.js b/frontend/src/components/navbar.js index a643008..9cd115c 100644 --- a/frontend/src/components/navbar.js +++ b/frontend/src/components/navbar.js @@ -16,10 +16,10 @@ const Navbar = () => ( Home Jadwal Donor Ajukan Acara Donor - Profil + Profil diff --git a/frontend/src/pages/404.js b/frontend/src/pages/404.js index 3c2c737..380b43a 100644 --- a/frontend/src/pages/404.js +++ b/frontend/src/pages/404.js @@ -5,7 +5,6 @@ import SEO from "../components/seo" const NotFoundPage = () => ( -

NOT FOUND

You just hit a route that doesn't exist... the sadness.

 diff --git a/frontend/src/pages/404.test.js b/frontend/src/pages/404.test.js new file mode 100644 index 0000000..00ca519 --- /dev/null +++ b/frontend/src/pages/404.test.js @@ -0,0 +1,15 @@ +import React from 'react' +//import { describe } from 'riteway'; +//import renderer from "react-test-renderer" +import { render }from '@testing-library/react'; +import NotFoundPage from './404'; + +// You have to write data-testid + + +describe(`NotFoundPage`, () => { + it(`contains name`, () => { + const { container } = render() + expect(container).toHaveTextContent("NOT FOUND") + }) +}) diff --git a/frontend/src/pages/page-2.js b/frontend/src/pages/page-2.js deleted file mode 100644 index 38b51d6..0000000 --- a/frontend/src/pages/page-2.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react" -import { Link } from "gatsby" - -import Layout from "../components/layout" -import SEO from "../components/seo" - -const SecondPage = () => ( - - -

Hi from the second page

-

Welcome to page 2

- Go back to the homepage - -) - -export default SecondPage diff --git a/frontend/src/pages/profile.test.js b/frontend/src/pages/profile.test.js index ace7552..50a4fda 100644 --- a/frontend/src/pages/profile.test.js +++ b/frontend/src/pages/profile.test.js @@ -11,5 +11,7 @@ describe(`ProfilePage`, () => { it(`contains name`, () => { const { container } = render() expect(container).toHaveTextContent("Nama") + expect(container).toHaveTextContent("No. Kartu") + expect(container).toHaveTextContent("Tanggal Lahir") }) }) -- GitLab From 7fe093a37e19c286da30cccba344fbb981ab764a Mon Sep 17 00:00:00 2001 From: dhitapp Date: Sat, 29 Feb 2020 14:25:07 +0700 Subject: [PATCH 06/13] [REFACTOR] Hapus file temp --- frontend/src/components/temp3 | 78 ----------------- frontend/src/pages/temp | 159 ---------------------------------- frontend/src/pages/temp2 | 88 ------------------- 3 files changed, 325 deletions(-) delete mode 100644 frontend/src/components/temp3 delete mode 100644 frontend/src/pages/temp delete mode 100644 frontend/src/pages/temp2 diff --git a/frontend/src/components/temp3 b/frontend/src/components/temp3 deleted file mode 100644 index d25889b..0000000 --- a/frontend/src/components/temp3 +++ /dev/null @@ -1,78 +0,0 @@ -@media (width:320px) { - .responsive { - width:175px; - } - b { - font-size: 25px; - vertical-align: top; - margin-left:-1rem; - } - p { - font-size: 10px; - vertical-align: top; - } - col { - height : 50%; - } -} - - -@media (max-width: 360px) { - .responsive{ - width:220px; - } - .user_info { - margin-top:-1rem; - } - p { - font-size: 30px; - } - - b { - font-size: 25px; - vertical-align: top; - margin-left:-1rem; - } -} -@media (min-width: 768px) { - .card-deck { - - margin-top :2%; - margin-bottom :2%; - } - .card { - height: 17rem; - } -} - -@media (min-width: 992px) { - - .card-border { - margin-top :2%; - margin-bottom :2%; - } - .card { - height: 17rem; - } - -} - -@media (min-width: 1200px) { - - .card-deck { - margin-left:2%; - margin-right:2%; - } - .card { - height: 17rem; - } - div.left_card { - width:40rem; - margin-left:5%; - margin-right:8%; - } - div.right_card { - width:40rem; - margin-left:8%; - } -} diff --git a/frontend/src/pages/temp b/frontend/src/pages/temp deleted file mode 100644 index 87afb5c..0000000 --- a/frontend/src/pages/temp +++ /dev/null @@ -1,159 +0,0 @@ -import React from "react" -import { Link } from "gatsby" - -import Layout from "../components/layout" -import SEO from "../components/seo" -import { Card, Col, Container, Row } from 'react-bootstrap' - -const ProfilePage = () => ( - - - - - -
- - Header - - Dark Card Title - - Some quick example text to build on the card title and make up the bulk - of the card's content. - - - -
-
- - -
- - Header - - Dark Card Title - - Some quick example text to build on the card title and make up the bulk - of the card's content. - - - -
-
- - - - - - -
- - Header - - Dark Card Title - - Some quick example text to build on the card title and make up the bulk - of the card's content. - - - -
-
- - -
- - Header - - Dark Card Title - - Some quick example text to build on the card title and make up the bulk - of the card's content. - - - -
-
- - - - - -) - -export default ProfilePage - -escribe(`ProfilePage`, () => { - - it(`contains a name`, () => { - const { getByText } = render() - - const data_nama = getByText("Nama") - - expect(data_nama).toBeInTheDocument() - }) -}) -describe('ProfilePage component', async assert => { - const name = 'Spiderman'; - const $ = render(); - assert({ - given: 'a name', - should: 'Render a card with the correct name.', - actual: $('.name') - .html() - .trim(), - expected: `Name : ${userName}!` - }); -}); - -mx-sm-n4 mb-sm-3 - -mr-sm-3 - - -.row { - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; -} - -.column { - display: flex; - flex-direction: column; - flex-basis: 100%; - flex: 1; -} - -@media screen and (min-width: 800px) { - .column { - flex: 1 - } - -} - -.card-border-dark { - margin-bottom: -35rem; - } - - - - -@media (max-width: 576px) { - .container-fluid { - padding-left: 5px; - padding-right: 5px; - } - - .row { - margin-left: -5px; - margin-right: -5px; - } - .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { - padding-left: 5px; - padding-right: 5px; - } - .row.no-gutters { - margin-left: 0; - margin-right: 0; - } -} diff --git a/frontend/src/pages/temp2 b/frontend/src/pages/temp2 deleted file mode 100644 index 7af2b30..0000000 --- a/frontend/src/pages/temp2 +++ /dev/null @@ -1,88 +0,0 @@ -import React from "react" -import { Link } from "gatsby" - -import Layout from "../components/layout" -import SEO from "../components/seo" -import { Card, Col, Container, Row } from 'react-bootstrap' -import logo from "../images/PPL.svg" -import "./profile.scss" -' -const ProfilePage = ( {id, name, born_date}) => ( - - -
-
-
-
- - -
-
-
-
B+
- -
- -

No. Kartu  :{id}

-

Nama     : {name}

-

Tanggal Lahir : {born_date}

- -
- - -
-
-
-
-
- - Header - - Dark Card Title - - Some quick example text to build on the card title and make up the bulk - of the card's content. - - - -
-
-
-
-
-
-
- - Header - - Dark Card Title - - Some quick example text to build on the card title and make up the bulk - of the card's content. - - - -
-
-
-
-
- - Header - - Dark Card Title - - Some quick example text to build on the card title and make up the bulk - of the card's content. - - - -
-
-
-
-
- -) - -export default ProfilePage -- GitLab From 5cefeec3d5446f0414e6774d797e3283c3b0931d Mon Sep 17 00:00:00 2001 From: Dhita Putri Pratama Date: Sat, 29 Feb 2020 14:31:20 +0700 Subject: [PATCH 07/13] Update layout.scss --- frontend/src/components/layout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/layout.scss b/frontend/src/components/layout.scss index dcaac53..53f8312 100644 --- a/frontend/src/components/layout.scss +++ b/frontend/src/components/layout.scss @@ -1,7 +1,7 @@ @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); #layout-content { - min-height: 100%SS; + min-height: 100%; } #container{ -- GitLab From 0ea87a0c26b2334219dda728b9ce0c1b6556ddd0 Mon Sep 17 00:00:00 2001 From: dhitapp Date: Sat, 29 Feb 2020 15:15:22 +0700 Subject: [PATCH 08/13] [REFACTOR] Update layout.scss --- frontend/src/components/layout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/layout.scss b/frontend/src/components/layout.scss index dcaac53..53f8312 100644 --- a/frontend/src/components/layout.scss +++ b/frontend/src/components/layout.scss @@ -1,7 +1,7 @@ @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); #layout-content { - min-height: 100%SS; + min-height: 100%; } #container{ -- GitLab From 63d8edd9b3500596d3f2c4258d3749566d2ff1fd Mon Sep 17 00:00:00 2001 From: dhitapp Date: Sat, 29 Feb 2020 21:35:19 +0700 Subject: [PATCH 09/13] [REFACTOR] Mengubah css agar responsive pada beberapa tambahan device serta menambahkan prop to pada Navbar --- frontend/src/components/navbar.js | 2 +- frontend/src/pages/profile.js | 43 ++++----- frontend/src/pages/profile.scss | 149 +++++++++++++++++++++++++----- 3 files changed, 148 insertions(+), 46 deletions(-) diff --git a/frontend/src/components/navbar.js b/frontend/src/components/navbar.js index 9cd115c..88d6b70 100644 --- a/frontend/src/components/navbar.js +++ b/frontend/src/components/navbar.js @@ -20,7 +20,7 @@ const Navbar = () => ( diff --git a/frontend/src/pages/profile.js b/frontend/src/pages/profile.js index 578571f..2648637 100644 --- a/frontend/src/pages/profile.js +++ b/frontend/src/pages/profile.js @@ -24,11 +24,11 @@ const ProfilePage = () => (
B+
- -

No. Kartu     : 1706039465

-

Nama       : Dhita Putri Pratama

-

Tanggal Lahir : 10 Agustus 2000

- +
+

No. Kartu     : 1706039465

+

Nama       : Dhita Putri Pratama

+

Tanggal Lahir : 10 Agustus 2000

+
@@ -43,11 +43,11 @@ const ProfilePage = () => (
B+
- -

No. Kartu     : 

-

Nama       : 

-

Tanggal Lahir : 

- +
+

No. Kartu     : 

+

Nama       : 

+

Tanggal Lahir : 

+
@@ -63,12 +63,12 @@ const ProfilePage = () => (
B+
- -

No. Kartu     : 

-

Nama       : 

-

Tanggal Lahir : 

- - +
+

No. Kartu     : 

+

Nama       : 

+

Tanggal Lahir : 

+
+
@@ -82,12 +82,12 @@ const ProfilePage = () => (
B+
- -

No. Kartu     : 

-

Nama       : 

-

Tanggal Lahir : 

- +
+

No. Kartu     : 

+

Nama       : 

+

Tanggal Lahir : 

+ @@ -96,3 +96,4 @@ const ProfilePage = () => ( ) export default ProfilePage + diff --git a/frontend/src/pages/profile.scss b/frontend/src/pages/profile.scss index a40f7b1..18e9ac2 100644 --- a/frontend/src/pages/profile.scss +++ b/frontend/src/pages/profile.scss @@ -1,27 +1,29 @@ @media (width:320px) { .responsive { width:40px; + margin-top:-0.5rem; } .col-6 { width:10rem; + margin-top:0.5rem; } b { font-size: 20px; vertical-align: top; + margin-top:-0.5rem; margin-right:-1rem; } p { - font-size: 8px; + font-size: 8px; line-height:0.1; } - .user_info { + .user-info { margin-top:-1rem; - margin-left:0.5rem; - } - .col-6 { - margin-top:0.5rem; + margin-bottom:1rem; + margin-left:0.25rem; } + } @media (min-width:360px) { @@ -42,10 +44,13 @@ font-size: 10px; line-height:0.2; } - .user_info { + .user-info { margin-top:1rem; margin-left:0.5rem; } + .card { + height: 10rem; + } } @media (min-width: 576px) { @@ -82,31 +87,46 @@ .card-deck { margin-left:3rem; } - .user_info { + .user-info { margin-top:1rem; } + .col-6 { + margin-left:1rem; + } } @media (min-width: 992px) { - .responsive { - width:60px; +.responsive { + width:50px; + margin-left:1rem; } - .card-border { - margin-top :2%; - } - .card { - height: 12rem; - } - .user_info { - margin-top:1rem; + p { + font-size: 10px; + vertical-align: top; + line-height:0.8; } - .card-deck { - margin-left:9rem; + b { + font-size: 40px; + vertical-align: bottom; + margin-left:1rem; + } + .card-deck { + margin-left:-1.75%; + margin-right:2%; } - .col-6 { - margin-top:1rem; - margin-left:1.46rem; + .user-info{ + margin-top:2rem; } + div.left_card { + width:18rem; + margin-right:-5%; + } + div.right_card { + width:18rem; + margin-left:8%; + margin-right:-8%; + } + } @media (min-width: 1200px) { @@ -131,7 +151,7 @@ margin-left:2%; margin-right:2%; } - .user_info { + .user-info { margin-top:2rem; margin-left:2rem; } @@ -147,4 +167,85 @@ width:40rem; margin-left:8%; } + .col-6 { + margin-top:1rem; + margin-left:-1rem; + } +} + +@media (min-width: 900px) and (max-width: 1440px) { + .responsive { + width:70px; + } + div.left_card { + width:28.25rem; + margin-left:7rem; + } + div.right_card { + width:28.25rem; + margin-left:3rem; + } + p { + font-size: 14px; + vertical-align: top; + } + .col-2 { + margin-left:-0.5rem; + } + .col-6 { + margin-left:2rem; + } + .col-3 { + margin-top:-1rem; + } + b { + font-size: 30px; + margin-top:-0.5rem; + margin-right:-1rem; + } + .user-info{ + margin-left:1rem; + } + .card { + height: 15rem; + } +} + + +@media (min-width: 800px) and (max-width: 1280px) { + .responsive { + width:70px; + } + div.left_card { + width:28rem; + margin-left:3rem; + } + div.right_card { + width:28rem; + margin-left:3rem; + } + p { + font-size: 14px; + vertical-align: top; + } + .col-2 { + margin-left:-0.5rem; + } + .col-6 { + margin-left:1.5rem; + } + .col-3 { + margin-top:-1rem; + } + b { + font-size: 30px; + margin-top:-0.5rem; + margin-right:-1rem; + } + .user-info{ + margin-left:1rem; + } + .card { + height: 15rem; + } } -- GitLab From da231dc86649d6d1a32bc5a1a0d161f26df8c8b5 Mon Sep 17 00:00:00 2001 From: dhitapp Date: Sun, 1 Mar 2020 09:02:55 +0700 Subject: [PATCH 10/13] [REFACTOR] Apply clean code and uninstall an unneeded dependency --- frontend/jest-preprocess.js | 2 +- frontend/loadershim.js | 2 +- frontend/package-lock.json | 123 -------- frontend/package.json | 3 +- frontend/src/components/navbar.js | 6 +- frontend/src/components/seo.js | 1 - frontend/src/pages/404.test.js | 11 +- frontend/src/pages/profile.js | 213 +++++++------ frontend/src/pages/profile.scss | 463 ++++++++++++++--------------- frontend/src/pages/profile.test.js | 11 +- 10 files changed, 371 insertions(+), 464 deletions(-) diff --git a/frontend/jest-preprocess.js b/frontend/jest-preprocess.js index 911cbd7..0b9d7df 100644 --- a/frontend/jest-preprocess.js +++ b/frontend/jest-preprocess.js @@ -1,4 +1,4 @@ const babelOptions = { - presets: ["babel-preset-gatsby"], + presets: ["babel-preset-gatsby"], } module.exports = require("babel-jest").createTransformer(babelOptions) diff --git a/frontend/loadershim.js b/frontend/loadershim.js index 26cf67d..37084c7 100644 --- a/frontend/loadershim.js +++ b/frontend/loadershim.js @@ -1,3 +1,3 @@ global.___loader = { - enqueue: jest.fn(), + enqueue: jest.fn(), } diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7bbf509..bfd900a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3909,15 +3909,6 @@ "@babel/types": "^7.3.0" } }, - "@types/cheerio": { - "version": "0.22.16", - "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.16.tgz", - "integrity": "sha512-bSbnU/D4yzFdzLpp3+rcDj0aQQMIRUBNJU7azPxdqMpnexjUSvGJyDuOBQBHeOZh1mMKgsJm6Dy+LLh80Ew4tQ==", - "dev": true, - "requires": { - "@types/node": "*" - } - }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", @@ -8682,12 +8673,6 @@ } } }, - "defined": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", - "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=", - "dev": true - }, "del": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz", @@ -9922,12 +9907,6 @@ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz", "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==" }, - "esm": { - "version": "3.2.25", - "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", - "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==", - "dev": true - }, "espree": { "version": "6.1.2", "resolved": "https://registry.npmjs.org/espree/-/espree-6.1.2.tgz", @@ -23925,15 +23904,6 @@ "signal-exit": "^3.0.2" } }, - "resumer": { - "version": "0.0.0", - "resolved": "https://registry.npmjs.org/resumer/-/resumer-0.0.0.tgz", - "integrity": "sha1-8ej0YeQGS6Oegq883CqMiT0HZ1k=", - "dev": true, - "requires": { - "through": "~2.3.4" - } - }, "ret": { "version": "0.1.15", "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", @@ -23976,44 +23946,6 @@ "inherits": "^2.0.1" } }, - "riteway": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/riteway/-/riteway-6.1.1.tgz", - "integrity": "sha512-HjvXuf/N5KcdUx4B7MYDDQguY53/d20X+0tvnXmFobf7ipE/V1mQYOMueNcawyrir1Iw2N3UBJTK/2BnbFRBtA==", - "dev": true, - "requires": { - "@types/cheerio": "^0.22.12", - "@types/react": "^16.8.24", - "cheerio": "1.0.0-rc.3", - "esm": "3.2.25", - "react-dom": "16.11.0", - "tape": "4.11.0" - }, - "dependencies": { - "react-dom": { - "version": "16.11.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.11.0.tgz", - "integrity": "sha512-nrRyIUE1e7j8PaXSPtyRKtz+2y9ubW/ghNgqKFHHAHaeP0fpF5uXR+sq8IMRHC+ZUxw7W9NyCDTBtwWxvkb0iA==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.17.0" - } - }, - "scheduler": { - "version": "0.17.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz", - "integrity": "sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - } - } - }, "rsvp": { "version": "4.8.5", "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz", @@ -26022,61 +25954,6 @@ "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==" }, - "tape": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/tape/-/tape-4.11.0.tgz", - "integrity": "sha512-yixvDMX7q7JIs/omJSzSZrqulOV51EC9dK8dM0TzImTIkHWfe2/kFyL5v+d9C+SrCMaICk59ujsqFAVidDqDaA==", - "dev": true, - "requires": { - "deep-equal": "~1.0.1", - "defined": "~1.0.0", - "for-each": "~0.3.3", - "function-bind": "~1.1.1", - "glob": "~7.1.4", - "has": "~1.0.3", - "inherits": "~2.0.4", - "minimist": "~1.2.0", - "object-inspect": "~1.6.0", - "resolve": "~1.11.1", - "resumer": "~0.0.0", - "string.prototype.trim": "~1.1.2", - "through": "~2.3.8" - }, - "dependencies": { - "deep-equal": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz", - "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=", - "dev": true - }, - "object-inspect": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz", - "integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==", - "dev": true - }, - "resolve": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz", - "integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==", - "dev": true, - "requires": { - "path-parse": "^1.0.6" - } - }, - "string.prototype.trim": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz", - "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=", - "dev": true, - "requires": { - "define-properties": "^1.1.2", - "es-abstract": "^1.5.0", - "function-bind": "^1.0.2" - } - } - } - }, "tar": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/tar/-/tar-5.0.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index 9ade027..74b3867 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -37,8 +37,7 @@ "identity-obj-proxy": "^3.0.0", "jest": "^25.1.0", "prettier": "^1.19.1", - "react-test-renderer": "^16.12.0", - "riteway": "^6.1.1" + "react-test-renderer": "^16.12.0" }, "keywords": [ "gatsby" diff --git a/frontend/src/components/navbar.js b/frontend/src/components/navbar.js index 88d6b70..390f089 100644 --- a/frontend/src/components/navbar.js +++ b/frontend/src/components/navbar.js @@ -19,8 +19,10 @@ const Navbar = () => ( Profil diff --git a/frontend/src/components/seo.js b/frontend/src/components/seo.js index cbc2139..e15f599 100644 --- a/frontend/src/components/seo.js +++ b/frontend/src/components/seo.js @@ -86,4 +86,3 @@ SEO.propTypes = { } export default SEO - diff --git a/frontend/src/pages/404.test.js b/frontend/src/pages/404.test.js index 00ca519..a2563ca 100644 --- a/frontend/src/pages/404.test.js +++ b/frontend/src/pages/404.test.js @@ -1,11 +1,6 @@ -import React from 'react' -//import { describe } from 'riteway'; -//import renderer from "react-test-renderer" -import { render }from '@testing-library/react'; -import NotFoundPage from './404'; - -// You have to write data-testid - +import React from "react" +import { render } from "@testing-library/react" +import NotFoundPage from "./404" describe(`NotFoundPage`, () => { it(`contains name`, () => { diff --git a/frontend/src/pages/profile.js b/frontend/src/pages/profile.js index 2648637..44104b0 100644 --- a/frontend/src/pages/profile.js +++ b/frontend/src/pages/profile.js @@ -3,97 +3,138 @@ import { Link } from "gatsby" import Layout from "../components/layout" import SEO from "../components/seo" -import { Card, Col, Container, Row } from 'react-bootstrap' +import { Card, Col, Container, Row } from "react-bootstrap" import logo from "../images/pmi.png" import "./profile.scss" - const ProfilePage = () => ( -
-
-
-
-
-
-
-
-
-

Unit Transfusi Darah

-

PMI Kota Depok

-
-
B+
-
-
-

No. Kartu     : 1706039465

-

Nama       : Dhita Putri Pratama

-

Tanggal Lahir : 10 Agustus 2000

-
-
-
-
-
-
-
-
-
-
-

Unit Transfusi Darah

-

PMI Kota Depok

-
-
B+
-
-
-

No. Kartu     : 

-

Nama       : 

-

Tanggal Lahir : 

-
-
-
-
-
-
-
-
-
-
-
-

Unit Transfusi Darah

-

PMI Kota Depok

-
-
B+
-
-
-

No. Kartu     : 

-

Nama       : 

-

Tanggal Lahir : 

-
-
-
-
-
-
-
-
-
-
-

Unit Transfusi Darah

-

PMI Kota Depok

-
-
B+
-
-
-

No. Kartu     : 

-

Nama       : 

-

Tanggal Lahir : 

-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ +
+
+

Unit Transfusi Darah

+

PMI Kota Depok

+
+
+ + B+ + +
+
+
+

+ No. Kartu     : 1706039465 +

+

+ Nama       : Dhita + Putri Pratama +

+

+ Tanggal Lahir : 10 Agustus 2000 +

+
+
+
+
+
+
+
+
+
+ +
+
+

Unit Transfusi Darah

+

PMI Kota Depok

+
+
+ + B+ + +
+
+
+

+ No. Kartu     :  +

+

+ Nama       :  +

+

Tanggal Lahir : 

+
+
+
+
+
+
+
+
+
+
+ +
+
+

Unit Transfusi Darah

+

PMI Kota Depok

+
+
+ + B+ + +
+
+
+

+ No. Kartu     :  +

+

+ Nama       :  +

+

Tanggal Lahir : 

+
+
+
+
+
+
+
+
+
+ +
+
+

Unit Transfusi Darah

+

PMI Kota Depok

+
+
+ + B+ + +
+
+
+

+ No. Kartu     :  +

+

+ Nama       :  +

+

Tanggal Lahir : 

+
+
+
+
+
+
+
) export default ProfilePage - diff --git a/frontend/src/pages/profile.scss b/frontend/src/pages/profile.scss index 18e9ac2..f0f5765 100644 --- a/frontend/src/pages/profile.scss +++ b/frontend/src/pages/profile.scss @@ -1,251 +1,250 @@ -@media (width:320px) { - .responsive { - width:40px; - margin-top:-0.5rem; - } - .col-6 { - width:10rem; - margin-top:0.5rem; - } - b { - font-size: 20px; - vertical-align: top; - margin-top:-0.5rem; - margin-right:-1rem; - - } - p { - font-size: 8px; - line-height:0.1; - } - .user-info { - margin-top:-1rem; - margin-bottom:1rem; - margin-left:0.25rem; - } - +@media (width: 320px) { + .responsive { + width: 40px; + margin-top: -0.5rem; + } + .col-6 { + width: 10rem; + margin-top: 0.5rem; + } + b { + font-size: 20px; + vertical-align: top; + margin-top: -0.5rem; + margin-right: -1rem; + } + p { + font-size: 8px; + line-height: 0.1; + } + .user-info { + margin-top: -1rem; + margin-bottom: 1rem; + margin-left: 0.25rem; + } } -@media (min-width:360px) { - .col-3 { - margin-top:-1rem; - } - .col-6 { - margin-top:1rem; - margin-left:1rem; - } - .responsive { - width:50px; - } - b { - font-size: 20px; - } - p { - font-size: 10px; - line-height:0.2; - } - .user-info { - margin-top:1rem; - margin-left:0.5rem; - } - .card { - height: 10rem; - } +@media (min-width: 360px) { + .col-3 { + margin-top: -1rem; + } + .col-6 { + margin-top: 1rem; + margin-left: 1rem; + } + .responsive { + width: 50px; + } + b { + font-size: 20px; + } + p { + font-size: 10px; + line-height: 0.2; + } + .user-info { + margin-top: 1rem; + margin-left: 0.5rem; + } + .card { + height: 10rem; + } } -@media (min-width: 576px) { - .responsive { - width:60px; - } - b { - font-size: 20px; - margin-right:-2rem; - } - p { - font-size: 10px; - vertical-align: top; - } - .col-6 { - margin-left:1.25rem; - } - - +@media (min-width: 576px) { + .responsive { + width: 60px; + } + b { + font-size: 20px; + margin-right: -2rem; + } + p { + font-size: 10px; + vertical-align: top; + } + .col-6 { + margin-left: 1.25rem; + } } @media (min-width: 768px) { - .responsive { - width:50px; - } - b { - font-size: 20px; - margin-right:-1rem; - } - p { - font-size: 10px; - vertical-align: top; - - } - .card-deck { - margin-left:3rem; - } - .user-info { - margin-top:1rem; - } - .col-6 { - margin-left:1rem; - } + .responsive { + width: 50px; + } + b { + font-size: 20px; + margin-right: -1rem; + } + p { + font-size: 10px; + vertical-align: top; + } + .card-deck { + margin-left: 3rem; + } + .user-info { + margin-top: 1rem; + } + .col-6 { + margin-left: 1rem; + } } @media (min-width: 992px) { -.responsive { - width:50px; - margin-left:1rem; - } - p { - font-size: 10px; - vertical-align: top; - line-height:0.8; - } - b { - font-size: 40px; - vertical-align: bottom; - margin-left:1rem; - } - .card-deck { - margin-left:-1.75%; - margin-right:2%; - } - .user-info{ - margin-top:2rem; - } - div.left_card { - width:18rem; - margin-right:-5%; - } - div.right_card { - width:18rem; - margin-left:8%; - margin-right:-8%; - } - + .responsive { + width: 50px; + margin-left: 1rem; + } + p { + font-size: 10px; + vertical-align: top; + line-height: 0.8; + } + b { + font-size: 40px; + vertical-align: bottom; + margin-left: 1rem; + } + .card-deck { + margin-left: -1.75%; + margin-right: 2%; + } + .user-info { + margin-top: 2rem; + } + div.left_card { + width: 18rem; + margin-right: -5%; + } + div.right_card { + width: 18rem; + margin-left: 8%; + margin-right: -8%; + } } @media (min-width: 1200px) { - .responsive { - width:80px; - margin-left:1rem; - } - b { - font-size: 40px; - vertical-align: bottom; - margin-left:2rem; - } - p { - font-size: 20px; - vertical-align: top; - line-height:1; - } - .col-3{ - margin-top:0.5rem; - } - .card-deck { - margin-left:2%; - margin-right:2%; - } - .user-info { - margin-top:2rem; - margin-left:2rem; - } - .card { - height: 19rem; - } - div.left_card { - width:40rem; - margin-left:5%; - margin-right:8%; - } - div.right_card { - width:40rem; - margin-left:8%; - } - .col-6 { - margin-top:1rem; - margin-left:-1rem; - } + .responsive { + width: 80px; + margin-left: 1rem; + } + b { + font-size: 40px; + vertical-align: bottom; + margin-left: 2rem; + } + p { + font-size: 20px; + vertical-align: top; + line-height: 1; + } + .col-3 { + margin-top: 0.5rem; + } + .card-deck { + margin-left: 2%; + margin-right: 2%; + } + .user-info { + margin-top: 2rem; + margin-left: 2rem; + } + .card { + height: 19rem; + } + div.left_card { + width: 40rem; + margin-left: 5%; + margin-right: 8%; + } + div.right_card { + width: 40rem; + margin-left: 8%; + } + .col-6 { + margin-top: 1rem; + margin-left: -1rem; + } } @media (min-width: 900px) and (max-width: 1440px) { - .responsive { - width:70px; - } - div.left_card { - width:28.25rem; - margin-left:7rem; - } - div.right_card { - width:28.25rem; - margin-left:3rem; - } - p { - font-size: 14px; - vertical-align: top; - } - .col-2 { - margin-left:-0.5rem; - } - .col-6 { - margin-left:2rem; - } - .col-3 { - margin-top:-1rem; - } - b { - font-size: 30px; - margin-top:-0.5rem; - margin-right:-1rem; - } - .user-info{ - margin-left:1rem; - } - .card { - height: 15rem; - } + .responsive { + width: 70px; + } + div.left_card { + width: 28.25rem; + margin-left: 7rem; + } + div.right_card { + width: 28.25rem; + margin-left: 3rem; + } + p { + font-size: 14px; + vertical-align: top; + } + .col-2 { + margin-left: -0.5rem; + } + .col-6 { + margin-left: 2rem; + } + .col-3 { + margin-top: -1rem; + } + b { + font-size: 30px; + margin-top: -0.5rem; + margin-right: -1rem; + } + .user-info { + margin-left: 1rem; + } + .card { + height: 15rem; + } } - @media (min-width: 800px) and (max-width: 1280px) { - .responsive { - width:70px; - } - div.left_card { - width:28rem; - margin-left:3rem; - } - div.right_card { - width:28rem; - margin-left:3rem; - } - p { - font-size: 14px; - vertical-align: top; - } - .col-2 { - margin-left:-0.5rem; - } - .col-6 { - margin-left:1.5rem; - } - .col-3 { - margin-top:-1rem; - } - b { - font-size: 30px; - margin-top:-0.5rem; - margin-right:-1rem; - } - .user-info{ - margin-left:1rem; - } - .card { - height: 15rem; - } + .responsive { + width: 70px; + } + div.left_card { + width: 28rem; + margin-left: 3rem; + } + div.right_card { + width: 28rem; + margin-left: 3rem; + } + p { + font-size: 14px; + vertical-align: top; + } + .col-2 { + margin-left: -0.5rem; + } + .col-6 { + margin-left: 1.5rem; + } + .col-3 { + margin-top: -1rem; + } + b { + font-size: 30px; + margin-top: -0.5rem; + margin-right: -1rem; + } + .user-info { + margin-left: 1rem; + } + .card { + height: 15rem; + } +} + +#container { + padding: 1rem; + background-color: #fff3df; + border: 2px solid #fff; } diff --git a/frontend/src/pages/profile.test.js b/frontend/src/pages/profile.test.js index 50a4fda..d371eec 100644 --- a/frontend/src/pages/profile.test.js +++ b/frontend/src/pages/profile.test.js @@ -1,11 +1,6 @@ -import React from 'react' -//import { describe } from 'riteway'; -//import renderer from "react-test-renderer" -import { render }from '@testing-library/react'; -import ProfilePage from './profile'; - -// You have to write data-testid - +import React from "react" +import { render } from "@testing-library/react" +import ProfilePage from "./profile" describe(`ProfilePage`, () => { it(`contains name`, () => { -- GitLab From a07c4f51e03fb5bdbc9594f57f9b062547e39269 Mon Sep 17 00:00:00 2001 From: dhitapp Date: Sun, 1 Mar 2020 09:57:28 +0700 Subject: [PATCH 11/13] [REFACTOR] Delete minimum height of layout --- frontend/src/components/layout.scss | 16 ++-------------- frontend/src/pages/profile.scss | 3 +++ 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/layout.scss b/frontend/src/components/layout.scss index 53f8312..38ac21d 100644 --- a/frontend/src/components/layout.scss +++ b/frontend/src/components/layout.scss @@ -1,16 +1,4 @@ -@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); - -#layout-content { - min-height: 100%; -} - -#container{ - padding: 1rem; - background-color: #FFF3DF; - border: 2px solid #fff; -} - +@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap"); body { -font-family:'Poppins',; + font-family: "Poppins"; } - diff --git a/frontend/src/pages/profile.scss b/frontend/src/pages/profile.scss index f0f5765..8d47506 100644 --- a/frontend/src/pages/profile.scss +++ b/frontend/src/pages/profile.scss @@ -133,6 +133,9 @@ vertical-align: bottom; margin-left: 2rem; } + .col-2 { + margin-left: 0.5rem; + } p { font-size: 20px; vertical-align: top; -- GitLab From 94ec15b36f0ad1ad1e9773e6baf7a409f6b905de Mon Sep 17 00:00:00 2001 From: dhitapp Date: Sun, 1 Mar 2020 16:47:59 +0700 Subject: [PATCH 12/13] [REFACTOR] Delete unneeded component --- frontend/src/pages/profile.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/pages/profile.js b/frontend/src/pages/profile.js index 44104b0..6446f40 100644 --- a/frontend/src/pages/profile.js +++ b/frontend/src/pages/profile.js @@ -1,9 +1,6 @@ import React from "react" -import { Link } from "gatsby" - import Layout from "../components/layout" import SEO from "../components/seo" -import { Card, Col, Container, Row } from "react-bootstrap" import logo from "../images/pmi.png" import "./profile.scss" -- GitLab From c59877f8e95736c01904e2deea97ba4f8cddffbd Mon Sep 17 00:00:00 2001 From: dhitapp Date: Sun, 1 Mar 2020 23:38:20 +0700 Subject: [PATCH 13/13] [REFACTOR] Repair the JS and the scss file by not using any kind of tag in scss --- frontend/src/pages/profile.js | 68 +++++++++++++++----------- frontend/src/pages/profile.scss | 84 ++++++++++++++++----------------- 2 files changed, 82 insertions(+), 70 deletions(-) diff --git a/frontend/src/pages/profile.js b/frontend/src/pages/profile.js index 6446f40..de61991 100644 --- a/frontend/src/pages/profile.js +++ b/frontend/src/pages/profile.js @@ -10,19 +10,22 @@ const ProfilePage = () => (
-
+
-
+
-
-

Unit Transfusi Darah

-

PMI Kota Depok

+
+

Unit Transfusi Darah

+

PMI Kota Depok

-
+
- B+ + B+
@@ -42,19 +45,22 @@ const ProfilePage = () => (
-
+
-
+
-
-

Unit Transfusi Darah

-

PMI Kota Depok

+
+

Unit Transfusi Darah

+

PMI Kota Depok

-
+
- B+ + B+
@@ -72,19 +78,22 @@ const ProfilePage = () => (
-
+
-
+
-
-

Unit Transfusi Darah

-

PMI Kota Depok

+
+

Unit Transfusi Darah

+

PMI Kota Depok

-
+
- B+ + B+
@@ -101,19 +110,22 @@ const ProfilePage = () => (
-
+
-
+
-
-

Unit Transfusi Darah

-

PMI Kota Depok

+
+

Unit Transfusi Darah

+

PMI Kota Depok

-
+
- B+ + B+
diff --git a/frontend/src/pages/profile.scss b/frontend/src/pages/profile.scss index 8d47506..1daf504 100644 --- a/frontend/src/pages/profile.scss +++ b/frontend/src/pages/profile.scss @@ -3,17 +3,17 @@ width: 40px; margin-top: -0.5rem; } - .col-6 { + #id-card { width: 10rem; margin-top: 0.5rem; } - b { + .blood-type { font-size: 20px; vertical-align: top; margin-top: -0.5rem; margin-right: -1rem; } - p { + .card-text { font-size: 8px; line-height: 0.1; } @@ -25,20 +25,20 @@ } @media (min-width: 360px) { - .col-3 { + #blood-section { margin-top: -1rem; } - .col-6 { + #id-card { margin-top: 1rem; margin-left: 1rem; } .responsive { width: 50px; } - b { + .blood-type { font-size: 20px; } - p { + .card-text { font-size: 10px; line-height: 0.2; } @@ -46,7 +46,7 @@ margin-top: 1rem; margin-left: 0.5rem; } - .card { + #card { height: 10rem; } } @@ -55,15 +55,15 @@ .responsive { width: 60px; } - b { + .blood-type { font-size: 20px; margin-right: -2rem; } - p { + .card-text { font-size: 10px; vertical-align: top; } - .col-6 { + #id-card { margin-left: 1.25rem; } } @@ -71,11 +71,11 @@ .responsive { width: 50px; } - b { + .blood-type { font-size: 20px; margin-right: -1rem; } - p { + .card-text { font-size: 10px; vertical-align: top; } @@ -85,7 +85,7 @@ .user-info { margin-top: 1rem; } - .col-6 { + #id-card { margin-left: 1rem; } } @@ -95,12 +95,12 @@ width: 50px; margin-left: 1rem; } - p { + .card-text { font-size: 10px; vertical-align: top; line-height: 0.8; } - b { + .blood-type { font-size: 40px; vertical-align: bottom; margin-left: 1rem; @@ -112,11 +112,11 @@ .user-info { margin-top: 2rem; } - div.left_card { + .left_card { width: 18rem; margin-right: -5%; } - div.right_card { + .right_card { width: 18rem; margin-left: 8%; margin-right: -8%; @@ -128,20 +128,20 @@ width: 80px; margin-left: 1rem; } - b { + .blood-type { font-size: 40px; vertical-align: bottom; margin-left: 2rem; } - .col-2 { + #logo-id { margin-left: 0.5rem; } - p { + .card-text { font-size: 20px; vertical-align: top; line-height: 1; } - .col-3 { + #blood-section { margin-top: 0.5rem; } .card-deck { @@ -152,19 +152,19 @@ margin-top: 2rem; margin-left: 2rem; } - .card { + #card { height: 19rem; } - div.left_card { + .left_card { width: 40rem; margin-left: 5%; margin-right: 8%; } - div.right_card { + .right_card { width: 40rem; margin-left: 8%; } - .col-6 { + #id-card { margin-top: 1rem; margin-left: -1rem; } @@ -174,28 +174,28 @@ .responsive { width: 70px; } - div.left_card { + .left_card { width: 28.25rem; margin-left: 7rem; } - div.right_card { + .right_card { width: 28.25rem; margin-left: 3rem; } - p { + .card-text { font-size: 14px; vertical-align: top; } - .col-2 { + #logo-id { margin-left: -0.5rem; } - .col-6 { + #id-card { margin-left: 2rem; } - .col-3 { + #blood-section { margin-top: -1rem; } - b { + .blood-type { font-size: 30px; margin-top: -0.5rem; margin-right: -1rem; @@ -203,7 +203,7 @@ .user-info { margin-left: 1rem; } - .card { + #card { height: 15rem; } } @@ -212,28 +212,28 @@ .responsive { width: 70px; } - div.left_card { + .left_card { width: 28rem; margin-left: 3rem; } - div.right_card { + .right_card { width: 28rem; margin-left: 3rem; } - p { + .card-text { font-size: 14px; vertical-align: top; } - .col-2 { + #logo-id { margin-left: -0.5rem; } - .col-6 { + #id-card { margin-left: 1.5rem; } - .col-3 { + #blood-section { margin-top: -1rem; } - b { + .blood-type { font-size: 30px; margin-top: -0.5rem; margin-right: -1rem; @@ -241,7 +241,7 @@ .user-info { margin-left: 1rem; } - .card { + #card { height: 15rem; } } -- GitLab