Fix issue oppia#19407:Blog page is not responsive on mobile devices (o…

…ppia#19474) * fixed UI changes in blog page * passing lint testcase1 * passing lint testcase2 * all lint case passed * all lint case passed * final commit * done suggested changes * Suggested Changes Done * added media query at 470px * fixed UI changes in blog page * passing lint testcase1 * passing lint testcase2 * all lint case passed * all lint case passed * final commit * done suggested changes * Suggested Changes Done * Resolved responsive issues in blog page * solved responsive issues * added margin to blog-navigate icon * fixed all changes * linter issue resolved * linter issue resolved * all linter checks resolved * changed naming to no-result-found --------- Co-authored-by: 2008sahil <getinter6@gmail.com>
yash1378 · Jan 27, 2024 · 26d4655 · 26d4655
1 parent 22f2d41
commit 26d4655
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/assets/i18n/en.json b/assets/i18n/en.json
@@ -144,7 +144,7 @@
     "I18N_BLOG_DASHBOARD_TAB_DRAFTS": "Drafts",
     "I18N_BLOG_DASHBOARD_TAB_PUBLISHED": "Published",
     "I18N_BLOG_HOME_PAGE_BREADCRUMB": "Blog",
-    "I18N_BLOG_HOME_PAGE_NO_RESULTS_FOUND": "Sorry, there are no blog posts to show.",
+    "I18N_BLOG_HOME_PAGE_NO_RESULTS_FOUND": "Sorry, there are no blog posts matching this query.",
     "I18N_BLOG_HOME_PAGE_OPPIA_DESCRIPTION": "Building a community to provide quality education for those who lack access to it.",
     "I18N_BLOG_HOME_PAGE_POSTS_HEADING": "Latest Posts",
     "I18N_BLOG_HOME_PAGE_POSTS_NUMBER_DISPLAY": "Displaying <[startingNumber]> - <[endingNumber]> of <[totalNumber]> posts",

diff --git a/core/templates/pages/blog-dashboard-page/blog-card/blog-card.component.html b/core/templates/pages/blog-dashboard-page/blog-card/blog-card.component.html
@@ -92,7 +92,6 @@
     height: 144px;
     margin: 0;
     max-width: unset;
-    object-fit: cover;
     object-position: top;
     width: 100%;
   }

diff --git a/core/templates/pages/blog-home-page/blog-home-page.component.css b/core/templates/pages/blog-home-page/blog-home-page.component.css
@@ -5,13 +5,13 @@
 */
 @media (max-width: 1024px) {
   oppia-blog-home-page .oppia-search-bar-form .oppia-search-bar-input {
-    border-radius: 0 4px 4px 0;
-    border-width: 1px 1px 1px 0;
+    border-radius: 4px 0 0 4px;
+    border-width: 1px 0 1px 1px;
   }
 
   oppia-blog-home-page .input-group .oppia-search-bar-icon {
-    border-radius: 4px 0 0 4px;
-    border-width: 1px 0 1px 1px;
+    border-radius: 0 4px 4px 0;
+    border-width: 1px 1px 1px 0;
   }
 }
 
@@ -20,15 +20,15 @@
     width: 335px
   }
 
-
+  
   @media (max-width: 440px) {
     oppia-blog-home-page mat-card.oppia-blog-home-page-card {
-      width: 350px;
+      width: 410px;
     }
 
     .mat-card.oppia-page-card {
-      padding-left: 1rem;
-      padding-right: 1rem;
+      padding-left: 3rem;
+      padding-right: 3rem;
     }
   }
 }
@@ -39,8 +39,12 @@ oppia-blog-home-page .posts-display-heading {
   font-size: 24px;
   font-weight: bold;
   line-height: 28px;
+  margin-top: 30px;
   text-align: left;
-  text-transform: capitalize;
+}
+
+oppia-blog-home-page .no-result-found {
+  margin-top: 30px;
 }
 
 oppia-blog-home-page .blog-home-page-posts-number-display {
@@ -116,10 +120,12 @@ oppia-blog-home-page .search-heading {
   border-radius: 4px 0 0 4px;
   border-right-width: 0;
   color: #333;
+  width: 100%;
 
 }
 
 .input-group-addon.oppia-search-bar-icon {
+  align-items: center;
   border-color: #333;
   border-left-width: 0;
   border-radius: 0 4px 4px 0;

diff --git a/core/templates/pages/blog-home-page/blog-home-page.component.html b/core/templates/pages/blog-home-page/blog-home-page.component.html
@@ -88,7 +88,7 @@
           <source type="image/png" [srcset]="getStaticImageUrl('/images/general/no_explorations_found.png')">
           <img [src]="getStaticImageUrl('/general/no_explorations_found.png')">
         </picture>
-        <p class="text-center">
+        <p class="text-center no-result-found">
           {{ 'I18N_BLOG_HOME_PAGE_NO_RESULTS_FOUND' | translate }}
         </p>
       </div>
@@ -113,21 +113,19 @@ <h4 class="d-flex flex-grow-1 search-heading">
             {{ 'I18N_BLOG_HOME_PAGE_QUERY_SEARCH_HEADING' | translate }}
           </h4>
           <form class="navbar-form oppia-search-bar-form pl-0 e2e-test-search-field" role="search">
-            <div class="form-group d-flex"
-                 [ngClass]="{'flex-row-reverse': isSmallScreenViewActive()}">
+            <div class="form-group d-flex">
               <input type="text"
                      class="form-control oppia-search-bar-input oppia-search-bar-text-input e2e-test-search-input"
                      [(ngModel)]="searchQuery"
                      (ngModelChange)="searchButtonIsActive ? null : onSearchQueryChangeExec()"
-                     [ngModelOptions]="{ updateOn: 'blur', standalone:'true' }"
+                     [ngModelOptions]="{ updateOn: 'blur', standalone: 'true' }"
                      aria-label="Search bar"
                      (keydown.enter)="$event.target.blur()"
                      (input)="searchToBeExec($event)">
               <div class="input-group oppia-input-group">
                 <div class="input-group-addon oppia-search-bar-icon"
                      [ngClass]="{'d-block': isSmallScreenViewActive()}">
-                  <i class="fas fa-search material-icons oppia-translate-icon-down md-18"
-                     *ngIf="!isSearchInProgress()">
+                  <i class="fas fa-search material-icons oppia-translate-icon-down md-18" *ngIf="!isSearchInProgress()">
                   </i>
                   <span *ngIf="isSearchInProgress()">
                     <i class="fas fa-sync material-icons md-18 oppia-animate-spin"></i>