Project page header (#2030)

* Moved the register-block to the project header section on desktop * Added spacing between the registerblock and project title and moved the registerblock to a separate card when the current_page is !=project * Improve responsiveness of register block for project subpages and improve styling on calendar widget * Changed the register button to full width inside the card when rendered in project sub-pages * Comparison with true is not required * Template fixes * Improved styling on the buttons in the register block for edge cases when the project has no banner image * Avoid the ambiguous term "project" * Removed the member label from project-details__box in the project header * Include bio field in account edit form (#2049) * Use client-hint headers to identify browser and platform (#2050) * Consistent formatting between apps and login sessions list (#2051) * Follow button UI fixes (#2047) * Style fixes and fix for follow button on homepage * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Fix follow button UI issues * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Style fixes for follow button on proposal card --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> * Fix ajax followers page (#2054) * Upgrade dependencies; fix type hint (#2055) * [pre-commit.ci] pre-commit autoupdate (#2053) updates: - [github.com/pypa/pip-audit: v2.7.2 → v2.7.3](pypa/pip-audit@v2.7.2...v2.7.3) - [github.com/astral-sh/ruff-pre-commit: v0.4.2 → v0.4.3](astral-sh/ruff-pre-commit@v0.4.2...v0.4.3) Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> * Fix copy url function to pick clicked share button url (#2056) * Cleanup macros * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Remove shoelace * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Added length validator * Add title length validators * Do cheaper test first * Spacing fixes * Correct view name * Fix project header for sm screens * Fix preview of markdown fields --------- Co-authored-by: Kiran Jonnalagadda <[email protected]> Co-authored-by: Vidya Ramakrishnan <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Amogh M Aradhya <[email protected]>
hasgeek · May 31, 2024 · 5d7240f · 5d7240f
1 parent 9cf1258
commit 5d7240f
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 132 deletions.
diff --git a/devserver.py b/devserver.py
@@ -58,7 +58,7 @@ def rq_background_worker(*args: Any, **kwargs: Any) -> Any:
         # Only start RQ worker within the reloader environment
         background_rq = BackgroundWorker(
             rq_background_worker,
-            mock_transports=bool(getbool(os.environ.get('MOCK_TRANSPORTS', False))),
+            mock_transports=bool(getbool(os.environ.get('MOCK_TRANSPORTS', True))),
         )
         background_rq.start()
 

diff --git a/funnel/assets/sass/components/_card.scss b/funnel/assets/sass/components/_card.scss
@@ -126,6 +126,7 @@
       margin: 0;
       width: 100%;
       display: none;
+      font-weight: 600;
       justify-content: space-between;
 
       .calendar__month__counting {
@@ -187,6 +188,10 @@
           }
         }
 
+        .calendar__weekdays__dates__date--flex {
+          width: auto !important;
+        }
+
         .calendar__weekdays__dates__date--today {
           .calendar__weekdays__dates__date__day {
             color: $mui-text-dark;
@@ -222,6 +227,9 @@
           z-index: 1;
           border: 1px solid $mui-primary-color-lighter;
         }
+        .calendar__weekdays__dates__date--flex:after {
+          margin: 0 -8px !important;
+        }
         .calendar__weekdays__dates__date--active:before {
           content: '';
           border-left: 5px solid transparent;
@@ -297,6 +305,10 @@
       .calendar__weekdays__dates--latest {
         display: flex;
       }
+
+      .calendar__weekdays__dates--justify {
+        justify-content: space-between;
+      }
     }
   }
 }

diff --git a/funnel/assets/sass/components/_ticket-modal.scss b/funnel/assets/sass/components/_ticket-modal.scss
@@ -70,7 +70,7 @@
 .price-btn {
   min-width: 150px;
   font-size: inherit;
-  padding: 0;
+  padding: 0 8px;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/funnel/assets/sass/pages/project.scss b/funnel/assets/sass/pages/project.scss
@@ -63,11 +63,13 @@
       display: none;
     }
     .register-block__content__txt {
-      font-size: 9px;
+      font-size: 12px;
       line-height: 16px;
+      letter-spacing: -0.07rem;
       width: 100%;
       display: block;
       font-style: italic;
+      font-weight: 600;
       margin-bottom: $mui-grid-padding * 0.25;
     }
     .register-block__btn {
@@ -92,6 +94,9 @@
       &:hover {
         border-color: $mui-text-danger;
       }
+      .register-block__btn__member-txt {
+        font-size: 12px;
+      }
     }
     .register-block__btn.mui--is-disabled:hover {
       border-color: inherit;
@@ -101,8 +106,12 @@
     width: calc(50% - $mui-grid-padding/2);
     align-self: flex-end;
   }
