forked from potsda.mn/mobilizon
Improve resources display on mobile
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
24b94d1860
commit
33838974c5
|
@ -162,7 +162,7 @@ a {
|
|||
}
|
||||
|
||||
.body {
|
||||
padding: 10px 8px 8px;
|
||||
padding: 8px;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -58,6 +58,9 @@ export const GET_RESOURCE = gql`
|
|||
path
|
||||
type
|
||||
}
|
||||
publishedAt
|
||||
updatedAt
|
||||
insertedAt
|
||||
metadata {
|
||||
...ResourceMetadataBasicFields
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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")
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue