Fixed the view in small and medium breakpoints

hasgeek · Sep 21, 2023 · 302385e · 302385e
1 parent 60af3b2
commit 302385e
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 19 deletions.
diff --git a/funnel/assets/sass/components/_card.scss b/funnel/assets/sass/components/_card.scss
@@ -355,7 +355,7 @@
     padding-bottom: 56.2%;
     z-index: 2;
     overflow: hidden;
-    border-radius: 0 0 0 20px;
+    border-radius: 0 0 0 16px;
 
     .card__image {
       position: absolute;
@@ -434,7 +434,7 @@
   display: block;
   height: 100%;
   opacity: 0.7;
-  border-radius: 0 0 0 20px;
+  border-radius: 0 0 0 16px;
 }
 
 .card--small {

diff --git a/funnel/assets/sass/pages/index.scss b/funnel/assets/sass/pages/index.scss
@@ -31,6 +31,11 @@
   }
 }
 
+.card--spotlight__body {
+  padding: 0 $mui-grid-padding $mui-grid-padding;
+  position: relative;
+}
+
 @media (min-width: 768px) {
   .homepage {
     .logo-about {
@@ -41,6 +46,10 @@
       padding-top: $mui-header-height;
     }
   }
+  .card--spotlight__body {
+    padding: 0 $mui-grid-padding $mui-grid-padding;
+    position: relative;
+  }
 }
 
 @media (min-width: 992px) {
@@ -50,6 +59,9 @@
       margin-top: 0;
     }
   }
+  .card--spotlight__body {
+    display: none;
+  }
 }
 
 .card--spotlight {
@@ -80,15 +92,17 @@
   }
 }
 
