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

MOBILE-3749 style: Fix some button styles

main
Pau Ferrer Ocaña 2021-05-10 11:52:41 +02:00
parent 3fe3083f22
commit 7851a97e6d
21 changed files with 110 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
View File

@ -4,4 +4,8 @@
.core-horizontal-scroll > div {
@include horizontal_scroll_item(80%, 250px, 300px);
}
.core-course-module-handler {
--inner-border-width: 0;
}
}

3
src/addons/calendar/components/calendar/calendar.scss
View File

@ -146,8 +146,7 @@
.core-module-icon {
margin-right: 1px;
margin-left: 1px;
width: 16px;
height: 16px;
--size: 16px;
display: inline-block;
vertical-align: bottom;
}

5
src/addons/competency/pages/competency/competency.html
View File

@ -43,8 +43,7 @@
</ng-container>
&nbsp;/&nbsp;
<span *ngFor="let ancestor of competency.competency.comppath.ancestors">
<a *ngIf="competency.competency.comppath.showlinks" (click)="openCompetencySummary(ancestor.id)"
class="core-clickable">
<a *ngIf="competency.competency.comppath.showlinks" (click)="openCompetencySummary(ancestor.id)">
{{ ancestor.name }}
</a>
<ng-container *ngIf="!competency.competency.comppath.showlinks">{{ ancestor.name }}</ng-container>
@ -60,7 +59,7 @@
</div>
<div *ngIf="competency.competency.hasrelatedcompetencies">
<p *ngFor="let relatedcomp of competency.competency.relatedcompetencies">
<a (click)="openCompetencySummary(relatedcomp.id)" class="core-clickable">
<a (click)="openCompetencySummary(relatedcomp.id)">
{{ relatedcomp.shortname }} - {{ relatedcomp.idnumber }}
</a>
</p>

2
src/addons/mod/assign/components/index/addon-mod-assign-index.html
View File

@ -31,7 +31,7 @@
<core-loading [hideUntil]="loaded" class="core-loading-center">
<!-- Description and intro attachments. -->
<ion-card *ngIf="description" (click)="expandDescription($event)" class="core-clickable">
<ion-card *ngIf="description">
<ion-item class="ion-text-wrap">
<ion-label>
<core-format-text [text]="description" [component]="component" [componentId]="componentId" maxHeight="120"

14
src/core/components/iframe/core-iframe.html
View File

@ -5,11 +5,15 @@
[attr.allowfullscreen]="allowFullscreen ? 'allowfullscreen' : null">
</iframe>
<div [hidden]="loading" class="ion-text-center ion-text-wrap core-iframe-help">
<ion-button fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog">
{{ 'core.iframehelp' | translate }}
</ion-button>
</div>
<ion-button
*ngIf="!loading"
color="dark" expand="block" fill="clear"
(click)="openIframeHelpModal()"
aria-haspopup="dialog"
class="core-button-as-link"
>
<ion-label>{{ 'core.iframehelp' | translate }}</ion-label>
</ion-button>
<span class="core-loading-spinner">
<ion-spinner *ngIf="loading"></ion-spinner>

2
src/core/components/navigation-bar/core-navigation-bar.html
View File

@ -1,7 +1,7 @@
<ion-grid class="ion-no-padding ion-padding-bottom" *ngIf="previous || info || next">
<ion-row>
<ion-col class="ion-text-start" size="4">
<ion-button *ngIf="previous" class="core-navigation-bar-arrow" color="light"
<ion-button *ngIf="previous" class="core-navigation-bar-arrow"
[title]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)">
<ion-icon name="fas-arrow-left" [slot]="previousTitle ? 'start' : 'icon-only'" aria-hidden="true"></ion-icon>
<core-format-text *ngIf="previousTitle" [text]="previousTitle" [component]="component" [componentId]="componentId"

1
src/core/components/show-password/show-password.scss
View File

@ -6,7 +6,6 @@
padding: 0 calc(var(--padding-start) / 2);
position: absolute;
right: 0;
bottom: 8px;
margin-top: 0;
margin-bottom: 0;
z-index: 3;

17
src/core/components/user-avatar/core-user-avatar.html
View File

@ -1,8 +1,17 @@
<img *ngIf="avatarUrl" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
onError="this.src='assets/img/user-avatar.png'" (click)="gotoProfile($event)" [attr.aria-hidden]="!linkProfile"
[attr.role]="linkProfile ? 'button' : null" (keydown)="buttonAction.keyDown($event)"
<img
*ngIf="avatarUrl"
[src]="avatarUrl"
[alt]="'core.pictureof' | translate:{$a: fullname}"
core-external-content
onError="this.src='assets/img/user-avatar.png'"
(click)="gotoProfile($event)"
[attr.aria-hidden]="!linkProfile"
[attr.role]="linkProfile ? 'button' : null"
(keydown)="buttonAction.keyDown($event)"
(keyup)="buttonAction.keyUp($event)"
[attr.tabindex]="linkProfile ? 0 : null">
[attr.tabindex]="linkProfile ? 0 : null"
[class.clickable]="linkProfile"
>
<img *ngIf="!avatarUrl" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}"
(click)="gotoProfile($event)" [attr.aria-hidden]="!linkProfile" [attr.role]="linkProfile ? 'button' : null"

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

