From 3db218dec1f0abc14b00569f605dc9cf8225d26f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 2 Nov 2020 19:37:01 +0200 Subject: [PATCH 1/8] 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 68cab40c37..3c338de89e 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 0c35f5d6df..5f7bf0ec6f 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 4b70aea58c..f59e645ac6 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 7744b1acc313c5a146410cc5a56d99629022c637..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1304 zcmeAS@N?(olHy`uVBq!ia0vp^zd)FS4M=vpiLwP!EX7WqAsj$Z!;#Vf4nJ zu$zG}W8o(6ETEudiEBhjaDG}zd16s2LwR|*US?i)adKios$PCk`s{Z$Qb2>Idb&7< zRLpsMcYk+GsKoJy-_NK;GHVO+WTgrkn%&CUJL3$`#~G}SkdwYB5?_T#i+135d93Qpk@18S>>&My13c81F zc|PxI)c#q1%cn=rwRd5U;y;mOHrsdF>0edXufFZDFp;|Z>x9Oxb;r2spWW-|_|3KV zTG6s87W)?2eqS@C$V{napOaJk=ASinB^x95TrVw+va!F|apC%lOG~|vi*?(l3qFl_ zt^366*LVMi`z`AK{b@d(`rXr|W6radeQL93x1V=AV!XE8q2yq_8O-06q&P-12EG>MT9I`?JRw@c59u6-iG+dyE#LLC*QT!583ol!5J(j%I zoTvA~%eg^GtG~7_6tuDp(c2zpVB)mAJgYZ9Dj%$BY00}6+GPvAGW=Nn>28YAzinT; z78bfMPv5mYN?$^$yrgRJwI4V4MDt53ExgQb-{+S4 z`^w7a>$k}ng*Yu=n!5JmxrNT`^KC0XJ-NR2IM2-c7k}Dc4LY@c>osk`((O||Jp@{^ z@aqbmmUFVpE`JPOYrY{$?k;fTvwxe_{wcex<@)XOO8*IP&fRS( z8`!_yYR|PB-5d+oPjD|ME2_Q(Sl+2Rc!6W?y_KeN`Fj&HTKxF0Dz6m>1^>cL*TGV9 zt3F@jZgYF_<-!ZE*R0OUCBL5C`u8tCev6zTFiOI`I{C}W%EW-d4Ae7OI`;b9OxvW6 z7Qg;0*Oy&>slPUyXX1sI%~FB)X8?0g6u+dFe&mv^dxIWb{aEoS@U^0|T8Y%k@NC`p z`FV0R)z#I%zhBF4^LwGaZR^&p5jtY)P39DQuG0_jsx?*$` rEuQZ;$KvDPRqOc4% + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/static/terms-of-service.html b/static/terms-of-service.html index 3b6bbb36bd..2b7bf7697d 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.


- + From 08e6e6664218d20cf3dd1b00823720505fb08fe7 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 2 Nov 2020 20:51:38 +0200 Subject: [PATCH 2/8] fix chat badge and unify styles across all badges including follow request count. --- src/App.scss | 21 ++++++++++------- .../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 1800d81637..ca7d33cd93 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 1f8ecdf6a9..cd3f436e28 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 0f02a68150..0c83d0fe2c 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 ed1ccb7db9..149f11cb4e 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 { From bdf2f36f11a0768dd21c28ba149de4d5e4cc2ad5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 2 Nov 2020 20:57:56 +0200 Subject: [PATCH 3/8] 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 787514c8b3..4abd94a171 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 { From b6a8ca44ef84b6fb78958a2af3bffd467804a061 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 2 Nov 2020 21:08:22 +0200 Subject: [PATCH 4/8] 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 4abd94a171..aef58495cd 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; } From e351665bb31745e2639abef3e47bf4f9df616d6b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 2 Nov 2020 23:43:32 +0200 Subject: [PATCH 5/8] 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 a33f6e87ab..984b04836b 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 dfe12f8673..55872133aa 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 95d95b11d6..bb4472d71b 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 a0ac89416b..4ca37d5ed8 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 b234f3d914..b79fcd7570 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 0a395086c1..769f7ef4b3 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 21412faa6d..eb54befcb5 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: [PATCH 6/8] 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 6651fc8e34..5304a5006f 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; From d126eddfcac6e54f337e5aa3b9744a46f01e7ba9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 3 Nov 2020 18:39:46 +0200 Subject: [PATCH 7/8] change approach to disable all, enable some --- src/components/extra_buttons/extra_buttons.vue | 4 ---- .../favorite_button/favorite_button.vue | 4 ---- src/components/react_button/react_button.vue | 4 ---- src/components/reply_button/reply_button.vue | 4 ---- .../retweet_button/retweet_button.vue | 4 ---- src/components/status/status.scss | 17 ++++++----------- src/components/status/status.vue | 1 - .../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 984b04836b..a33f6e87ab 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 55872133aa..dfe12f8673 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 bb4472d71b..95d95b11d6 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 4ca37d5ed8..a0ac89416b 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 b79fcd7570..b234f3d914 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 769f7ef4b3..0a94de32cb 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 eb54befcb5..21412faa6d 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: [PATCH 8/8] 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 149f11cb4e..28c888fe03 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 {