Skip to content

Commit 18fb89a

Browse files
cs1m0ncs1m0n
committed
Design update for new SSF portal
1 parent 9125a56 commit 18fb89a

File tree

4 files changed

+175
-27
lines changed

4 files changed

+175
-27
lines changed

‎src/assets/SSF_portal_desktop.png‎

90 KB
Loading

‎src/assets/literature-portal-logo.png‎

7.51 KB
Loading

‎src/styles/_blocks.scss‎

Lines changed: 113 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -851,13 +851,12 @@ footer{
851851
}
852852

853853
.container-ssf {
854-
background: url("../assets/SSF_portal_banner_phone.png") no-repeat 1100px center / auto 70%, url("../assets/SSF_portal_banner_bg.jpg") repeat left top / contain;
855-
margin-bottom: 2rem;
856-
padding-bottom: 25px;
854+
background: url("../assets/SSF_portal_banner_bg.jpg") repeat left top / contain;
855+
padding-block: 25px;
857856
isolation: isolate;
858857

859858
.light & {
860-
background: url("../assets/SSF_portal_banner_phone.png") no-repeat 1100px center / auto 70%;
859+
background: none;
861860
}
862861

863862
.dark &::after {
@@ -869,23 +868,126 @@ footer{
869868
z-index: -1;
870869
}
871870

872-
.ssf-banner {
873-
img {
874-
max-width: 100%;
875-
display: block;
876-
}
871+
img {
872+
margin-bottom: 1rem;
873+
}
874+
875+
a {
876+
color: #f28a5d;
877877
}
878878
}
879879

880880
.readable-container {
881881
max-width: 800px;
882+
margin: 0 auto;
882883
padding-block: 15px;
883884

884-
> h3, > p {
885-
margin-bottom: 15px;
885+
h2 {
886+
margin: 1.5rem 0;
887+
}
888+
h3 {
889+
margin: 1.5rem 0 0.75rem 0;
890+
}
891+
p {
892+
margin-bottom: 1rem;
893+
894+
&.lead {
895+
font-size: 1.1rem;
896+
line-height: 1.75rem;
897+
}
898+
}
899+
900+
.flex {
901+
margin-top: 2rem;
902+
}
903+
904+
.portal-info {
905+
border-right: 2px solid #64707570;
906+
padding-right: 2rem;
907+
margin-right: 3rem;
908+
909+
@media only screen and (max-width: 648px) {
910+
border: none;
911+
padding-right: 0;
912+
margin-right: 0;
913+
margin-bottom: 2rem;
914+
}
915+
}
916+
917+
.register-account {
918+
font-weight: bold;
919+
color: var(--base2);
920+
text-decoration: none;
921+
position: relative;
922+
transition: opacity ease-out 0.3s;
923+
924+
&::after {
925+
content: '';
926+
width: 100%;
927+
position: absolute;
928+
bottom: -6px;
929+
left: 0;
930+
height: 2px;
931+
background-color: #f28a5d;
932+
opacity: 0.5;
933+
}
934+
935+
&:hover {
936+
opacity: 0.8;
937+
}
938+
}
939+
940+
.go-to-portal {
941+
background-color: #f28a5d;
942+
transition: all ease-out 0.3s;
943+
height: 44px;
944+
width: 200px;
945+
padding: 0px;
946+
margin: 8px;
947+
border-radius: 0.75em;
948+
color: #fff;
949+
font-weight: bold;
950+
font-size: 1.1rem;
951+
display: inline-flex;
952+
align-items: center;
953+
justify-content: center;
954+
padding-left: 0.75rem;
955+
margin-bottom: 2rem;
956+
text-decoration: none;
957+
958+
&:hover {
959+
opacity: 0.8;
960+
}
961+
}
962+
963+
.continue-on-portal {
964+
line-height: 1.5rem;
965+
cursor: pointer;
966+
transition: opacity ease-out 0.3s;
967+
968+
.icon {
969+
width: 4rem;
970+
}
971+
972+
&:hover {
973+
opacity: 0.8;
974+
}
886975
}
887976
}
888977

978+
.search-form {
979+
margin-top: 2rem;
980+
}
981+
982+
.icon.chevron {
983+
content: url(/img/icon_24_chevron.7f2090c1.svg);
984+
width: 2rem;
985+
display: inline-flex;
986+
987+
&.down {
988+
transform: rotate(90deg);
989+
}
990+
}
889991

890992
/* Tailwind CSS */
891993

‎src/views/books/book-overview.vue‎

Lines changed: 62 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,55 @@
11
<template>
22
<section>
33
<app-header :showBackButton="false" :pageName="$t('books.books')" />
4-
<section class="container container-ssf">
4+
<section class="container container-ssf" v-if="!continueOnPortal">
55
<section class="center">
66
<div class="readable-container">
7-
<h3>Tilgang til Skjulte Skatter og litteratur</h3>
8-
<p>Vi har gleden av å informere om at Skjulte Skatters Forlag nå har lansert første utgave av vår nye litteraturportal, der bladet Skjulte Skatter, sangboken Herrens Veier, ulike Bibeloversettelser og mye av forlagets egen litteratur er tilgjengelig i digitalt format. Digitale utgaver av Skjulte Skatter fra og med januar 2025 er tilgjengelig både som tekst i selve litteraturportalen og som nedlastbare PDF-filer.</p>
9-
<p>Forlaget vil de neste månedene videreutvikle litteraturportalen med funksjonalitet og verktøy som gjør det enklere å finne fram i, og tilegne seg innholdet, herunder muligheten til å synkronisere notater på tvers av enheter, vise to tekster på skjermen samtidig, dele innhold og samhandle med andre brukere. I tillegg vil vi etter hvert integrere AI-verktøy for søk og oppsummering av innhold.</p>
10-
<p>For å få tilgang til litteraturportalen må du først registrere en ny bruker via <a href="https://app.hiddentreasures.org/bcc" target="_blank">denne linken</a>. Dette gjelder også selv om du er eksisterende abonnent. Etter registrering vil du motta en bekreftelse på epost der du blir bedt om å verifisere din epostadresse. Straks du har gjort dette vil du bli sendt til litteraturportalen, der du får opp en melding med mulighet til å linke din konto hos oss mot din BCC-konto.</p>
11-
<p>Har du spørsmål eller trenger hjelp med å få tilgang kan du henvende deg på epost til <a href="mailto:[email protected]">[email protected]</a>.</p>
12-
<p>Hjertelig hilsen,<br />
13-
Redaksjonen</p>
7+
<div class="text-center mb-4">
8+
<img src="../../assets/literature-portal-logo.png" width="150">
9+
</div>
10+
<h2>Tilgang til Skjulte Skatter og litteratur</h2>
11+
<p class="lead">Vi har gleden av å informere om at Skjulte Skatters Forlag nå har lansert første utgave av vår nye litteraturportal, der bladet Skjulte Skatter, sangboken Herrens Veier, ulike Bibeloversettelser og mye av forlagets egen litteratur er tilgjengelig i digitalt format.</p>
12+
13+
<div class="flex sm-flex-col">
14+
<div class="portal-info">
15+
<p>Forlaget vil de neste månedene videreutvikle litteraturportalen med funksjonalitet og verktøy som gjør det enklere å finne fram i, og tilegne seg innholdet, herunder muligheten til å synkronisere notater på tvers av enheter, vise to tekster på skjermen samtidig, dele innhold og samhandle med andre brukere. I tillegg vil vi etter hvert integrere AI-verktøy for søk og oppsummering av innhold.</p>
16+
17+
<h3>Slik får du tilgang</h3>
18+
<p>For å få tilgang til litteraturportalen må du først <a href="https://app.hiddentreasures.org/bcc" target="_blank">registrere en ny bruker</a>. Dette gjelder også selv om du er eksisterende abonnent. Etter registrering vil du motta en bekreftelse på epost der du blir bedt om å verifisere din epostadresse. Straks du har gjort dette vil du bli sendt til litteraturportalen, der du får opp en melding med mulighet til å linke din konto hos oss mot din BCC-konto.</p>
19+
20+
<p>Digitale utgaver av Skjulte Skatter fra og med januar 2025 er tilgjengelig både som tekst i selve litteraturportalen og som nedlastbare PDF-filer.</p>
21+
22+
<h3>Har du spørsmål?</h3>
23+
<p>Har du spørsmål eller trenger hjelp med å få tilgang kan du henvende deg på epost til <a href="mailto:[email protected]">[email protected]</a>.</p>
24+
25+
<p>Hjertelig hilsen,<br />
26+
Redaksjonen</p>
27+
</div>
28+
29+
<div class="text-center p-2">
30+
<a href="https://app.hiddentreasures.org/bcc" target="_blank"><img src="../../assets/SSF_portal_desktop.png" width="250"></a>
31+
<p>Jeg er ny her<br />
32+
<a href="https://app.hiddentreasures.org/bcc" target="_blank" class="register-account">Registrer ny bruker</a></p>
33+
<br />
34+
35+
<p class="no-margin">Jeg har allerede bruker<br />
36+
<a href="https://app.hiddentreasures.org/bcc" target="_blank" class="go-to-portal">Gå til portalen<span class="icon chevron"></span></a>
37+
</p>
38+
39+
<p class="continue-on-portal" @click="continueOnPortal = true">
40+
<span class="underline">Jeg ønsker å fortsette til</span><br />
41+
<span class="underline">den gamle litteratur-siden</span><br />
42+
<span class="icon chevron down"></span>
43+
</p>
44+
</div>
45+
</div>
1446
</div>
1547
</section>
1648
</section>
17-
<section class="center x-small">
18-
<search-box />
19-
</section>
20-
<loader>
49+
<section class="center x-small" v-if="continueOnPortal">
50+
<search-box />
51+
</section>
52+
<loader v-if="continueOnPortal">
2153
<grid :list="publications" :title="$t('subscription.subscriptions')" :layout="GridLayout.TILES" :type="GridType.PUBLICATION"/>
2254
<SearchableGrids>
2355
<grid :list="books" :title="$t('books.books-all')" :layout="GridLayout.TILES" :type="GridType.BOOK" />
@@ -35,21 +67,22 @@ import GridMixin from '@/mixins/grid.js';
3567
import { BookType } from '@/model/bookType.js';
3668
import AppHeader from 'components/layout/app-header';
3769
import SearchBox from 'components/search/search-box';
38-
import SongTreasuresNotice from 'components/song-treasures-notice';
39-
import UserVoiceBanner from 'components/user-voice-banner';
4070
import Loader from 'components/la-loader';
4171
4272
export default {
4373
components: {
4474
Grid,
4575
SearchBox,
46-
SongTreasuresNotice,
47-
UserVoiceBanner,
4876
Loader,
4977
AppHeader,
5078
SearchableGrids
5179
},
5280
mixins: [GridMixin],
81+
data: function() {
82+
return {
83+
continueOnPortal: false
84+
}
85+
},
5386
computed: {
5487
...mapState('books', {
5588
all: state => state.base.all,
@@ -77,6 +110,19 @@ export default {
77110
display: flex;
78111
}
79112
113+
.text-center {
114+
text-align: center;
115+
}
116+
117+
.no-margin {
118+
margin: 0 !important;
119+
}
120+
121+
.underline {
122+
border-bottom: 2px solid #64707580;
123+
padding-bottom: 2px;
124+
}
125+
80126
@media only screen and (max-width: 1049px) {
81127
.banners {
82128
flex-direction: column;

0 commit comments

Comments
 (0)