From 89b6322ef459e5eba55d2bd49f683d034f2daa14 Mon Sep 17 00:00:00 2001 From: chr Date: Sat, 12 Oct 2019 09:45:17 -0700 Subject: [PATCH 1/2] cybrespace base theme --- app/javascript/styles/cybre-base.scss | 81 +++++++++++++++++++ app/javascript/styles/fullwidth-media.scss | 48 +++++++++++ .../styles/mastodon/components.scss | 5 -- 3 files changed, 129 insertions(+), 5 deletions(-) create mode 100644 app/javascript/styles/cybre-base.scss create mode 100644 app/javascript/styles/fullwidth-media.scss diff --git a/app/javascript/styles/cybre-base.scss b/app/javascript/styles/cybre-base.scss new file mode 100644 index 000000000..b9bb4ecb8 --- /dev/null +++ b/app/javascript/styles/cybre-base.scss @@ -0,0 +1,81 @@ + +@import 'application'; + +/* Allow columns to grow wider as the screen gets + * wider, but don't ever let them get more than + * 400px (some people have a bunch of columns!) */ +@media screen and (min-width: 1300px) { + .column { + flex-grow: 1 !important; + max-width: 400px; + } + + .drawer { + width: 17%; /* Not part of the flex fun */ + max-width: 400px; + min-width: 330px; + } +} + +/* Cap the column height at 100vh (fixed an old + * bug someone encountered in safari, but which + * I've seen resurface from time to time) */ +.column { + max-height:100vh; +} + +/* Don't show outline around statuses if we're in + * mouse or touch mode (rather than keyboard) */ +[data-whatinput="mouse"], [data-whatinput="touch"] { + .status__content:focus, .status:focus, + .status__wrapper:focus, .status__content__text:focus { + outline: none; + } +} + +/* Less emphatic show more */ +.status__content__read-more-button { + font-size: 14px; + color: $dark-text-color; + + .status__prepend-icon { + padding-right: 4px; + } +} + +/* Show a little arrowey thing after the time in a + * status to signal that you can click it to see + * a detailed view */ +.status time:after, +.detailed-status__datetime span:after { + font: normal normal normal 14px/1 FontAwesome; + content: "\00a0\00a0\f08e"; +} + +/* Don't display the elephant mascot (we have our + * own, thanks) */ +.drawer__inner__mastodon { + display: none; +} + +/* Let the compose area/drawer be short, but + * expand if necessary */ +.drawer .drawer__inner { + overflow: visible; + height:inherit; + background-image: none; +} +.drawer__pager { + overflow-y:auto; +} + +/* Use display: none instead of visibility:hidden + * to hide the suggested follows list on non-mobile */ +@media screen and (min-width: 630px) { + .search-results .trends { + display:none; + } +} + +@import 'fullwidth-media'; + diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss new file mode 100644 index 000000000..f6a036d4f --- /dev/null +++ b/app/javascript/styles/fullwidth-media.scss @@ -0,0 +1,48 @@ + +.detailed-status > .media-spoiler, +.status > .media-spoiler, +.status .video-player, +.media-gallery, +.status .status-card.interactive { + margin-top: 20px; + margin-left: -68px; + width: calc(100% + 80px); +} + +.detailed-status > .media-spoiler, +.status > .media-spoiler, +.video-player { + max-width: none; +} + +/* If there's no status text, add an extra margin on top */ +.status .status__info + .media-gallery, +.status .status__info + .media-spoiler, +.status .status__info + .video-player, +.status .status__info + .status-card { + margin-top: 40px; +} + +.status__video-player-video { + transform: unset; + top: unset; +} + +.detailed-status .media-gallery { + margin-left: -10px; + width: calc(100% + 22px); +} + +.public-layout .status { + .status__content { + min-height: 15px; + } + & > .media-spoiler, + .video-player, + .media-gallery, + .status-card { + margin-top: 20px; + width: calc(100% + 94px); + margin-left: -78px; + } +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 86425c47c..eb6fc9786 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3049,10 +3049,6 @@ a.status-card { width: 100%; } - .status-card__image-image { - border-radius: 4px 4px 0 0; - } - .status-card__title { white-space: inherit; } @@ -3084,7 +3080,6 @@ a.status-card.compact:hover { } .status-card__image-image { - border-radius: 4px 0 0 4px; display: block; margin: 0; width: 100%; From 019e0833d1a1ad300bf99297c1f335677ee0c62b Mon Sep 17 00:00:00 2001 From: chr Date: Sat, 12 Oct 2019 11:59:20 -0700 Subject: [PATCH 2/2] changes for single column --- app/javascript/styles/cybre-base.scss | 35 ++++++++++++++------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/app/javascript/styles/cybre-base.scss b/app/javascript/styles/cybre-base.scss index b9bb4ecb8..a8c642cbb 100644 --- a/app/javascript/styles/cybre-base.scss +++ b/app/javascript/styles/cybre-base.scss @@ -1,15 +1,8 @@ @import 'application'; -/* Allow columns to grow wider as the screen gets - * wider, but don't ever let them get more than - * 400px (some people have a bunch of columns!) */ +/* Wider compose area */ @media screen and (min-width: 1300px) { - .column { - flex-grow: 1 !important; - max-width: 400px; - } - .drawer { width: 17%; /* Not part of the flex fun */ max-width: 400px; @@ -17,14 +10,7 @@ } } -/* Cap the column height at 100vh (fixed an old - * bug someone encountered in safari, but which - * I've seen resurface from time to time) */ -.column { - max-height:100vh; -} - -/* Don't show outline around statuses if we're in +/* Don't show outline around statuses if we're in * mouse or touch mode (rather than keyboard) */ [data-whatinput="mouse"], [data-whatinput="touch"] { .status__content:focus, .status:focus, @@ -69,7 +55,22 @@ overflow-y:auto; } -/* Use display: none instead of visibility:hidden +/* Put a reasonable background on the single-column compose form */ +.layout-single-column .compose-panel { + background-color: $ui-base-color; + height: auto; + overflow-y: visible; + margin-top: 65px; +} + +/* Better distinguish the search bar */ +.layout-single-column .compose-panel .search { + position:relative; + top: -55px; + margin-bottom: -55px; +} + +/* Use display: none instead of visibility:hidden * to hide the suggested follows list on non-mobile */ @media screen and (min-width: 630px) { .search-results .trends {