Skip to content

Commit

Permalink
Fix compose form styles on mobile and change compose form resizabilit…
Browse files Browse the repository at this point in the history 
…y to follow core
  • Loading branch information
@ronilaukkarinen
ronilaukkarinen committed Mar 23, 2024
1 parent 2c6a548 commit 86bff1b
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 94 deletions.
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
### 2.0.0rc30: 2024-03-23
### 2.0.0rc31: 2024-03-23

* Prepare for 4.3.0 release with SVG icons
* Add icon support for new SVG icons, replace icons for Home, Notifications, Explore, Live feeds, Private mentions, bookmarks, Favorites, Preferences and Lists
Expand Down Expand Up @@ -55,6 +55,8 @@
* More compact compose button on mobile
* More compact header bar on mobile (thanks @nileane!)
* Replace column settings icon for both single and advanced column views
* Fix compose form styles on mobile
* Change compose form resizability to follow core

### 1.8.3: 2023-11-12

Expand Down
80 changes: 34 additions & 46 deletions layout-multiple-columns.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* Mastodon Bird UI by @[email protected]
2.0.0rc30 */
2.0.0rc31 */

/* CSS variables */
:root {
Expand Down Expand Up @@ -3004,55 +3004,35 @@ body.embed .button.logo-button:hover,
padding-bottom: 6px;
}

/* Compose form and reply indicator box, see https://mastodo.fi/@rmattila74/110140863513856240 */
@media (min-width: 889px) {
.layout-multiple-columns .compose-form__highlightable .autosuggest-textarea__textarea,
.layout-multiple-columns .compose-form .autosuggest-textarea__textarea {
/* stylelint-disable-next-line */
max-height: 20vh !important; /* stylelint-disable-next-line */
overflow-y: auto !important;
resize: none;
}

/* Add slight background color for the compose form */
/* stylelint-disable-next-line no-duplicate-selectors */
.layout-multiple-columns .compose-form__highlightable,
.layout-multiple-columns .compose-form__highlightable .compose-form__buttons-wrapper,
.layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper,
.layout-multiple-columns .compose-form .compose-form__buttons-wrapper {
background-color: var(--color-bg-compose-form);
border-color: var(--color-bg-compose-form);
padding-top: 0;
transition: all 200ms;
}

/* Smooth color transition on focus */
.layout-multiple-columns .compose-form__highlightable:focus-within,
.layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper:focus-within,
.layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper,
.layout-multiple-columns .compose-form__highlightable .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper {
background-color: var(--color-bg-compose-form-focus);
border-color: var(--color-bg-compose-form-focus);
}
/* Add slight background color for the compose form */
/* stylelint-disable-next-line no-duplicate-selectors */
.layout-multiple-columns .compose-form__highlightable,
.layout-multiple-columns .compose-form__highlightable .compose-form__buttons-wrapper,
.layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper,
.layout-multiple-columns .compose-form .compose-form__buttons-wrapper {
background-color: var(--color-bg-compose-form);
border-color: var(--color-bg-compose-form);
padding-top: 0;
transition: all 200ms;
}

/* Fixes bottom row padding when there's a background */
.layout-multiple-columns .compose-form__highlightable .compose-form__buttons-wrapper,
.layout-multiple-columns .compose-form .compose-form__buttons-wrapper {
padding: calc(var(--gap-default) / 2);
}
/* Smooth color transition on focus */
.layout-multiple-columns .compose-form__highlightable:focus-within,
.layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper:focus-within,
.layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper,
.layout-multiple-columns .compose-form__highlightable .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper {
background-color: var(--color-bg-compose-form-focus);
border-color: var(--color-bg-compose-form-focus);
}

.layout-multiple-columns .navigation-bar + .compose-form {
padding-top: 10px;
}
/* Fixes bottom row padding when there's a background */
.layout-multiple-columns .compose-form__highlightable .compose-form__buttons-wrapper,
.layout-multiple-columns .compose-form .compose-form__buttons-wrapper {
padding: calc(var(--gap-default) / 2);
}

@media (min-width: 889px) and (max-height: 1000px) {
.layout-multiple-columns .compose-form__highlightable .autosuggest-textarea__textarea,
.layout-multiple-columns .compose-form .autosuggest-textarea__textarea {
/* stylelint-disable-next-line */
max-height: 10vh !important;
resize: none;
}
.layout-multiple-columns .navigation-bar + .compose-form {
padding-top: 10px;
}

.layout-multiple-columns .server-banner .button:hover,
Expand Down Expand Up @@ -4031,6 +4011,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}

/* Scrollbars */
*::-webkit-scrollbar,
.layout-multiple-columns .scrollable::-webkit-scrollbar,
.layout-multiple-columns .drawer__inner::-webkit-scrollbar,
.layout-multiple-columns textarea::-webkit-scrollbar,
Expand All @@ -4041,6 +4022,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
width: 6px;
}

*::-webkit-scrollbar-thumb,
.layout-multiple-columns .scrollable::-webkit-scrollbar-thumb,
.layout-multiple-columns textarea::-webkit-scrollbar-thumb,
.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb,
Expand All @@ -4051,6 +4033,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-radius: 50px;
}

*::-webkit-scrollbar-thumb:hover,
.layout-multiple-columns .scrollable::-webkit-scrollbar-thumb:hover,
.layout-multiple-columns textarea::-webkit-scrollbar-thumb:hover,
.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover,
Expand All @@ -4059,6 +4042,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: var(--color-light-purple);
}

*::-webkit-scrollbar-thumb:active,
.layout-multiple-columns .scrollable::-webkit-scrollbar-thumb:active,
.layout-multiple-columns textarea::-webkit-scrollbar-thumb:active,
.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:active,
Expand All @@ -4067,6 +4051,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: var(--color-black-coral);
}

*::-webkit-scrollbar-track,
.layout-multiple-columns .scrollable::-webkit-scrollbar-track,
.layout-multiple-columns textarea::-webkit-scrollbar-track,
.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track,
Expand All @@ -4077,6 +4062,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-radius: 0;
}

*::-webkit-scrollbar-track:hover,
.layout-multiple-columns .scrollable::-webkit-scrollbar-track:hover,
.layout-multiple-columns textarea::-webkit-scrollbar-track:hover,
.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track:hover,
Expand All @@ -4085,6 +4071,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: var(--color-bg);
}

*::-webkit-scrollbar-track:active,
.layout-multiple-columns .scrollable::-webkit-scrollbar-track:active,
.layout-multiple-columns textarea::-webkit-scrollbar-track:active,
.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track:active,
Expand All @@ -4093,6 +4080,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: var(--color-bg);
}

*::-webkit-scrollbar-corner,
.layout-multiple-columns .scrollable::-webkit-scrollbar-corner,
.layout-multiple-columns .drawer__inner::-webkit-scrollbar-corner,
.layout-multiple-columns textarea::-webkit-scrollbar-corner,
Expand Down
77 changes: 31 additions & 46 deletions layout-single-column.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* Mastodon Bird UI by @[email protected]
2.0.0rc30 */
2.0.0rc31 */

/* CSS variables */
:root {
Expand Down Expand Up @@ -3089,55 +3089,35 @@ body.embed .button.logo-button:hover,
padding-bottom: 6px;
}

/* Compose form and reply indicator box, see https://mastodo.fi/@rmattila74/110140863513856240 */
@media (min-width: 889px) {
.layout-single-column .compose-form__highlightable .autosuggest-textarea__textarea,
.layout-single-column .compose-form .autosuggest-textarea__textarea {
/* stylelint-disable-next-line */
max-height: 20vh !important; /* stylelint-disable-next-line */
overflow-y: auto !important;
resize: none;
}

/* Add slight background color for the compose form */
/* stylelint-disable-next-line no-duplicate-selectors */
.layout-single-column .compose-panel .compose-form__highlightable,
.layout-single-column .compose-form__highlightable .compose-form__buttons-wrapper,
.layout-single-column .compose-form .compose-form__autosuggest-wrapper,
.layout-single-column .compose-form .compose-form__buttons-wrapper {
background-color: var(--color-bg-compose-form);
border-color: var(--color-bg-compose-form);
padding-top: 0;
transition: all 200ms;
}

/* Smooth color transition on focus */
.layout-single-column .compose-panel .compose-form__highlightable:focus-within,
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within,
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper,
.layout-single-column .compose-form__highlightable .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper {
background-color: var(--color-bg-compose-form-focus);
border-color: var(--color-bg-compose-form-focus);
}
/* Add slight background color for the compose form */
/* stylelint-disable-next-line no-duplicate-selectors */
.layout-single-column .compose-form .compose-form__highlightable,
.layout-single-column .compose-form__highlightable .compose-form__buttons-wrapper,
.layout-single-column .compose-form .compose-form__autosuggest-wrapper,
.layout-single-column .compose-form .compose-form__buttons-wrapper {
background-color: var(--color-bg-compose-form);
border-color: var(--color-bg-compose-form);
padding-top: 0;
transition: all 200ms;
}

/* Fixes bottom row padding when there's a background */
.layout-single-column .compose-form__highlightable .compose-form__buttons-wrapper,
.layout-single-column .compose-form .compose-form__buttons-wrapper {
padding: calc(var(--gap-default) / 2);
}
/* Smooth color transition on focus */
.layout-single-column .compose-form .compose-form__highlightable:focus-within,
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within,
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper,
.layout-single-column .compose-form__highlightable .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper {
background-color: var(--color-bg-compose-form-focus);
border-color: var(--color-bg-compose-form-focus);
}

.layout-single-column .navigation-bar + .compose-form {
padding-top: 10px;
}
/* Fixes bottom row padding when there's a background */
.layout-single-column .compose-form__highlightable .compose-form__buttons-wrapper,
.layout-single-column .compose-form .compose-form__buttons-wrapper {
padding: calc(var(--gap-default) / 2);
}

@media (min-width: 889px) and (max-height: 1000px) {
.layout-single-column .compose-form__highlightable .autosuggest-textarea__textarea,
.layout-single-column .compose-form .autosuggest-textarea__textarea {
/* stylelint-disable-next-line */
max-height: 10vh !important;
resize: none;
}
.layout-single-column .navigation-bar + .compose-form {
padding-top: 10px;
}

.layout-single-column .server-banner .button:hover,
Expand Down Expand Up @@ -4144,6 +4124,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}

/* Scrollbars */
*::-webkit-scrollbar,
.layout-single-column .drawer__inner::-webkit-scrollbar,
.layout-single-column textarea::-webkit-scrollbar,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar,
Expand All @@ -4153,6 +4134,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
width: 6px;
}

*::-webkit-scrollbar-thumb,
.layout-single-column textarea::-webkit-scrollbar-thumb,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb,
.layout-single-column .reply-indicator::-webkit-scrollbar-thumb,
Expand All @@ -4162,20 +4144,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-radius: 50px;
}

*::-webkit-scrollbar-thumb:hover,
.layout-single-column textarea::-webkit-scrollbar-thumb:hover,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover,
.layout-single-column .reply-indicator::-webkit-scrollbar-thumb:hover,
.layout-single-column::-webkit-scrollbar-thumb:hover {
background-color: var(--color-light-purple);
}

*::-webkit-scrollbar-thumb:active,
.layout-single-column textarea::-webkit-scrollbar-thumb:active,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:active,
.layout-single-column .reply-indicator::-webkit-scrollbar-thumb:active,
.layout-single-column::-webkit-scrollbar-thumb:active {
background-color: var(--color-black-coral);
}

*::-webkit-scrollbar-track,
.layout-single-column textarea::-webkit-scrollbar-track,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track,
.layout-single-column .reply-indicator::-webkit-scrollbar-track,
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mastodon-bird-ui",
"version": "2.0.0rc30",
"version": "2.0.0rc31",
"description": "",
"main": "index.js",
"scripts": {
Expand Down

0 comments on commit 86bff1b

Please sign in to comment.