From ceb92a4bfc62b9bb4ffbed9ecc422120428ab45b Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 9 Dec 2023 09:35:39 +0800 Subject: [PATCH 1/8] Fix media widening applied to status cards --- src/components/status.css | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/status.css b/src/components/status.css index 88d884b1a..f2a88ee60 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -712,8 +712,19 @@ /* height: 200px; */ max-height: max(200px, 40vh); } -.status.medium .content ~ * .media-container:is(.media-eq2, .media-gt2), -.status.medium .content ~ .media-container:is(.media-eq2, .media-gt2) { +.status.medium + .content + ~ * + .media-container:not(.status-card .media-container):is( + .media-eq2, + .media-gt2 + ), +.status.medium + .content + ~ .media-container:not(.status-card .media-container):is( + .media-eq2, + .media-gt2 + ) { /* 50px = avatar size */ margin-left: calc(-1 * ((50px / 2))); /* From a039f84c9d1881d45c4f8a549c80184f04f35bc7 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 9 Dec 2023 15:04:21 +0800 Subject: [PATCH 2/8] Don't 100% the select Suppose to be max-width but not working for select(s) --- src/pages/settings.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings.css b/src/pages/settings.css index 9a4e6dd50..1c1481d57 100644 --- a/src/pages/settings.css +++ b/src/pages/settings.css @@ -66,7 +66,6 @@ #settings-container section select { padding: 4px; - width: 100%; } #settings-container .radio-group { From 7dd0b0a4fb18d72561cc37b9f112de4c8f1e73d9 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 10 Dec 2023 19:13:11 +0800 Subject: [PATCH 3/8] Fix for smaller images --- src/components/status.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/status.css b/src/components/status.css index f2a88ee60..70355af40 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -688,6 +688,13 @@ margin-inline: -16px; max-width: calc(100% + 16px + 16px) !important; + figure:before { + content: ''; + display: block; + /* padding (16px) - gap (4px) */ + flex-basis: calc(16px - 4px); + } + figure figcaption { padding-inline: 16px !important; } From 433d8b3bcc15d58d9c78127c239fb98fefadab59 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 10 Dec 2023 19:16:34 +0800 Subject: [PATCH 4/8] Adjustments to welcome and login pages --- src/index.css | 9 ++++ src/pages/login.css | 2 +- src/pages/login.jsx | 77 ++++++++++++++++++++++++---------- src/pages/welcome.css | 87 +++++++++++++++----------------------- src/pages/welcome.jsx | 98 ++++++++++++++++++++++--------------------- 5 files changed, 148 insertions(+), 125 deletions(-) diff --git a/src/index.css b/src/index.css index b6cdb5cdf..8fcbe4973 100644 --- a/src/index.css +++ b/src/index.css @@ -242,6 +242,15 @@ button, :is(button, .button).plain4:not(:disabled, .disabled):is(:hover, :focus) { color: var(--text-color); } +:is(button, .button).plain5 { + background-color: transparent; + color: var(--link-color); + text-decoration: underline; + text-decoration-color: var(--link-faded-color); +} +:is(button, .button).plain5:not(:disabled, .disabled):is(:hover, :focus) { + text-decoration: underline; +} :is(button, .button).light { background-color: var(--bg-faded-color); color: var(--text-color); diff --git a/src/pages/login.css b/src/pages/login.css index 16873c3b7..d142f67a7 100644 --- a/src/pages/login.css +++ b/src/pages/login.css @@ -30,7 +30,7 @@ #instances-suggestions { margin: 0.2em 0 0; - padding: 0; + padding: 0 0 0 1.2em; list-style: none; width: 90vw; max-width: 40em; diff --git a/src/pages/login.jsx b/src/pages/login.jsx index ce5ec8c07..307fb1129 100644 --- a/src/pages/login.jsx +++ b/src/pages/login.jsx @@ -3,6 +3,8 @@ import './login.css'; import { useEffect, useRef, useState } from 'preact/hooks'; import { useSearchParams } from 'react-router-dom'; +import logo from '../assets/logo.svg'; + import Link from '../components/link'; import Loader from '../components/loader'; import instancesListURL from '../data/instances.json?url'; @@ -42,6 +44,7 @@ function Login() { // }, []); const submitInstance = (instanceURL) => { + if (!instanceURL) return; store.local.set('instanceURL', instanceURL); (async () => { @@ -72,23 +75,18 @@ function Login() { })(); }; - const onSubmit = (e) => { - e.preventDefault(); - const { elements } = e.target; - let instanceURL = elements.instanceURL.value.toLowerCase(); - // Remove protocol from instance URL - instanceURL = instanceURL.replace(/^https?:\/\//, '').replace(/\/+$/, ''); - // Remove @acct@ or acct@ from instance URL - instanceURL = instanceURL.replace(/^@?[^@]+@/, ''); - if (!/\./.test(instanceURL)) { - instanceURL = instancesList.find((instance) => - instance.includes(instanceURL), - ); - } - submitInstance(instanceURL); - }; + const cleanInstanceText = instanceText + ? instanceText + .replace(/^https?:\/\//, '') // Remove protocol from instance URL + .replace(/\/+$/, '') // Remove trailing slash + .replace(/^@?[^@]+@/, '') // Remove @?acct@ + .trim() + : null; + const instanceTextLooksLikeDomain = + /[^\s\r\n\t\/\\]+\.[^\s\r\n\t\/\\]+/.test(cleanInstanceText) && + !/[\s\/\\@]/.test(cleanInstanceText); - const instancesSuggestions = instanceText + const instancesSuggestions = cleanInstanceText ? instancesList .filter((instance) => instance.includes(instanceText)) .sort((a, b) => { @@ -106,10 +104,39 @@ function Login() { .slice(0, 10) : []; + const selectedInstanceText = instanceTextLooksLikeDomain + ? cleanInstanceText + : instancesSuggestions?.length + ? instancesSuggestions[0] + : instanceText + ? instancesList.find((instance) => instance.includes(instanceText)) + : null; + + const onSubmit = (e) => { + e.preventDefault(); + // const { elements } = e.target; + // let instanceURL = elements.instanceURL.value.toLowerCase(); + // // Remove protocol from instance URL + // instanceURL = instanceURL.replace(/^https?:\/\//, '').replace(/\/+$/, ''); + // // Remove @acct@ or acct@ from instance URL + // instanceURL = instanceURL.replace(/^@?[^@]+@/, ''); + // if (!/\./.test(instanceURL)) { + // instanceURL = instancesList.find((instance) => + // instance.includes(instanceURL), + // ); + // } + // submitInstance(instanceURL); + submitInstance(selectedInstanceText); + }; + return (
-

Log in

+

+ +
+ Log in +