Skip to content
This repository has been archived by the owner on Jun 13, 2022. It is now read-only.

Commit

Permalink
feat(core): create the subscriptions sub-section
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliomrqz
juliomrqz committed Dec 11, 2018
1 parent 732eb10 commit b798439
Show file tree
Hide file tree
Showing 24 changed files with 311 additions and 56 deletions.
82 changes: 82 additions & 0 deletions packages/@statusfy/core/client/assets/css/styles.css
View file
Expand Up @@ -457,3 +457,85 @@ main {
}
}
}

/* Header */
.header {
@apply pt-4 my-2 flex flex-col items-center content-center flex-no-wrap;

@screen lg {
@apply flex-row items-stretch;
}

.logo-container {
@apply flex-none;
}

.logo {
@apply h-10;
}

.title {
@apply font-normal mx-4 my-2 text-xl flex-none;
}

.subscribe-container {
@apply flex-1 text-right my-2;

@screen lg {
@apply my-0;
}

.modal-container {
background-color: rgba(0, 0, 0, 0.5);

@apply fixed z-50 pin overflow-auto flex;
}

.modal-body {
background-color: var(--white);

/* @apply fixed shadow-inner max-w-md pin-b pin-x align-top m-auto justify-end p-8 w-full flex flex-col; */
@apply fixed shadow-inner max-w-md pin-b pin-x align-top m-auto justify-end w-full flex flex-col rounded-t;

@screen md {
@apply justify-center rounded h-auto shadow relative rounded;
}

.tabs-header {
@apply flex flex-col flex-no-wrap items-stretch content-center justify-between pt-2;

@screen md {
@apply flex-row;
}

> span {
color: var(--grey-dark);

@apply flex-1 text-center font-medium py-3 cursor-pointer mx-4;

&:hover {
color: var(--grey-darkest);
}

&.active {
color: var(--black);
@apply flex-1 text-center font-semibold;

@screen md {
border-bottom-color: var(--black);
@apply border-b-2;
}
}
}
}

.tabs-container {
@apply flex flex-col items-center my-6;

> div {
@apply flex items-center py-6 text-center;
}
}
}
}
}
16 changes: 12 additions & 4 deletions packages/@statusfy/core/client/components/Header.vue
View file
@@ -1,21 +1,29 @@
<template>
<div class="py-4 my-2 flex flex-col items-center md:flex-row">
<nuxt-link :to="localePath('index')">
<div class="header">
<nuxt-link
:to="localePath('index')"
class="logo-container">
<img
:alt="$t('title')"
:src="$statusfy.assets.mainLogo"
class="h-10">
class="logo">
</nuxt-link>
<component
:is="titleTag"
class="title font-normal mx-4 my-2 text-xl">
class="title">
{{ $t('title') }}
</component>
<Subscribe class="subscribe-container"/>
</div>
</template>

<script>
import Subscribe from './Subscribe'
export default {
components: {
Subscribe
},
props: {
titleTag: {
type: String,
Expand Down
110 changes: 110 additions & 0 deletions packages/@statusfy/core/client/components/Subscribe.vue
View file
@@ -0,0 +1,110 @@
<template>
<div>
<button
class="btn"
@click="toggleModal">{{ $t('notifications.subscribe') }}</button>

<div
v-show="isModalActive"
class="modal-container"
@click.self="toggleModal">
<div class="modal-body">
<div class="tabs-header">
<span
v-for="(tab, key) in tabs"
:key="key"
:class="{'active': selectedTab === key}"
@click="switchTab(key)">
{{ $t(`notifications.items.${key}.title`) }}
</span>
<span @click="toggleModal">{{ $t('notifications.close') }}</span>
</div>

<div class="tabs-container">
<div
v-if="tabs.twitter"
v-show="selectedTab === 'twitter'">
<a
:href="`https://twitter.com/${$statusfy.notifications.twitter[$i18n.locale]}?ref_src=twsrc%5Etfw`"
:data-lang="$i18n.locale"
data-size="large"
class="twitter-follow-button"
data-show-count="false">Follow @{{ $statusfy.notifications.twitter[$i18n.locale] }}</a>
<script
async
src="https://platform.twitter.com/widgets.js"
charset="utf-8"/>
&nbsp;
<span v-html="$t('notifications.items.twitter.description', { username: tabs.twitter[$i18n.locale] })"/>
</div>
<div
v-if="tabs.support"
v-show="selectedTab === 'support'">
<span v-html="$t('notifications.items.support.description', { url: tabs.support[$i18n.locale] })"/>
</div>
<div
v-if="tabs.icalendar && icalendarUrl"
v-show="selectedTab === 'icalendar'">
<span v-html="$t('notifications.items.icalendar.description', { url: icalendarUrl })"/>
</div>
<div
v-if="tabs.feeds"
v-show="selectedTab === 'feeds'">
<span v-html="$t('notifications.items.feeds.description', { atom_url: feedsUrls.atom, rss_url: feedsUrls.rss })"/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
isModalActive: false,
selectedTab: null
}
},
computed: {
tabs () {
const results = {}
const keys = Object.keys(this.$statusfy.notifications)
keys.forEach(key => {
if (this.$statusfy.notifications[key]) {
results[key] = this.$statusfy.notifications[key]
}
})
this.switchTab(Object.keys(results)[0])
return results
},
icalendarUrl () {
if (process.client) {
return `webcal://${window.location.hostname}/calendars/scheduled.${this.$i18n.locale}.ics`
} else {
return null
}
},
feedsUrls () {
const atom = `//${window.location.hostname}/feeds/incidents.${this.$i18n.locale}.atom`
const rss = `//${window.location.hostname}/feeds/incidents.${this.$i18n.locale}.xml`
return {
atom,
rss
}
}
},
methods: {
toggleModal () {
this.isModalActive = !this.isModalActive
},
switchTab (key) {
this.selectedTab = key
}
}
}
</script>
1 change: 0 additions & 1 deletion packages/@statusfy/core/client/components/icons/fortawesome/check-circle-solid.js
View file
@@ -1,4 +1,3 @@

/* eslint-disable */
/* tslint:disable */
// @ts-ignore
Expand Down
1 change: 0 additions & 1 deletion packages/@statusfy/core/client/components/icons/fortawesome/chevron-left-solid.js
View file
@@ -1,4 +1,3 @@

/* eslint-disable */
/* tslint:disable */
// @ts-ignore
Expand Down
1 change: 0 additions & 1 deletion packages/@statusfy/core/client/components/icons/fortawesome/chevron-right-solid.js
View file
@@ -1,4 +1,3 @@

/* eslint-disable */
/* tslint:disable */
// @ts-ignore
Expand Down
1 change: 0 additions & 1 deletion packages/@statusfy/core/client/components/icons/fortawesome/clock-solid.js
View file
@@ -1,4 +1,3 @@

/* eslint-disable */
/* tslint:disable */
// @ts-ignore
Expand Down
1 change: 0 additions & 1 deletion packages/@statusfy/core/client/components/icons/fortawesome/exclamation-circle-solid.js
View file
@@ -1,4 +1,3 @@

/* eslint-disable */
/* tslint:disable */
// @ts-ignore
Expand Down
1 change: 0 additions & 1 deletion packages/@statusfy/core/client/components/icons/fortawesome/external-link-alt-solid.js
View file
@@ -1,4 +1,3 @@

/* eslint-disable */
/* tslint:disable */
// @ts-ignore
Expand Down
1 change: 0 additions & 1 deletion packages/@statusfy/core/client/components/icons/fortawesome/minus-circle-solid.js
View file
@@ -1,4 +1,3 @@

/* eslint-disable */
/* tslint:disable */
// @ts-ignore
Expand Down
1 change: 0 additions & 1 deletion packages/@statusfy/core/client/components/icons/fortawesome/question-circle-regular.js
View file
@@ -1,4 +1,3 @@

/* eslint-disable */
/* tslint:disable */
// @ts-ignore
Expand Down
1 change: 0 additions & 1 deletion packages/@statusfy/core/client/components/icons/fortawesome/times-circle-solid.js
View file
@@ -1,4 +1,3 @@

/* eslint-disable */
/* tslint:disable */
// @ts-ignore
Expand Down
1 change: 0 additions & 1 deletion packages/@statusfy/core/client/components/icons/fortawesome/unlink-solid.js
View file
@@ -1,4 +1,3 @@

/* eslint-disable */
/* tslint:disable */
// @ts-ignore
Expand Down
22 changes: 22 additions & 0 deletions packages/@statusfy/core/client/locales/en-default.json
View file
Expand Up @@ -75,5 +75,27 @@
"description": "The API Endpoints any developers can access to"
}
}
},
"notifications": {
"subscribe": "Subscribe",
"close": "Close",
"items": {
"icalendar": {
"title": "Calendar",
"description": "Receive <strong>Scheduled Maintenances</strong> via <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">iCalendar</a>."
},
"feeds": {
"title": "Feeds",
"description": "Get <a href=\"{atom_url}\" target=\"_blank\" rel=\"noopener\">the Atom Feed</a> or <a href=\"{rss_url}\" target=\"_blank\" rel=\"noopener\">the RSS Feed</a>."
},
"twitter": {
"title": "Twitter",
"description": "or <a href=\"https://twitter.com/{username}\" target=\"_blank\" rel=\"noopener\">view our Profile</a>."
},
"support": {
"title": "Support",
"description": "Visit our <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">Support Site</a>."
}
}
}
}
22 changes: 22 additions & 0 deletions packages/@statusfy/core/client/locales/es-default.json
View file
Expand Up @@ -75,5 +75,27 @@
"description": "Los puntos finales del API a los que cualquier desarrollador puede acceder"
}
}
},
"notifications": {
"subscribe": "Suscribirse",
"close": "Cerrar",
"items": {
"icalendar": {
"title": "Calendario",
"description": "Recibe <strong>Mantenimientos Programados</strong> a través de <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">iCalendar</a>."
},
"feeds": {
"title": "Feeds",
"description": "Obtén feeds <a href=\"{atom_url}\" target=\"_blank\" rel=\"noopener\">Atom</a> o <a href=\"{rss_url}\" target=\"_blank\" rel=\"noopener\">RSS</a>."
},
"twitter": {
"title": "Twitter",
"description": "o <a href=\"https://twitter.com/{username}\" target=\"_blank\" rel=\"noopener\">visita Nuestro Perfil</a>."
},
"support": {
"title": "Soporte",
"description": "Visita nuestro <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">Sitio de Soporte</a>."
}
}
}
}

0 comments on commit b798439

Please sign in to comment.