ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add new link to read only banner

This commit is contained in:
Ramon Wenger 2021-09-22 11:39:12 +02:00
parent 42c99b3c83
commit e77cb477c5
1 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
client/src/components/ReadOnlyBanner.vue
View File

@ -3,14 +3,25 @@
class="read-only-banner" class="read-only-banner"
data-cy="read-only-banner" data-cy="read-only-banner"
v-if="me.readOnly || me.selectedClass.readOnly"> v-if="me.readOnly || me.selectedClass.readOnly">
<p class="read-only-banner__text"> <div class="read-only-banner__content">
{{ readOnlyText }} Sie können Inhalte lesen, aber nicht <p class="read-only-banner__text">
bearbeiten. <router-link {{ readOnlyText }} Sie können Inhalte lesen, aber nicht
:to="licenseActivationLink" bearbeiten.
data-cy="license-activation-link" </p>
class="read-only-banner__link" <div class="read-only-banner__buttons">
v-if="me.readOnly">Neuen Lizenzcode eingeben</router-link> <router-link
</p> :to="licenseActivationLink"
data-cy="license-activation-link"
class="read-only-banner__link button button--primary"
v-if="me.readOnly">Neuen Lizenzcode eingeben
</router-link>
<a
target="_blank"
href="https://myskillbox.ch/lesemodus"
class="button button--secondary">Mehr Informationen zum Lesemodus</a>
</div>
</div>
</div> </div>
</template> </template>
@ -28,8 +39,8 @@
}, },
}, },
licenseActivationLink: { licenseActivationLink: {
name: LICENSE_ACTIVATION name: LICENSE_ACTIVATION,
} },
}; };
}, },
@ -52,11 +63,11 @@
readOnly: false, readOnly: false,
selectedClass: { selectedClass: {
readOnly: false, readOnly: false,
} },
}; };
} }
return me; return me;
} },
}, },
}, },
@ -75,15 +86,25 @@
background-color: $color-brand-light; background-color: $color-brand-light;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: $small-spacing 0;
&__content {
max-width: $screen-width;
}
&__text { &__text {
padding: $small-spacing 0; padding: 0;
@include regular-text; @include regular-text;
max-width: $screen-width; margin-bottom: $small-spacing;
}
&__buttons {
} }
&__link { &__link {
@include default-link; @include default-link;
margin-right: $small-spacing;
} }
} }
</style> </style>