Merge pull request #242 from mmmnmnm/#241-membership-page

#241 membership page
lahmacunradio · Feb 23, 2022 · 3f8da2b · 3f8da2b
2 parents b9e2733 + cebeaf7
commit 3f8da2b
Show file tree

Hide file tree

Showing 21 changed files with 181 additions and 65 deletions.
diff --git a/app/assets/css/globalstyles.css b/app/assets/css/globalstyles.css
diff --git a/app/assets/css/globalstyles.scss b/app/assets/css/globalstyles.scss
@@ -76,15 +76,15 @@ body {
   @apply mx-auto;
 }
 
-h1 {
+h1, .h1 {
   font-size: 3rem;
   @media (max-width: $mobile-width) {
     font-size: 2.4rem;
   }
   font-weight: 600;
   line-height: 1.2em;
 }
-h2 {
+h2, .h2 {
   font-size: 2.5rem;
   @media (max-width: $mobile-width) {
     font-size: 2.1rem;
@@ -93,7 +93,7 @@ h2 {
   line-height: 1.2em;
   margin: 1rem 0;
 }
-h3 {
+h3, .h3 {
   font-size: 2rem;
   @media (max-width: $mobile-width) {
     font-size: 1.8rem;
@@ -102,7 +102,7 @@ h3 {
   line-height: 1.2em;
   margin: 1rem 0;
 }
-h4 {
+h4, .h4 {
   font-size: 1.5rem;
   @media (max-width: $mobile-width) {
     font-size: 1.3rem;
@@ -111,7 +111,7 @@ h4 {
   line-height: 1.4em;
 }
 
-h5 {
+h5, .h5 {
   font-size: 1.25rem;
   @media (max-width: $mobile-width) {
     font-size: 1.2rem;
@@ -151,7 +151,7 @@ span.moresign {
 }
 
 .show-description {
-  h3 {
+  h1, h3 {
     margin-top: 0;
   }
 }
@@ -222,7 +222,7 @@ span.moresign {
   border-radius: 2rem;
 }
 
-h2.title-block {
+.title-block {
   font-size: 2rem;
   @media (max-width: $mobile-width) {
     font-size: 1.8rem;

diff --git a/app/components/HeaderBare.vue b/app/components/HeaderBare.vue
@@ -1,13 +1,13 @@
 <template>
-  <header class="flex-row-reverse items-center px-4 py-4 bg-white md:flex md:flex-row">
+  <header class="flex flex-row items-center px-4 py-4 bg-white ">
     <div class="items-center md:flex">
       <div class="block mr-4 cursor-pointer" @click="$router.push('/')">
         <img src="@/assets/img/lahmacun-logo.png" alt="" class="w-24 logo">
       </div>
     </div>
-    <h2>
+    <div class="h2">
       Lahmacun radio
-    </h2>
+    </div>
   </header>
 </template>
 

diff --git a/app/components/HeaderBlock.vue b/app/components/HeaderBlock.vue
@@ -2,9 +2,9 @@
   <header class="flex-row-reverse items-center justify-between px-4 py-2 bg-white md:flex md:flex-row">
     <div class="flex items-center mb-4 xsm:mb-0 xsm:overflow-hidden">
       <div class="block mr-4 cursor-pointer" @click="$router.push('/')">
-        <h1 class="main-title">
+        <div class="main-title">
           Lahmacun Radio
-        </h1>
+        </div>
         <img src="@/assets/img/lahma_logo_1.svg" alt="Lahmacun Radio" class="w-24 logo">
       </div>
       <div class="mt-2 xsm:my-4 md:mr-8">
@@ -107,7 +107,7 @@ export default {
   header {
       justify-content: space-between;
       align-content: center;
-      h1.main-title {
+      .main-title {
         text-indent: -99em;
         font-size: 0.1px;
       }

diff --git a/app/components/SubTitle.vue b/app/components/SubTitle.vue
@@ -1,10 +1,13 @@
 <template>
   <div>
-    <h2 class="title-block">
+    <h1 v-if="maintitle" class="title-block">
+      {{ title }}
+    </h1>
+    <h2 v-else class="title-block">
       <NuxtLink v-if="url" :to="url">
-        {{title}}
+        {{ title }}
       </NuxtLink>
-      <span v-else>{{title}}</span>
+      <span v-else>{{ title }}</span>
     </h2>
   </div>
 </template>
@@ -21,6 +24,11 @@ export default {
       type: String,
       required: false,
       default: null
+    },
+    maintitle: {
+      type: Boolean,
+      required: false,
+      deafult: false
     }
   }
 }

diff --git a/app/components/news/Full.vue b/app/components/news/Full.vue
@@ -26,9 +26,9 @@
         </div>
       </div>
       <div id="news-content">
-        <h2 class="mt-0 font-bold">
+        <h1 class="mt-0 font-bold h2">
           {{ htmlDecoder(news.title.rendered) }}
-        </h2>
+        </h1>
         <p class="mb-4 news-time">
           {{ $moment(news.date).format('yyyy. MMMM Do.') }}
         </p>

diff --git a/app/components/news/Home.vue b/app/components/news/Home.vue
@@ -29,11 +29,11 @@
     </div>
     <div class="news-infos">
       <div class="p-8 news-info-details">
-        <h5 class="pb-2 text-2xl font-bold">
+        <h1 class="pb-2 text-2xl font-bold">
           <nuxt-link :to="'/news/' + news.slug">
             {{ htmlDecoder(news.title.rendered) }}
           </nuxt-link>
-        </h5>
+        </h1>
         <div v-sanitize="[ sanitizeOptions, truncatedNews ]" />
       </div>
     </div>

diff --git a/app/constants/index.js b/app/constants/index.js
@@ -19,6 +19,7 @@ export const newsURL = contentApiURL + '/posts?categories=5&per_page=12'
 export const aboutUsURL = contentApiURL + '/pages/228'
 export const impressumURL = contentApiURL + '/pages/3075'
 export const donateURL = contentApiURL + '/pages/2'
+export const membershipURL = contentApiURL + '/pages/1425'
 export const favouriteRadiosURL = contentApiURL + '/pages/2875'
 export const callForShowsURL = contentApiURL + '/pages/3077'
 export const lahmaBaseURL = contentApiURL + '/pages/3079'

diff --git a/app/layouts/bare.vue b/app/layouts/bare.vue
@@ -7,6 +7,6 @@
 
 <script>
 export default {
-  name: 'Bare'
+  name: 'BareLayout'
 }
 </script>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col min-h-screen" :class="{ 'pb-12': arcsiVisible }">
     <HeaderBlock />
-    <nuxt class="flex-grow pb-12" />
+    <nuxt class="flex-grow pb-12 min-h-64" />
     <FooterHome v-if="$route.name === 'index'" />
     <FooterBottom v-else />
     <BottomArcsiPlayer />

diff --git a/app/layouts/error.vue b/app/layouts/error.vue
@@ -1,23 +1,21 @@
 <template>
   <div>
-    <h3 class="title-block">
-      Error page
-    </h3>
-    <div class="container pt-8 text-center error-page">
-      <h1 v-if="error.statusCode === 404">
-        Page not found
-      </h1>
-      <h1 v-else-if="error.statusCode === 500">
-        {{ error.message || 'Server error' }}
-      </h1>
-      <h1 v-else>
-        An error occurred
-      </h1>
-      <NuxtLink to="/">
-        <img src="@/assets/img/lahmacun-logo.png" alt="" class="h-48 py-8 mx-auto">
+    <SubTitle title="Error page" />
+    <NuxtLink to="/">
+      <img src="@/assets/img/lahma_citrom_transparent.png" alt="" class="w-full pt-8 mx-auto md:w-80">
+      <div class="container pt-8 text-center error-page">
+        <h1 v-if="error.statusCode === 404">
+          Page {{ $route && `"${$route.path}"` }} not found
+        </h1>
+        <h1 v-else-if="error.statusCode === 500">
+          {{ error.message || 'Server error' }}
+        </h1>
+        <h1 v-else>
+          An error occurred
+        </h1>
         Try the Home page
-      </NuxtLink>
-    </div>
+      </div>
+    </NuxtLink>
   </div>
 </template>
 
@@ -34,7 +32,11 @@ export default {
   mounted () {
     if (this.isClient) {
       this.tryReloadInterval = setInterval(() => {
-        window.location.reload()
+        if (this.error.statusCode !== 404) {
+          window.location.reload()
+        } else {
+          window.location.href = '/'
+        }
       }, 30000)
     }
   },
@@ -48,5 +50,8 @@ export default {
 .error-page {
   background: $lahma-pink;
   @apply flex flex-col align-middle justify-items-center;
+  h1 {
+    @apply text-4xl mb-2;
+  }
 }
 </style>
diff --git a/app/pages/archive.vue b/app/pages/archive.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <SubTitle title="Lahmacun Archive" />
+    <SubTitle title="Lahmacun Archive" :maintitle="true" />
     <div class="container mt-8">
       <!-- no search for now, is buggy
       <div v-if="defaultEpisodes" class="flex justify-between">

diff --git a/app/pages/donate.vue b/app/pages/donate.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <h2 class="title-block">
-      Lahmacun Donate
-    </h2>
+    <SubTitle title="Lahmacun Donate" :maintitle="true" />
     <div class="container my-8">
       <div v-if="$fetchState.pending" class="center">
         Loading...
@@ -75,7 +73,7 @@ export default {
       if (!this.donateContent?.content?.rendered) {
         return 'No content'
       }
-      return this.donateContent.content.rendered.replaceAll('target="_top"', 'target="_blank"')
+      return this.donateContent.content.rendered.replace(/target="_top"/g, 'target="_blank"')
     }
   }
 }

diff --git a/app/pages/impressum.vue b/app/pages/impressum.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <h2 class="title-block">
-      Lahmacun Impressum
-    </h2>
+    <SubTitle title="Lahmacun Impressum" :maintitle="true" />
     <div id="about-page-content" class="container mt-8">
       <div v-if="$fetchState.pending" class="py-8 center w-100">
         Loading...
@@ -11,10 +9,10 @@
         Some error happened...
       </div>
       <div v-if="impressum" class="md:flex">
-        <div v-if="impressumFeaturedImage" class="md:mr-8 mb-4 md:mb-0 min-w-1/2 lg:min-w-1/3 md:w-1/2 lg:w-1/3">
+        <div v-if="impressumFeaturedImage" class="mb-4 md:mr-8 md:mb-0 min-w-1/2 lg:min-w-1/3 md:w-1/2 lg:w-1/3">
           <img :src="impressumFeaturedImage.source_url" alt="Lahmacun Impressum">
         </div>
-        <div v-sanitize="[ sanitizeOptions, impressumResults]" />
+        <div v-sanitize="[ sanitizeOptions, impressumResults]" class="text-content" />
       </div>
     </div>
   </div>