IP-126: Style the page according to the Mockup

scify · Dec 9, 2024 · c39205e · c39205e
1 parent 237ca4d
commit c39205e
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 30 deletions.
diff --git a/...blems/problem-page-intro-top-question.png → ...ms/[email protected] b/...blems/problem-page-intro-top-question.png → ...ms/[email protected]
diff --git a/...blems/problem-page-intro-top-thinking.png → ...ms/[email protected] b/...blems/problem-page-intro-top-thinking.png → ...ms/[email protected]
diff --git a/public/images/problems/problem-page-main.png b/public/images/problems/problem-page-main.png
diff --git a/public/images/problems/[email protected] b/public/images/problems/[email protected]
diff --git a/resources/assets/js/vue-components/common/HeartCircleButton.vue b/resources/assets/js/vue-components/common/HeartCircleButton.vue
@@ -6,12 +6,14 @@
 			</svg>
 		</div>
 		<svg v-if="isFilled" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path style="transform: translate(0.35em, 0.35em);"
+			<circle cx="22" cy="22" r="22" :fill="getIconColor()" opacity="0.8" />
+			<path style="transform: translate(0.35em, 0.5em);"
 				d="M16.4998 4.14573L16.4998 5.66785ZM16.4998 30.9376C-15.1245 10.0403 6.76272 -6.2699 16.1368 2.35754C16.2605 2.47166 16.3815 2.58923 16.4998 2.71023C16.616 2.58846 16.7371 2.47149 16.8628 2.3596C26.2348 -6.27402 48.1241 10.0383 16.4998 30.9376Z"
 				fill="currentColor"
 			/>
 		</svg>
 		<svg v-else width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<circle cx="22" cy="22" r="22" :fill="getIconColor()" opacity="0.8" />
 			<path style="transform: translate(0.35em, 0.5em);"
 				d="M16.4998 5.66785L15.021 4.14779C11.5498 0.579663 5.18491 1.81098 2.88728 6.29691C1.8086 8.40685 1.56522 11.4532 3.53491 15.341C5.43241 19.0844 9.38003 23.5683 16.4998 28.4523C23.6195 23.5683 27.5651 19.0844 29.4647 15.341C31.4343 11.4511 31.193 8.40685 30.1123 6.29691C27.8147 1.81098 21.4498 0.5776 17.9786 4.14573L16.4998 5.66785ZM16.4998 30.9376C-15.1245 10.0403 6.76272 -6.2699 16.1368 2.35754C16.2605 2.47166 16.3815 2.58923 16.4998 2.71023C16.616 2.58846 16.7371 2.47149 16.8628 2.3596C26.2348 -6.27402 48.1241 10.0383 16.4998 30.9376Z"
 				fill="currentColor"

diff --git a/resources/assets/sass/problem/landing-page.scss b/resources/assets/sass/problem/landing-page.scss
@@ -1,6 +1,6 @@
 @import "bootstrap_4point6_custom_xxl"; // this page uses custom styles to support one more bootstrap size: xxl from 1260px and UP
 
-#problem-page {
+#problems-page {
 	#problems-overview {
 		padding-bottom: 3.25rem;
 	}
@@ -70,7 +70,7 @@
 
 // from "sm" and UP
 @media (min-width: 576px) {
-	#problem-page {
+	#problems-page {
 		#problems-overview {
 			padding-bottom: 7.5rem;
 		}

diff --git a/resources/assets/sass/problem/show-page.scss b/resources/assets/sass/problem/show-page.scss
@@ -1,11 +1,12 @@
 @import "bootstrap_4point6_custom_xxl"; // this page uses custom styles to support one more bootstrap size: xxl from 1260px and UP
 
-#problem-page {
-	#problems-overview {
+#single-problem-page {
+	#single-problem-overview,
+	.row.problem-description {
 		padding-bottom: 3.25rem;
 	}
 
