Make cards consistent again

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added Geopackage as default allowed file formats [#1425](https://github.com/opendatateam/udata/pull/1425)
 - Added more entrypoints and document them. There is no more automatically enabled plugin by installation. Plugins can now properly contribute translations. [#1431](https://github.com/opendatateam/udata/pull/1431)
 - Soft breaks in markdown is rendered as line return as allowed by the [commonmark specifications](http://spec.commonmark.org/0.28/#soft-line-breaks), client-side rendering follows the same security rules [#1432](https://github.com/opendatateam/udata/pull/1432)
+- Update card components to make them more consistent [#1383](https://github.com/opendatateam/udata/pull/1383)
 
 ## 1.2.11 (2018-02-05)
 

js/components/dataset/card-list.vue

@@ -65,8 +65,8 @@
     <box :title="title" icon="cubes"
         boxclass="box-solid datasets-cards-widget"
         footerclass="text-center" :footer="true" :loading="loading">
-        <div class="row" v-el:sortable>
-            <div class="col-md-6 dataset-card-container"
+        <div v-el:sortable>
+            <div class="dataset-card-container"
                 v-for="dataset in (editing ? sorted : datasets)"
                 :data-id="dataset.id"
             >

js/components/dataset/card.vue

@@ -3,70 +3,52 @@
     <a v-if="dataset.organization" class="card-logo" :href="dataset.page">
         <img :alt="dataset.organization.name" :src="logo">
     </a>
+
     <img v-if="dataset.organization && dataset.organization.public_service"
         :src="certified" alt="certified" class="certified"
         v-popover="_('The identity of this public service is certified by %(certifier)s', certifier=config.SITE_AUTHOR)"
         :popover-title="_('Certified public service')"
         popover-trigger="hover"/>
+
     <div class="card-body">
         <h4>
             <a :href="dataset.page" :title="dataset.title">
-                {{ dataset.title | truncate 80 }}
+                {{ dataset.title }}
             </a>
         </h4>
+
+        <div class="clamp-3">{{{ dataset.description | markdown 180 }}}</div>
     </div>
-    <footer>
+
+    <footer class="card__footer">
         <ul>
-            <li v-if="dataset.spatial && dataset.spatial.zones && dataset.spatial.zones.length > 0">
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top" :title="_('Territorial coverage')">
-                    <span class="fa fa-map-marker fa-fw"></span>
-                    {{ dataset.spatial.zones[0].name }}
-                </a>
+            <li v-tooltip :title="_('Resources count')">
+                <span class="fa fa-files-o fa-fw"></span>
+                {{ dataset.resources.length  }}
             </li>
-            <li v-if="dataset.metrics">
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top" :title="_('Reuses')">
-                    <span class="fa fa-retweet fa-fw"></span>
-                    {{ dataset.metrics.reuses || 0 }}
-                </a>
+            <li v-if="dataset.spatial && dataset.spatial.zones" v-tooltip :title="_('Territorial coverage')">
+                <span class="fa fa-map-marker fa-fw"></span>
+                {{ dataset.spatial.zones[0].name }}
             </li>
-            <li v-if="dataset.metrics">
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top" :title="_('Stars')">
-                    <span class="fa fa-star fa-fw"></span>
-                    {{ dataset.metrics.followers || 0 }}
-                </a>
+            <li v-if="dataset.metrics" v-tooltip :title="_('Reuses')">
+                <span class="fa fa-retweet fa-fw"></span>
+                {{ dataset.metrics.reuses || 0 }}
+            </li>
+            <li v-if="dataset.metrics" v-tooltip :title="_('Stars')">
+                <span class="fa fa-star fa-fw"></span>
+                {{ dataset.metrics.followers || 0 }}
             </li>
-        </ul>
-    </footer>
 
-    <a class="rollover fade in" :href="dataset.page"
-        :title="dataset.title">
-        {{{ dataset.description | markdown 180 }}}
-    </a>
-    <footer class="rollover fade in">
-        <ul>
             <!-- Temporal coverage -->
-            <li v-if="dataset.temporal_coverage">
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top" :title="_('Temporal coverage')">
-                    <span class="fa fa-calendar fa-fw"></span>
-                    {{ dataset.temporal_coverage | daterange }}
-                </a>
+            <li v-if="dataset.temporal_coverage" v-tooltip :title="_('Temporal coverage')">
+                <span class="fa fa-calendar fa-fw"></span>
+                {{ dataset.temporal_coverage | daterange }}
             </li>
 
             <!-- Territorial coverage -->
-            <li v-if="dataset.spatial && dataset.spatial.granularity">
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top"
-                    :title="_('Territorial coverage granularity')">
-                    <span class="fa fa-bullseye fa-fw"></span>
-                    {{ dataset | granularity_label }}
-                </a>
-            </li>
-
-            <!-- frequency -->
-            <li v-if="dataset.frequency">
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top" :title="_('Frequency')">
-                    <span class="fa fa-clock-o fa-fw"></span>
-                    {{ dataset | frequency_label }}
-                </a>
+            <li v-if="dataset.spatial && dataset.spatial.granularity" v-tooltip :title="_('Territorial coverage granularity')">
+                <span class="fa fa-bullseye fa-fw"></span>
+                {{ dataset | granularity_label }}
             </li>
         </ul>
 

js/components/organization/card.vue

@@ -4,45 +4,39 @@
     <a class="card-logo">
         <img :alt="organization.name" :src="logo">
     </a>
+
     <img v-if="organization.public_service"
         :src="certified_stamp" alt="certified" class="certified"
         v-popover="_('The identity of this public service is certified by %(certifier)s', certifier=config.SITE_AUTHOR)"
         :popover-title="_('Certified public service')"
         popover-trigger="hover"/>
+
     <div class="card-body">
         <h4>
-            <a :title="organization.name">
-                {{ organization.name | truncate 120 }}
+            <a :href="organization.page" :title="organization.name">
+                {{ organization.name }}
             </a>
         </h4>
+
+        <div class="clamp-3">{{{ organization.description | markdown 180 }}}</div>
     </div>
-    <footer>
+
+    <footer v-if="organization.metrics" class="card__footer">
         <ul>
-            <li v-if="organization.metrics">
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top" :title="_('Datasets')">
-                    <span class="fa fa-cubes fa-fw"></span>
-                    {{ organization.metrics.datasets || 0 }}
-                </a>
+            <li v-tooltip :title="_('Datasets')">
+                <span class="fa fa-cubes fa-fw"></span>
+                {{ organization.metrics.datasets || 0 }}
             </li>
-            <li v-if="organization.metrics">
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top" :title="_('Reuses')">
-                    <span class="fa fa-retweet fa-fw"></span>
-                    {{ organization.metrics.reuses || 0 }}
-                </a>
+            <li v-tooltip :title="_('Reuses')">
+                <span class="fa fa-retweet fa-fw"></span>
+                {{ organization.metrics.reuses || 0 }}
             </li>
-            <li v-if="organization.metrics">
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top" :title="_('Followers')">
-                    <span class="fa fa-star fa-fw"></span>
-                    {{ organization.metrics.followers || 0 }}
-                </a>
+            <li v-tooltip :title="_('Followers')">
+                <span class="fa fa-star fa-fw"></span>
+                {{ organization.metrics.followers || 0 }}
             </li>
         </ul>
     </footer>
-
-    <a v-if="organization.description" class="rollover fade in"
-        :title="organization.name">
-        {{{ organization.description | markdown 180 }}}
-    </a>
 </div>
 </template>
 

js/components/reuse/card-list.vue

@@ -65,8 +65,8 @@
     <box :title="title" icon="retwett"
         boxclass="box-solid reuses-cards-widget"
         footerclass="text-center" :footer="true" :loading="loading">
-        <div class="row" v-el:sortable>
-            <div class="col-md-6 reuse-card-container"
+        <div v-el:sortable>
+            <div class="reuse-card-container"
                 v-for="reuse in (editing ? sorted : reuses)"
                 :data-id="reuse.id"
             >

js/components/reuse/card.vue

@@ -9,44 +9,24 @@
                 {{ reuse.title | truncate 100 }}
             </a>
         </h4>
+
+        <div class="clamp-3">{{{ reuse.description | markdown 120 }}}</div>
     </div>
-    <footer>
-        <div class="author">
-            <a class="avatar" :href="owner_url" :title="reuse.title">
-            <img :src="owner_avatar" class="avatar" width="20" height="20"/>
-            </a>
-            <a class="user" :href="owner_url" :title="owner_name">
-            {{ owner_name }}
-            </a>
-            <span class="date">{{ reuse.created_at | dt }}</span>
-        </div>
-    </footer>
 
-    <a class="rollover fade in" :href="reuse.page"
-        :title="reuse.title">
-        {{{ reuse.description | markdown 120 }}}
-    </a>
-    <footer class="rollover fade in">
+    <footer class="card__footer">
         <ul>
-            <li>
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top" :title="_('Type')">
-                    <span class="fa fa-file fa-fw"></span>
-                    {{ reuse | reusetype }}
-                </a>
+            <li v-tooltip :title="_('Type')">
+                <span class="fa fa-file fa-fw"></span>
+                {{ reuse | reusetype }}
             </li>
-            <li>
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top"
-                    :title="_('Number of datasets used')">
-                    <span class="fa fa-cubes fa-fw"></span>
-                    {{ reuse.datasets ? reuse.datasets.length : 0 }}
-                </a>
+            <li v-tooltip :title="_('Number of datasets used')">
+                <span class="fa fa-cubes fa-fw"></span>
+                {{ reuse.datasets ? reuse.datasets.length : 0 }}
             </li>
 
-            <li>
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top" :title="_('Stars')">
-                    <span class="fa fa-star fa-fw"></span>
-                    {{ reuse.metrics ? reuse.metrics.followers || 0 : 0 }}
-                </a>
+            <li v-tooltip :title="_('Stars')">
+                <span class="fa fa-star fa-fw"></span>
+                {{ reuse.metrics ? reuse.metrics.followers || 0 : 0 }}
             </li>
         </ul>
     </footer>

js/components/user/card.vue

@@ -10,37 +10,26 @@
                 {{ user | display }}
             </a>
         </h4>
+
+        <div class="clamp-3">{{{ user.about | markdown 180 }}}</div>
     </div>
-    <footer v-if="user.metrics">
+
+    <footer v-if="user.metrics" class="card__footer">
         <ul>
-            <li>
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top"
-                    :title="_('Datasets')">
-                    <span class="fa fa-cubes fa-fw"></span>
-                    {{ user.metrics.datasets || 0 }}
-                </a>
+            <li v-tooltip :title="_('Datasets')">
+                <span class="fa fa-cubes fa-fw"></span>
+                {{ user.metrics.datasets || 0 }}
             </li>
-            <li>
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top"
-                    :title="_('Reuses')">
-                    <span class="fa fa-retweet fa-fw"></span>
-                    {{ user.metrics.reuses || 0 }}
-                </a>
+            <li v-tooltip :title="_('Reuses')">
+                <span class="fa fa-retweet fa-fw"></span>
+                {{ user.metrics.reuses || 0 }}
             </li>
-            <li>
-                <a class="btn btn-xs" v-tooltip tooltip-placement="top"
-                    :title="_('Followers')">
-                    <span class="fa fa-star fa-fw"></span>
-                    {{ user.metrics.followers || 0 }}
-                </a>
+            <li v-tooltip :title="_('Followers')">
+                <span class="fa fa-star fa-fw"></span>
+                {{ user.metrics.followers || 0 }}
             </li>
         </ul>
     </footer>
-
-    <a v-if="user.about" class="rollover fade in"
-        :title="user | display">
-        {{{ user.about | markdown 180 }}}
-    </a>
 </div>
 </template>
 

js/components/widgets/publish-as.vue

@@ -7,7 +7,7 @@
 </div>
 <div class="row" v-if="$root.me.organizations && $root.me.organizations.length">
     <p class="col-xs-12">{{ _('Publish as an organization') }}</p>
-    <div v-for="organization in $root.me.organizations" class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
+    <div v-for="organization in $root.me.organizations" class="col-xs-12 col-sm-6 col-lg-4">
         <org-card :organization="organization" :selected="selected == organization"></org-card>
     </div>
 </div>
@@ -24,15 +24,15 @@
 </div>
 <div class="row">
     <p class="col-xs-12">{{ _('Publish in your own name') }}</p>
-    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
+    <div class="col-xs-12 col-sm-6 col-lg-4">
         <user-card :user="$root.me" :selected="!selected"></user-card>
     </div>
 </div>
 <div class="row" v-if="$root.me.is_admin">
     <p class="col-xs-12 text-center lead">
        {{ _('As administrator you can choose any organization to publish') }}
     </p>
-    <org-filter cardclass="col-xs-12 col-sm-6 col-md-4 col-lg-3" :selected="selected"></org-filter>
+    <org-filter cardclass="col-xs-12 col-sm-6 col-lg-4" :selected="selected"></org-filter>
 </div>
 </div>
 </template>

js/views/reuse.vue

@@ -10,9 +10,9 @@
     </div>
     <div class="row">
         <reuse-details :reuse="reuse" class="col-xs-12 col-md-6"></reuse-details>
-        <dataset-cards id="datasets-list" :datasets="reuse.datasets"
+        <dataset-card-list id="datasets-list" :datasets="reuse.datasets"
             class="col-xs-12 col-md-6">
-        </dataset-cards>
+        </dataset-card-list>
     </div>
 
     <div class="row">
@@ -35,6 +35,7 @@
 <script>
 import moment from 'moment';
 import Reuse from 'models/reuse';
+import Dataset from 'models/dataset';
 import Followers from 'models/followers';
 import Metrics from 'models/metrics';
 import Vue from 'vue';
@@ -43,22 +44,31 @@ import Discussions from 'models/discussions';
 import mask from 'models/mask';
 // Widgets
 import Chart from 'components/charts/widget.vue';
-import DatasetCards from 'components/dataset/card-list.vue';
+import DatasetCardList from 'components/dataset/card-list.vue';
 import DiscussionList from 'components/discussions/list.vue';
 import FollowerList from 'components/follow/list.vue';
 import IssueList from 'components/issues/list.vue';
 import Layout from 'components/layout.vue';
 import ReuseDetails from 'components/reuse/details.vue';
 import SmallBox from 'components/containers/small-box.vue';
 
-const MASK = `datasets{${mask(DatasetCards.MASK)}},*`;
+const MASK = `datasets{${mask(DatasetCardList.MASK)}},*`;
 
 export default {
     name: 'reuse-view',
-    components: {SmallBox, Chart, ReuseDetails, FollowerList, DiscussionList, IssueList, DatasetCards, Layout},
+    components: {
+        SmallBox,
+        Chart,
+        ReuseDetails,
+        FollowerList,
+        DiscussionList,
+        IssueList,
+        DatasetCardList,
+        Layout
+    },
     data() {
         return {
-            reuse: new Reuse({mask: MASK}),
+            reuse: new Reuse({mask: MASK}), 
             metrics: new Metrics({query: {
                 start: moment().subtract(15, 'days').format('YYYY-MM-DD'),
                 end: moment().format('YYYY-MM-DD')