Fix responsiveness (#2199)

* fix not-responsive blog pagination * consistent card size * fix reuses card size on dataset page
opendatateam · Jun 12, 2019 · 065bafc · 065bafc
1 parent 7925056
commit 065bafc
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Add cache for organization and topic display pages [#2194](https://github.com/opendatateam/udata/pull/2194)
 - Dataset of datasets: id as ref instead of slug [#2195](https://github.com/opendatateam/udata/pull/2195) :warning: this introduces some settings changes, cf [documentation for EXPORT_CSV](https://github.com/opendatateam/udata/blob/master/docs/adapting-settings.md).
 - Add meta og:type: make twitter cards work [#2196](https://github.com/opendatateam/udata/pull/2196)
+- Fix UI responsiveness [#2199](https://github.com/opendatateam/udata/pull/2199)
 
 ## 1.6.11 (2019-05-29)
 

diff --git a/udata/templates/dataset/display.html b/udata/templates/dataset/display.html
@@ -440,12 +440,12 @@ <h3 id="community-reuses">{{ _('Reuses') }}</h3>
                 <div class="card-list card-list--columned">
                     {% for reuse in reuses %}
                     {% set features = ['preview'] %}
-                    <div class="col-sm-6">
+                    <div class="col-md-4 col-sm-6 col-xs-12">
                         {% include theme('reuse/card.html') %}
                     </div>
                     {% endfor %}
 
-                    <div class="col-sm-6">
+                    <div class="col-md-4 col-sm-6 col-xs-12">
                          {% include theme('dataset/add-reuse-card.html') %}
 					</div>
 

diff --git a/udata/templates/organization/display.html b/udata/templates/organization/display.html
@@ -66,7 +66,7 @@ <h1>
         <ul class="card-list card-list--columned">
 
             {% for dataset in datasets %}
-            <li class="col-sm-6">
+            <li class="col-md-4 col-sm-6 col-xs-12">
                 {% include theme('dataset/card.html') %}
             </li>
             {% endfor %}
@@ -123,7 +123,7 @@ <h1>
         <ul class="card-list card-list--columned">
 
             {% for reuse in reuses %}
-            <li class="col-md-4 col-sm-6">
+            <li class="col-md-4 col-sm-6 col-xs-12">
                 {% include theme('reuse/card.html') %}
             </li>
             {% endfor %}
@@ -147,7 +147,7 @@ <h1>
     <tab id="members" header="{{ ngettext('%(num)d member', '%(num)d members', org.members | length) }}">
         <div class="card-list card-list--columned">
             {% for member in org.members %}
-            <div class="col-md-4">
+            <div class="col-md-4 col-sm-6 col-xs-12">
                 {% include theme('organization/member-card.html') %}
             </div>
             {% endfor %}
@@ -159,7 +159,7 @@ <h1>
     <tab id="followers" header="{{ ngettext('%(num)d follower', '%(num)d followers', followers | length) }}">
         <div class="card-list card-list--columned">
             {% for follow in followers %}
-            <div class="col-md-4" {% if loop.index > 15 %}:class="{hidden: !followersVisible}"{% endif %}">
+            <div class="col-md-4 col-sm-6 col-xs-12" {% if loop.index > 15 %}:class="{hidden: !followersVisible}"{% endif %}">
                 {% include theme('follow/follower-card.html') %}
             </div>
             {% endfor %}

diff --git a/udata/templates/post/display.html b/udata/templates/post/display.html
@@ -164,24 +164,24 @@ <h3>{{ ngettext('Associated dataset', 'Associated datasets', post.datasets|lengt
 <section class="content nav-section">
     <div class="container">
         <div class="row">
-            <div class="col-sm-4">
+            <div class="col-xs-2 col-sm-4">
                 {% if previous_post %}
                 <a href="{{ previous_post.display_url }}" title="{{ _('Previous post') }}" class="btn btn-primary">
                     <span class="fa fa-chevron-left"></span>
-                    {{ _('Previous post') }}
+                    <span class="hidden-xs">{{ _('Previous post') }}</span>
                 </a>
                 {% endif %}
             </div>
-            <div class="col-sm-4 text-center">
+            <div class="col-xs-8 col-sm-4 text-center">
                 <a href="{{ url_for('posts.list') }}" class="btn btn-primary">
                     <span class="fa fa-fw fa-list"></span>
                     {{ _('All posts') }}
                 </a>
             </div>
-            <div class="col-sm-4 text-right">
+            <div class="col-xs-2 col-sm-4 text-right">
                 {% if next_post %}
                 <a href="{{ next_post.display_url }}" title="{{ _('Next post') }}" class="btn btn-primary">
-                    {{ _('Next post') }}
+                    <span class="hidden-xs">{{ _('Next post') }}</span>
                     <span class="fa fa-chevron-right"></span>
                 </a>
                 {% endif %}