+
 .spotlight__badge {
   margin: 0;
-  padding: $mui-grid-padding * 0.25 $mui-grid-padding;
+  padding: $mui-grid-padding * 0.25 $mui-grid-padding * 0.5;
   width: auto;
-  min-width: 32px;
   color: $mui-text-hyperlink;
   text-decoration: none;
   border-radius: 16px;
   font-weight: 700;
+  font-size: 14px;
+  line-height: 14px;
   background: transparentize($mui-primary-color, 0.85);
   border: 2px solid transparentize($mui-primary-color, 0.8);
   .spotlight__badge__footer {
@@ -99,9 +113,14 @@
 @media (min-width: 992px) {
   .card--spotlight {
     display: flex !important;
-    max-width: 100%;
     border-radius: 16px 16px 0 16px;
-    min-height: 290px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.19);
+    max-width: 100%;
+    transition: 200ms linear;
+    -webkit-transition: 200ms linear;
+    height: 100%;
+
 
     .card__image-wrapper {
       flex: 100%;
@@ -118,11 +137,9 @@
       }
     }
 
-    .card__body {
-      position: relative;
-      padding: $mui-grid-padding-double $mui-grid-padding;
-      width: 100%;
-    }
+  }
+  .card--spotlight__image-wrapper {
+    border-radius: 16px !important;
   }
   .card--spotlight--live {
     padding: $mui-grid-padding;

diff --git a/funnel/templates/profile_layout.html.jinja2 b/funnel/templates/profile_layout.html.jinja2
@@ -84,20 +84,28 @@
                     </a>
                     <a href="{{ featured_project.account.profile_url }}" class="profile-avatar-title mui--text-subhead text-bold mui--text-dark nounderline" data-ga="View account">{{ featured_project.account.title }}</a>
                   </a>
-                </div>                     
+                </div>
                 <div class="tabs full-width-btn spotlight__badge">
                   <div class="flex-wrapper mui--text-hyperlink">
-                    {{ faicon(icon='lock', icon_size='title', baseline=true) }}
-                    <p class="full-width-btn spotlight__badge__footer">Member access</p>
-                  </div>
+                    {{ faicon(icon='lock', icon_size='caption', baseline=false) }} <p class="full-width-btn spotlight__badge__footer">Member access</p> </div>
                 </div>
               </div>
               <h3 class="mui--text-headline text-bold" data-cy="spotlight-project"><a href="{{ featured_project.url_for() }}" class="mui--text-dark nounderline">{{ featured_project.title }}</a></h3>
               <p class="mui--text-subhead mui--text-light js-truncate" data-truncate-lines="2">{{ featured_project.tagline }}</p>
-              <p class="mui--text-body2 mui--text-dark js-truncate" data-truncate-lines="3">{{ featured_project.description_text }}</p>
+              <p class="mui--text-body2 mui--text-dark js-truncate" data-truncate-lines="2">{{ featured_project.description_text }}</p>
+              {% if calendarwidget_compact and featured_project.start_at and featured_project.calendar_weeks_compact.weeks and featured_project.calendar_weeks_compact.weeks|length > 0 %}
+                <div aria-label="{{ featured_project.datelocation }}">
+                  {{ calendarwidget(featured_project.calendar_weeks_compact) }}
+                </div>
+              {% elif featured_project.start_at and featured_project.calendar_weeks_full.weeks and featured_project.calendar_weeks_full.weeks|length > 0 %}
+                <div aria-label="{{ featured_project.datelocation }}">
+                  {{ calendarwidget(featured_project.calendar_weeks_full, compact=false) }}
+                </div>
+              {% endif %}
+              <div class="card__body__location mui--text-light zero-bottom-margin">{% if featured_project.primary_venue %}{{ faicon(icon='map-marker-alt', icon_size='caption', baseline=false) }} {% if featured_project.primary_venue.city %}{{ featured_project.primary_venue.city }}{% else %}{{ featured_project.primary_venue.title }}{% endif %}{% elif featured_project.location %}{{ faicon(icon='map-marker-alt', icon_size='caption', baseline=false) }} {{ featured_project.location }}{% endif %}</div>
               <div class="bottom-padding mui--text-light mui--hidden-lg mui--hidden-xl">{% if featured_project.primary_venue %}{{ faicon(icon='map-marker-alt', icon_size='caption', baseline=false) }} {% if featured_project.primary_venue.city %}{{ featured_project.primary_venue.city }}{% else %}{{ featured_project.primary_venue.title }}{% endif %}{% elif featured_project.location %}{{ faicon(icon='map-marker-alt', icon_size='caption', baseline=false) }} {{ featured_project.location }}{% endif %}</div>
                 {%- if (featured_project.start_at is not none and featured_project.calendar_weeks_full.weeks and featured_project.calendar_weeks_full.weeks|length > 0) %}
-                  <div class="card__body">
+                  <div class="card--spotlight__body">
                     {% if calendarwidget_compact and featured_project.start_at and featured_project.calendar_weeks_compact.weeks and featured_project.calendar_weeks_compact.weeks|length > 0 %}
                       <div aria-label="{{ featured_project.datelocation }}">
                         {{ calendarwidget(featured_project.calendar_weeks_compact) }}
@@ -116,9 +124,9 @@
                     </div>
                   </div>
                 {% endif %}
-              </div>
+            </div>
             <div class="grid__col-12 grid__col-md-8 grid__col-lg-7" data-cy="spotlight-project">
-              <div class="card card--spotlight card--spotlight--single">
+              <div class="card card--upcoming card--spotlight__image-wrapper">
                 <div class="flex-wrapper flex-wrapper--center flex-wrapper--space-between margin-top margin-bottom margin-right margin-left mui--hidden-lg mui--hidden-xl">
                   <div class="flex-wrapper flex-wrapper--center">
                     <span class="profile-avatar margin-right">
@@ -148,6 +156,31 @@
                   {% endif %}
                   </a>
                 </div>
+                {%- if (featured_project.start_at is not none and featured_project.calendar_weeks_full.weeks and featured_project.calendar_weeks_full.weeks|length > 0) %}
+                  <div class="card--spotlight__body">
+                    <div class="mui--hidden-lg mui--hidden-xl">
+                      {% if calendarwidget_compact and featured_project.start_at and featured_project.calendar_weeks_compact.weeks and featured_project.calendar_weeks_compact.weeks|length > 0 %}
+                      <div aria-label="{{ featured_project.datelocation }}">
+                        {{ calendarwidget(featured_project.calendar_weeks_compact) }}
+                      </div>
+                      {% elif featured_project.start_at and featured_project.calendar_weeks_full.weeks and featured_project.calendar_weeks_full.weeks|length > 0 %}
+                      <div aria-label="{{ featured_project.datelocation }}">
+                        {{ calendarwidget(featured_project.calendar_weeks_full, compact=false) }}
+                      </div>
+                      {% endif %}
+                      <h3 class="card__body__title mui--text-subhead {% if not featured_project.start_at %} card__body__subtitle {% endif %}"><a href="{{ featured_project.url_for() }}" class="mui--text-dark nounderline"><span class="text-bold">{{ featured_project.title_inline }}</span> <span class="mui--text-light js-truncate" data-truncate-lines="2">{{ featured_project.tagline }}</span></a></h3>
+                      <div class="flex-wrapper flex-wrapper--space-between flex-wrapper--center top-padding">
+                        <div class="card__body__location mui--text-light zero-bottom-margin">{% if featured_project.primary_venue %}{{ faicon(icon='map-marker-alt', icon_size='caption', baseline=false) }} {% if featured_project.primary_venue.city %}{{ featured_project.primary_venue.city }}{% else %}{{ featured_project.primary_venue.title }}{% endif %}{% elif featured_project.location %}{{ faicon(icon='map-marker-alt', icon_size='caption', baseline=false) }} {{ featured_project.location }}{% endif %}</div>
+                        <div class="tabs full-width-btn spotlight__badge">
+                          <div class="flex-wrapper mui--text-hyperlink">
+                            {{ faicon(icon='lock', icon_size='caption', baseline=false) }}
+                            <p class="full-width-btn spotlight__badge__footer">Member access</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                {% endif %}
               </div>
             </div>
             {% if featured_project and featured_project.schedule_start_at -%}