Support movie covers as avatars #1

Merged
rafaelcaricio merged 1 commit from movies-covers into main 2023-04-25 08:53:00 +00:00
11 changed files with 20 additions and 49 deletions

View file

@ -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>

View file

@ -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;
} }

View file

@ -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%;

View file

@ -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;

View file

@ -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;
} }

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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>

View file

@ -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,12 +113,8 @@ 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), () => {
if (hasEthereumWallet() || isWalletRequired()) { if (hasEthereumWallet() || isWalletRequired()) {
@ -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;
} }

View file

@ -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;