tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' into glitch-soc/merge-upstream

Browse Source 
Conflicts:
- app/controllers/admin/base_controller.rb
  Some refactoring made upstream, no real conflict.
- app/javascript/mastodon/features/compose/components/compose_form.js
  Updated using upstream's code but using maxChars instead of the
  hardcoded length of 500 characters per toot.
- app/javascript/styles/mastodon/components.scss
  Upstream redesigned the onboarding modal. Not sure why we had a
  conflict there.
This commit is contained in:
Thibaut Girka
2018-12-18 16:55:15 +01:00
parent 36d27e2891 5bf100f87b
commit 034ffc079e
69 changed files with 897 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/styles/application.scss
View File

@@ -16,6 +16,7 @@
@import 'mastodon/stream_entries';
@import 'mastodon/boost';
@import 'mastodon/components';
@import 'mastodon/introduction';
@import 'mastodon/modal';
@import 'mastodon/emoji_picker';
@import 'mastodon/about';

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

@@ -2107,6 +2107,7 @@ a.account__display-name {
&__append {
flex: 1 1 auto;
position: relative;
min-height: 120px;
}
}
@@ -2900,7 +2901,6 @@ a.status-card.compact:hover {
transform: translateX(-50%);
margin: 82px 0 0 50%;
white-space: nowrap;
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
}
@@ -2909,11 +2909,20 @@ a.status-card.compact:hover {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
width: 42px;
height: 42px;
box-sizing: border-box;
background-color: transparent;
border: 0 solid lighten($ui-base-color, 26%);
border-width: 6px;
border-radius: 50%;
}
.no-reduce-motion .loading-indicator span {
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.no-reduce-motion .loading-indicator__figure {
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
@@ -3789,25 +3798,6 @@ a.status-card.compact:hover {
flex-direction: column;
}
.onboarding-modal__pager {
height: 80vh;
width: 80vw;
max-width: 520px;
max-height: 470px;
.react-swipeable-view-container > div {
width: 100%;
height: 100%;
box-sizing: border-box;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
user-select: text;
}
}
.error-modal__body {
height: 80vh;
width: 80vw;
@@ -3841,22 +3831,6 @@ a.status-card.compact:hover {
text-align: center;
}
@media screen and (max-width: 550px) {
.onboarding-modal {
width: 100%;
height: 100%;
border-radius: 0;
}
.onboarding-modal__pager {
width: 100%;
height: auto;
max-width: none;
max-height: none;
flex: 1 1 auto;
}
}
.onboarding-modal__paginator,
.error-modal__footer {
flex: 0 0 auto;
@@ -3905,124 +3879,6 @@ a.status-card.compact:hover {
justify-content: center;
}
.onboarding-modal__dots {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
.onboarding-modal__dot {
width: 14px;
height: 14px;
border-radius: 14px;
background: darken($ui-secondary-color, 16%);
margin: 0 3px;
cursor: pointer;
&:hover {
background: darken($ui-secondary-color, 18%);
}
&.active {
cursor: default;
background: darken($ui-secondary-color, 24%);
}
}
.onboarding-modal__page__wrapper {
pointer-events: none;
padding: 25px;
padding-bottom: 0;
&.onboarding-modal__page__wrapper--active {
pointer-events: auto;
}
}
.onboarding-modal__page {
cursor: default;
line-height: 21px;
h1 {
font-size: 18px;
font-weight: 500;
color: $inverted-text-color;
margin-bottom: 20px;
}
a {
color: $highlight-text-color;
&:hover,
&:focus,
&:active {
color: lighten($highlight-text-color, 4%);
}
}
.navigation-bar a {
color: inherit;
}
p {
font-size: 16px;
color: $lighter-text-color;
margin-top: 10px;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
strong {
font-weight: 500;
background: $ui-base-color;
color: $secondary-text-color;
border-radius: 4px;
font-size: 14px;
padding: 3px 6px;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
}
}
.onboarding-modal__page__wrapper-0 {
background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
height: 100%;
padding: 0;
}
.onboarding-modal__page-one {
&__lead {
padding: 65px;
padding-top: 45px;
padding-bottom: 0;
margin-bottom: 10px;
h1 {
font-size: 26px;
line-height: 36px;
margin-bottom: 8px;
}
p {
margin-bottom: 0;
}
}
&__extra {
padding-right: 65px;
padding-left: 185px;
text-align: center;
}
}
.display-case {
text-align: center;
font-size: 15px;
@@ -4045,92 +3901,6 @@ a.status-card.compact:hover {
}
}
.onboarding-modal__page-two,
.onboarding-modal__page-three,
.onboarding-modal__page-four,
.onboarding-modal__page-five {
p {
text-align: left;
}
.figure {
background: darken($ui-base-color, 8%);
color: $secondary-text-color;
margin-bottom: 20px;
border-radius: 4px;
padding: 10px;
text-align: center;
font-size: 14px;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3);
.onboarding-modal__image {
border-radius: 4px;
margin-bottom: 10px;
}
&.non-interactive {
pointer-events: none;
text-align: left;
}
}
}
.onboarding-modal__page-four__columns {
.row {
display: flex;
margin-bottom: 20px;
& > div {
flex: 1 1 0;
margin: 0 10px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
p {
text-align: center;
}
}
&:last-child {
margin-bottom: 0;
}
}
.column-header {
color: $primary-text-color;
}
}
@media screen and (max-width: 320px) and (max-height: 600px) {
.onboarding-modal__page p {
font-size: 14px;
line-height: 20px;
}
.onboarding-modal__page-two .figure,
.onboarding-modal__page-three .figure,
.onboarding-modal__page-four .figure,
.onboarding-modal__page-five .figure {
font-size: 12px;
margin-bottom: 10px;
}
.onboarding-modal__page-four__columns .row {
margin-bottom: 10px;
}
.onboarding-modal__page-four__columns .column-header {
padding: 5px;
font-size: 12px;
}
}
.onboard-sliders {
display: inline-block;
max-width: 30px;
@@ -5030,12 +4800,19 @@ a.status-card.compact:hover {
}
}
.notification__filter-bar,
.account__section-headline {
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default;
display: flex;
button {
background: darken($ui-base-color, 4%);
border: 0;
}
button,
a {
display: block;
flex: 1 1 auto;

6
app/javascript/styles/mastodon/containers.scss
View File

@@ -294,6 +294,12 @@
text-decoration: underline;
color: $primary-text-color;
}
@media screen and (max-width: $no-gap-breakpoint) {
&.optional {
display: none;
}
}
}
.nav-button {

153
app/javascript/styles/mastodon/introduction.scss Normal file
View File

@@ -0,0 +1,153 @@
.introduction {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@media screen and (max-width: 920px) {
background: darken($ui-base-color, 8%);
display: block !important;
}
&__pager {
background: darken($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
overflow: hidden;
}
&__pager,
&__frame {
border-radius: 10px;
width: 50vw;
min-width: 920px;
@media screen and (max-width: 920px) {
min-width: 0;
width: 100%;
border-radius: 0;
box-shadow: none;
}
}
&__frame-wrapper {
opacity: 0;
transition: opacity 500ms linear;
&.active {
opacity: 1;
transition: opacity 50ms linear;
}
}
&__frame {
overflow: hidden;
}
&__illustration {
height: 50vh;
@media screen and (max-width: 630px) {
height: auto;
}
img {
object-fit: cover;
display: block;
margin: 0;
width: 100%;
height: 100%;
}
}
&__text {
border-top: 2px solid $ui-highlight-color;
&--columnized {
display: flex;
& > div {
flex: 1 1 33.33%;
text-align: center;
padding: 25px;
padding-bottom: 30px;
}
@media screen and (max-width: 630px) {
display: block;
padding: 15px 0;
padding-bottom: 20px;
& > div {
padding: 10px 25px;
}
}
}
h3 {
font-size: 24px;
line-height: 1.5;
font-weight: 700;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: $darker-text-color;
code {
display: inline-block;
background: darken($ui-base-color, 8%);
font-size: 15px;
border: 1px solid lighten($ui-base-color, 8%);
border-radius: 2px;
padding: 1px 3px;
}
}
&--centered {
padding: 25px;
padding-bottom: 30px;
text-align: center;
}
}
&__dots {
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
@media screen and (max-width: 630px) {
display: none;
}
}
&__dot {
width: 14px;
height: 14px;
border-radius: 14px;
border: 1px solid $ui-highlight-color;
background: transparent;
margin: 0 3px;
cursor: pointer;
&:hover {
background: lighten($ui-base-color, 8%);
}
&.active {
cursor: default;
background: $ui-highlight-color;
}
}
&__action {
padding: 25px;
padding-top: 0;
display: flex;
align-items: center;
justify-content: center;
}
}

43
app/javascript/styles/mastodon/widgets.scss
View File

@@ -229,18 +229,6 @@
margin-bottom: 10px;
}
.moved-account-widget,
.memoriam-widget,
.box-widget,
.contact-widget,
.landing-page__information.contact-widget {
@media screen and (max-width: $no-gap-breakpoint) {
margin-bottom: 0;
box-shadow: none;
border-radius: 0;
}
}
.page-header {
background: lighten($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@@ -261,11 +249,20 @@
font-size: 15px;
color: $darker-text-color;
}
@media screen and (max-width: $no-gap-breakpoint) {
margin-top: 0;
background: lighten($ui-base-color, 4%);
h1 {
font-size: 24px;
}
}
}
.directory {
background: $ui-base-color;
border-radius: 0 0 4px 4px;
border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
&__tag {
@@ -407,4 +404,24 @@
font-size: 14px;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
tbody td.optional {
display: none;
}
}
}
.moved-account-widget,
.memoriam-widget,
.box-widget,
.contact-widget,
.landing-page__information.contact-widget,
.directory,
.page-header {
@media screen and (max-width: $no-gap-breakpoint) {
margin-bottom: 0;
box-shadow: none;
border-radius: 0;
}
}