+  .register-block__btn--full-width {
+    width: 100% !important;
+    margin-top: $mui-grid-padding;
+  }
   .register-block__content:only-child {
-    width: 100%;
+    width: 100% !important;
     align-self: flex-end;
   }
 }
@@ -111,7 +120,7 @@
   .register-block {
     .register-block__content {
       .register-block__content__txt {
-        font-size: 10px;
+        font-size: 12px;
       }
     }
   }
@@ -152,18 +161,20 @@
 
 @media (min-width: 768px) {
   .project-footer {
+    padding: 16px 0 0 !important;
     .register-block {
       display: block;
       .register-block__content {
-        width: 100%;
+        width: calc(50% - $mui-grid-padding/2);
         margin-right: 0;
         margin-bottom: $mui-grid-padding;
         .register-block__content__rsvp-txt {
           font-size: 12px;
         }
         .register-block__content__txt {
-          font-size: 14px;
-          line-height: 21px;
+          font-size: 12px;
+          line-height: 16px;
+          letter-spacing: -0.01rem;
           margin-bottom: $mui-grid-padding * 0.5;
         }
         .register-block__btn {
@@ -179,6 +190,11 @@
         }
       }
     }
+    .flex-content {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
   }
 }
 
@@ -370,6 +386,7 @@
         .calendar__weekdays .calendar__weekdays__dates--latest {
           display: flex;
           margin-bottom: $mui-grid-padding * 0.5;
+          font-weight: 600;
         }
 
         .calendar__weekdays .calendar__weekdays__dates:last-child {
@@ -391,6 +408,9 @@
       }
     }
   }
+  .project-banner__right--flex-direction {
+    flex-direction: column;
+  }
 }
 
 .project-banner__left,
@@ -433,21 +453,21 @@
     }
     .project-banner__left {
       width: 67%;
-      margin: 0 $mui-grid-padding 0 0;
+      margin: 0 $mui-grid-padding * 2 0 0;
       .embed-video-wrapper--shaped {
         border-radius: 16px;
       }
     }
     .project-banner__right {
-      width: 33%;
+      width: auto;
     }
   }
   .project-banner.project-banner--inner {
     .project-banner__left--smaller {
       width: 25%;
     }
     .project-banner__right--smaller {
-      width: 75%;
+      width: auto;
     }
   }
 }
@@ -557,10 +577,9 @@
 }
 
 .project-section__map {
-  height: 400px;
+  height: 300px;
   width: 100%;
   z-index: 0;
-  margin: 0 0 $mui-grid-padding;
   position: relative;
   outline: none;
 }

diff --git a/funnel/forms/auth_client.py b/funnel/forms/auth_client.py
@@ -33,7 +33,7 @@ class AuthClientForm(forms.Form):
 
     title = forms.StringField(
         __("Application title"),
-        validators=[forms.validators.DataRequired()],
+        validators=[forms.validators.DataRequired(), forms.validators.Length(max=250)],
         filters=[forms.filters.strip()],
         description=__("The name of your application"),
     )

