Ind.ie is now Small Technology Foundation.
Commit 6a144e96 authored by Aral Balkan's avatar Aral Balkan

Hardcoded tabs re-created as pages. Progress on #14

parent 8ef21c97
<template>
<header class='profile' :style='headerStyles'>
<header>
<div class='profile' :style='headerStyles'>
<!-- Profile image -->
<img class='profile-image' v-if='profileImage' :src='profileImage' alt='Profile image'>
<!-- Name and bio and, if signed out, the remote follow button -->
<div class='profile-information'>
<h1 class='profile-name'>{{name}}</h1>
<p class='profile-bio'>{{bio}}</p>
<button v-if='!signedIn && configured' id='follow-button' @click='followButtonPress' class='button'>Follow</button>
</div>
</header>
</div>
<!-- Main navigation -->
<nav class='tabs is-centered' style='background-color: white;'>
<ul>
<li class='is-active'><nuxt-link to='/'>Me</nuxt-link></li>
<li><nuxt-link to='/everyone'>Everyone</nuxt-link></li>
<li><nuxt-link to='/search'>Search</nuxt-link></li>
<li><nuxt-link to='/settings'>Settings</nuxt-link></li>
<li><nuxt-link to='/more'></nuxt-link></li>
</ul>
</nav>
</header>
</template>
<script>
......@@ -37,9 +52,7 @@ export default {
</script>
<style>
.profile
{
.profile {
/* Note: the background colour and image are dynamically set on the
header itself, based on the site configuration settings. */
align-items: center;
......@@ -52,8 +65,7 @@ export default {
width: 100%;
}
.profile-information
{
.profile-information {
background-color: rgba(0,0,0,0.55);
margin-top: 1em;
/* offset background against padding on profile__material */
......@@ -62,8 +74,7 @@ export default {
padding: 0.25rem 0;
}
.profile-name
{
.profile-name {
font-size: 3em;
/* numbered font weights won’t work in all browsers, will default to bold weight */
......@@ -72,14 +83,12 @@ export default {
margin: 0;
}
.profile-bio
{
.profile-bio {
margin: 0 auto 0.25em;
max-width: 42em;
}
.profile-image
{
.profile-image {
/* make image circular with a white border */
border: 0.2em solid white;
border-radius: 50%;
......@@ -93,10 +102,31 @@ export default {
width: 40%;
}
#follow-button
{
#follow-button {
position: absolute;
top: 1em;
right: 1em;
}
/* Main navigation */
nav {
margin-bottom: 1em;
}
nav.tabs {
/* make navigation tab text bigger (ideally these will be h2s) */
font-size: 1.5em;
/* make navigation tabs very tall */
line-height: 2;
}
.tabs ul {
margin: 0;
}
.tabs li {
margin-bottom: 0;
}
</style>
<template>
<div class='page'>
<indie-header @followButtonPress='followModalActive = true' />
<main>
<b-message type='is-info' has-icon><strong>Nothing yet.</strong> Federated posts will go here.</b-message>
</main>
</div>
</template>
<script>
import indieHeader from '~/components/indieHeader'
export default {
components: {
indieHeader
}
}
</script>
<style>
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
}
</style>
......@@ -3,28 +3,29 @@
<!-- Site header -->
<indie-header @followButtonPress='followModalActive = true' />
<!-- Main tabs with currently hard-coded content. -->
<b-tabs v-model='activeTab' position='is-centered' class='block'>
<b-tab-item label='Me' :disabled='!configured'>
<!-- <content-type-filter /> -->
<textComposer ref='textComposer' @composerChange='composerChange' @post='post' v-show='signedIn'/>
<pre style='word-break: break-word;' v-show='signedIn && debug'>{{ composerContent }}</pre>
<transition-group name='list' tag='div' @enter='clearTextComposer'>
<div v-for='post in posts' :key='post.id'>
<!-- <span>ID: {{post.id}}</span> -->
<span v-html='post.content'></span>
</div>
</transition-group>
</b-tab-item>
<b-tab-item label="Everyone" :disabled='!configured'><b-message type='is-info' has-icon><strong>Nothing yet.</strong> Federated posts will go here.</b-message></b-tab-item>
<!-- <content-type-filter /> -->
<!-- Main page content -->
<main>
<textComposer ref='textComposer' @composerChange='composerChange' @post='post' v-show='signedIn'/>
<pre style='word-break: break-word;' v-show='signedIn && debug'>{{ composerContent }}</pre>
<transition-group name='list' tag='div' @enter='clearTextComposer'>
<div v-for='post in posts' :key='post.id'>
<!-- <span>ID: {{post.id}}</span> -->
<span v-html='post.content'></span>
</div>
</transition-group>
</main>
<!-- REFACTORING: old tabs -->
<!-- <b-tab-item label="Everyone" :disabled='!configured'><b-message type='is-info' has-icon><strong>Nothing yet.</strong> Federated posts will go here.</b-message></b-tab-item>
<b-tab-item label='Search' :disabled='!configured'><search /></b-tab-item>
<b-tab-item label="Settings" v-show='signedIn || !configured'><settings /></b-tab-item>
<b-tab-item label="…" v-show='signedIn || !configured' :disabled='!configured'>
<b-message type='is-info' has-icon><strong>Nothing yet.</strong> Additional features will be listed here.</b-message>
</b-tab-item>
</b-tabs>
</b-tab-item> -->
<!-- Follow modal -->
<!-- Follow modal: TODO move to header -->
<follow-modal :isActive='followModalActive' @close='followModalActive = false' />
</div>
</template>
......@@ -36,8 +37,7 @@ import 'font-awesome/css/font-awesome.min.css'
import indieHeader from '~/components/indieHeader'
import followModal from '~/components/followModal'
import contentTypeFilter from '~/components/contentTypeFilter'
import settings from '~/components/settings'
import search from '~/components/search'
import textComposer from '~/components/textComposer'
const Tabs = Object.freeze({
......@@ -53,8 +53,6 @@ export default {
indieHeader,
followModal,
contentTypeFilter,
settings,
search,
textComposer
},
......@@ -112,32 +110,6 @@ export default {
</script>
<style>
.tab-content
{
margin-right: auto;
margin-left: auto;
max-width: 42em;
}
nav.tabs
{
/* make navigation tab text bigger (ideally these will be h2s) */
font-size: 1.5em;
/* make navigation tabs very tall */
line-height: 2;
}
.tabs ul
{
margin: 0;
}
.tabs li
{
margin-bottom: 0;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
......@@ -145,9 +117,4 @@ nav.tabs
opacity: 1;
transform: translateY(-7em);
}
div.compose {
/* This will not be necessary when/if we use the content filter component. */
margin-top: 1em;
}
</style>
<template>
<div class='page'>
<indie-header @followButtonPress='followModalActive = true' />
<main>
<b-message type='is-info' has-icon>
<strong>Nothing yet.</strong> Additional features will be listed here.
</b-message>
</main>
</div>
</template>
<script>
import indieHeader from '~/components/indieHeader'
export default {
components: {
indieHeader
}
}
</script>
<style>
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
}
</style>
<template>
<div class='page's>
<indie-header @followButtonPress='followModalActive = true' />
<main>
<search />
</main>
</div>
</template>
<script>
import indieHeader from '~/components/indieHeader'
import search from '~/components/search'
export default {
components: {
indieHeader,
search
}
}
</script>
<style>
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
}
</style>
<template>
<div class='page'>
<indie-header @followButtonPress='followModalActive = true' />
<main>
<settings />
</main>
</div>
</template>
<script>
import indieHeader from '~/components/indieHeader'
import settings from '~/components/settings'
export default {
components: {
indieHeader,
settings
}
}
</script>
<style>
main {
margin-right: auto;
margin-left: auto;
max-width: 42em;
}
</style>
......@@ -3,8 +3,8 @@
const siteConfiguration = require('../assets/data.json')
// Mock: sign-in state
siteConfiguration.signedIn = false
siteConfiguration.configured = false
siteConfiguration.signedIn = true
siteConfiguration.configured = true
export const state = () => (siteConfiguration)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment