Improve resources display on mobile

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-14 15:13:08 +02:00
parent 24b94d1860
commit 33838974c5
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
6 changed files with 72 additions and 23 deletions

View file

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

View file

@ -20,21 +20,30 @@
</div>
</div>
<div class="body">
<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 class="title-wrapper">
<img
class="favicon"
v-if="resource.metadata && resource.metadata.faviconUrl"
:src="resource.metadata.faviconUrl"
/>
<h3>{{ resource.title }}</h3>
</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,13 +150,29 @@ a {
vertical-align: middle;
}
.host {
display: block;
margin-top: 5px;
font-size: 13px;
.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;
white-space: nowrap;
}
}
}
}
}

View file

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

View file

@ -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,

View file

@ -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")

View file

@ -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