diff --git a/funnel/forms/project.py b/funnel/forms/project.py
@@ -52,7 +52,10 @@ class ProjectForm(forms.Form):
 
     title = forms.StringField(
         __("Title"),
-        validators=[forms.validators.DataRequired()],
+        validators=[
+            forms.validators.DataRequired(),
+            forms.validators.Length(max=Project.__title_length__),
+        ],
         filters=[forms.filters.strip()],
     )
     tagline = forms.StringField(

diff --git a/funnel/forms/session.py b/funnel/forms/session.py
@@ -17,7 +17,10 @@ class SessionForm(forms.Form):
 
     title = forms.StringField(
         __("Title"),
-        validators=[forms.validators.DataRequired()],
+        validators=[
+            forms.validators.DataRequired(),
+            forms.validators.Length(max=Session.__title_length__),
+        ],
         filters=[forms.filters.strip()],
     )
     venue_room_id = forms.SelectField(

diff --git a/funnel/forms/update.py b/funnel/forms/update.py
@@ -15,7 +15,10 @@ class UpdateForm(forms.Form):
 
     title = forms.StringField(
         __("Title"),
-        validators=[forms.validators.DataRequired()],
+        validators=[
+            forms.validators.DataRequired(),
+            forms.validators.Length(max=Update.__title_length__),
+        ],
         filters=[forms.filters.strip()],
     )
     body = forms.MarkdownField(

diff --git a/funnel/forms/venue.py b/funnel/forms/venue.py
@@ -25,7 +25,10 @@ class VenueForm(forms.Form):
     title = forms.StringField(
         __("Name"),
         description=__("Name of the venue"),
-        validators=[forms.validators.DataRequired(), forms.validators.Length(max=250)],
+        validators=[
+            forms.validators.DataRequired(),
+            forms.validators.Length(max=Venue.__title_length__),
+        ],
         filters=[forms.filters.strip()],
     )
     description = forms.MarkdownField(
@@ -88,7 +91,10 @@ class VenueRoomForm(forms.Form):
     title = forms.StringField(
         __("Name"),
         description=__("Name of the room"),
-        validators=[forms.validators.DataRequired(), forms.validators.Length(max=250)],
+        validators=[
+            forms.validators.DataRequired(),
+            forms.validators.Length(max=VenueRoom.__title_length__),
+        ],
         filters=[forms.filters.strip()],
     )
     description = forms.MarkdownField(

diff --git a/funnel/templates/macros.html.jinja2 b/funnel/templates/macros.html.jinja2
@@ -25,7 +25,7 @@
 <input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
 {%- endmacro %}
 
-{% macro calendarwidget(calendar, compact=true) %}
+{% macro calendarwidget(calendar, compact=true, flex=false) %}
   <div class="card__calendar {% if compact %} card__calendar--compact {% endif %}" aria-hidden="true">
     <div class="calendar">
       {% set event = namespace(month='', year='', first_week='', previous='', next='') %}
@@ -42,15 +42,15 @@
               {% set event.next = true %}
             {% endif %}
           {% endif %}
-          <p class="calendar__month {% if week.upcoming %}calendar__month--upcoming{% endif %} {% if event.first_week == week %}calendar__month--upcoming--first calendar__month--latest{% endif %} {% if week.month != event.month %}calendar__month--unique{% endif %} {% if loop.index == calendar.weeks|length and not week.upcoming %}calendar__month--latest{% endif %}"><span class="calendar__month__counting" data-today="{{ calendar.today }}" data-month="{{ week.month }}"></span><span class="calendar__month__name mui--text-light">{{ week.month }} {{ week.year }}</span></p>
+          <p class="calendar__month {% if week.upcoming %}calendar__month--upcoming{% endif %} {% if event.first_week == week %}calendar__month--upcoming--first calendar__month--latest{% endif %} {% if week.month != event.month %}calendar__month--unique{% endif %} {% if loop.index == calendar.weeks|length and not week.upcoming %}calendar__month--latest{% endif %}{% if flex %} zero-padding{% endif %}"><span class="calendar__month__counting" data-today="{{ calendar.today }}" data-month="{{ week.month }}"></span><span class="calendar__month__name mui--text-light">{{ week.month }} {{ week.year }}</span></p>
           {% set event.month = week.month %}
           {% set event.year = week.year %}
-          <div class="calendar__weekdays__dates {% if week.upcoming %}calendar__weekdays__dates--upcoming{% endif %} {% if event.first_week == week %}calendar__weekdays__dates--upcoming--first calendar__weekdays__dates--latest {% endif %} {% if loop.index == calendar.weeks|length and not week.upcoming %}calendar__weekdays__dates--latest {% endif %}" data-month="{{ week.month }}">
+          <div class="calendar__weekdays__dates {% if week.upcoming %}calendar__weekdays__dates--upcoming{% endif %} {% if event.first_week == week %}calendar__weekdays__dates--upcoming--first calendar__weekdays__dates--latest {% endif %} {% if flex %} calendar__weekdays__dates--justify {% endif %} {% if loop.index == calendar.weeks|length and not week.upcoming %}calendar__weekdays__dates--latest {% endif %}" data-month="{{ week.month }}">
             <p class="calendar__weekdays__dates__date calendar__weekdays__dates__icon calendar__weekdays__dates__icon--left">
               {% if event.previous %}{{ faicon(icon='chevron-left', icon_size='caption', baseline=false, css_class="calendar__weekdays__dates__icon__next") }}{% endif %}
             </p>
             {% for date in week.dates %}
-              <p class="calendar__weekdays__dates__date {% if date.count > 0 %}calendar__weekdays__dates__date--active {% elif date.isoformat == calendar.today %} calendar__weekdays__dates__date--today{% endif %} {% if date.day_start_at %} calendar__weekdays__dates__date--showtime{% endif %} {% if date.isoformat >= calendar.today %} calendar__weekdays__dates__date--latest{% endif %} calendar__weekdays__dates__date--{{ (loop.index - 1) % 7 }}" {% if date.count > 0 %} data-event-date="{{ date.isoformat }}" {% endif %} data-event-month="{{ week.month }}">
+            <p class="calendar__weekdays__dates__date {% if date.count > 0 %}calendar__weekdays__dates__date--active {% elif date.isoformat == calendar.today %} calendar__weekdays__dates__date--today{% endif %} {% if date.day_start_at %} calendar__weekdays__dates__date--showtime{% endif %} {% if date.isoformat >= calendar.today %} calendar__weekdays__dates__date--latest{% endif %} {% if flex %}calendar__weekdays__dates__date--flex {% endif %} {% if date.count > 0 and flex %} calendar__weekdays__dates__date--flex {% endif %} calendar__weekdays__dates__date--{{ (loop.index - 1) % 7 }}" {% if date.count > 0 %} data-event-date="{{ date.isoformat }}" {% endif %} data-event-month="{{ week.month }}">
                 <span class="calendar__weekdays__dates__date__day">{{ date.day }}</span>
                 <span class="calendar__weekdays__dates__date__name">{{ calendar.days[(loop.index - 1) % 7] }}</span>
                 {% if date.day_start_at %}<span class="calendar__weekdays__dates__time">{{ date.day_start_at }} – {{ date.day_end_at }}</span>{% endif %}

diff --git a/funnel/templates/past_projects_section.html.jinja2 b/funnel/templates/past_projects_section.html.jinja2
@@ -14,7 +14,7 @@
     </td>
   </tr>
 {%- else -%}
-  <p class="mui--text-subhead margin-top">{% trans %}No past projects{% endtrans %}</p>
+  <p class="mui--text-subhead margin-top">{% trans %}No past sessions{% endtrans %}</p>
 {%- endfor -%}
 {% if next_page %}
   <tr {% if profile %}

diff --git a/funnel/templates/profile_layout.html.jinja2 b/funnel/templates/profile_layout.html.jinja2
@@ -311,7 +311,7 @@
             <thead class="bg-primary-dark">
               <tr>
                 <th class="mui--text-subhead text-capitalize">{% trans %}Date{% endtrans %}</th>
-                <th class="mui--text-subhead text-capitalize">{% trans %}Project{% endtrans %}</th>
+                <th class="mui--text-subhead text-capitalize">{% trans %}Session{% endtrans %}</th>
                 <th class="mui--text-subhead text-capitalize">{% trans %}Location{% endtrans %}</th>
               </tr>
             </thead>

diff --git a/funnel/templates/project.html.jinja2 b/funnel/templates/project.html.jinja2
@@ -3,7 +3,6 @@
   {% extends "project_layout.html.jinja2" %}
 {%- else -%}
   {% extends "project_spa_layout.html.jinja2" %}
-  {%- from "project_layout.html.jinja2" import pinned_update, project_about with context %}
 {% endif %}
 {% block titleblock %}{% block title %}{{ project.title }}{%- endblock title %}{%- endblock titleblock %}
 {%- from "macros.html.jinja2" import proposal_card, video_thumbnail, projectcard %}
@@ -65,9 +64,29 @@
 {% endblock baseheadline %}
 
 {% block left_col %}
-  <div class="mui--hidden-xs mui--hidden-sm">
-    {{ pinned_update(project) }}
-    {{ project_about(project) }}
+  {% with pinned_update = project.pinned_update %}{%- if pinned_update %}
+    <ul class="mui-list--unstyled page-card pinned {% if current_page != 'project' %}pinned--inner{%- endif %}">
+      <li>
+        <p class="top-padding left-padding right-padding zero-bottom-margin">{{ faicon(icon='thumbtack', baseline=false, css_class="mui--text-light mui--align-middle fa-icon--right-margin") }}<span class="pinned__heading mui--text-subhead mui--text-light">{% trans %}Pinned update{% endtrans %}</span></p>
+        <a href="{{ pinned_update.urls['view'] }}" class="pinned__update">
+          <p class="pinned__update__heading mui-container"><span class="mui--text-subhead text-bold mui--text-dark">{{ pinned_update.title }}</span> <span class="mui--text-subhead mui--text-light pinned__update__body">{%- if not pinned_update.is_currently_restricted %}{{ pinned_update.body.html|preview }} <span class="chip">{% trans %}more{% endtrans %}{{ faicon(icon='caret-right-solid', baseline=false, css_class="mui--align-middle") }}</span>{% else %}<em>{% trans %}This update is for participants only{% endtrans %}</em>{%- endif %}</span></p>
+        </a>
+      </li>
+    </ul>
+  {%- endif %}{%- endwith %}
+  {% if project.state.DRAFT and project.view_for('settings').is_available() %}
+    <div class="page-card page-card--nooverflow">
+      <div class="alert alert--warning zero-top-margin zero-bottom-margin">
+        <a href="{{ project.url_for('settings') }}" class="alert__text nounderline">{% trans %}This project is not published. Visit settings to publish{% endtrans %} {{ faicon(icon='arrow-right') }}</a>
+      </div>
+    </div>
+  {% endif %}
+  <div class="page-card">
+    <div class="project-section">
+      <div class="about bg-primary" id="about">
+        <div class="markdown">{{ project.description }}</div>
+      </div>
+    </div>
   </div>
   {% if project.has_featured_proposals %}
     <div class="page-card">
@@ -157,26 +176,6 @@
     </div>
   {%- endif %}
 
-  {%- if project.primary_venue -%}
-    <div class="page-card">
-      <div class="project-section" id="venue">
-        <h2 class="mui--text-left project-section__headline zero-top-margin">{% trans %}Venue{% endtrans %}</h2>
-        <div class="mui--text-body2 bottom-padding">
-          <p class="zero-bottom-margin">{{ project.primary_venue.title }}</p>
-          <p class="zero-bottom-margin">{{ project.primary_venue.address1 }}</p>
-          <p class="zero-bottom-margin">{{ project.primary_venue.address2 }}</p>
-          <p class="zero-bottom-margin">{{ project.primary_venue.city }}{% if project.primary_venue.city and project.primary_venue.postcode %} - {{ project.primary_venue.postcode }}{%- endif %}</p>
-          {%- if project.primary_venue.state and project.primary_venue.country -%}
-            <p>{{ project.primary_venue.state }}, {{ project.primary_venue.country }}</p>
-          {%- endif %}
-        </div>
-        {%- if project.primary_venue.has_coordinates -%}
-          <div id="venue-map" class="project-section__map" data-label="{{ project.primary_venue.title|striptags }}" data-markerlat="{{ project.primary_venue.latitude }}" data-markerlng="{{ project.primary_venue.longitude }}"><h2>{% trans %}Loading…{% endtrans %}</h2></div>
-        {%- endif %}
-      </div>
-    </div>
-  {%- endif %}
-
   {%- if project.subprojects or project.parent_project %}
     <div>
       <h3 class="mui--text-left left-padding">{% trans %}Related events{% endtrans %}</h3>