apps/userdashboard: add carousel to UD and adjust styling and small s…

…tyle clean fixes #31
liqd · Jan 21, 2021 · 92891c0 · 92891c0
1 parent 8c5c567
commit 92891c0
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 66 deletions.
diff --git a/adhocracy-plus/assets/js/app.js b/adhocracy-plus/assets/js/app.js
@@ -65,7 +65,21 @@ function init () {
     mobileFirst: true,
     infinite: false,
     variableWidth: false,
-    slidesToShow: 3,
+    slidesToShow: 1,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3
+        }
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 2
+        }
+      }
+    ],
     slidesToScroll: 1
   })
 

diff --git a/adhocracy-plus/assets/scss/components/_project_tile_carousel.scss b/adhocracy-plus/assets/scss/components/_project_tile_carousel.scss
@@ -24,10 +24,7 @@
         border-radius: 100%;
         border: 1px solid $border-color;
         background-color: $body-bg;
-
-        @media screen and (min-width: $breakpoint) {
-            z-index: 1; //for when tile links overlap - on mobile people swipe
-        }
+        z-index: 1; //for when tile links overlap - on mobile people swipe
 
         &:hover,
         :focus {
@@ -53,17 +50,6 @@
     }
 }
 
-//mobile slick overwrites
-@media screen and (max-width: $breakpoint-xl-down) {
-    .slick-next {
-        right: 0 !important;
-    }
-
-    .slick-prev {
-        left: 0 !important;
-    }
-}
-
 @media screen and (min-width: $breakpoint-md) {
     .project-tile-carousel__wrapper {
         margin-top: 4*$r-spacer;

diff --git a/adhocracy-plus/assets/scss/components/_status-bar.scss b/adhocracy-plus/assets/scss/components/_status-bar.scss
@@ -6,14 +6,9 @@
     text-align: left;
 }
 
-.status-item__position-storefront.status-bar__past {
-    bottom: 0;
-    right: 0;
-    left: 0;
-}
-
-.status-item_spacer {
-    height: 3*$r-spacer;
+.status-item--baseline {
+    position: absolute;
+    bottom: 0.5*$spacer;
 }
 
 .status-bar__active {
@@ -41,10 +36,6 @@
     left: 0;
 }
 
-.status-bar__past--sm {
-    padding: 0.5*$padding;
-}
-
 .status-bar__status {
     color: $text-color-gray;
 

diff --git a/adhocracy-plus/assets/scss/components/_tile.scss b/adhocracy-plus/assets/scss/components/_tile.scss
@@ -19,6 +19,10 @@ $svg-colour: #2a3cd4;
     width: 100%;
 }
 
+.userdashboard__tile {
+    height: 320px;
+}
+
 .tile__head {
     position: relative;
 
@@ -51,6 +55,10 @@ $svg-colour: #2a3cd4;
     background-color: $brand-info;
 }
 
+.tile__image--sm {
+    min-height: 10rem;
+}
+
 .tile__image__copyright {
     position: absolute;
     bottom: 0;
@@ -108,7 +116,7 @@ $svg-colour: #2a3cd4;
 }
 
 .tile__title {
-    margin-top: 0;
+    margin: 0;
     line-height: 1.3;
 
     a {
@@ -117,15 +125,6 @@ $svg-colour: #2a3cd4;
     }
 }
 
-.tile__title,
-.tile__date {
-    margin: 0;
-}
-
-.tile__date {
-    color: $text-color-gray;
-}
-
 @media (min-width: $breakpoint-xs) {
     .tile--vertical {
         margin: $r-spacer;
@@ -149,13 +148,13 @@ $svg-colour: #2a3cd4;
         min-height: 20rem;
     }
 
-    .tile__image--sm {
-        min-height: 8rem;
-    }
-
     .tile__image--contained {
         min-height: 13rem;
     }
+
+    .tile__image--sm {
+        min-height: 8rem;
+    }
 }
 
 .blueprint__tile {

diff --git a/adhocracy-plus/templates/includes/userdashboard_mobile_toggle.html b/adhocracy-plus/templates/includes/userdashboard_mobile_toggle.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-    <ul class="nav d-inline-block d-md-none" role="tablist">
+    <ul class="nav d-inline-block d-sm-none" role="tablist">
         <li class="nav-item dropdown">
           <a
               class="nav-link dropdown-toggle tab active mr-2"

diff --git a/apps/contrib/templates/a4_candy_contrib/component_library.html b/apps/contrib/templates/a4_candy_contrib/component_library.html
@@ -1758,7 +1758,7 @@ <h3 class="tile__title" id="project-title-26">
                                         this is a questions (speakup) project
                                     </h3>
                                     <p class="tile__text">Honesta oratio, Socratica, Platonis etiam. Quae duo sunt, unum facit. Ratio quidem vestra sic cogit. An eiusdem modi? Id mihi magnum videtur.</p>
-                                    <div class="status-item status__active">
+                                    <div class="status-item">
                                         <div class="status-bar__active">
                                             <span class="status-bar__active-fill" style="width:46%"></span>
                                         </div>

diff --git a/apps/projects/templates/a4_candy_projects/includes/project_list_tile.html b/apps/projects/templates/a4_candy_projects/includes/project_list_tile.html
@@ -34,7 +34,7 @@ <h3 class="tile__title" id="project-title-{{ project.pk }}">
         <p class="tile__text">{{ project.description }}</p>
 
         {% if project.running_modules %}
-        <div class="status-item status__active">
+        <div class="status-item">
             <div class="status-bar__active">
                 <span class="status-bar__active-fill" style="width:{{ project.module_running_progress }}%"></span>
             </div>
@@ -55,7 +55,7 @@ <h3 class="tile__title" id="project-title-{{ project.pk }}">
             </div>
         </div>
         {% elif project.future_modules %}
-        <div class="status-item status__future">
+        <div class="status-item">
         <span class="status-bar__status"><i class="fas fa-clock" aria-hidden="true"></i>{% blocktrans with date=project.future_modules.first.module_start.date|date:"d.m.Y" %} Participation: from {{ date }}{% endblocktrans %}</span>
         </div>
         {% elif project.past_modules %}

diff --git a/apps/projects/templates/a4_candy_projects/includes/project_module_tile.html b/apps/projects/templates/a4_candy_projects/includes/project_module_tile.html
@@ -12,7 +12,7 @@ <h3 class="participation-tile__title">{{ module.name|truncatechars:100 }}</h3>
                     {% blocktrans count num_entries=num_entries %}{{ num_entries }} Contribution{% plural %}{{ num_entries }} Contributions{% endblocktrans %}
                 </span>
                 {% if module.module_running_time_left %}
-                <div class="status-item status__active">
+                <div class="status-item">
                     <div class="status-bar__active">
                         <span class="status-bar__active-fill" style="width: {{ module.module_running_progress }}%"></span>
                     </div>
@@ -22,7 +22,7 @@ <h3 class="participation-tile__title">{{ module.name|truncatechars:100 }}</h3>
                     </span>
                 </div>
                 {% elif not module.module_has_started %}
-                <div class="status-item status__future">
+                <div class="status-item">
                     <span class="participation-tile__status"><i class="fas fa-clock"  aria-hidden="true"></i>{% html_date module.module_start 'd.m.Y' as start_date %}
                     {% blocktrans with date=start_date %}Participation: starts on {{ date }}{% endblocktrans %}
                     </span>

diff --git a/apps/projects/templates/a4_candy_projects/includes/project_tile_userprofile.html b/apps/projects/templates/a4_candy_projects/includes/project_tile_userprofile.html
@@ -2,7 +2,7 @@
 {% project_tile_image project as project_image %}
 {% project_tile_image_copyright project as project_image_copyright %}
 
-<li class="tile organisation__tile">
+<li class="tile organisation__tile userdashboard__tile">
     <div class="tile__head">
         <div class="tile__image tile__image--sm"
           {% if project_image %}
@@ -30,11 +30,17 @@
     <div class="tile__body">
         <span class="text-muted">{% trans 'By ' %}{{ project.organisation.name }}</span>
         <h3 class="tile__title mb-4" id="project-title-{{ project.pk }}">
-            <a href="{{ project|project_url }}">{{ project.name }}</a>
+            <a href="{{ project|project_url }}">
+              {% if project.name|length > 40 %}
+                  {{ project.name|slice:40}}...
+              {% else  %}
+                  {{ project.name }}
+              {% endif %}
+            </a>
         </h3>
 
         {% if project.running_modules %}
-        <div class="status__active">
+        <div class="status-item--baseline">
             <span class="status-bar__status"><i class="fas fa-clock" aria-hidden="true"></i>
             {% if project.module_running_days_left < 365 %}
             {% blocktrans with time_left=project.module_running_time_left %} {{ time_left }} remaining {% endblocktrans %}
@@ -44,12 +50,12 @@ <h3 class="tile__title mb-4" id="project-title-{{ project.pk }}">
             </span>
         </div>
         {% elif project.future_modules %}
-        <div class="status__future">
-        <span class="status-bar__status"><i class="fas fa-clock" aria-hidden="true"></i>{% blocktrans with date=project.future_modules.first.module_start.date|date:"d.m.Y" %} Participation: from {{ date }}{% endblocktrans %}</span>
+        <div class="status-item--baseline">
+            <span class="status-bar__status"><i class="fas fa-clock" aria-hidden="true"></i>{% blocktrans with date=project.future_modules.first.module_start.date|date:"d.m.Y" %} Participation: from {{ date }}{% endblocktrans %}</span>
         </div>
         {% elif project.past_modules %}
-        <div class="status-bar__past">
-        {% blocktrans %}Participation ended. Read result.{% endblocktrans %}
+        <div class="status-item--baseline status-bar__past">
+            {% blocktrans %}Participation ended. Read result.{% endblocktrans %}
         </div>
         {% endif %}
     </div>

diff --git a/apps/projects/templates/a4_candy_projects/project_detail.html b/apps/projects/templates/a4_candy_projects/project_detail.html
@@ -274,7 +274,7 @@ <h2>{{ event.name }}</h2>
                     <div class="row">
                         <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2">
                             {% if project.result %}
-                                {{ project.result | richtext }}
+                                {{ project.result | transform_collapsibles | richtext }}
                             {% else %}
                                 {% trans 'No results yet.' %}
                             {% endif %}

diff --git a/apps/userdashboard/templates/a4_candy_userdashboard/base_userdashboard.html b/apps/userdashboard/templates/a4_candy_userdashboard/base_userdashboard.html
@@ -5,23 +5,20 @@
     {% block dashboard_nav %}
     <div class="tablist tablist--left tablist--background">
         <div class="container">
-            <nav class="d-none d-md-inline-block" aria-label="{% trans 'Dashboard' %}">
-                <a  href="{% url 'userdashboard-overview' %}"
-                    class="tab {% ifequal view.menu_item 'overview' %}active{% endifequal %}"
-                >
+            <nav class="d-none d-sm-inline-block" aria-label="{% trans 'Dashboard' %}">
+                <a href="{% url 'userdashboard-overview' %}"
+                   class="tab {% ifequal view.menu_item 'overview' %}active{% endifequal %}">
                     {% trans 'Overview' %}
                 </a>
                 {% has_perm 'a4_candy_userdashboard.view_moderation_dashboard' user as user_is_moderator %}
                 {% if user_is_moderator %}
                 <a href="{% url 'userdashboard-moderation' %}"
-                   class="tab {% ifequal view.menu_item 'moderation' %}active{% endifequal %}"
-                >
+                   class="tab {% ifequal view.menu_item 'moderation' %}active{% endifequal %}">
                     {% trans 'Moderation' %}
                 </a>
                 {% endif %}
             </nav>
             {% include 'includes/userdashboard_mobile_toggle.html' %}
-
         </div>
     </div>
 
@@ -106,7 +103,7 @@ <h3>{% trans 'Initiator Organisations' %}</h3>
                                      {% if organisation.logo %}
                                        <img src="{% thumbnail organisation.logo '0x40' %}" alt="{{ orgnaisation.name }}" />
                                      {% else %}
-                                       <i class="fas fa-edit pt-1" aria-label="{{ orgnaisation.name }} {% trans 'Home' %}"></i>
+                                       <i class="fas fa-edit font--lg pt-1" aria-label="{{ orgnaisation.name }} {% trans 'Home' %}"></i>
                                      {% endif %}
                                      &nbsp{{ organisation.name }}
                                    </a>
@@ -150,7 +147,7 @@ <h3>{% trans 'Organisations' %}</h3>
                                      {% if organisation.logo %}
                                        <img src="{% thumbnail organisation.logo '0x40' %}" alt="{{ orgnaisation.name }}" />
                                      {% else %}
-                                       <i class="fas fa-edit pt-1" aria-label="{{ orgnaisation.name }} {% trans 'Home' %}"></i>
+                                       <i class="fas font--lg fa-edit pt-1" aria-label="{{ orgnaisation.name }} {% trans 'Home' %}"></i>
                                      {% endif %}
                                      &nbsp{{ organisation.name }}
                                    </a>

diff --git a/apps/userdashboard/templates/a4_candy_userdashboard/userdashboard_overview.html b/apps/userdashboard/templates/a4_candy_userdashboard/userdashboard_overview.html
@@ -5,7 +5,7 @@
 
 <h3 class="mt-sm-0 d-inline-block">{% trans 'Following' %}</h3>
 {% if view.projects.count > 3 %}
-  <a class="btn btn--none text-right" href="{% url 'userdashboard-following' %}">{% trans 'View more' %}</a>
+  <a class="btn btn--none float-right pr-0" href="{% url 'userdashboard-following' %}">{% trans 'View more' %}</a>
 {% endif %}
 
 {% if view.projects_carousel %}