Merge pull request #3894 from wallabag/issue-3851

material: hide creation date from card actions on specific sizes

app/Resources/static/themes/material/css/cards.scss

@@ -102,6 +102,11 @@ main {
       display: inline-flex;
       vertical-align: middle;
 
+      .card-reading-time,
+      .card-created-at {
+        display: inline-flex;
+      }
+
       span {
         margin-right: 5px;
       }

app/Resources/static/themes/material/css/media_queries.scss

@@ -174,3 +174,12 @@
     padding: 0;
   }
 }
+
+@media screen and (max-width: 310px),
+  screen and (min-width: 601px) and (max-width: 660px),
+  screen and (min-width: 993px) and (max-width: 1050px),
+  screen and (min-width: 1201px) and (max-width: 1250px) {
+  .card .card-action .reading-time .card-created-at {
+    display: none;
+  }
+}

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_actions.html.twig

@@ -1,9 +1,11 @@
 <div class="card-action">
-    <span class="reading-time grey-text">
-        {% include "@WallabagCore/themes/material/Entry/_reading_time.html.twig" with {'entry': entry} only %}
-        <i class="material-icons hide-on-med-and-down" title="{{ 'entry.view.created_at'|trans }}">today</i>
-        <span class="hide-on-med-and-down">&nbsp;{{ entry.createdAt|date('Y-m-d') }}</span>
-    </span>
+    <div class="reading-time grey-text">
+        <div class="card-reading-time">{% include "@WallabagCore/themes/material/Entry/_reading_time.html.twig" with {'entry': entry} only %}</div>
+        <div class="card-created-at">
+            <i class="material-icons" title="{{ 'entry.view.created_at'|trans }}">today</i>
+            <span>&nbsp;{{ entry.createdAt|date('Y-m-d') }}</span>
+        </div>
+    </div>
 
     <ul class="tools right">
         <li>