Support movie covers as avatars #1
11 changed files with 20 additions and 49 deletions
|
@ -18,7 +18,7 @@ loadInstanceInfo()
|
||||||
|
|
||||||
watch($$(currentUser), () => {
|
watch($$(currentUser), () => {
|
||||||
const title = currentUser ? `@${currentUser.username}` : "Federated social network"
|
const title = currentUser ? `@${currentUser.username}` : "Federated social network"
|
||||||
document.title = `Mitra | ${title}`
|
document.title = `FediMovies.rocks | ${title}`
|
||||||
}, { immediate: true })
|
}, { immediate: true })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -41,7 +41,7 @@ export interface InstanceInfo {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
login_message: string;
|
login_message: string;
|
||||||
blockchains: BlockchainInfo[];
|
blockchains: BlockchainInfo[] | null;
|
||||||
ipfs_gateway_url: string | null;
|
ipfs_gateway_url: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -32,11 +32,11 @@ const avatarUrl = computed<string>(() => {
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.avatar {
|
.avatar {
|
||||||
background-color: var(--block-background-color);
|
background-color: var(--block-background-color);
|
||||||
border-radius: 50%;
|
//border-radius: 50%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: inherit;
|
//border-radius: inherit;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -78,7 +78,7 @@ $profile-padding: calc($block-inner-padding / 2);
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
height: $avatar-size;
|
height: $avatar-size * 1.5;
|
||||||
margin-right: $profile-padding;
|
margin-right: $profile-padding;
|
||||||
margin-top: calc(-1 * ($profile-padding + $avatar-size / 3));
|
margin-top: calc(-1 * ($profile-padding + $avatar-size / 3));
|
||||||
min-width: $avatar-size;
|
min-width: $avatar-size;
|
||||||
|
|
|
@ -40,10 +40,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
h1.page-heading {
|
h1.page-heading {
|
||||||
font-size: 90px;
|
font-size: 60px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 0 0 20px;
|
margin: 0 0 20px;
|
||||||
text-transform: uppercase;
|
//text-transform: uppercase;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -24,7 +24,7 @@ export function useInstanceInfo() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getBlockchainInfo(): BlockchainInfo | null {
|
function getBlockchainInfo(): BlockchainInfo | null {
|
||||||
return instance.value?.blockchains[0] || null
|
return instance.value?.blockchains?.[0] ?? null
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -16,7 +16,7 @@ export function ethereumAddressMatch(address1: string, address2: string): boolea
|
||||||
}
|
}
|
||||||
|
|
||||||
export function hasEthereumWallet(): boolean {
|
export function hasEthereumWallet(): boolean {
|
||||||
return Boolean((window as any).ethereum)
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getWeb3Provider(): Web3Provider {
|
export function getWeb3Provider(): Web3Provider {
|
||||||
|
|
|
@ -5,9 +5,9 @@
|
||||||
<div class="description static-text" v-html="instance.description"></div>
|
<div class="description static-text" v-html="instance.description"></div>
|
||||||
<details class="technical-info static-text">
|
<details class="technical-info static-text">
|
||||||
<summary>Technical Info</summary>
|
<summary>Technical Info</summary>
|
||||||
mitra version: {{ getMitraVersion(instance.version) }}
|
backend version: {{ getMitraVersion(instance.version) }}
|
||||||
<br>
|
<br>
|
||||||
mitra-web version: {{ APP_VERSION }}
|
web version: {{ APP_VERSION }}
|
||||||
</details>
|
</details>
|
||||||
</template>
|
</template>
|
||||||
</sidebar-layout>
|
</sidebar-layout>
|
||||||
|
@ -32,7 +32,7 @@ const { currentUser } = $(useCurrentUser())
|
||||||
const { instance } = $(useInstanceInfo())
|
const { instance } = $(useInstanceInfo())
|
||||||
|
|
||||||
function getMitraVersion(apiVersion: string): string {
|
function getMitraVersion(apiVersion: string): string {
|
||||||
const match = apiVersion.match(/.+Mitra ([\d.]+)/)
|
const match = apiVersion.match(/.+Reef ([\d.]+)/)
|
||||||
if (match) {
|
if (match) {
|
||||||
return match[1]
|
return match[1]
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -1,15 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<static-page class="wide">
|
<static-page class="wide">
|
||||||
<template #heading>Ethereum</template>
|
<template #heading>No blockchains!</template>
|
||||||
<template #text>
|
<template #text>
|
||||||
<p>
|
<p>
|
||||||
You can register on this server with your <a href="https://ethereum.org/en/wallets/find-wallet/?filters=has_explore_dapps" target="_blank" rel="noopener">Ethereum wallet</a>.
|
Don't use cryptocurrencies. Thanks!
|
||||||
<a href="https://metamask.io/" target="_blank" rel="noopener">MetaMask</a> is a good choice for beginners.
|
|
||||||
Your wallet address will be stored for authentication purposes and will not be exposed unless you later complete the address verification procedure.
|
|
||||||
In that case, your address will be publicly associated with your account.
|
|
||||||
To protect your privacy, it is recommended that you create a fresh address and don't link it to your other activities.
|
|
||||||
This can be achieved by using an exchange <a href="http://kycnot.me/" target="_blank" rel="noopener">that doesn't require identity verification</a>.
|
|
||||||
For general privacy recommendations, visit <a href="https://www.privacyguides.org/tools/" target="_blank" rel="noopener">PrivacyGuides</a> website.
|
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</static-page>
|
</static-page>
|
||||||
|
|
|
@ -10,21 +10,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="instance" class="login-form-group">
|
<div v-if="instance" class="login-form-group">
|
||||||
<div class="login-type">
|
|
||||||
<button
|
|
||||||
v-if="!isWalletRequired()"
|
|
||||||
:class="{ active: loginType === 'password' }"
|
|
||||||
@click.prevent="loginType = 'password'; loginErrorMessage = null"
|
|
||||||
>
|
|
||||||
Password
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
:class="{ active: loginType === 'eip4361' }"
|
|
||||||
@click.prevent="loginType = 'eip4361'; loginErrorMessage = null"
|
|
||||||
>
|
|
||||||
Ethereum
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<form class="login-form">
|
<form class="login-form">
|
||||||
<div v-if="isLoading" class="login-form-loader">
|
<div v-if="isLoading" class="login-form-loader">
|
||||||
<loader></loader>
|
<loader></loader>
|
||||||
|
@ -47,7 +32,7 @@
|
||||||
Only lowercase letters, numbers and underscores are allowed.
|
Only lowercase letters, numbers and underscores are allowed.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-control" v-if="loginType === 'password'">
|
<div class="form-control">
|
||||||
<input
|
<input
|
||||||
id="password"
|
id="password"
|
||||||
type="password"
|
type="password"
|
||||||
|
@ -64,10 +49,6 @@
|
||||||
placeholder="Enter the invite code"
|
placeholder="Enter the invite code"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="wallet-required" v-if="loginType === 'eip4361'">
|
|
||||||
<img src="@/assets/forkawesome/ethereum.svg">
|
|
||||||
<router-link :to="{ name: 'ethereum' }">Ethereum Wallet</router-link> is required
|
|
||||||
</div>
|
|
||||||
<button
|
<button
|
||||||
v-if="isRegistered"
|
v-if="isRegistered"
|
||||||
type="submit"
|
type="submit"
|
||||||
|
@ -132,11 +113,7 @@ let isLoading = $ref(false)
|
||||||
let loginErrorMessage = $ref<string | null>(null)
|
let loginErrorMessage = $ref<string | null>(null)
|
||||||
|
|
||||||
function isWalletRequired(): boolean {
|
function isWalletRequired(): boolean {
|
||||||
if (!instance) {
|
return false
|
||||||
return false
|
|
||||||
}
|
|
||||||
const blockchain = getBlockchainInfo()
|
|
||||||
return Boolean(blockchain?.features.gate)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
watch($$(instance), () => {
|
watch($$(instance), () => {
|
||||||
|
@ -302,10 +279,10 @@ $landing-text-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.instance-title {
|
.instance-title {
|
||||||
font-size: 90px;
|
font-size: 60px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
text-transform: uppercase;
|
//text-transform: uppercase;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -638,7 +638,7 @@ async function loadFollowListNextPage() {
|
||||||
@import "../styles/mixins";
|
@import "../styles/mixins";
|
||||||
@import "../styles/theme";
|
@import "../styles/theme";
|
||||||
|
|
||||||
$avatar-size: 170px;
|
$avatar-size: 185px;
|
||||||
|
|
||||||
.profile-block {
|
.profile-block {
|
||||||
@include block-btn;
|
@include block-btn;
|
||||||
|
@ -683,7 +683,7 @@ $avatar-size: 170px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
height: $avatar-size;
|
height: $avatar-size * 1.5;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-top: calc(-1 * ($avatar-size / 2 + $block-inner-padding));
|
margin-top: calc(-1 * ($avatar-size / 2 + $block-inner-padding));
|
||||||
min-width: $avatar-size;
|
min-width: $avatar-size;
|
||||||
|
|
Loading…
Reference in a new issue