The Pinafore logo

From 7b7fc528f14588b2a7b9dffd0ef75c1c466accd6 Mon Sep 17 00:00:00 2001 From: Vivian Lim ⭐ <1565930+vivlim@users.noreply.github.com> Date: Mon, 27 Jan 2025 05:24:31 -0800 Subject: [feature/frontend] Add login button to index page which reiterates info about clients (#3377) * Add login button to index page which reiterates info about clients * bit of CSS fiddling, move apps from front page to login info * fix indentation --------- Co-authored-by: tobi --- web/assets/ellipsis.svg | 5 ++ web/source/css/index.css | 50 ------------- web/source/css/login-info.css | 114 ++++++++++++++++++++++++++++++ web/source/css/page.css | 6 ++ web/template/index.tmpl | 1 - web/template/index_apps.tmpl | 118 ------------------------------- web/template/login_button.tmpl | 22 ++++++ web/template/login_info.tmpl | 157 +++++++++++++++++++++++++++++++++++++++++ web/template/page.tmpl | 5 +- 9 files changed, 308 insertions(+), 170 deletions(-) create mode 100644 web/assets/ellipsis.svg create mode 100644 web/source/css/login-info.css delete mode 100644 web/template/index_apps.tmpl create mode 100644 web/template/login_button.tmpl create mode 100644 web/template/login_info.tmpl (limited to 'web') diff --git a/web/assets/ellipsis.svg b/web/assets/ellipsis.svg new file mode 100644 index 000000000..e1b114020 --- /dev/null +++ b/web/assets/ellipsis.svg @@ -0,0 +1,5 @@ + + + diff --git a/web/source/css/index.css b/web/source/css/index.css index 382cd68c6..9f8e662d4 100644 --- a/web/source/css/index.css +++ b/web/source/css/index.css @@ -75,53 +75,3 @@ max-width: 100%; } } - -.apps { - align-self: start; - - .applist { - margin: 0; - padding: 0; - - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 0.5rem; - align-content: start; - - .applist-entry { - display: grid; - grid-template-columns: 25% 1fr; - grid-template-areas: "logo text"; - gap: 1.5rem; - padding: 0.5rem; - - .applist-logo { - grid-area: logo; - align-self: center; - justify-self: center; - width: 100%; - object-fit: contain; - flex: 1 1 auto; - } - - .applist-logo.redraw { - fill: $fg; - stroke: $fg; - } - - .applist-text { - grid-area: text; - - a { - font-weight: bold; - } - } - } - } -} - -@media screen and (max-width: 600px) { - .apps .applist { - grid-template-columns: 1fr; - } -} diff --git a/web/source/css/login-info.css b/web/source/css/login-info.css new file mode 100644 index 000000000..6605b46be --- /dev/null +++ b/web/source/css/login-info.css @@ -0,0 +1,114 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +/* + Reuse about styling, but rework it + to separate sections a bit more. +*/ +.about { + padding: 0; + + background: initial; + box-shadow: initial; + border: initial; + border-radius: initial; + + .about-section { + padding: 2rem; + background: $bg-accent; + box-shadow: $boxshadow; + border: $boxshadow-border; + border-radius: $br; + + h3 { + margin-top: 0px; + } + } + + & > .about-section.settings { + display: flex; + flex-direction: row; + gap: 1rem; + align-items: center; + justify-content: center; + + padding-top: 1rem; + padding-bottom: 1rem; + + p.settings-text { + margin-top: auto; + margin-bottom: auto; + flex: auto; + } + + .settings-button { + flex: auto; + } + } + + & > .about-section.apps { + align-self: start; + + .applist { + margin: 0; + padding: 0; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 0.5rem; + align-content: start; + + .applist-entry { + display: grid; + grid-template-columns: 25% 1fr; + grid-template-areas: "logo text"; + gap: 1.5rem; + padding: 0.5rem; + + .applist-logo { + grid-area: logo; + align-self: center; + justify-self: center; + width: 100%; + object-fit: contain; + flex: 1 1 auto; + } + + .applist-logo.redraw { + fill: $fg; + stroke: $fg; + } + + .applist-text { + grid-area: text; + + a { + font-weight: bold; + } + } + } + } + + @media screen and (max-width: 600px) { + .applist { + grid-template-columns: 1fr; + } + } + } +} diff --git a/web/source/css/page.css b/web/source/css/page.css index 752b264ee..822d095c4 100644 --- a/web/source/css/page.css +++ b/web/source/css/page.css @@ -135,3 +135,9 @@ text-align: center; } } + +.login { + position: absolute; + top: 2vh; + right: 2vh; +} diff --git a/web/template/index.tmpl b/web/template/index.tmpl index 358bc081e..0adba1741 100644 --- a/web/template/index.tmpl +++ b/web/template/index.tmpl @@ -36,6 +36,5 @@ {{- include "index_what_is_this.tmpl" . | indent 1 }} {{- include "index_register.tmpl" . | indent 1 }} - {{- include "index_apps.tmpl" . | indent 1 }} {{- end }} \ No newline at end of file diff --git a/web/template/index_apps.tmpl b/web/template/index_apps.tmpl deleted file mode 100644 index 480a12f0b..000000000 --- a/web/template/index_apps.tmpl +++ /dev/null @@ -1,118 +0,0 @@ -{{- /* -// GoToSocial -// Copyright (C) GoToSocial Authors admin@gotosocial.org -// SPDX-License-Identifier: AGPL-3.0-or-later -// -// This program is free software: you can redistribute it and/or modify -// it under the terms of the GNU Affero General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// -// This program is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU Affero General Public License for more details. -// -// You should have received a copy of the GNU Affero General Public License -// along with this program. If not, see . -*/ -}} - -{{- with . }} -

Client applications

- Have an account on this instance and want to log in? - GoToSocial does not provide its own webclient, but implements the Mastodon client API. - You can use a variety of clients to log in to your account here: -

-
-
Pinafore is a web client designed for speed and simplicity.
- - Use Pinafore - -
- -
-
-
Tusky is a lightweight mobile client for Android.
- - Get Tusky - -
- -
-
-
Feditext (beta) is a beautiful client for iOS, iPadOS and macOS.
- - Get Feditext - -
- -
-
-
Or try one of the Mastodon clients listed on the official Mastodon page.
- - Get Mastodon apps - -
- -

-{{- end }} diff --git a/web/template/login_button.tmpl b/web/template/login_button.tmpl new file mode 100644 index 000000000..5c961545b --- /dev/null +++ b/web/template/login_button.tmpl @@ -0,0 +1,22 @@ +{{- /* +// GoToSocial +// Copyright (C) GoToSocial Authors admin@gotosocial.org +// SPDX-License-Identifier: AGPL-3.0-or-later +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . +*/ -}} + +{{- if .showLoginButton }} + +{{- end }} \ No newline at end of file diff --git a/web/template/login_info.tmpl b/web/template/login_info.tmpl new file mode 100644 index 000000000..238e3e9d2 --- /dev/null +++ b/web/template/login_info.tmpl @@ -0,0 +1,157 @@ +{{- /* +// GoToSocial +// Copyright (C) GoToSocial Authors admin@gotosocial.org +// SPDX-License-Identifier: AGPL-3.0-or-later +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . +*/ -}} + +{{- with . }} +

+ Looking to configure your profile and other settings? +

+ + Settings + +

Client applications

+ Want to log in and start posting? + Unlike other ActivityPub softwares, GoToSocial does not provide its own + webclient. Instead it implements the Mastodon client API, so you can use + a variety of third-party clients to log in to your account here: +

+
+
Pinafore is a web client designed for speed and simplicity.
+ + Use Pinafore + +
+ +
+
+
Tusky is a lightweight mobile client for Android.
+ + Get Tusky + +
+ +
+
+
Feditext (beta) is a beautiful client for iOS, iPadOS and macOS.
+ + Get Feditext + +
+ +
+
+
+ Masto-FE (🦥 flavour) is an (experimental!) client based on + the Mastodon Glitch web frontend, with some small changes specific to GoToSocial. +
+ + Try Masto-FE (🦥 flavour) + +
+ +
+
+
Or try one of the Mastodon clients listed on the official Mastodon page.
+ + Browse Mastodon apps + +
+ +

+{{- end }} \ No newline at end of file diff --git a/web/template/page.tmpl b/web/template/page.tmpl index d2edc5277..52599a531 100644 --- a/web/template/page.tmpl +++ b/web/template/page.tmpl @@ -71,7 +71,9 @@ image/webp {{- end }} {{- template "instanceTitle" . -}} - + + {{- include "login_button.tmpl" . | indent 3 }} +

@@ -81,5 +83,6 @@ image/webp +

\ No newline at end of file -- cgit v1.2.3