userdashboard: more style updating and responsive behaviour fixes #100

liqd · Apr 16, 2021 · 970a6aa · 970a6aa
1 parent 6415b35
commit 970a6aa
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 17 deletions.
diff --git a/adhocracy-plus/assets/scss/components/_tabs.scss b/adhocracy-plus/assets/scss/components/_tabs.scss
@@ -7,7 +7,7 @@
 }
 
 .tablist {
-    border-bottom: 2px solid $brand-primary;
+    border-bottom: 2px solid $brand-secondary;
     text-align: center;
     margin-bottom: $spacer * 2;
 }
@@ -35,7 +35,7 @@
     }
 
     &.active {
-        border-color: $brand-primary;
+        border-color: $brand-secondary;
         background-color: $body-bg;
     }
 }

diff --git a/adhocracy-plus/templates/a4dashboard/base_dashboard.html b/adhocracy-plus/templates/a4dashboard/base_dashboard.html
@@ -3,7 +3,7 @@
 
 {% block content %}
     {% block dashboard_nav %}
-    <div class="tablist tablist--right tablist--background">
+    <div class="tablist tablist--right mt-3">
         <div class="container">
             <div class="tablist__left d-flex">
                 {% if ORGANISATION.logo %}

diff --git a/apps/projects/serializers.py b/apps/projects/serializers.py
@@ -52,7 +52,7 @@ def _get_participation_status_project(self, instance):
                 return (_('starts in the future'),
                         True)
         else:
-            return _('done'), False
+            return _('completed'), False
 
     def get_type(self, instance):
         return 'project'

diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationProjects.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationProjects.jsx
@@ -40,11 +40,25 @@ export default class ModerationProjects extends Component {
     const daysRemaining = parseInt(timeRemaining[0])
     if (daysRemaining > 365) {
       return (
-        <span>{django.gettext('More than 1 year remaining')}</span>
+        <span>{django.gettext('Over 1 year left')}</span>
       )
     } else {
       return (
-        <span>{django.gettext('remaining')} {item.active_phase[1]}</span>
+        <span>{django.gettext('left')} {item.active_phase[1]}</span>
+      )
+    }
+  }
+
+  getMobileTimespan (item) {
+    const timeRemaining = item.active_phase[1].split(' ')
+    const daysRemaining = parseInt(timeRemaining[0])
+    if (daysRemaining > 365) {
+      return (
+        <span>{django.gettext('1 year')}</span>
+      )
+    } else {
+      return (
+        <span>{item.active_phase[1]}</span>
       )
     }
   }
@@ -85,11 +99,11 @@ export default class ModerationProjects extends Component {
                     {item.access === 3 && <span className="label label--dark">{privateText}</span>}
                   </div>
                   <div className="row text-muted mt-3">
-                    {item.offensive > 0 && <div className="col-lg-4"><span className="fa-stack fa-2x" aria-hidden="true"><i className="fas fa-exclamation fa-stack-1x" /><i className="far fa-circle fa-stack-2x" /></span> {item.offensive}{reportCountText}</div>}
-                    {item.comment_count > 0 && <div className="col-lg-4"><i className="far fa-comment" aria-hidden="true" /> {item.comment_count}{commentCountText}</div>}
-                    {item.future_phase && !item.active_phase && <div className="col-lg-4"><i className="far fa-clock" aria-hidden="true" /> {item.participation_string}</div>}
-                    {item.active_phase && <div className="col-lg-4"><i className="far fa-clock" aria-hidden="true" /> {this.getTimespan(item)}</div>}
-                    {item.past_phase && !item.active_phase && !item.future_phase && <div className="col-lg-4" />}
+                    {item.offensive > 0 && <div className="col-4"><span className="fa-stack fa-2x" aria-hidden="true"><i className="fas fa-exclamation fa-stack-1x" /><i className="far fa-circle fa-stack-2x" /></span> {item.offensive} <span className="d-none d-lg-inline-block">{reportCountText}</span></div>}
+                    {item.comment_count > 0 && <div className="col-4"><i className="far fa-comment" aria-hidden="true" /> {item.comment_count} <span className="d-none d-lg-inline-block">{commentCountText}</span></div>}
+                    {item.future_phase && !item.active_phase && <div className="col-4"><i className="far fa-clock" aria-hidden="true" /> {item.participation_string}</div>}
+                    {item.active_phase && <div className="col-4"><i className="far fa-clock" aria-hidden="true" /> <span className="d-inline-block d-lg-none">{this.getMobileTimespan(item)}</span> <span className="d-none d-lg-inline-block">{this.getTimespan(item)}</span></div>}
+                    {item.past_phase && !item.active_phase && !item.future_phase && <div className="col-4"> {item.participation_string}</div>}
                   </div>
                   <a href={item.url} className="tile__link"><span className="sr-only">{srLinkText}{item.title}</span></a>
                 </div>

diff --git a/apps/userdashboard/templates/a4_candy_userdashboard/base_userdashboard.html b/apps/userdashboard/templates/a4_candy_userdashboard/base_userdashboard.html
@@ -3,7 +3,7 @@
 
 {% block content %}
     {% block dashboard_nav %}
-    <div class="tablist tablist--left tablist--background">
+    <div class="tablist tablist--left mt-3">
         <div class="container">
             <nav class="d-none d-sm-inline-block" aria-label="{% trans 'Dashboard' %}">
                 <a href="{% url 'userdashboard-overview' %}"
@@ -59,9 +59,9 @@
                             {% else %}
                                 <img class="userdashboard-profile__avatar mb-2" src="{{ user.avatar_fallback }}" width="170" height="170" alt="" />
                             {% endif %}
-                            <h3 class="mt-0 u-break-word">
+                            <h4 class="mt-0 u-break-word">
                             {{ user.username }}
-                            </h3>
+                            </h4>
                         </a>
                         <div>
                             {% trans 'Since' %} {{ request.user.date_joined|date:"d M Y" }}

diff --git a/apps/users/templates/a4_candy_users/user_detail.html b/apps/users/templates/a4_candy_users/user_detail.html
@@ -43,9 +43,9 @@
                             {% else %}
                                 <img class="userdashboard-profile__avatar mb-2" src="{{ user.avatar_fallback }}" width="170" height="170" alt="" />
                             {% endif %}
-                            <h3 class="mt-0 u-break-word">
+                            <h4 class="mt-0 u-break-word">
                             {{ user.username }}
-                            </h3>
+                            </h4>
                         </a>
                         <div>
                             {% trans 'Since' %} {{ user.date_joined|date:"d M Y" }}

diff --git a/test_db.sqlite3-journal b/test_db.sqlite3-journal
diff --git a/tests/projects/test_serializer.py b/tests/projects/test_serializer.py
@@ -78,7 +78,7 @@ def test_project_serializer(project_factory,
         assert project_data[2]['participation_string'] == \
             _('running')
         assert project_data[3]['participation_string'] == \
-            _('done')
+            _('completed')
 
         assert project_data[0]['active_phase'][0] == 50
         assert '7' in project_data[0]['active_phase'][1]