@ -1,6 +1,9 @@
:host {
position: relative;
cursor: pointer;
.clickable {
cursor: pointer;
}
img {
border-radius: 50%;
width: var(--core-avatar-size);

2
src/core/features/course/components/format/core-course-format.html
View File

@ -92,7 +92,7 @@
<ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
*ngIf="displaySectionSelector && sections?.length">
<ion-button *ngIf="previousSection" color="light" (click)="sectionChanged(previousSection)"
<ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)"
[attr.aria-label]="'core.previous' | translate">
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
<core-format-text class="accesshide" [text]="previousSection.name" contextLevel="course"

15
src/core/features/login/pages/credentials/credentials.html
View File

@ -63,11 +63,16 @@
</form>
<!-- Forgotten password option. -->
<ion-list lines="none" *ngIf="showForgottenPassword" class="core-login-forgotten-password ion-no-padding">
<ion-item button class="ion-text-center ion-text-wrap" (click)="forgottenPassword()" detail="false">
<ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
</ion-item>
</ion-list>
<ion-button
*ngIf="showForgottenPassword"
expand="block"
fill="clear"
color="dark"
class="core-login-forgotten-password core-button-as-link"
(click)="forgottenPassword()"
>
<ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
</ion-button>
<ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
<ion-item class="ion-text-wrap" lines="none">

21
src/core/features/login/pages/reconnect/reconnect.html
View File

@ -71,13 +71,16 @@
</form>
<!-- Forgotten password option. -->
<ion-list lines="none" *ngIf="showForgottenPassword && !isOAuth" class="core-login-forgotten-password ion-no-padding">
<ion-item button class="ion-text-center ion-text-wrap" (click)="forgottenPassword()" detail="false">
<ion-label>
{{ 'core.login.forgotten' | translate }}
</ion-label>
</ion-item>
</ion-list>
<ion-button
*ngIf="showForgottenPassword && !isOAuth"
expand="block"
fill="clear"
color="dark"
class="core-login-forgotten-password core-button-as-link"
(click)="forgottenPassword()"
>
<ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
</ion-button>
<!-- Identity providers. -->
<ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
@ -85,8 +88,8 @@
<ion-label><h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3></ion-label>
</ion-item>
<ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon"
(click)="oauthClicked(provider)" [attr.aria-label]="provider.name">
<img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
(click)="oauthClicked(provider)">
<img [src]="provider.iconurl" alt="" role="presentation" width="32" height="32" slot="start">
<ion-label>{{provider.name}}</ion-label>
</ion-item>
</ion-list>

16
src/core/features/login/pages/site/site.html
View File

@ -109,12 +109,16 @@
</ng-container>
<!-- Help. -->
<ion-list lines="none" class="ion-margin-top">
<ion-item button class="ion-text-center ion-text-wrap core-login-need-help" (click)="showHelp()" detail="false"
aria-haspopup="dialog">
<ion-label>{{ 'core.needhelp' | translate }}</ion-label>
</ion-item>
</ion-list>
<ion-button
class="ion-margin-top core-login-need-help core-button-as-link"
(click)="showHelp()"
aria-haspopup="dialog"
expand="block"
fill="clear"
color="dark"
>
<ion-label>{{ 'core.needhelp' | translate }}</ion-label>
</ion-button>
</ion-content>
<!-- Template site selector. -->

1
src/core/features/login/pages/site/site.scss
View File

@ -12,7 +12,6 @@
.item {
&.core-login-need-help {
text-decoration: underline;
margin-top: 16px;
}
&.core-login-site-qrcode {

11
src/core/features/mainmenu/pages/menu/menu.scss
View File

@ -1,9 +1,10 @@
@import "~theme/globals";
:host{
--menutabbar-size: 60px;
ion-tabs {
-webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
ion-tab-bar {
box-shadow: 0px -3px 3px rgba(var(--drop-shadow));
}
ion-tab-button ion-icon {
@ -28,6 +29,10 @@
width: var(--menutabbar-size);
height: 100%;
flex-direction: column;
@include border-end(var(--border));
box-shadow: 3px 0 3px rgba(var(--drop-shadow));
border-top: 0;
ion-tab-button {
width: 100%;
ion-badge {

15
src/core/features/user/pages/profile/profile.html
View File

@ -14,11 +14,16 @@
<ion-list *ngIf="user && !isDeleted && isEnrolled">
<ion-item class="ion-text-center core-user-profile-maininfo">
<core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
<div class="core-icon-foreground" *ngIf="canChangeProfilePicture">
<ion-icon name="fa-pen" (click)="changeProfilePicture()"
[attr.aria-label]="'core.user.newpicture' | translate">
</ion-icon>
</div>
<ion-button
class="edit-avatar"
*ngIf="canChangeProfilePicture"
(click)="changeProfilePicture()"
[attr.aria-label]="'core.user.newpicture' | translate"
fill="clear"
color="dark"
>
<ion-icon slot="icon-only" name="fa-pen" aria-hidden="true"></ion-icon>
</ion-button>
</core-user-avatar>
<ion-label>
<h2>{{ user.fullname }}</h2>

19
src/core/features/user/pages/profile/profile.scss
View File

@ -17,16 +17,12 @@
height: 24px !important;
}
.core-icon-foreground {
.edit-avatar {
position: absolute;
right: 0;
bottom: 0;
line-height: 30px;
text-align: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color:var(--background);
right: -24px;
bottom: -12px;
--border-radius: 50%;
--background: var(--ion-item-background);
:host-context([dir="rtl"]) & {
left: 0;
@ -38,8 +34,7 @@
}
:host-context([dir="rtl"]) ::ng-deep core-user-avatar .core-icon-foreground {
left: 0;
:host-context([dir="rtl"]) ::ng-deep core-user-avatar .edit-avatar {
left: -24px;
right: unset;
}

2
src/theme/globals.mixins.ionic.scss
View File

@ -107,6 +107,7 @@
$tint: map-get($value, tint);
--ion-color-#{$color-name}: #{$base};
--ion-color-#{$color-name}-base: #{$base};
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
--ion-color-#{$color-name}-contrast: #{$contrast};
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
@ -115,6 +116,7 @@
.ion-color-#{$color-name} {
--ion-color: #{$base};
--ion-color-base: #{$base};
--ion-color-rgb: #{color-to-rgb-list($base)};
--ion-color-contrast: #{$contrast};
--ion-color-contrast-rgb: #{color-to-rgb-list($contrast)};

4
src/theme/globals.mixins.scss
View File

@ -30,7 +30,7 @@
}
}
@mixin border-start($px, $type, $color) {
@mixin border-start($px, $type: null, $color: null) {
@include ltr() {
border-left: $px $type $color;
}
@ -41,7 +41,7 @@
}
@mixin border-end($px, $type, $color) {
@mixin border-end($px, $type: null, $color: null) {
@include ltr() {
border-right: $px $type $color;
}

12
src/theme/theme.base.scss
View File

@ -79,6 +79,7 @@ ion-toolbar .in-toolbar.button-clear {
ion-header ion-toolbar .button.button-clear,
ion-header ion-toolbar .button.button-solid {
--background: transparent;
--color: var(--core-header-toolbar-color);
--ion-color-primary: var(--core-header-toolbar-color);
}
@ -130,7 +131,7 @@ ion-button.button-small ion-icon.faicon[slot] {
}
// Buttons.
ion-button {
ion-button, button, [role="button"] {
min-height: var(--a11y-min-target-size);
min-width: var(--a11y-min-target-size);
}
@ -144,10 +145,13 @@ ion-button {
}
}
.core-iframe-help ion-button {
ion-button.core-button-as-link {
text-transform: none;
text-decoration: underline;
--color: initial;
font-size: inherit;
font-weight: normal;
letter-spacing: normal;
white-space: break-spaces;
}
// Ionic alert.
@ -363,7 +367,7 @@ img[alt] {
// Activity modules
.core-module-icon {
--size: 24px;
--size: var(--module-icon-size);
width: var(--size);
height: var(--size);
max-width: var(--size);

8
src/theme/theme.light.scss
View File

@ -65,6 +65,8 @@
// Accessibility vars.
--a11y-min-target-size: 44px;
--module-icon-size: 24px;
--ion-text-color: #{$text-color};
--ion-text-color-rgb: 58,58,58;
--ion-card-color: var(--ion-text-color);
@ -215,10 +217,10 @@
--addon-forum-border-color: #{$addon-forum-border-color};
--addon-forum-highlight-color: #{$addon-forum-highlight-color};
--drop-shadow: 0, 0, 0, 0.2;
--drop-shadow: 0, 0, 0, 0.18;
--core-menu-box-shadow-end: -4px 0px 16px rgba(0, 0, 0, 0.18);
--core-menu-box-shadow-start: 4px 0px 16px rgba(0, 0, 0, 0.18);
--core-menu-box-shadow-end: -4px 0px 16px rgba(var(--drop-shadow));
--core-menu-box-shadow-start: 4px 0px 16px rgba(var(--drop-shadow));
--core-question-correct-color: var(--green-dark);
--core-question-correct-color-bg: var(--green-light);