From 1a2e9429109f060e80adc6f68e4800d970594fc9 Mon Sep 17 00:00:00 2001 From: maslana146 Date: Tue, 26 Nov 2019 19:23:31 +0100 Subject: [PATCH 1/3] Add html and styles for comments section --- .../CommentsSection/CommentsSection.js | 26 ++++++++ .../CommentsSection/CommentsSection.scss | 65 +++++++++++++++++++ 2 files changed, 91 insertions(+) create mode 100644 src/components/CommentsSection/CommentsSection.js create mode 100644 src/components/CommentsSection/CommentsSection.scss diff --git a/src/components/CommentsSection/CommentsSection.js b/src/components/CommentsSection/CommentsSection.js new file mode 100644 index 0000000..2ec63b4 --- /dev/null +++ b/src/components/CommentsSection/CommentsSection.js @@ -0,0 +1,26 @@ +import React from 'react'; +import './CommentsSection.scss'; + +const CommentsSection = (props) => { + return( +
+

Komentarze

+
+

Dominik

+ 20-09-2019 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

+
+
+

Dominik

+ 20-09-2019 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

+
+
+

Zostaw komentarz:

+ + +
+
+ ); +}; +export default CommentsSection; \ No newline at end of file diff --git a/src/components/CommentsSection/CommentsSection.scss b/src/components/CommentsSection/CommentsSection.scss new file mode 100644 index 0000000..88e95bf --- /dev/null +++ b/src/components/CommentsSection/CommentsSection.scss @@ -0,0 +1,65 @@ +@import '../../assets/styles/_colors.scss'; + + +.comments { + + margin: 0 ; + padding: 0 10px; +} +.header { + color: $accent; + margin: 0 0 0 15px; +} +.Comment { + position: relative; + display: block; + width: 250px; + margin: 2% 5%; + border-radius: 5px; + background-color: $comment; + + +} +.Commenttext { + padding: 5%; + background: $comment; + + +} +.date { + position: absolute; + right: 4px; + top: 4px; + +} +.Username { + position: relative; + left: 10px; + top: 4px; +} +.Area { + position: relative; + width: 240px; + height: auto; + resize: none; + outline: none; + border-radius: 5px; + border: none; + +} +.btn { + position: relative; + top:5px; + width: 240px; + border-radius: 15px; + background-color: $accent; + font-family: 'Montserrat', sans-serif; + color: $white; + font-weight: 500; + font-size: 15px; + border: none; + padding: 5px 0 5px; +} +::-webkit-input-placeholder { + font-family: 'Montserrat', sans-serif; + } \ No newline at end of file From 9ed3c151d67f31a1be92f5f794de4279b223c5bb Mon Sep 17 00:00:00 2001 From: maslana146 Date: Tue, 26 Nov 2019 19:26:23 +0100 Subject: [PATCH 2/3] Add CommentsSection component --- src/pages/RestaurantPageInfo/RestaurantPageInfo.js | 5 ++--- src/pages/RestaurantPageInfo/RestaurantPageInfo.scss | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/RestaurantPageInfo/RestaurantPageInfo.js b/src/pages/RestaurantPageInfo/RestaurantPageInfo.js index 03f56d2..29de4af 100644 --- a/src/pages/RestaurantPageInfo/RestaurantPageInfo.js +++ b/src/pages/RestaurantPageInfo/RestaurantPageInfo.js @@ -5,6 +5,7 @@ import RestaurantPicture from '../../assets/images/restaurant.jpg'; import './RestaurantPageInfo.scss'; import BackButton from '../../components/BackButton/BackButton'; import MenuBlock from '../../components/MenuBlock/MenuBlock'; +import CommentsSection from '../../components/CommentsSection/CommentsSection'; export default function RestaurantInfoPage() { return ( @@ -28,9 +29,7 @@ export default function RestaurantInfoPage() { -
-

Komentarze

-
+ diff --git a/src/pages/RestaurantPageInfo/RestaurantPageInfo.scss b/src/pages/RestaurantPageInfo/RestaurantPageInfo.scss index 8306269..da687e9 100644 --- a/src/pages/RestaurantPageInfo/RestaurantPageInfo.scss +++ b/src/pages/RestaurantPageInfo/RestaurantPageInfo.scss @@ -7,7 +7,7 @@ .restaurant-info-content { background-color: $white; - padding: 40px; + padding: 15px; border-radius: 20px 20px 0 0; position: relative; top: -25px; From e893f9d96080ab9556dd9f312d2fce99ce5f3a79 Mon Sep 17 00:00:00 2001 From: maslana146 Date: Wed, 4 Dec 2019 20:06:22 +0100 Subject: [PATCH 3/3] Burgers$comments done! --- src/assets/icons/burger-2.svg | 10 ++++ src/assets/icons/burger.svg | 10 ++++ .../CommentsSection/CommentsSection.js | 26 ++++++++- .../CommentsSection/CommentsSection.scss | 55 +++++++++++++++---- 4 files changed, 88 insertions(+), 13 deletions(-) create mode 100644 src/assets/icons/burger-2.svg create mode 100644 src/assets/icons/burger.svg diff --git a/src/assets/icons/burger-2.svg b/src/assets/icons/burger-2.svg new file mode 100644 index 0000000..17194da --- /dev/null +++ b/src/assets/icons/burger-2.svg @@ -0,0 +1,10 @@ + + + + + \ No newline at end of file diff --git a/src/assets/icons/burger.svg b/src/assets/icons/burger.svg new file mode 100644 index 0000000..2fa3e5f --- /dev/null +++ b/src/assets/icons/burger.svg @@ -0,0 +1,10 @@ + + + + + \ No newline at end of file diff --git a/src/components/CommentsSection/CommentsSection.js b/src/components/CommentsSection/CommentsSection.js index 2ec63b4..382de7e 100644 --- a/src/components/CommentsSection/CommentsSection.js +++ b/src/components/CommentsSection/CommentsSection.js @@ -1,5 +1,7 @@ import React from 'react'; import './CommentsSection.scss'; +import burger from '../../assets/icons/burger.svg'; +import burger2 from '../../assets/icons/burger-2.svg'; const CommentsSection = (props) => { return( @@ -7,16 +9,38 @@ const CommentsSection = (props) => {

Komentarze

Dominik

+
+ icon-1 + icon-1 + icon-1 + icon-1 + icon-1 +
20-09-2019

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

Dominik

+
+ icon-1 + icon-1 + icon-1 + icon-1 + icon-1 +
20-09-2019

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

-

Zostaw komentarz:

+

Zostaw komentarz:

+ +
+ icon-1 + icon-1 + icon-1 + icon-1 + icon-1 +
diff --git a/src/components/CommentsSection/CommentsSection.scss b/src/components/CommentsSection/CommentsSection.scss index 88e95bf..dc93976 100644 --- a/src/components/CommentsSection/CommentsSection.scss +++ b/src/components/CommentsSection/CommentsSection.scss @@ -4,7 +4,7 @@ .comments { margin: 0 ; - padding: 0 10px; + } .header { color: $accent; @@ -13,19 +13,36 @@ .Comment { position: relative; display: block; - width: 250px; - margin: 2% 5%; + width: 100%; + padding: 5%; border-radius: 5px; background-color: $comment; + margin:5% 0; } -.Commenttext { - padding: 5%; - background: $comment; +.burgers { + padding: 0 5% ; + padding-top: 2.5%; + width: 60%; + +} +.name+.burgers{ + float: right; + padding: auto 0; + padding-right: 0; + text-align: right; + +} +.burger { + margin: 0 1%; } +.Commenttext { + padding: 5%; + background:$comment; +} .date { position: absolute; right: 4px; @@ -34,32 +51,46 @@ } .Username { position: relative; - left: 10px; - top: 4px; + padding: 0 5%; } + .Area { position: relative; - width: 240px; + width: 100%; height: auto; + margin: 0 auto; + font-family: 'Montserrat', sans-serif; + padding: 5%; resize: none; outline: none; border-radius: 5px; + border: none; +} +.name { + padding:2.5%; + margin: 2.5% 0; + border-radius: 15px; + width: 40%; border: none; - + font-size: 16px; + } .btn { position: relative; top:5px; - width: 240px; + width: 100%; border-radius: 15px; background-color: $accent; font-family: 'Montserrat', sans-serif; color: $white; font-weight: 500; - font-size: 15px; + font-size: 16px; border: none; padding: 5px 0 5px; } ::-webkit-input-placeholder { font-family: 'Montserrat', sans-serif; + font-size: 16px; + + } \ No newline at end of file