From dd53fd4a06fb855fbc12afbf92d06d258929cbfc Mon Sep 17 00:00:00 2001 From: wayne weng Date: Fri, 2 Feb 2024 19:06:09 +1300 Subject: [PATCH] Fixed UI displaying errors like overflow and etc --- .firebase/hosting.YnVpbGQ.cache | 16 +++++++++++ .firebaserc | 5 ++++ .github/workflows/firebase-hosting-merge.yml | 19 +++++++++++++ .../firebase-hosting-pull-request.yml | 16 +++++++++++ firebase.json | 10 +++++++ src/App.css | 27 ++++++++++++++++++- src/Components/CreatePostForm.tsx | 2 +- 7 files changed, 93 insertions(+), 2 deletions(-) create mode 100644 .firebase/hosting.YnVpbGQ.cache create mode 100644 .firebaserc create mode 100644 .github/workflows/firebase-hosting-merge.yml create mode 100644 .github/workflows/firebase-hosting-pull-request.yml create mode 100644 firebase.json diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache new file mode 100644 index 0000000..dc177d6 --- /dev/null +++ b/.firebase/hosting.YnVpbGQ.cache @@ -0,0 +1,16 @@ +favicon.ico,1705559444539,27edce7be5922cf0bef7d4136f69b5bfbdd5bf8c13c7b026f71187d41a00aa7d +asset-manifest.json,1706684387915,e266e1d55a25fe6c2a1a9c052c781284cd0b3535bd843a611a93caffd5656a1d +404.html,1706685558978,762bf484ba67404bd1a3b181546ea28d60dfddf18e9dd4795d8d25bcf3c1a890 +logo192.png,1705559445911,79e2b749561016bc8af300ea19f48347ceed3cb1a54f48ae456172eca45e08f0 +logo512.png,1705559446076,212b102aa09e51b3b3e06647e81f7801a61333e171f6582e8124379aabccb41d +manifest.json,1705559444842,ee04fb47e525c67d8424ffe9b4d8a8a24e434504478afca4e0ca602146836d4c +index.html,1706685560297,7fd26833677008de646656876600f824e6efd173fa0021977353ab78f8b47c51 +robots.txt,1705559446819,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49 +static/css/main.f99197ed.css,1706684387940,9916eaada2f340ce02fb75a93ff21150acb27810dffba57c3a1c221061c93ec7 +static/js/main.2bbfcf2f.js.LICENSE.txt,1706684387940,17150bf793065e298c399de1477ac578cf98c5394757b92c0311a6843251498f +static/media/Dangrek-Regular.c4d0a223adeb43a9a2cc.ttf,1706684387940,04e3474aae983fb3a4974a450f142781ae26cc775ddd02416f3daa890932408a +static/css/main.f99197ed.css.map,1706684387940,8425178fb9742b4f090d8bfc1d84f96c123e77bc2a8f8a55b614aac785c244f2 +static/media/googleIcon.0b50af2fbb8c1e8ca23e.png,1706684387940,dfcb6a1bb7154f526bd1e6a265fe9754f316b46e54facb35db8dd339552c898c +static/media/Comfortaa-Regular.6718cbec512d80eb9cbb.ttf,1706684387940,d97af405a0b2a1196c826f60f6af83ee2054705ed1e9ef96c44bd37bf8ee4018 +static/js/main.2bbfcf2f.js,1706684387940,3157adbfbea5c55001ede82079b9f60715e980fbe5fa159bf91b1659431e400f +static/js/main.2bbfcf2f.js.map,1706684387945,825ccee272df965f00b2ca1ba199830975258e53fb70c6d7ab2d9c000761ad15 diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 0000000..f3da503 --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "reactsocialmediaapp-b1ffb" + } +} diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml new file mode 100644 index 0000000..1bb821c --- /dev/null +++ b/.github/workflows/firebase-hosting-merge.yml @@ -0,0 +1,19 @@ +# This file was auto-generated by the Firebase CLI +# https://github.com/firebase/firebase-tools + +name: Deploy to Firebase Hosting on merge +'on': + push: + branches: + - master +jobs: + build_and_deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: FirebaseExtended/action-hosting-deploy@v0 + with: + repoToken: '${{ secrets.GITHUB_TOKEN }}' + firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACTSOCIALMEDIAAPP_B1FFB }}' + channelId: live + projectId: reactsocialmediaapp-b1ffb diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml new file mode 100644 index 0000000..8a42c49 --- /dev/null +++ b/.github/workflows/firebase-hosting-pull-request.yml @@ -0,0 +1,16 @@ +# This file was auto-generated by the Firebase CLI +# https://github.com/firebase/firebase-tools + +name: Deploy to Firebase Hosting on PR +'on': pull_request +jobs: + build_and_preview: + if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: FirebaseExtended/action-hosting-deploy@v0 + with: + repoToken: '${{ secrets.GITHUB_TOKEN }}' + firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACTSOCIALMEDIAAPP_B1FFB }}' + projectId: reactsocialmediaapp-b1ffb diff --git a/firebase.json b/firebase.json new file mode 100644 index 0000000..f475554 --- /dev/null +++ b/firebase.json @@ -0,0 +1,10 @@ +{ + "hosting": { + "public": "build", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ] + } +} diff --git a/src/App.css b/src/App.css index 0bd2ad0..c7205f1 100644 --- a/src/App.css +++ b/src/App.css @@ -266,8 +266,22 @@ body { margin-left: 0.5vw; } +.user-post-title { + text-align: left; + + margin-bottom: 2vmin; + padding-left: 0.5vw; + padding-right: 0.5vw; + + width: 100%; +} + .user-post-title h1 { font-size: 8vmin; + + overflow-wrap: break-word; + + line-height: 13vmin; } .user-post-description p, .user-post-info p { @@ -275,16 +289,27 @@ body { } .user-post-description { + width: 100%; margin-bottom: 1.9vw; + + padding-left: 0.5vw; + padding-right: 0.5vw; } .user-post-description p { text-align: left; - line-height: 5vh; + line-height: 6vmin; + + overflow-wrap: break-word; font-size: 5vmin; } +.user-post-info { + padding-left: 0.5vw; + padding-right: 0.5vw; +} + .user-post-info p { font-size: 3vmin; } diff --git a/src/Components/CreatePostForm.tsx b/src/Components/CreatePostForm.tsx index 73df9bf..f63a922 100644 --- a/src/Components/CreatePostForm.tsx +++ b/src/Components/CreatePostForm.tsx @@ -31,8 +31,8 @@ export const CreatePostForm = () => { .required("Your post must have a title"), //Creating the shape with the error messages description: yup.string() .trim() - .max(150, "Description cannot exceed 150 characters") .required("You must include a description") + .max(150, "Description cannot exceed 150 characters") }) //A lot of these functions are explained in one of the previous topics. It was in the form topic IIRC