scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-20 03:54:34 +08:00
Code Issues Projects Releases Packages Wiki Activity

CSS: Protocol template - Details [SCI-8108] (#5131)

Browse source 
* Fix spacing issue in protocol details [SCI-8108]

* Fix spacing issue in protocol datatable [SCI-8108]

* Match the styles of the authors and the keywords to figma [SCI-8108]

* Fix broken dropdown footer [SCI-8108]

* Fix hound [SCI-8108]
This commit is contained in:
Soufiane 2023-03-14 12:54:13 +01:00 • committed by GitHub
parent ef596a5579
commit 7b93ced541
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/assets/stylesheets/my_modules/protocols/index.scss
View file

@ -426,10 +426,10 @@
left: -125px;
max-width: 100vw;
width: 506px;
padding: 15px 0;
padding: 0;
.dropdown-content {
padding: 24px;
padding: 12px 24px;
}
.dropdown-header,
@ -489,16 +489,19 @@
}
}
}
}
.dropdown-footer {
border-top: $border-tertiary;
.notification-line {
@include font-button;
color: $color-silver-chalice;
display: flex;
margin: 8px 0;
.fas {
line-height: 21px;
margin-right: 3px;
margin-right: 11px;
}
&.new-parent-version {
@ -510,10 +513,6 @@
}
}
}
.dropdown-footer {
border-top: $border-tertiary;
}
}
}

10
app/assets/stylesheets/protocols/index.scss
View file

@ -20,6 +20,14 @@
width: 100%;
tbody {
td {
vertical-align: middle;
}
td:first-child {
padding-top: 4px;
}
td:not(:first-child) {
max-width: 30rem;
overflow: hidden;
@ -78,7 +86,7 @@
}
td:not(:first-child) {
padding: 14px 8px;
padding: 12px 8px;
}
}

20
app/assets/stylesheets/protocols/protocol.scss
View file

@ -96,12 +96,17 @@
padding-left: 20px;
}
}
.protocol-details {
.protocol-metadata {
margin-bottom: 2em;
.data-block {
margin-bottom: 16px;
> :nth-child(2) {
margin-left: 8px;
}
}
.authors-data {
@ -113,12 +118,18 @@
flex-basis: calc(100% - 90px);
flex-grow: 1;
line-height: 32px;
margin-left: .75em;
margin-left: 8px;
font-weight: bold;
}
* {
flex-shrink: 0;
}
.sci-inline-edit__view,
textarea {
padding-left: 10px;
}
}
.keywords-data {
@ -133,6 +144,11 @@
.dropdown-selector-container {
padding-right: 10px;
margin-left: 0;
.input-field {
margin-left: 0;
}
&:not(.active) {
.input-field {
@ -146,7 +162,7 @@
&.active {
.input-field {
border: 1px solid $color-alto;
border: 1px solid $brand-focus;
}
}
}

8
app/javascript/vue/protocol/protocolMetadata.vue
View file

@ -24,19 +24,19 @@
<div id="details-container" class="protocol-details collapse in">
<div class="protocol-metadata">
<p class="data-block">
{{ i18n.t("protocols.header.version") }}
<span>{{ i18n.t("protocols.header.version") }}</span>
<b>{{ protocol.attributes.version }}</b>
</p>
<p class="data-block">
{{ i18n.t("protocols.header.updated_at") }}
<span>{{ i18n.t("protocols.header.updated_at") }}</span>
<b>{{ protocol.attributes.updated_at_formatted }}</b>
</p>
<p class="data-block">
{{ i18n.t("protocols.header.created_at") }}
<span>{{ i18n.t("protocols.header.created_at") }}</span>
<b>{{ protocol.attributes.created_at_formatted }}</b>
</p>
<p class="data-block">
{{ i18n.t("protocols.header.added_by") }}
<span>{{ i18n.t("protocols.header.added_by") }}</span>
<img :src="protocol.attributes.added_by.avatar"/>
{{ protocol.attributes.added_by.name }}
</p>