From 17d6dc965dd2f1aea00a94e5f619cafe9eb2f4cc Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Wed, 20 Dec 2023 23:47:09 +0700 Subject: [PATCH 01/12] feat Creating Footer --- public/FacebookLogo.svg | 7 +++++++ public/InstagramLogo.svg | 8 ++++++++ public/TwitterLogo.svg | 8 ++++++++ src/components/Footer.tsx | 29 ++++++++++++++++++++++++++++- 4 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 public/FacebookLogo.svg create mode 100644 public/InstagramLogo.svg create mode 100644 public/TwitterLogo.svg diff --git a/public/FacebookLogo.svg b/public/FacebookLogo.svg new file mode 100644 index 00000000..34114c10 --- /dev/null +++ b/public/FacebookLogo.svg @@ -0,0 +1,7 @@ + + + diff --git a/public/InstagramLogo.svg b/public/InstagramLogo.svg new file mode 100644 index 00000000..8d0aa9a7 --- /dev/null +++ b/public/InstagramLogo.svg @@ -0,0 +1,8 @@ + + + diff --git a/public/TwitterLogo.svg b/public/TwitterLogo.svg new file mode 100644 index 00000000..645ce1a6 --- /dev/null +++ b/public/TwitterLogo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index bf2d92c7..d5d0cf89 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,7 +1,34 @@ +import React from "react"; + const Footer = () => { /* mt-auto or margin-top will make footer always on the bottom please delete this comment after you read it */ - return
Footer
; + + return
+
+
+
+ +
JOHNJUD
+
+
+
สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330
+
พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
; }; export default Footer; From 5ff96fc7a9be0219da1f9890d6e16f3faa3707af Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Thu, 21 Dec 2023 00:11:23 +0700 Subject: [PATCH 02/12] Fix -Font error - Logo centralization --- src/components/Footer.tsx | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index d5d0cf89..23a4b8f8 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,4 +1,3 @@ -import React from "react"; const Footer = () => { /* mt-auto or margin-top will make footer always on the bottom @@ -8,23 +7,23 @@ const Footer = () => {
- -
JOHNJUD
+ Johnjud Logo +
JOHNJUD
-
สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330
-
พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย
+
สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330
+
พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย
-
- +
+ Facebook Logo
-
- +
+ Instagram Logo
-
- +
+ Twitter Logo
From 42fdf2ba4bea280f9bcf87bb5cefab304c68d20f Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Thu, 21 Dec 2023 17:34:03 +0700 Subject: [PATCH 03/12] fix: change image importing as commander boom said --- {public => src/assets/footer}/FacebookLogo.svg | 0 {public => src/assets/footer}/InstagramLogo.svg | 0 src/assets/footer/JohnJudLogo.svg | 1 + {public => src/assets/footer}/TwitterLogo.svg | 0 src/components/Footer.tsx | 15 ++++++++++----- 5 files changed, 11 insertions(+), 5 deletions(-) rename {public => src/assets/footer}/FacebookLogo.svg (100%) rename {public => src/assets/footer}/InstagramLogo.svg (100%) create mode 100644 src/assets/footer/JohnJudLogo.svg rename {public => src/assets/footer}/TwitterLogo.svg (100%) diff --git a/public/FacebookLogo.svg b/src/assets/footer/FacebookLogo.svg similarity index 100% rename from public/FacebookLogo.svg rename to src/assets/footer/FacebookLogo.svg diff --git a/public/InstagramLogo.svg b/src/assets/footer/InstagramLogo.svg similarity index 100% rename from public/InstagramLogo.svg rename to src/assets/footer/InstagramLogo.svg diff --git a/src/assets/footer/JohnJudLogo.svg b/src/assets/footer/JohnJudLogo.svg new file mode 100644 index 00000000..bf9077f3 --- /dev/null +++ b/src/assets/footer/JohnJudLogo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/TwitterLogo.svg b/src/assets/footer/TwitterLogo.svg similarity index 100% rename from public/TwitterLogo.svg rename to src/assets/footer/TwitterLogo.svg diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 23a4b8f8..b39fe749 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,4 +1,9 @@ - +import React from 'react'; +import johnjudLogo from '../assets/footer/JohnJudLogo.svg'; +import facebookLogo from '../assets/footer/FacebookLogo.svg'; +import twitterLogo from '../assets/footer/InstagramLogo.svg'; +import instagramLogo from '../assets/footer/TwitterLogo.svg'; +console.log(facebookLogo); const Footer = () => { /* mt-auto or margin-top will make footer always on the bottom please delete this comment after you read it */ @@ -7,7 +12,7 @@ const Footer = () => {
- Johnjud Logo + Johnjud Logo
JOHNJUD
@@ -17,13 +22,13 @@ const Footer = () => {
- Facebook Logo + Facebook Logo
- Instagram Logo + Instagram Logo
- Twitter Logo + Twitter Logo
From 154d0a746a99ad0db5cdb9e7fa703023f53394a4 Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Fri, 22 Dec 2023 02:28:44 +0700 Subject: [PATCH 04/12] Feat: Responsive footer Still need to debug code to be compatible with lint --- src/components/Footer.tsx | 82 ++++++++++++++++++++++++++------------- 1 file changed, 56 insertions(+), 26 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index b39fe749..7fc9f307 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -5,34 +5,64 @@ import twitterLogo from '../assets/footer/InstagramLogo.svg'; import instagramLogo from '../assets/footer/TwitterLogo.svg'; console.log(facebookLogo); const Footer = () => { - /* mt-auto or margin-top will make footer always on the bottom - please delete this comment after you read it */ + return ( +
+
+ +
+ +
+
+ Johnjud Logo +
JOHNJUD
+
+ {/*Text*/} +
+
+ สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330 +
+
+ พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย +
+
+
+ {/* Below md*/} +
+
+ Johnjud Logo +
JOHNJUD
+
+ {/*Text*/} + +
+ สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330 +
+
+ พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย +
+
+ {/*Social*/} +
+
+ Facebook Logo +
+
+ Instagram Logo +
+
+ Twitter Logo +
+
+
- return
-
-
-
- Johnjud Logo -
JOHNJUD
-
-
-
สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330
-
พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย
-
-
-
- Facebook Logo -
-
- Instagram Logo -
-
- Twitter Logo -
-
-
; + {/*Only available in less than md */} + {/*Johnjud*/} + +
+ ); }; -export default Footer; +export default Footer; \ No newline at end of file From a023e58c99f1692600afddc52793556a76018139 Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Fri, 22 Dec 2023 02:30:47 +0700 Subject: [PATCH 05/12] Fix: little debug --- src/components/Footer.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 7fc9f307..0f713808 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import johnjudLogo from '../assets/footer/JohnJudLogo.svg'; import facebookLogo from '../assets/footer/FacebookLogo.svg'; import twitterLogo from '../assets/footer/InstagramLogo.svg'; @@ -8,9 +7,7 @@ const Footer = () => { return (
-
-
From 046bede56ce627cf1e789e1d28178642c6a80490 Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Fri, 22 Dec 2023 12:39:17 +0700 Subject: [PATCH 06/12] Fix: Prettier code --- src/components/Footer.tsx | 83 +++++++++++++++++++++++---------------- 1 file changed, 49 insertions(+), 34 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 0f713808..9498c994 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,65 +1,80 @@ -import johnjudLogo from '../assets/footer/JohnJudLogo.svg'; -import facebookLogo from '../assets/footer/FacebookLogo.svg'; -import twitterLogo from '../assets/footer/InstagramLogo.svg'; -import instagramLogo from '../assets/footer/TwitterLogo.svg'; +import facebookLogo from "../assets/footer/FacebookLogo.svg"; +import twitterLogo from "../assets/footer/InstagramLogo.svg"; +import johnjudLogo from "../assets/footer/JohnJudLogo.svg"; +import instagramLogo from "../assets/footer/TwitterLogo.svg"; console.log(facebookLogo); const Footer = () => { return ( -
-
-
+
+
+
-
- Johnjud Logo -
JOHNJUD
+
+ Johnjud Logo +
+ JOHNJUD +
{/*Text*/} -
-
- สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330 +
+
+ สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน + อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330
-
- พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย +
+ พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ + องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย
{/* Below md*/} -
-
- Johnjud Logo -
JOHNJUD
+
+
+ Johnjud Logo +
+ JOHNJUD +
{/*Text*/} -
- สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330 +
+ สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ + แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330
-
- พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย +
+ พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ + องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย
{/*Social*/} -
+
- Facebook Logo + Facebook Logo
- Instagram Logo + Instagram Logo
- Twitter Logo + Twitter Logo
-
- - +
{/*Only available in less than md */} {/*Johnjud*/} - -
+
); }; -export default Footer; \ No newline at end of file +export default Footer; From 1e3484f6d2b942f1b8d90f4edb6ac217995d893b Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Sat, 23 Dec 2023 03:13:19 +0700 Subject: [PATCH 07/12] Fix: Changing Absolute to flex --- src/components/Footer.tsx | 53 +++++++++------------------------------ 1 file changed, 12 insertions(+), 41 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 9498c994..31808d99 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -6,59 +6,30 @@ console.log(facebookLogo); const Footer = () => { return (
-
-
-
-
+
+
+ {/* Below md*/} +
+
Johnjud Logo -
- JOHNJUD -
+
JOHNJUD
{/*Text*/} -
-
- สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน - อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330 +
+
+ สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330
-
- พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ - องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย +
+ พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย
- {/* Below md*/} -
-
- Johnjud Logo -
- JOHNJUD -
-
- {/*Text*/} - -
- สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ - แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330 -
-
- พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ - องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย -
-
{/*Social*/} -
+
Facebook Logo
From f416a62ce26512b9be874b70faeb080c21a98f4c Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Sat, 23 Dec 2023 04:08:45 +0700 Subject: [PATCH 08/12] Fix: PC Responsive & refactor --- src/components/Footer.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 31808d99..3cc805f2 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -7,9 +7,9 @@ const Footer = () => { return (
-
- {/* Below md*/} -
+
+ {/* Text & Logo*/} +
{
JOHNJUD
{/*Text*/} -
-
- สโมสรนิสิตคณะสัตวแพทยศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330 +
+
+ สโมสรนิสิตคณะสัตวแพทยศาสตร์

+ จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน + กรุงเทพ ฯ 10330
-
- พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย +
+ พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ

+ องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย
From 9661e451c3ba1c8e4a48c14bdc1ef7efa84296c3 Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Sat, 23 Dec 2023 21:18:49 +0700 Subject: [PATCH 09/12] Fix: reduce using margin&padding instead of px Also refactoring code --- src/components/Footer.tsx | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 3cc805f2..46c86fac 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -2,15 +2,14 @@ import facebookLogo from "../assets/footer/FacebookLogo.svg"; import twitterLogo from "../assets/footer/InstagramLogo.svg"; import johnjudLogo from "../assets/footer/JohnJudLogo.svg"; import instagramLogo from "../assets/footer/TwitterLogo.svg"; -console.log(facebookLogo); const Footer = () => { return ( -
-
-
+
+
+
{/* Text & Logo*/} -
-
+
+
{
JOHNJUD
{/*Text*/} -
-
+
+
สโมสรนิสิตคณะสัตวแพทยศาสตร์

จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330
-
+
พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ

องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย
{/*Social*/} -
-
+
+
Facebook Logo
-
+
Instagram Logo
-
+
Twitter Logo
From e7615384d98c9cbd82bd89376caae5e63324cd2a Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Sat, 23 Dec 2023 22:03:13 +0700 Subject: [PATCH 10/12] Refactor: using "rem" instead of "px" --- src/components/Footer.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 46c86fac..37daec0c 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -11,20 +11,18 @@ const Footer = () => {
Johnjud Logo
JOHNJUD
{/*Text*/} -
-
+
+
สโมสรนิสิตคณะสัตวแพทยศาสตร์

จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330
-
+
พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ

องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย
From dd514672183c6695158fcab4e3ff029c147f6650 Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Sat, 23 Dec 2023 22:05:01 +0700 Subject: [PATCH 11/12] Refactor: lint fix --- src/components/Footer.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 37daec0c..ef1c5f0f 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -11,13 +11,15 @@ const Footer = () => {
Johnjud Logo
JOHNJUD
{/*Text*/} -
-
+
+
สโมสรนิสิตคณะสัตวแพทยศาสตร์

จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330 From c4ba9572dd961b9c8959e90164c2c60e0d1fd952 Mon Sep 17 00:00:00 2001 From: Michael Scofield <135577456+MichaelScodaeng@users.noreply.github.com> Date: Sat, 23 Dec 2023 22:13:28 +0700 Subject: [PATCH 12/12] fix: making it more similar to figma --- src/components/Footer.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index ef1c5f0f..a762b036 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -8,7 +8,7 @@ const Footer = () => {
{/* Text & Logo*/} -
+
{
JOHNJUD
{/*Text*/} -
-
+
+
สโมสรนิสิตคณะสัตวแพทยศาสตร์

จุฬาลงกรณ์มหาวิทยาลัย ถนน อังรีดูนังต์ แขวงปทุมวัน เขตปทุมวัน กรุงเทพ ฯ 10330
-
+
พัฒนาโดย ฝ่ายพัฒนาระบบสารสนเทศ

องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย