Add some flex magic

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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

@@ -175,30 +175,63 @@ a.original:not(.waves-effect) {
 }
 
 .card-stacked {
-  &:hover ul.tools-list {
-    display: block;
-  }
+  display: flex;
+  flex-flow: row wrap;
 
-  ul.tools-list {
-    display: none;
+  &:hover ul.tools-list {
+    display: inline;
+    text-align: right;
   }
 
   .preview {
-    float: left;
-    width: 90px;
-    height: 50px;
+    max-width: 100px;
+    height: auto;
+    margin-right: 10px;
+    flex: 1;
 
     img {
-      max-height: 50px;
-      padding-right: 10px;
-      width: 80px;
+      max-width: 100%;
+      max-height: 100%;
     }
   }
 
-  .domain,
-  .footer {
-    font-size: 12px;
+  div.metadata {
+    .chip {
+      background-color: $blueAccentColor;
+      padding: 0 15px 0 10px;
+      margin: auto 2px;
+
+      a,
+      i {
+        color: #fff;
+      }
+
+      i.material-icons {
+        float: right;
+        font-size: 20px;
+        line-height: 32px;
+        padding-left: 8px;
+      }
+    }
   }
+
+  div.card-content {
+    flex: 4;
+  }
+
+  ul.tools-list {
+    flex: 1;
+    display: none;
+    flex-basis: 5em;
+    align-self: flex-end;
+    float: right;
+    max-width: 6em;
+  }
+}
+
+#content .collection .collection-item {
+  min-height: 65px;
+  height: auto;
 }
 
 .quickstart .card .card-action a,

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

@@ -30,23 +30,3 @@ nav .input-field input {
 .tab {
   flex: 1;
 }
-
-.chip {
-  margin: auto 0;
-  border-radius: 4px;
-  background-color: #eee;
-  font-weight: normal;
-  height: 20px;
-  line-height: normal;
-
-  a {
-    color: #9e9e9e;
-  }
-
-  i.material-icons {
-    float: right;
-    font-size: 16px;
-    line-height: 32px;
-    padding-left: 8px;
-  }
-}

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

@@ -1,30 +1,28 @@
 <div class="card-stacked">
+    <div class="preview">{% if entry.previewPicture is not null %}<img src="{{ entry.previewPicture }}" />{% endif %}</div>
     <div class="card-content">
-        <div class="preview"><img src="{{ entry.previewPicture }}" /></div>
         <span class="card-title dot-ellipsis dot-resize-update">
             <a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title | striptags | e('html_attr') }}">
                 {{ entry.title| striptags | truncate(120, true, '…') | raw }}
             </a>
+        </span>
+
+        <div class="metadata">
             <a href="{{ entry.url|e }}" class="grey-text domain" target="_blank" title="{{ entry.domainName|removeWww }}">
                 <span>{{ entry.domainName|removeWww }}</span>
             </a>
-        </span>
-
-        <div class="footer">
-        {% for tag in entry.tags | slice(0, 3) %}
-            <span class="chip hide-on-med-and-down">
-                <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
-            </span>
-        {% endfor %}
-
-        <ul class="tools-list right">
-            <li>
-                <a title="{{ 'entry.list.toogle_as_read'|trans }}" class="tool grey-text" href="{{ path('archive_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isArchived == 0 %}done{% else %}redo{% endif %}</i></a>
-                <a title="{{ 'entry.list.toogle_as_star'|trans }}" class="tool grey-text" href="{{ path('star_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isStarred == 0 %}star_border{% else %}star{% endif %}</i></a>
-                <a title="{{ 'entry.list.delete'|trans }}" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" class="tool grey-text delete" href="{{ path('delete_entry', { 'id': entry.id }) }}"><i class="material-icons">delete</i></a>
-            </li>
-        </ul>
-
+            {% for tag in entry.tags | slice(0, 3) %}
+                <span class="chip hide-on-med-and-down">
+                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
+                </span>
+            {% endfor %}
         </div>
     </div>
+    <ul class="tools-list hide-on-small-only">
+        <li>
+            <a title="{{ 'entry.list.toogle_as_read'|trans }}" class="tool grey-text" href="{{ path('archive_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isArchived == 0 %}done{% else %}redo{% endif %}</i></a>
+            <a title="{{ 'entry.list.toogle_as_star'|trans }}" class="tool grey-text" href="{{ path('star_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isStarred == 0 %}star_border{% else %}star{% endif %}</i></a>
+            <a title="{{ 'entry.list.delete'|trans }}" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" class="tool grey-text delete" href="{{ path('delete_entry', { 'id': entry.id }) }}"><i class="material-icons">delete</i></a>
+        </li>
+    </ul>
 </div>