From 6a93ead4f262bf7571192417cc2f6029e9a9e3a8 Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 3 Apr 2025 11:55:04 -0400 Subject: need-page's transparent image in background --- .../components/need-page/need-page.component.css | 27 +++++----------------- 1 file changed, 6 insertions(+), 21 deletions(-) (limited to 'ufund-ui/src/app/components/need-page/need-page.component.css') diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css index 44db4b4..0bbc2aa 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.css +++ b/ufund-ui/src/app/components/need-page/need-page.component.css @@ -4,6 +4,7 @@ } #box { + padding-top: 5%; display: flex; flex-direction: column; width: 800px; @@ -22,32 +23,16 @@ /*margin-bottom: 20px;*/ } -.split { - display: flex; - flex-direction: row; - justify-content: space-between; - - - .left { - display: flex; - flex-direction: column; - width : 50%; - } - - .right { - display: flex; - flex-direction: column; - align-items: end; - } -} .need-image { - width: 400px; - height: auto; + width: 55%; + height: 40%; + position: absolute; + left: 22.5%; aspect-ratio: 16/9; object-fit: cover; + mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.15) 35%, transparent 100%); border-radius: 10px; - box-shadow: rgb(0, 40, 70) 0 0 50px; } .urgent { -- cgit v1.2.3 From d85eeb6918d521197c2e6ad1e3da2dec8ce95398 Mon Sep 17 00:00:00 2001 From: sowgro Date: Fri, 4 Apr 2025 17:22:10 -0400 Subject: Edit modal --- ufund-ui/src/app/components/need-page/need-page.component.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ufund-ui/src/app/components/need-page/need-page.component.css') diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css index 844410f..5a92ee9 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.css +++ b/ufund-ui/src/app/components/need-page/need-page.component.css @@ -56,8 +56,8 @@ .actionArea { display: flex; - padding: 5px; - gap: 5px; + padding: 5px 0; + gap: 10px; margin-top: 10px; } -- cgit v1.2.3 From 09dabe1971f3891f472e24b5c038e4df481ee967 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 5 Apr 2025 13:33:47 -0400 Subject: need image gradient fix --- ufund-ui/src/app/components/need-page/need-page.component.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ufund-ui/src/app/components/need-page/need-page.component.css') diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css index 0bbc2aa..8263737 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.css +++ b/ufund-ui/src/app/components/need-page/need-page.component.css @@ -4,7 +4,7 @@ } #box { - padding-top: 5%; + padding-top: 7.5%; display: flex; flex-direction: column; width: 800px; @@ -31,7 +31,7 @@ left: 22.5%; aspect-ratio: 16/9; object-fit: cover; - mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.15) 35%, transparent 100%); + mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%, transparent 100%); border-radius: 10px; } -- cgit v1.2.3 From 2f37b1de28399a361dc272b51ad624ac8902a562 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sat, 5 Apr 2025 16:51:58 -0400 Subject: Make need-page image work on all screen sizes --- .../src/app/components/need-page/need-page.component.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'ufund-ui/src/app/components/need-page/need-page.component.css') diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css index 79d3fb3..6ca1350 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.css +++ b/ufund-ui/src/app/components/need-page/need-page.component.css @@ -4,12 +4,13 @@ } #box { - padding-top: 7.5%; + /*padding-top: 7.5%;*/ display: flex; flex-direction: column; width: 800px; justify-content: start; gap: 10px; + padding: 0 10px; } .needName { @@ -25,14 +26,17 @@ .need-image { - width: 55%; + width: calc(100% + 40px); height: 40%; - position: absolute; + /*position: absolute;*/ left: 22.5%; aspect-ratio: 16/9; object-fit: cover; - mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%, transparent 100%); + mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.1) 90%, transparent 100%); border-radius: 10px; + margin-left: -20px; + margin-right: -20px; + margin-bottom: -80px; } .urgent { -- cgit v1.2.3