forked from EVOgeek/Vmeda.Online
Juan Leyva
GitHub
commit
3c4341061d
@ -6,5 +6,6 @@
|
||||
},
|
||||
"type": "ionic-angular",
|
||||
"watchPatterns": [],
|
||||
"pro_id": "com.moodle.moodlemobile"
|
||||
}
|
||||
"pro_id": "com.moodle.moodlemobile",
|
||||
"id": "com.moodle.moodlemobile"
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
|
||||
<article [ngClass]="{'addon-mod_wiki-noedit': !canEdit}">
|
||||
<core-format-text *ngIf="pageContent" [component]="component" [componentId]="componentId" [text]="pageContent"></core-format-text>
|
||||
<core-empty-box *ngIf="!pageContent" icon="document" [message]="'addon.mod_wiki.nocontent' | translate"></core-empty-box>
|
||||
<core-empty-box *ngIf="!pageContent" icon="document" [message]="'addon.mod_wiki.nocontent' | translate" [inline]="true"></core-empty-box>
|
||||
</article>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
344
src/app/app.scss
344
src/app/app.scss
@ -69,27 +69,6 @@ ion-app.app-root {
|
||||
}
|
||||
}
|
||||
|
||||
@mixin core-headings() {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Define an alternative way to set a heading in an item without using a heading tag.
|
||||
// This is done for accessibility reasons when a heading is semantically incorrect.
|
||||
.item .item-heading {
|
||||
@ -212,92 +191,97 @@ ion-app.app-root {
|
||||
}
|
||||
}
|
||||
|
||||
/** Format Text */
|
||||
/** Format Text - Show more styles. */
|
||||
/** Styles of elements inside the directive should be placed in format-text.scss */
|
||||
core-format-text {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
core-format-text[maxHeight],
|
||||
core-format-text[ng-reflect-max-height] {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
/* Force display inline */
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// This is to allow clicks in radio/checkbox content.
|
||||
&.core-text-formatted {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
||||
.core-show-more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.core-shortened) {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
&.core-shortened {
|
||||
color: $gray-darker;
|
||||
overflow: hidden;
|
||||
min-height: 50px;
|
||||
|
||||
.core-show-more {
|
||||
color: color($colors, dark);
|
||||
@include text-align('end');
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
@include position(null, 0, 0, null);
|
||||
z-index: 1001;
|
||||
background-color: $white;
|
||||
@include padding(null, null, null, 10px);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
@include position(null, 0, 0, 0);
|
||||
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
|
||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.core-expand-in-fullview {
|
||||
.core-show-more {
|
||||
@include svg-background-image($item-md-detail-push-svg, true);
|
||||
@include padding-horizontal(null, 18px);
|
||||
@include background-position(end, 0, center);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
core-format-text[singleLine="true"],
|
||||
core-format-text[ng-reflect-single-line="true"] {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&[maxHeight],
|
||||
&[ng-reflect-max-height] {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
/* Force display inline */
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// This is to allow clicks in radio/checkbox content.
|
||||
&.core-text-formatted {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
||||
.core-show-more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.core-shortened) {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
&.core-shortened {
|
||||
color: $gray-darker;
|
||||
overflow: hidden;
|
||||
min-height: 50px;
|
||||
|
||||
.core-show-more {
|
||||
color: color($colors, dark);
|
||||
@include text-align('end');
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
@include position(null, 0, 0, null);
|
||||
z-index: 1001;
|
||||
background-color: $white;
|
||||
@include padding(null, null, null, 10px);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
@include position(null, 0, 0, 0);
|
||||
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
|
||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.core-expand-in-fullview {
|
||||
.core-show-more {
|
||||
@include svg-background-image($item-md-detail-push-svg, true);
|
||||
@include padding-horizontal(null, 18px);
|
||||
@include background-position(end, 0, center);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[singleLine="true"],
|
||||
&[ng-reflect-single-line="true"] {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
audio, video, a, iframe {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.core-media-adapt-width {
|
||||
@ -336,84 +320,6 @@ ion-app.app-root {
|
||||
}
|
||||
}
|
||||
|
||||
core-format-text {
|
||||
audio, video, a, iframe {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// Fix lists styles in core-format-text.
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
ul, ol {
|
||||
-webkit-padding-start: 15px;
|
||||
list-style-position: inside;
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
ol {
|
||||
list-style-type: lower-latin;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
@include margin(null, null, null, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: initial !important;
|
||||
}
|
||||
|
||||
.core-disable-media-adapt,
|
||||
.core-disable-media-adapt .core-media-adapt-width {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
width: initial !important;
|
||||
height: initial !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
@include core-headings();
|
||||
|
||||
img.icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item core-format-text {
|
||||
@include core-headings();
|
||||
}
|
||||
|
||||
.item core-format-text,
|
||||
core-format-text {
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
|
||||
ion-card core-format-text img {
|
||||
width: min-content;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// Message item.
|
||||
.item-message {
|
||||
core-format-text > p:only-child {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
// Media item, ideal for icons.
|
||||
.item-media {
|
||||
min-height: $item-media-height + ($content-padding * 2);
|
||||
@ -506,7 +412,6 @@ ion-app.app-root {
|
||||
}
|
||||
|
||||
|
||||
|
||||
// File uploader.
|
||||
// -------------------------
|
||||
.core-fileuploader-file-handler {
|
||||
@ -607,85 +512,6 @@ ion-app.app-root {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
// Atto styles
|
||||
// -------------------------
|
||||
.atto_image_preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.atto_image_preview_box {
|
||||
max-height: 200px;
|
||||
margin-bottom: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.editor_atto_content img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.atto_image_size {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.atto_image_size input[type=checkbox] {
|
||||
@include margin(null, 1em, null, 1em);
|
||||
}
|
||||
|
||||
.atto_image_size input[type=text] {
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
.atto_image_size label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.atto_image_button_text-top,
|
||||
.atto_image_button_middle,
|
||||
.atto_image_button_text-bottom,
|
||||
.atto_image_button_left,
|
||||
.atto_image_button_right {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
margin: 0 0.5em;
|
||||
|
||||
&.img-responsive {
|
||||
/* If the image is display: block then linking the image to URLs won't work. */
|
||||
/*display: inline-block;*/
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_button_text-top {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.atto_image_button_middle {
|
||||
vertical-align: middle; }
|
||||
|
||||
.atto_image_button_text-bottom {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/*rtl:begin:ignore*/
|
||||
.atto_image_button_left {
|
||||
@include float(start);
|
||||
@include margin(0, 0.5em, 0, 0);
|
||||
}
|
||||
|
||||
.atto_image_button_right {
|
||||
@include float(end);
|
||||
@include margin(0, 0, 0, 0.5em);
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
.action-sheet-group {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@ -22,9 +22,6 @@ ion-app.app-root core-rich-text-editor {
|
||||
resize: none;
|
||||
background-color: $white;
|
||||
flex-grow: 1;
|
||||
* {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.core-rte-editor {
|
||||
@ -48,28 +45,6 @@ ion-app.app-root core-rich-text-editor {
|
||||
*:empty:after {
|
||||
content: '\200B';
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
ul, ol {
|
||||
-webkit-padding-start: 15px;
|
||||
list-style-position: inside;
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
ol {
|
||||
list-style-type: lower-latin;
|
||||
}
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
@include margin(null, null, null, 15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.core-textarea {
|
||||
|
||||
@ -30,6 +30,10 @@ ion-app.app-root .core-tabs-bar {
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
@include margin(null, 5px, null, null);
|
||||
}
|
||||
|
||||
ion-badge.tab-badge {
|
||||
position: relative;
|
||||
@include position(auto, auto, auto, auto);
|
||||
|
||||
192
src/theme/format-text.scss
Normal file
192
src/theme/format-text.scss
Normal file
@ -0,0 +1,192 @@
|
||||
/** Styles to match web platform */
|
||||
ion-app.app-root core-format-text,
|
||||
ion-app.app-root .item core-format-text,
|
||||
ion-app.app-root core-rich-text-editor .core-rte-editor {
|
||||
@include core-headings();
|
||||
|
||||
font-size: 1.4rem;
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// Fix lists styles in core-format-text.
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
ul, ol {
|
||||
-webkit-padding-start: 15px;
|
||||
ol {
|
||||
list-style-type: lower-latin;
|
||||
}
|
||||
ul, ol {
|
||||
@include margin(null, null, null, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: initial !important;
|
||||
}
|
||||
|
||||
.core-disable-media-adapt,
|
||||
.core-disable-media-adapt .core-media-adapt-width {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
width: initial !important;
|
||||
height: initial !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
img.icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
// Atto styles
|
||||
// -------------------------
|
||||
.atto_image_preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.atto_image_preview_box {
|
||||
max-height: 200px;
|
||||
margin-bottom: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.editor_atto_content img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.atto_image_size {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.atto_image_size input[type=checkbox] {
|
||||
@include margin(null, 1em, null, 1em);
|
||||
}
|
||||
|
||||
.atto_image_size input[type=text] {
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
.atto_image_size label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.atto_image_button_text-top,
|
||||
.atto_image_button_middle,
|
||||
.atto_image_button_text-bottom,
|
||||
.atto_image_button_left,
|
||||
.atto_image_button_right {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
margin: 0 0.5em;
|
||||
|
||||
&.img-responsive {
|
||||
/* If the image is display: block then linking the image to URLs won't work. */
|
||||
/*display: inline-block;*/
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_button_text-top {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.atto_image_button_middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.atto_image_button_text-bottom {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/*rtl:begin:ignore*/
|
||||
.atto_image_button_left {
|
||||
@include float(start);
|
||||
@include margin(0, 0.5em, 0, 0);
|
||||
}
|
||||
|
||||
.atto_image_button_right {
|
||||
@include float(end);
|
||||
@include margin(0, 0, 0, 0.5em);
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
// Bootstrap 4 Styles
|
||||
// -------------------------
|
||||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.alert {
|
||||
position: relative;
|
||||
padding: .75rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 0 solid transparent;
|
||||
}
|
||||
|
||||
// Headings for larger alerts
|
||||
.alert-heading {
|
||||
// Specified to prevent conflicts of changing $headings-color
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base in get-colors($colors) {
|
||||
.alert-#{$color-name} {
|
||||
color: $color-base;
|
||||
border-color: $color-base;
|
||||
background-color: mix($color-base, white, 20%);
|
||||
|
||||
.alert-link {
|
||||
color: darken($color-base, 10%);
|
||||
}
|
||||
}
|
||||
.alert-#{$color-name} p {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Special fixes
|
||||
// -------------------------
|
||||
ion-app.app-root {
|
||||
// Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
|
||||
ion-card core-format-text img {
|
||||
width: min-content;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// Message item.
|
||||
.item-message core-format-text > p:only-child {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
@ -400,6 +400,30 @@ $core-question-state-incorrect-color: $red-light !default;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin core-headings() {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Font Awesome
|
||||
$fa-font-path: $font-path;
|
||||
@import "font-awesome";
|
||||
|
||||
// Format text styles.
|
||||
@import "format-text";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user