Improve resources display on mobile

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

js/src/components/Resource/FolderItem.vue

@@ -162,7 +162,7 @@ a {
   }
 
   .body {
-    padding: 10px 8px 8px;
+    padding: 8px;
     flex: 1 1 auto;
     overflow: hidden;
 

js/src/components/Resource/ResourceItem.vue

@@ -20,21 +20,30 @@
         </div>
       </div>
       <div class="body">
+        <div class="title-wrapper">
           <img
             class="favicon"
             v-if="resource.metadata && resource.metadata.faviconUrl"
             :src="resource.metadata.faviconUrl"
           />
           <h3>{{ resource.title }}</h3>
-        <span class="host" v-if="inline">{{
-          resource.updatedAt | formatDateTimeString
-        }}</span>
-        <span class="host" v-else>{{ urlHostname }}</span>
+        </div>
+        <div class="metadata-wrapper">
+          <span class="host" v-if="!inline || preview">{{ urlHostname }}</span>
+          <span
+            class="published-at is-hidden-mobile"
+            v-if="resource.updatedAt || resource.publishedAt"
+            >{{
+              (resource.updatedAt || resource.publishedAt)
+                | formatDateTimeString
+            }}</span
+          >
+        </div>
       </div>
     </a>
     <resource-dropdown
       class="actions"
-      v-if="!inline"
+      v-if="!inline || !preview"
       @delete="$emit('delete', resource.id)"
       @move="$emit('move', resource)"
       @rename="$emit('rename', resource)"
@@ -53,6 +62,7 @@ export default class ResourceItem extends Vue {
   @Prop({ required: true, type: Object }) resource!: IResource;
 
   @Prop({ required: false, default: false }) inline!: boolean;
+  @Prop({ required: false, default: false }) preview!: boolean;
 
   list = [];
 
@@ -74,11 +84,12 @@ export default class ResourceItem extends Vue {
   display: flex;
   flex: 1;
   align-items: center;
+  width: 100%;
 
   .actions {
     flex: 0;
     display: block;
-    margin: auto 1rem auto 2rem;
+    margin: auto 1rem;
     cursor: pointer;
   }
 }
@@ -111,10 +122,15 @@ a {
   }
 
   .body {
-    padding: 10px 8px 8px;
+    padding: 8px;
     flex: 1 1 auto;
     overflow: hidden;
 
+    .title-wrapper {
+      display: flex;
+      max-width: calc(100vw - 122px);
+    }
+
     img.favicon {
       display: inline-block;
       width: 16px;
@@ -134,9 +150,23 @@ a {
       vertical-align: middle;
     }
 
-    .host {
-      display: block;
-      margin-top: 5px;
+    .metadata-wrapper {
+      max-width: calc(100vw - 122px);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      span {
+        &:last-child::before {
+          content: "⋅";
+          padding: 0 5px;
+        }
+        &:first-child::before {
+          content: "";
+          padding: initial;
+        }
+
+        &.host,
+        &.published-at {
           font-size: 13px;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -144,4 +174,6 @@ a {
         }
       }
     }
+  }
+}
 </style>

js/src/graphql/resources.ts

@@ -58,6 +58,9 @@ export const GET_RESOURCE = gql`
             path
             type
           }
+          publishedAt
+          updatedAt
+          insertedAt
           metadata {
             ...ResourceMetadataBasicFields
           }

js/src/views/Resources/ResourceFolder.vue

@@ -198,7 +198,11 @@
         </section>
       </div>
     </b-modal>
-    <b-modal :active.sync="createLinkResourceModal" has-modal-card>
+    <b-modal
+      :active.sync="createLinkResourceModal"
+      has-modal-card
+      class="link-resource-modal"
+    >
       <div class="modal-card">
         <section class="modal-card-body">
           <b-message type="is-danger" v-if="modalError">
@@ -215,7 +219,7 @@
             </b-field>
 
             <div class="new-resource-preview" v-if="newResource.title">
-              <resource-item :resource="newResource" />
+              <resource-item :resource="newResource" :preview="true" />
             </div>
 
             <b-field :label="$t('Title')">
@@ -737,6 +741,10 @@ nav.breadcrumb ul {
     display: flex;
     align-items: center;
 
+    ::v-deep .b-checkbox.checkbox {
+      margin-left: 10px;
+    }
+
     .actions {
       margin-right: 5px;
 
@@ -755,11 +763,16 @@ nav.breadcrumb ul {
   border-radius: 4px;
   color: #444b5d;
   margin-top: 14px;
+  margin-bottom: 14px;
 
   .resource-checkbox {
     align-self: center;
-    padding: 0 3px 0 10px;
+    padding-left: 10px;
     opacity: 0.3;
+
+    ::v-deep .b-checkbox.checkbox {
+      margin-right: 0.25rem;
+    }
   }
 
   &:hover .resource-checkbox,

lib/graphql/schema/resource.ex

@@ -20,6 +20,7 @@ defmodule Mobilizon.GraphQL.Schema.ResourceType do
     field(:actor, :actor, description: "The resource's owner")
     field(:inserted_at, :naive_datetime, description: "The resource's creation date")
     field(:updated_at, :naive_datetime, description: "The resource's last update date")
+    field(:published_at, :naive_datetime, description: "The resource's publication date")
     field(:type, :string, description: "The resource's type (if it's a folder)")
     field(:path, :string, description: "The resource's path")
 

lib/mobilizon/resources/resources.ex

@@ -47,7 +47,7 @@ defmodule Mobilizon.Resources do
       ) do
     Resource
     |> where([r], r.actor_id == ^group_id and is_nil(r.parent_id))
-    |> order_by(asc: :type)
+    |> order_by(asc: :type, asc: :title)
     |> preload([r], [:actor, :creator])
     |> Page.build_page(page, limit)
   end
@@ -55,7 +55,7 @@ defmodule Mobilizon.Resources do
   def get_resources_for_folder(%Resource{id: resource_id}, page, limit) do
     Resource
     |> where([r], r.parent_id == ^resource_id)
-    |> order_by(asc: :type)
+    |> order_by(asc: :type, asc: :title)
     |> preload([r], [:actor, :creator])
     |> Page.build_page(page, limit)
   end