MOBILE-4470 blog: Improve styles
parent
829cb8bc9b
commit
f16c405115
|
@ -41,19 +41,17 @@
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
@if (entry.userid === currentUserId && optionsAvailable) {
|
@if (entry.userid === currentUserId && optionsAvailable) {
|
||||||
<div class="core-button-spinner">
|
<ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate"
|
||||||
<ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate"
|
(click)="showEntryActionsPopover($event, entry)" class="entry-options">
|
||||||
(click)="showEntryActionsPopover($event, entry)">
|
<ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
|
||||||
<ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
|
</ion-button>
|
||||||
</ion-button>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="entry-creation-info flex ion-align-items-center">
|
<div class="entry-creation-info flex ion-align-items-center">
|
||||||
<span>
|
<div class="entry-avatar">
|
||||||
<core-user-avatar [user]="entry.user" [courseId]="entry.courseid" />
|
<core-user-avatar [user]="entry.user" [courseId]="entry.courseid" />
|
||||||
</span>
|
</div>
|
||||||
|
|
||||||
@if (entry.user?.fullname && entry.created) {
|
@if (entry.user?.fullname && entry.created) {
|
||||||
<span [innerHTML]="'core.bynameondate' | translate: {
|
<span [innerHTML]="'core.bynameondate' | translate: {
|
||||||
|
@ -64,15 +62,14 @@
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="entry-summary" [collapsible-item]="64">
|
||||||
<div class="entry-summary" [ngClass]="{ 'border-bottom': entry.lastmodified <= entry.created }" [collapsible-item]="64">
|
|
||||||
<div class="ion-margin-bottom">
|
<div class="ion-margin-bottom">
|
||||||
<core-format-text [text]="entry.summary" [component]="component" [componentId]="entry.id" [contextLevel]="contextLevel"
|
<core-format-text [text]="entry.summary" [component]="component" [componentId]="entry.id" [contextLevel]="contextLevel"
|
||||||
[contextInstanceId]="contextInstanceId" [courseId]="entry.courseid" />
|
[contextInstanceId]="contextInstanceId" [courseId]="entry.courseid" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (tagsEnabled && entry.tags && entry.tags!.length > 0) {
|
@if (tagsEnabled && entry.tags && entry.tags!.length > 0) {
|
||||||
<ion-item class="ion-text-wrap">
|
<ion-item class="ion-text-wrap" lines="none">
|
||||||
<ion-label>
|
<ion-label>
|
||||||
<div slot="start">{{ 'core.tag.tags' | translate }}:</div>
|
<div slot="start">{{ 'core.tag.tags' | translate }}:</div>
|
||||||
<core-tag-list [tags]="entry.tags" />
|
<core-tag-list [tags]="entry.tags" />
|
||||||
|
@ -85,15 +82,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@if (entry.uniquehash) {
|
@if (entry.uniquehash) {
|
||||||
<ion-item [href]="entry.uniquehash" core-link [detail]="true">
|
<ion-item [href]="entry.uniquehash" core-link [detail]="true" lines="none">
|
||||||
<ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
|
<ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
}
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (entry.lastmodified > entry.created || (entry.userid === currentUserId && entry.publishstate !== 'draft')) {
|
@if (entry.lastmodified > entry.created || (entry.userid === currentUserId && entry.publishstate !== 'draft')) {
|
||||||
<ion-item class="entry-last-modification">
|
<ion-item class="entry-last-modification" lines="none">
|
||||||
@if (entry.lastmodified > entry.created) {
|
@if (entry.lastmodified > entry.created) {
|
||||||
<ion-note class="flex ion-align-items-center" slot="start">
|
<ion-note class="flex ion-align-items-center" slot="start">
|
||||||
<ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" />
|
<ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" />
|
||||||
|
|
|
@ -1,87 +1,68 @@
|
||||||
@use "theme/globals" as *;
|
@use "theme/globals" as *;
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
|
|
||||||
ion-card {
|
|
||||||
padding: .5rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry {
|
.entry {
|
||||||
border-bottom: 1px solid var(--stroke);
|
border-bottom: 1px solid var(--stroke);
|
||||||
|
|
||||||
&-visibility-permission {
|
&-visibility-permission {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 0.875rem;
|
font: var(-mdl-typography-label-font-lg);
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
ion-icon {
|
ion-icon {
|
||||||
margin-right: .3rem;
|
@include margin-horizontal(null, .3rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-draft {
|
&-draft {
|
||||||
margin-left: .3rem;
|
@include margin-horizontal(.3rem, null);
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-subject {
|
&-subject {
|
||||||
core-format-text {
|
core-format-text {
|
||||||
font-size: 1.25rem;
|
font: var(--mdl-typography-heading4-font);
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::part(native) {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-creation-info {
|
&-creation-info {
|
||||||
|
.entry-avatar {
|
||||||
|
@include margin(.6rem, .6rem, .6rem, 0px);
|
||||||
|
}
|
||||||
|
|
||||||
core-user-avatar {
|
core-user-avatar {
|
||||||
--userpicture-padding: .6rem;
|
--core-avatar-size: 24px;
|
||||||
margin-left: -.5rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-last-modification {
|
&-last-modification {
|
||||||
--border-width: 0 0 1px 0;
|
--padding-end: 0px;
|
||||||
|
--padding-start: 0px;
|
||||||
&::part(native) {
|
--padding-top: 0px;
|
||||||
padding: 0;
|
--padding-bottom: 0px;
|
||||||
}
|
|
||||||
|
|
||||||
ion-note {
|
ion-note {
|
||||||
padding-top: 0.9rem;
|
padding-top: 0.9rem;
|
||||||
font-size: 0.875rem;
|
font: var(-mdl-typography-label-font-lg);
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-icon {
|
ion-icon {
|
||||||
margin-right: .3rem;
|
@include margin-horizontal(null, .3rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-button-spinner {
|
ion-button.entry-options {
|
||||||
margin-right: -.5rem;
|
--padding-end: 0px;
|
||||||
align-self: start;
|
--padding-start: 0px;
|
||||||
|
--padding-top: 0px;
|
||||||
ion-button::part(native) {
|
--padding-bottom: 0px;
|
||||||
--padding-end: 0;
|
|
||||||
--padding-start: 0;
|
|
||||||
--padding-left: 0;
|
|
||||||
--padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
core-comments ::ng-deep {
|
core-comments ::ng-deep ion-item {
|
||||||
&::part(native) {
|
--inner-border-width: 1px 0px 0px 0px;
|
||||||
--padding-start: 0;
|
--padding-start: 0px;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-bottom {
|
|
||||||
border-bottom: 1px solid var(--stroke);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,6 +16,8 @@
|
||||||
height: var(--core-avatar-size);
|
height: var(--core-avatar-size);
|
||||||
max-width: var(--core-avatar-size);
|
max-width: var(--core-avatar-size);
|
||||||
max-height: var(--core-avatar-size);
|
max-height: var(--core-avatar-size);
|
||||||
|
min-width: var(--core-avatar-size);
|
||||||
|
min-height: var(--core-avatar-size);
|
||||||
padding: var(--userpicture-padding);
|
padding: var(--userpicture-padding);
|
||||||
&[alt] {
|
&[alt] {
|
||||||
text-indent: -999999px;
|
text-indent: -999999px;
|
||||||
|
@ -79,8 +81,8 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
|
width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
|
||||||
height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
|
height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
|
||||||
min-height: 0px;
|
min-width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
|
||||||
min-width: 0px;
|
min-height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
|
||||||
font-size: calc(var(--core-avatar-size)*0.3);
|
font-size: calc(var(--core-avatar-size)*0.3);
|
||||||
margin: var(--userpicture-padding);
|
margin: var(--userpicture-padding);
|
||||||
|
|
||||||
|
@ -106,8 +108,4 @@
|
||||||
|
|
||||||
:host-context(ion-item) {
|
:host-context(ion-item) {
|
||||||
@include margin(var(--margin-vertical-on-item), var(--margin-end-on-item), var(--margin-vertical-on-item), 0px);
|
@include margin(var(--margin-vertical-on-item), var(--margin-end-on-item), var(--margin-vertical-on-item), 0px);
|
||||||
img {
|
|
||||||
min-width: var(--core-avatar-size);
|
|
||||||
min-height: var(--core-avatar-size);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue