From 3db218dec1f0abc14b00569f605dc9cf8225d26f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 2 Nov 2020 19:37:01 +0200 Subject: change logo to svg --- CHANGELOG.md | 1 + src/modules/instance.js | 2 +- static/config.json | 2 +- static/logo.png | Bin 1304 -> 0 bytes static/logo.svg | 71 +++++++++++++++++++++++++++++++++++++++++++ static/terms-of-service.html | 2 +- 6 files changed, 75 insertions(+), 3 deletions(-) delete mode 100644 static/logo.png create mode 100644 static/logo.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index 68cab40c..3c338de8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello. - Some icons changed for better accessibility (lock, globe) - Logo is now clickable +- Changed default logo to SVG version ## [2.1.1] - 2020-09-08 ### Changed diff --git a/src/modules/instance.js b/src/modules/instance.js index 0c35f5d6..5f7bf0ec 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -27,7 +27,7 @@ const defaultState = { hideSitename: false, hideUserStats: false, loginMethod: 'password', - logo: '/static/logo.png', + logo: '/static/logo.svg', logoMargin: '.2em', logoMask: true, logoLeft: false, diff --git a/static/config.json b/static/config.json index 4b70aea5..f59e645a 100644 --- a/static/config.json +++ b/static/config.json @@ -10,7 +10,7 @@ "hideSitename": false, "hideUserStats": false, "loginMethod": "password", - "logo": "/static/logo.png", + "logo": "/static/logo.svg", "logoMargin": ".1em", "logoMask": true, "logoLeft": false, diff --git a/static/logo.png b/static/logo.png deleted file mode 100644 index 7744b1ac..00000000 Binary files a/static/logo.png and /dev/null differ diff --git a/static/logo.svg b/static/logo.svg new file mode 100644 index 00000000..68e647e6 --- /dev/null +++ b/static/logo.svg @@ -0,0 +1,71 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/static/terms-of-service.html b/static/terms-of-service.html index 3b6bbb36..2b7bf769 100644 --- a/static/terms-of-service.html +++ b/static/terms-of-service.html @@ -6,4 +6,4 @@ Pleroma install containing the real ToS for your instance.

See the Pleroma documentation for more information.


