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

Style hellopage about

This commit is contained in:
Christian Cueni 2021-06-03 09:48:06 +02:00
parent 125882df46
commit 2e3cb1d832
1 changed files with 68 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
client/src/pages/hello.vue
View File

@ -2,12 +2,44 @@
<div
class="hello"
data-cy="hello-page">
<h1
class="hello__title public-page__title"
data-cy="hello-title">Wollen Sie {{ pageTitle }} jetzt im Unterricht verwenden?</h1>
<a
href="/api/oauth/login/"
data-cy="oauth-login">Login</a>
<div class="about">
<div class="about__logos">
<a
href="https://www.hep-verlag.ch/"
target="_blank">
<hep-logo class="about__logo-hep"/>
</a>
<a
href="https://www.ehb.swiss/"
target="_blank">
<ehb-logo class="about__logo-ehb"/>
</a>
</div>
<p class="about__text">mySkillbox ist ein Angebot des hep Verlags in
Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für Berufsbildung.</p>
</div>
<div class="login-actions">
<h1
class="hello__title public-page__title"
data-cy="hello-title">Wollen Sie {{ pageTitle }} im Unterricht verwenden?</h1>
<a
class="button button--primary button--big actions__submit"
href="/api/oauth/login/"
data-cy="oauth-login">Mit hep Konto anmelden</a>
<div class="register">
<p>Haben Sie noch kein hep Konto?</p>
<a
href="/api/oauth/login/"
data-cy="oauth-login">Jetzt registrieren</a>
</div>
</div>
<div class="information">
<p>Was ist ein hep Konto und wie kann ich mich dafür registrieren?</p>
<a
href="/api/oauth/login/"
data-cy="oauth-login">Anleitung anschauen</a>
</div>
</div>
</template>
@ -15,11 +47,15 @@
import LoadingButton from '@/components/LoadingButton';
import pageTitleMixin from '@/mixins/page-title';
import HepLogo from '@/components/icons/HepLogo';
import EhbLogo from '@/components/icons/EhbLogo';
export default {
mixins: [pageTitleMixin],
components: {
LoadingButton
LoadingButton,
HepLogo,
EhbLogo
},
data() {
@ -37,15 +73,32 @@
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.text-link {
font-family: $sans-serif-font-family;
color: $color-brand;
}
.about {
&__text {
margin-top: $medium-spacing;
@include regular-text;
}
.actions {
&__reset {
display: inline-block;
margin-left: $large-spacing;
&__logos {
& a:first-child {
margin-right: $large-spacing;
}
}
&__logo-hep {
width: auto;
height: 30px;
margin-bottom: $large-spacing;
@include desktop {
width: 147px;
margin-bottom: 0;
}
}
&__logo-ehb {
width: 100px;
height: 30px;
}
}