EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4470 blog: Improve styles

main
Pau Ferrer Ocaña 2024-05-15 11:32:49 +02:00
parent 829cb8bc9b
commit f16c405115
3 changed files with 38 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/addons/blog/pages/index/index.html
View File

@ -41,19 +41,17 @@
</h3>
@if (entry.userid === currentUserId && optionsAvailable) {
<div class="core-button-spinner">
<ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate"
(click)="showEntryActionsPopover($event, entry)">
<ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
</ion-button>
</div>
<ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate"
(click)="showEntryActionsPopover($event, entry)" class="entry-options">
<ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
</ion-button>
}
</div>
<div class="entry-creation-info flex ion-align-items-center">
<span>
<div class="entry-avatar">
<core-user-avatar [user]="entry.user" [courseId]="entry.courseid" />
</span>
</div>
@if (entry.user?.fullname && entry.created) {
<span [innerHTML]="'core.bynameondate' | translate: {
@ -64,15 +62,14 @@
}
</div>
<div class="entry-summary" [ngClass]="{ 'border-bottom': entry.lastmodified <= entry.created }" [collapsible-item]="64">
<div class="entry-summary" [collapsible-item]="64">
<div class="ion-margin-bottom">
<core-format-text [text]="entry.summary" [component]="component" [componentId]="entry.id" [contextLevel]="contextLevel"
[contextInstanceId]="contextInstanceId" [courseId]="entry.courseid" />
</div>
@if (tagsEnabled && entry.tags && entry.tags!.length > 0) {
<ion-item class="ion-text-wrap">
<ion-item class="ion-text-wrap" lines="none">
<ion-label>
<div slot="start">{{ 'core.tag.tags' | translate }}:</div>
<core-tag-list [tags]="entry.tags" />
@ -85,15 +82,14 @@
}
@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-item>
}
</div>
@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) {
<ion-note class="flex ion-align-items-center" slot="start">
<ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" />

67
src/addons/blog/pages/index/index.scss
View File

@ -1,87 +1,68 @@
@use "theme/globals" as *;
:host {
ion-card {
padding: .5rem 1rem;
}
.entry {
border-bottom: 1px solid var(--stroke);
&-visibility-permission {
display: flex;
align-items: center;
font-size: 0.875rem;
font-weight: 500;
font: var(-mdl-typography-label-font-lg);
ion-icon {
margin-right: .3rem;
@include margin-horizontal(null, .3rem);
}
}
&-draft {
margin-left: .3rem;
@include margin-horizontal(.3rem, null);
position: relative;
top: 4px;
}
&-subject {
core-format-text {
font-size: 1.25rem;
font-weight: 500;
}
&::part(native) {
padding-left: 0;
font: var(--mdl-typography-heading4-font);
}
}
&-creation-info {
.entry-avatar {
@include margin(.6rem, .6rem, .6rem, 0px);
}
core-user-avatar {
--userpicture-padding: .6rem;
margin-left: -.5rem;
--core-avatar-size: 24px;
}
}
&-last-modification {
--border-width: 0 0 1px 0;
&::part(native) {
padding: 0;
}
--padding-end: 0px;
--padding-start: 0px;
--padding-top: 0px;
--padding-bottom: 0px;
ion-note {
padding-top: 0.9rem;
font-size: 0.875rem;
font-weight: 500;
font: var(-mdl-typography-label-font-lg);
}
ion-icon {
margin-right: .3rem;
@include margin-horizontal(null, .3rem);
}
}
}
.core-button-spinner {
margin-right: -.5rem;
align-self: start;
ion-button::part(native) {
--padding-end: 0;
--padding-start: 0;
--padding-left: 0;
--padding-right: 0;
}
ion-button.entry-options {
--padding-end: 0px;
--padding-start: 0px;
--padding-top: 0px;
--padding-bottom: 0px;
}
core-comments ::ng-deep {
&::part(native) {
--padding-start: 0;
}
}
.border-bottom {
border-bottom: 1px solid var(--stroke);
core-comments ::ng-deep ion-item {
--inner-border-width: 1px 0px 0px 0px;
--padding-start: 0px;
}
}

10
src/core/components/user-avatar/user-avatar.scss
View File

@ -16,6 +16,8 @@
height: var(--core-avatar-size);
max-width: 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);
&[alt] {
text-indent: -999999px;
@ -79,8 +81,8 @@
font-weight: normal;
width: 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: 0px;
min-width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
min-height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
font-size: calc(var(--core-avatar-size)*0.3);
margin: var(--userpicture-padding);
@ -106,8 +108,4 @@
:host-context(ion-item) {
@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);
}
}