-	.project-title {
+	.section-title {
 		padding-left: 0.5rem;
 		padding-right: 0.5rem;
 		font-family: "Noto Sans Variable", sans-serif;
@@ -15,12 +16,12 @@
 		text-align: left;
 	}
 
-	.project-overview {
+	.section-body {
 		padding-left: 0.5rem;
 		padding-right: 0.5rem;
 	}
 
-	.project-overview p {
+	.section-body p {
 		font-family: "Open Sans Variable", sans-serif;
 		font-weight: 400;
 		font-size: 16px; // 16px // bookmark1 - calulate in rem
@@ -63,31 +64,32 @@
 		}
 	}
 
-	#problems-list h2 {
+	#solutions-list h2 {
 		padding-top: 5rem;
 	}
 }
 
 // from "sm" and UP
 @media (min-width: 576px) {
-	#problem-page {
-		#problems-overview {
+	#single-problem-page {
+		#single-problem-overview,
+		.row.problem-description {
 			padding-bottom: 7.5rem;
 		}
 
-		.project-title {
+		.section-title {
 			padding-left: 0;
 			padding-right: 0;
 			font-size: 2.286rem; // 32px
 			line-height: 3.113rem; // 43.58px
 		}
 
-		.project-overview {
+		.section-body {
 			padding-left: 0;
 			padding-right: 0;
 		}
 
-		.project-overview p {
+		.section-body p {
 			font-size: 1.429rem; // 20px
 			line-height: 1.949rem; // 27.28px
 		}

diff --git a/resources/views/problem/index.blade.php b/resources/views/problem/index.blade.php
@@ -11,7 +11,7 @@
 
 @section('content')
 
-    <div id="problem-page" class="pb-5">
+    <div id="problems-page" class="pb-5">
 
         @include('partials.flash-messages-and-errors')
 

diff --git a/resources/views/problem/partials/problems-overview.blade.php b/resources/views/problem/partials/problems-overview.blade.php
@@ -3,7 +3,7 @@
     <div class="row">
         <div class="col-12 my-4 my-lg-5 pt-4">
             <x-go-back-link href="/{{ app()->getLocale() .'/'. $viewModel->project->slug }}"
-                            class="d-none d-lg-block">{{ __("project-problems.back") }}</x-go-back-link> <!-- bookmark1 - app()->getLocale() // is this OK? -->
+                            class="d-none d-lg-block">{{ __("project-problems.back") }}</x-go-back-link>
         </div>
     </div>
 
@@ -23,7 +23,7 @@ class="d-none d-lg-block">{{ __("project-problems.back") }}</x-go-back-link> <!-
         </div>
 
         <div class="col-12 col-lg-4 offset-lg-1 align-self-end text-center">
-            <img src="/images/problems/problem-page-main.png" alt="" width="384" height="416" class="img-fluid">
+            <img src="/images/problems/problem-page-main@2x.png" alt="" width="384" height="416" class="img-fluid">
         </div>
 
     </div>

diff --git a/...oblem/partials/problem-overview.blade.php → ...artials/single-problem-overview.blade.php b/...oblem/partials/problem-overview.blade.php → ...artials/single-problem-overview.blade.php
@@ -2,36 +2,39 @@
 
     <div class="row">
         <div class="col-12 my-4 my-lg-5 pt-4">
-            <x-go-back-link href="/{{ app()->getLocale() .'/'. $viewModel->project->slug }}"
+            <x-go-back-link href="/{{ app()->getLocale() .'/'. $viewModel->project->slug . '/problems' }}"
                             class="d-none d-lg-block">{{ __("project-problems.back") }}</x-go-back-link>
         </div>
     </div>
 
-    <div class="row">
+    <div class="row problem-description">
 
         <div class="col-12 col-lg-7">
-            <h2 class="project-title">{{ __("problem.solutions_for") }} {{ $viewModel->problem->currentTranslation->title }}</h2>
-            <div class="project-overview pb-5 pb-lg-0">
-                {!! $viewModel->problem->currentTranslation->description !!}
+            <h1 class="section-title">{{ __("problem.solutions_for") }} {{ $viewModel->problem->currentTranslation->title }}</h1>
+            <div class="section-body pb-5 pb-lg-0">
+                <p>{!! $viewModel->problem->currentTranslation->description !!}</p>
             </div>
         </div>
 
         <div class="col-12 col-lg-4 offset-lg-1 align-self-end text-center">
-            <img src="/images/problems/problem-page-intro-top-question.png" alt="" width="384" height="416" class="img-fluid">
+            <img src="/images/problems/problem-page-intro-top-question@2x.png" alt="" width="382" height="238" class="img-fluid">
         </div>
 
     </div>
 
-    <div class="row">
+    <div class="row how-to-vote">
+
         <div class="col-12 col-lg-7">
-            <h2 class="project-title">{{ __("problem.how_to_vote") }}</h2>
-            <div class="project-overview pb-5 pb-lg-0">
-                {{ __("problem.how_to_vote_text") }}
+            <h2 class="section-title">{{ __("problem.how_to_vote") }}</h2>
+            <div class="section-body pb-5 pb-lg-0">
+                <p>{{ __("problem.how_to_vote_text") }}</p>
             </div>
         </div>
 
         <div class="col-12 col-lg-4 offset-lg-1 align-self-end text-center">
-            <img src="/images/problems/problem-page-intro-top-thinking.png" alt="" width="384" height="416" class="img-fluid">
+            <img src="/images/problems/problem-page-intro-top-thinking@2x.png" alt="" width="384" height="344" class="img-fluid">
         </div>
+
     </div>
+
 </div>
diff --git a/resources/views/problem/show.blade.php b/resources/views/problem/show.blade.php
@@ -11,12 +11,12 @@
 
 @section('content')
 
-    <div id="problem-page" class="pb-5">
+    <div id="single-problem-page" class="pb-5">
 
         @include('partials.flash-messages-and-errors')
 
         <section id="single-problem-overview" class="bg-clr-primary-white">
-            @include('problem.partials.problem-overview')
+            @include('problem.partials.single-problem-overview')
         </section>
 
         <section id="solutions-list" class="bg-clr-primary-white bg-image-noise">