nogafam
/
instante-social
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Multiple new features/modifications 

* Added aria label for menu button

* Search box is now hidden on mobile, but shown on menu open

* Search popout styles improved
This commit is contained in:
nogafam.es Admin 2021-10-25 01:41:32 +02:00
parent b5ecc26ba7
commit ff4c5b6c38
9 changed files with 49 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/features/compose/components/search.js
View File

@ -21,7 +21,7 @@ class SearchPopout extends React.PureComponent {
const { style } = this.props;
const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />;
return (
<div style={{ ...style, position: 'absolute', width: 285, zIndex: 2 }}>
<div id='search-popup'>
<Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
{({ opacity, scaleX, scaleY }) => (
<div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
@ -119,7 +119,7 @@ class Search extends React.PureComponent {
const hasValue = value.length > 0 || submitted;
return (
<div className='search'>
<div className='search visible'>
<label>
<span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
<input

3
app/javascript/mastodon/features/search/index.js
View File

@ -1,11 +1,8 @@
import React from 'react';
import SearchContainer from 'mastodon/features/compose/containers/search_container';
import SearchResultsContainer from 'mastodon/features/compose/containers/search_results_container';
const Search = () => (
<div className='column search-page'>
<SearchContainer />
<div className='drawer__pager'>
<div className='drawer__inner darker'>
<SearchResultsContainer />

23
app/javascript/mastodon/features/ui/components/columns_area.js
View File

@ -52,6 +52,7 @@ const componentMap = {
const messages = defineMessages({
publish: { id: 'compose_form.publish', defaultMessage: 'Toot' },
menuToggle: { id: 'navigation_bar.toggle' }
});
const shouldHideFAB = path => path.match(/^\/statuses\/|^\/@[^/]+\/\d+|^\/publish|^\/search|^\/getting-started|^\/start/);
@ -214,7 +215,7 @@ class ColumnsArea extends ImmutablePureComponent {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if (width <= 720) {
document.querySelector('.columns-area__panels__pane--navigational').className += ' visible';
var cls = document.getElementById('menu-toggle-button').className;
document.querySelector('div.search').className += ' visible';
document.getElementById('menu-toggle-button').className = '';
}
}
@ -223,14 +224,12 @@ class ColumnsArea extends ImmutablePureComponent {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if (width <= 720) {
var cls = document.querySelector('.columns-area__panels__pane--navigational').className;
if (!cls.includes(' visible')) {
cls += ' visible';
document.getElementById('menu-toggle-button').className = '';
} else {
cls = cls.replace(' visible', '');
document.getElementById('menu-toggle-button').className = 'active';
}
cls = cls.replace(' visible', '');
document.querySelector('.columns-area__panels__pane--navigational').className = cls;
cls = document.querySelector('div.search').className;
cls = cls.replace(' visible', '');
document.querySelector('div.search').className = cls;
document.getElementById('menu-toggle-button').className = 'active';
}
}
@ -249,12 +248,6 @@ class ColumnsArea extends ImmutablePureComponent {
<div key='content' className='columns-area columns-area--mobile'>{children}</div>
);
/*<div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
<div className='columns-area__panels__pane__inner'>
{renderComposePanel && <ComposePanel />}
</div>
</div>*/
return (
<div className='columns-area__panels'>
@ -271,7 +264,7 @@ class ColumnsArea extends ImmutablePureComponent {
</div>
<div id="menu-toggle">
<div onClick={this.showMenu} id="menu-toggle-button">
<div onClick={this.showMenu} id="menu-toggle-button" aria-label={intl.formatMessage(messages.menuToggle)}>
<Link key='floating-action-button' to='/publish' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}>
<Icon id='flash' /></Link>
</div>

6
app/javascript/mastodon/locales/defaultMessages.json
View File

@ -1479,6 +1479,10 @@
"defaultMessage": "Logout",
"id": "navigation_bar.logout"
},
{
"defaultMessage": "Toggle menu",
"id": "navigation_bar.toggle"
},
{
"defaultMessage": "Compose new toot",
"id": "navigation_bar.compose"
@ -3315,4 +3319,4 @@
],
"path": "app/javascript/mastodon/features/video/index.json"
}
]
]

1
app/javascript/mastodon/locales/es-AR.json
View File

@ -298,6 +298,7 @@
"navigation_bar.preferences": "Configuración",
"navigation_bar.public_timeline": "Línea temporal federada",
"navigation_bar.security": "Seguridad",
"navigation_bar.toggle": "Abrir menú",
"notification.favourite": "{name} marcó tu mensaje como favorito",
"notification.follow": "{name} te empezó a seguir",
"notification.follow_request": "{name} solicitó seguirte",

1
app/javascript/mastodon/locales/es-MX.json
View File

@ -298,6 +298,7 @@
"navigation_bar.preferences": "Preferencias",
"navigation_bar.public_timeline": "Historia federada",
"navigation_bar.security": "Seguridad",
"navigation_bar.toggle": "Abrir menú",
"notification.favourite": "{name} marcó tu estado como favorito",
"notification.follow": "{name} te empezó a seguir",
"notification.follow_request": "{name} ha solicitado seguirte",

1
app/javascript/mastodon/locales/es.json
View File

@ -298,6 +298,7 @@
"navigation_bar.preferences": "Preferencias",
"navigation_bar.public_timeline": "Historia federada",
"navigation_bar.security": "Seguridad",
"navigation_bar.toggle": "Abrir menú",
"notification.favourite": "{name} marcó tu estado como favorito",
"notification.follow": "{name} te empezó a seguir",
"notification.follow_request": "{name} ha solicitado seguirte",

3
app/javascript/styles/mastodon-light/diff.scss
View File

@ -38,7 +38,6 @@ html {
.error-column,
.regeneration-indicator {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
border-top: 0;
}
@ -66,7 +65,6 @@ html {
.column-back-button,
.column-header {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 0;
@ -197,7 +195,6 @@ html {
.drawer__header,
.drawer__inner {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
}
.drawer__inner__mastodon {

55
app/javascript/styles/mastodon/components.scss
View File

@ -135,7 +135,6 @@
color: $darker-text-color;
background: transparent;
padding: 3px 15px;
border: 1px solid $ui-primary-color;
&:active,
&:focus,
@ -2444,13 +2443,18 @@ a.account__display-name {
}
}
.columns-area__panels__main {
border-left: 1px dotted gray;
border-right: 1px dotted gray;
}
#menu-toggle {
display: flex;
position: fixed;
left: 50vw;
bottom: 0;
cursor: pointer;
z-index: 1000;
z-index: 81;
#menu-toggle-button {
display: flex;
@ -2504,7 +2508,7 @@ a.account__display-name {
.columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational {
position: fixed;
left: 0;
z-index: 100;
z-index: 80;
width: 100%;
background: #00000085;
pointer-events: all;
@ -2515,7 +2519,7 @@ a.account__display-name {
bottom: 0;
width: 100%;
height: 15em;
z-index: 102;
z-index: 80;
.navigation-panel {
display: grid !important;
@ -2643,7 +2647,6 @@ a.account__display-name {
.column-list {
margin: 0 20px;
border: 1px solid lighten($ui-base-color, 8%);
background: darken($ui-base-color, 2%);
border-radius: 4px;
@ -2740,7 +2743,6 @@ a.account__display-name {
position: absolute;
top: 0;
left: 0;
background: lighten($ui-base-color, 13%);
box-sizing: border-box;
padding: 0;
display: flex;
@ -2749,10 +2751,6 @@ a.account__display-name {
overflow-y: auto;
width: 100%;
height: 100%;
&.darker {
background: $ui-base-color;
}
}
.drawer__inner__mastodon {
@ -2986,7 +2984,6 @@ a.account__display-name {
left: 1px;
width: 22px;
height: 22px;
border: 1px solid $ui-base-color;
border-radius: 50%;
background-color: darken($simple-background-color, 2%);
box-sizing: border-box;
@ -3175,7 +3172,6 @@ a.account__display-name {
display: inline-block;
padding: 3px 5px;
background-color: lighten($ui-base-color, 8%);
border: 1px solid darken($ui-base-color, 4%);
}
}
@ -3230,7 +3226,6 @@ button.icon-button.active i.fa-retweet {
position: relative;
display: flex;
font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px;
color: $dark-text-color;
margin-top: 14px;
@ -4518,11 +4513,32 @@ a.status-card.compact:hover {
.search {
position: relative;
label {
width: 100%;
}
}
.search:not(.visible) {
position: fixed;
z-index: 100;
width: 100vw;
left: 0;
background: #fff;
}
#search-popup {
position: absolute;
width: 100%;
z-index: 100;
top: 4.5em;
}
.search__input {
@include search-input;
background: none !important;
border: none !important;
display: block;
padding: 15px;
padding-right: 30px;
@ -4611,7 +4627,6 @@ a.status-card.compact:hover {
.search-results__header {
color: $dark-text-color;
background: lighten($ui-base-color, 2%);
padding: 15px;
font-weight: 500;
font-size: 16px;
@ -5215,18 +5230,12 @@ a.status-card.compact:hover {
border: 0;
outline: 0;
border-radius: 4px;
border: 1px solid $ui-secondary-color;
min-height: 100px;
max-height: 50vh;
margin-bottom: 10px;
&:focus {
border: 1px solid darken($ui-secondary-color, 8%);
}
&__wrapper {
background: $white;
border: 1px solid $ui-secondary-color;
margin-bottom: 10px;
border-radius: 4px;
@ -5395,7 +5404,6 @@ a.status-card.compact:hover {
outline: 0;
font-family: inherit;
background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px;
padding: 6px 10px;
padding-right: 30px;
@ -5475,7 +5483,6 @@ a.status-card.compact:hover {
.attachment-list {
display: flex;
font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px;
margin-top: 14px;
overflow: hidden;
@ -6299,7 +6306,6 @@ a.status-card.compact:hover {
&__input {
display: inline-block;
position: relative;
border: 1px solid $ui-primary-color;
box-sizing: border-box;
width: 18px;
height: 18px;
@ -6321,6 +6327,8 @@ a.status-card.compact:hover {
}
.search-popout {
max-width: 50em;
margin: auto;
@include search-popout;
}
@ -6837,7 +6845,6 @@ noscript {
overflow: hidden;
.icon-button {
border: 1px solid lighten($ui-base-color, 12%);
border-radius: 4px;
box-sizing: content-box;
padding: 2px;