Fix protocol template alignment and placeholders [SCI-6981] (#4253)

* Fix protocol template alignment and placeholders [SCI-6981]

* Add placeholder text [SCI-6981]
This commit is contained in:
ajugo 2022-07-15 10:00:50 +02:00 committed by GitHub
parent 045d254d3c
commit c85612ee4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 6 deletions

View file

@ -64,6 +64,21 @@
.protocol-description {
margin-bottom: 2em;
img {
border-radius: 50%;
height: 24px;
width: 24px;
}
.fas.block-icon {
margin-right: 6px;
&.fa-graduation-cap,
&.fa-font {
margin-right: 10px;
}
}
}
.protocol-step-actions {

View file

@ -1,28 +1,28 @@
<template>
<div class="protocol-metadata">
<p class="data-block">
<span class="fas block-icon fa-calendar-alt"></span>
<span class="fas block-icon fa-calendar-alt fa-fw"></span>
{{ i18n.t("protocols.header.created_at") }}
<b>{{ protocol.attributes.created_at_formatted }}</b>
</p>
<p class="data-block">
<span class="fas block-icon fa-user"></span>
<span class="fas block-icon fa-user fa-fw"></span>
{{ i18n.t("protocols.header.added_by") }}
<img :src="protocol.attributes.added_by.avatar"/>
{{ protocol.attributes.added_by.name }}
</p>
<p class="data-block">
<span class="fas block-icon fa-edit"></span>
<span class="fas block-icon fa-edit fa-fw"></span>
{{ i18n.t("protocols.header.updated_at") }}
<b>{{ protocol.attributes.updated_at_formatted }}</b>
</p>
<p class="data-block authors-data">
<span class="fas block-icon fa-graduation-cap"></span>
<span class="fas block-icon fa-graduation-cap fa-fw"></span>
<span>{{ i18n.t("protocols.header.authors") }}</span>
<span class="authors-list" v-if="protocol.attributes.urls.update_protocol_authors_url">
<InlineEdit
:value="protocol.attributes.authors"
:placeholder="i18n.t('protocols.header.no_authors')"
:placeholder="i18n.t('protocols.header.add_authors')"
:allowBlank="true"
:attributeName="`${i18n.t('Protocol')} ${i18n.t('authors')}`"
@update="updateAuthors"
@ -33,12 +33,13 @@
</span>
</p>
<p class="data-block keywords-data">
<span class="fas block-icon fa-font"></span>
<span class="fas block-icon fa-font fa-fw"></span>
<span>{{ i18n.t("protocols.header.keywords") }}</span>
<span class="keywords-list">
<DropdownSelector
:inputTagMode="true"
:options="this.protocol.attributes.keywords"
:placeholder="i18n.t('protocols.header.add_keywords')"
:selectorId="'keywordsSelector'"
:singleSelect="false"
:closeOnSelect="false"

View file

@ -2372,6 +2372,8 @@ en:
keywords: "Keywords:"
authors: "Authors:"
no_authors: "No authors"
add_authors: "+ Add authors"
add_keywords: "+ Add keywords"
description: "Description"
no_description: "No description"
keywords_modal: "Input one or multiple keywords, confirm each keyword with ENTER key"