- + -- cgit v1.2.3-70-g09d2 From 08e6e6664218d20cf3dd1b00823720505fb08fe7 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 2 Nov 2020 20:51:38 +0200 Subject: fix chat badge and unify styles across all badges including follow request count. --- src/App.scss | 21 +++++++++++++-------- src/components/chat_list_item/chat_list_item.vue | 12 ++++++------ src/components/nav_panel/nav_panel.vue | 23 +++-------------------- src/components/side_drawer/side_drawer.vue | 11 ++--------- 4 files changed, 24 insertions(+), 43 deletions(-) diff --git a/src/App.scss b/src/App.scss index 1800d816..ca7d33cd 100644 --- a/src/App.scss +++ b/src/App.scss @@ -603,19 +603,24 @@ nav { flex-grow: 0; } } + .badge { + box-sizing: border-box; display: inline-block; border-radius: 99px; - min-width: 22px; - max-width: 22px; - min-height: 22px; - max-height: 22px; - font-size: 15px; - line-height: 22px; - text-align: center; + max-width: 10em; + min-width: 1.7em; + height: 1.3em; + padding: 0.15em 0.15em; vertical-align: middle; + font-weight: normal; + font-style: normal; + font-size: 0.9em; + line-height: 1; + text-align: center; white-space: nowrap; - padding: 0; + overflow: hidden; + text-overflow: ellipsis; &.badge-notification { background-color: $fallback--cRed; diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue index 1f8ecdf6..cd3f436e 100644 --- a/src/components/chat_list_item/chat_list_item.vue +++ b/src/components/chat_list_item/chat_list_item.vue @@ -21,6 +21,12 @@ /> +
+ +
-
- -
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 0f02a681..0c83d0fe 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -27,7 +27,7 @@
{{ unreadChatCount }}
@@ -47,7 +47,7 @@ />{{ $t("nav.friend_requests") }} @@ -84,12 +84,6 @@ padding: 0; } - .follow-request-count { - vertical-align: baseline; - background-color: $fallback--bg; - background-color: var(--input, $fallback--faint); - } - li { position: relative; border-bottom: 1px solid; @@ -156,21 +150,10 @@ margin-right: 0.8em; } - .unread-chat-count { - font-size: 0.9em; - font-weight: bolder; - font-style: normal; + .badge { position: absolute; right: 0.6rem; top: 1.25em; - padding: 0 0.3em; - min-width: 1.3rem; - min-height: 1.3rem; - max-height: 1.3rem; - line-height: 1.3rem; - max-width: 10em; - overflow: hidden; - text-overflow: ellipsis; } } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index ed1ccb7d..149f11cb 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -70,7 +70,7 @@ /> {{ $t("nav.chats") }} {{ unreadChatCount }} @@ -99,7 +99,7 @@ /> {{ $t("nav.friend_requests") }} @@ -271,13 +271,6 @@ --faintLink: var(--popoverFaintLink, $fallback--faint); --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); - - .follow-request-count { - vertical-align: baseline; - background-color: $fallback--bg; - background-color: var(--input, $fallback--faint); - } - } .side-drawer-logo-wrapper { -- cgit v1.2.3-70-g09d2 From bdf2f36f11a0768dd21c28ba149de4d5e4cc2ad5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 2 Nov 2020 20:57:56 +0200 Subject: fix chat heading not being aligned and using wrong styles --- src/components/chat/chat.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 787514c8..4abd94a1 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -138,11 +138,15 @@ } .chat-view-heading { + box-sizing: border-box; position: static; z-index: 9999; top: 0; margin-top: 0; border-radius: 0; + background: linear-gradient(to top, var(--panel), var(--panel)), + linear-gradient(to top, var(--bg), var(--bg)); + height: 50px; } .scrollable-message-list { -- cgit v1.2.3-70-g09d2 From b6a8ca44ef84b6fb78958a2af3bffd467804a061 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 2 Nov 2020 21:08:22 +0200 Subject: added comment --- src/components/chat/chat.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 4abd94a1..aef58495 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -144,8 +144,14 @@ top: 0; margin-top: 0; border-radius: 0; - background: linear-gradient(to top, var(--panel), var(--panel)), - linear-gradient(to top, var(--bg), var(--bg)); + + /* This practically overlays the panel heading color over panel background + * color. This is needed because we allow transparent panel background and + * it doesn't work well in this "disjointed panel header" case + */ + background: + linear-gradient(to top, var(--panel), var(--panel)), + linear-gradient(to top, var(--bg), var(--bg)); height: 50px; } -- cgit v1.2.3-70-g09d2 From e351665bb31745e2639abef3e47bf4f9df616d6b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 2 Nov 2020 23:43:32 +0200 Subject: Instead of blocking all interaction, only block interaction in places that matter --- src/components/extra_buttons/extra_buttons.vue | 4 ++++ src/components/favorite_button/favorite_button.vue | 4 ++++ src/components/react_button/react_button.vue | 4 ++++ src/components/reply_button/reply_button.vue | 4 ++++ src/components/retweet_button/retweet_button.vue | 4 ++++ src/components/status/status.scss | 14 ++++++++++++++ src/components/status/status.vue | 1 + src/components/status_content/status_content.vue | 4 ++++ src/components/timeline/timeline.js | 2 +- src/components/timeline/timeline.vue | 2 +- src/components/user_card/user_card.vue | 4 ++++ 11 files changed, 45 insertions(+), 2 deletions(-) diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index a33f6e87..984b0483 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -120,5 +120,9 @@ color: $fallback--text; color: var(--text, $fallback--text); } + + ._misclick-prevention & { + pointer-events: none !important; + } } diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index dfe12f86..55872133 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -35,6 +35,10 @@ color: $fallback--cOrange; color: var(--cOrange, $fallback--cOrange); } + + ._misclick-prevention & { + pointer-events: none !important; + } } &.-favorited { diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index 95d95b11..bb4472d7 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -107,6 +107,10 @@ color: $fallback--text; color: var(--text, $fallback--text); } + + ._misclick-prevention & { + pointer-events: none !important; + } } diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index a0ac8941..4ca37d5e 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -34,6 +34,10 @@ color: $fallback--cBlue; color: var(--cBlue, $fallback--cBlue); } + + ._misclick-prevention & { + pointer-events: none !important; + } } } diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index b234f3d9..b79fcd75 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -45,6 +45,10 @@ color: $fallback--cGreen; color: var(--cGreen, $fallback--cGreen); } + + ._misclick-prevention & { + pointer-events: none !important; + } } &.-repeated { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 0a395086..769f7ef4 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -59,6 +59,12 @@ $status-margin: 0.75em; justify-content: flex-end; } + .user-avatar { + ._misclick-prevention & { + pointer-events: none !important; + } + } + .left-side { margin-right: $status-margin; } @@ -108,6 +114,10 @@ $status-margin: 0.75em; a { display: inline-block; word-break: break-all; + + ._misclick-prevention & { + pointer-events: none !important; + } } } @@ -250,6 +260,10 @@ $status-margin: 0.75em; vertical-align: middle; object-fit: contain; } + + ._misclick-prevention & a { + pointer-events: none !important; + } } .status-fadein { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 21412faa..eb54befc 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -119,6 +119,7 @@ > Date: Tue, 3 Nov 2020 11:35:55 +0200 Subject: fix mobile navbar hitboxes --- src/components/mobile_nav/mobile_nav.vue | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index 6651fc8e..5304a500 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -110,12 +110,23 @@ } .mobile-nav-button { + display: inline-block; text-align: center; - margin: 0 1em; + padding: 0 1em; position: relative; cursor: pointer; } + .site-name { + padding: 0 .3em; + display: inline-block; + } + + .item { + /* moslty just to get rid of extra whitespaces */ + display: flex; + } + .alert-dot { border-radius: 100%; height: 8px; -- cgit v1.2.3-70-g09d2 From d126eddfcac6e54f337e5aa3b9744a46f01e7ba9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 3 Nov 2020 18:39:46 +0200 Subject: change approach to disable all, enable some --- src/components/extra_buttons/extra_buttons.vue | 4 ---- src/components/favorite_button/favorite_button.vue | 4 ---- src/components/react_button/react_button.vue | 4 ---- src/components/reply_button/reply_button.vue | 4 ---- src/components/retweet_button/retweet_button.vue | 4 ---- src/components/status/status.scss | 17 ++++++----------- src/components/status/status.vue | 1 - src/components/status_content/status_content.vue | 4 ---- src/components/user_card/user_card.vue | 4 ---- 9 files changed, 6 insertions(+), 40 deletions(-) diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index 984b0483..a33f6e87 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -120,9 +120,5 @@ color: $fallback--text; color: var(--text, $fallback--text); } - - ._misclick-prevention & { - pointer-events: none !important; - } } diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index 55872133..dfe12f86 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -35,10 +35,6 @@ color: $fallback--cOrange; color: var(--cOrange, $fallback--cOrange); } - - ._misclick-prevention & { - pointer-events: none !important; - } } &.-favorited { diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index bb4472d7..95d95b11 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -107,10 +107,6 @@ color: $fallback--text; color: var(--text, $fallback--text); } - - ._misclick-prevention & { - pointer-events: none !important; - } } diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index 4ca37d5e..a0ac8941 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -34,10 +34,6 @@ color: $fallback--cBlue; color: var(--cBlue, $fallback--cBlue); } - - ._misclick-prevention & { - pointer-events: none !important; - } } } diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index b79fcd75..b234f3d9 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -45,10 +45,6 @@ color: $fallback--cGreen; color: var(--cGreen, $fallback--cGreen); } - - ._misclick-prevention & { - pointer-events: none !important; - } } &.-repeated { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 769f7ef4..0a94de32 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -59,9 +59,12 @@ $status-margin: 0.75em; justify-content: flex-end; } - .user-avatar { - ._misclick-prevention & { - pointer-events: none !important; + ._misclick-prevention & { + pointer-events: none; + + .attachments { + pointer-events: initial; + cursor: initial; } } @@ -114,10 +117,6 @@ $status-margin: 0.75em; a { display: inline-block; word-break: break-all; - - ._misclick-prevention & { - pointer-events: none !important; - } } } @@ -260,10 +259,6 @@ $status-margin: 0.75em; vertical-align: middle; object-fit: contain; } - - ._misclick-prevention & a { - pointer-events: none !important; - } } .status-fadein { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index eb54befc..21412faa 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -119,7 +119,6 @@ > Date: Tue, 3 Nov 2020 18:45:23 +0200 Subject: fix mobile badge alignment --- src/components/side_drawer/side_drawer.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 149f11cb..28c888fe 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -271,6 +271,12 @@ --faintLink: var(--popoverFaintLink, $fallback--faint); --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); + + .badge { + position: absolute; + right: 0.7rem; + top: 1em; + } } .side-drawer-logo-wrapper { -- cgit v1.2.3-70-g09d2