Notebook entry tweaks for #4954 (#5036)

* Notebook entry tweaks for #4954
- Standardized entry layout;
- Colors, styles and padding refinements for entry elements;

Co-authored-by: Andrew Henry <andrew.k.henry@nasa.gov>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
This commit is contained in:
Charles Hacskaylo 2022-05-18 12:08:15 -07:00 committed by GitHub
parent 95299336d0
commit 1cdbb34e21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 17 deletions

View File

@ -28,12 +28,16 @@
@drop.prevent="dropOnEntry"
>
<div class="c-ne__time-and-content">
<div class="c-ne__time">
<template v-if="entry.createdBy">
<span class="c-icon icon-person">{{ entry.createdBy }}</span>
</template>
<span>{{ createdOnDate }}</span>
<span>{{ createdOnTime }}</span>
<div class="c-ne__time-and-creator">
<span class="c-ne__created-date">{{ createdOnDate }}</span>
<span class="c-ne__created-time">{{ createdOnTime }}</span>
<span
v-if="entry.createdBy"
class="c-ne__creator"
>
<span class="icon-person"></span> {{ entry.createdBy }}
</span>
</div>
<div class="c-ne__content">
<template v-if="readOnly && result">

View File

@ -243,29 +243,40 @@
display: flex;
padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
&__time,
&__text,
&__local-controls {
padding-top: $p;
padding-bottom: $p;
}
&__time,
&__creator,
&__embed__time {
opacity: 0.7;
}
&__time-and-creator,
&__input {
padding: $p;
}
&__creator [class*='icon'] {
font-size: 0.95em;
}
&__time-and-content {
display: flex;
display: block;
flex: 1 1 auto;
flex-wrap: wrap;
> * + * {
margin-top: $interiorMarginSm;
}
[class*='created-'] {
color: pullForward($colorBodyFg, 20%);
}
}
&__time {
flex: 0 1 auto;
min-width: 130px;
margin-right: $interiorMarginLg;
* {
white-space: nowrap;
}
@ -294,12 +305,12 @@
&__input {
// Appended to __text element when Notebook is not in readOnly mode
@include inlineInput;
padding-left: $inputTextPLeftRight;
padding-right: $inputTextPLeftRight;
padding-left: $p;
padding-right: $p;
@include hover {
&:not(:focus) {
background: rgba($colorBodyFg, 0.1);
background: rgba($colorBodyFg, 0.2);
}
}