Skip to content

Commit

Permalink
Overall styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@akirk
akirk committed Jan 16, 2025
1 parent 6edbee4 commit 439693b
Show file tree
Hide file tree
Showing 16 changed files with 147 additions and 107 deletions.
2 changes: 1 addition & 1 deletion feed-parsers/class-feed-parser-activitypub.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2548,7 +2548,7 @@ public static function comment_form( $post_id ) {

\comment_form(
array(
'title_reply' => __( 'Send reply via ActivityPub', 'friends' ),
'title_reply' => __( 'Send a Reply via ActivityPub', 'friends' ),
'title_reply_before' => '<h5 id="reply-title" class="comment-reply-title">',
'title_reply_after' => '</h5>',
'logged_in_as' => '',
Expand Down
2 changes: 1 addition & 1 deletion friends.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion friends.css.map
View file

Large diffs are not rendered by default.

25 changes: 12 additions & 13 deletions friends.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,12 +307,7 @@
return false;
} );

$document.on( 'click', 'a.collapse-post', function ( e ) {
if ( e.metaKey || e.altKey || e.shiftKey ) {
$( this ).trigger( 'dblclick' );
return;
}

$document.on( 'click', 'a.collapse-post, .collapsed.card, .all-collapsed .card:not(.uncollapsed)', function ( e ) {
const card = $( this ).closest( 'article' );
let collapsed;
if ( card.closest( 'section.all-collapsed' ).length ) {
Expand All @@ -324,23 +319,27 @@
}
if ( collapsed ) {
$( this )
.find( 'i' )
.find( 'i.dashicons-fullscreen-exit-alt' )
.removeClass( 'dashicons-fullscreen-exit-alt' )
.addClass( 'dashicons-fullscreen-alt' );
} else {
$( this )
.find( 'i' )
.removeClass( 'dashicons-fullscreen-exit-alt' )
.addClass( 'dashicons-fullscreen-alt' );
.find( 'i.dashicons-fullscreen-alt' )
.removeClass( 'dashicons-fullscreen-alt' )
.addClass( 'dashicons-fullscreen-exit-alt' );
}

return false;
} );

$document.on( 'dblclick', 'a.collapse-post', function () {
$document.on( 'click', 'a.toggle-compact', function () {
// Collapse-toggle all visible.
$( this ).closest( 'section' ).toggleClass( 'all-collapsed' );
$( this )[ 0 ].scrollIntoView();
$( 'section.posts' ).toggleClass( 'all-collapsed' );
if ( $( 'section.posts' ).is( '.all-collapsed' ) ) {
$( 'a.toggle-compact').text( friends.text_expanded_mode );
} else {
$( 'a.toggle-compact').text( friends.text_compact_mode );
}
$( window ).trigger( 'scroll' );
return false;
} );
Expand Down
135 changes: 92 additions & 43 deletions friends.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
$body-bg: #f7f8f9;

$primary-color: #2e5bec;
$dark-color: #3e396b;
$border-color-light: #eee;
Expand Down Expand Up @@ -41,7 +43,7 @@ div {
@import "node_modules/spectre.css/src/utilities/position";

.friends-dropdown {
display: inline-block;
display: none;
position: relative;

.menu {
Expand Down Expand Up @@ -94,6 +96,7 @@ div {
.off-canvas .off-canvas-toggle {
top: 3rem;
left: 1rem;
color: #fff;
}

.off-canvas .off-canvas-content header.navbar {
Expand All @@ -105,9 +108,9 @@ div {
}

.off-canvas .off-canvas-sidebar {
background-color: $body-bg;
margin-top: 32px;
width: 12rem;
background: #f7f8f9;
}

.off-canvas .off-canvas-content header.navbar #page-title {
Expand Down Expand Up @@ -147,7 +150,7 @@ h2#page-title a.dashicons {
}

a.off-canvas-toggle:visited {
color: $link-color;
color: #fff;
}

a,
Expand Down Expand Up @@ -241,6 +244,7 @@ h2#page-title a.dashicons {

header.navbar section.navbar-section.author {
flex: 3;
min-width: 20em;
}

summary.quick-status-panel-opener {
Expand All @@ -249,6 +253,10 @@ h2#page-title a.dashicons {
}

article {
margin-bottom: 2em;
.card-title {
padding-left: .8rem;
}
.card-body {

img,
Expand All @@ -257,41 +265,45 @@ h2#page-title a.dashicons {
height: auto;
}
}
.overflow {
height: .5em;
}

&.format-status {
div.teaser {
display: none;
}

border-bottom: 1px solid $dark-color;
padding-bottom: 2em;
margin-bottom: 2em;

header {
.card-title {
padding-left: 0;
}
}

div.overflow,
div.post-meta,
div.teaser {
margin-top: .4em;
}
&.format-image {
a.collapse-post {
display: none;
}
.card-footer {
padding-top: 0;
padding-bottom: 1rem;
}

div.overflow {
.btn {
margin-top: -.5em;
}
}
.card-footer a .text {
display: block;
font-size: 10px;
line-height: 8px;
}
}
}

.card {
height: 100%;
box-shadow: none;
box-shadow: 0 0 2px rgba(48, 55, 66, .15);
padding: 0;
border: 0;
border-radius: 10px;

.card-body {
padding: 0;

ul,
ol {
Expand Down Expand Up @@ -328,26 +340,42 @@ h2#page-title a.dashicons {
}
}

border-bottom: 1px solid #eee;
padding: 0 0 1em 0;
margin: 0 0 1em 0;
margin-bottom: 1em;

@media (min-width: $off-canvas-breakpoint) {
@media (max-width: $off-canvas-breakpoint) {
& {
border: 0;
box-shadow: 0 .25rem 1rem rgba(48, 55, 66, .15);
border-bottom: 1px solid #87a6bc;
padding: 0 0 1em 0;
margin: 0 0 1em 0;
width: 100%;
margin-left: 0;
margin-right: 0;

.card-body {
padding: 1rem;
}

.overflow {
display: none;
}

.card-title {
padding-left: 1rem;
}
textarea {
width: 100%;
}

.card-footer {
padding-top: 0;
padding-bottom: 1rem;
div.friends-dropdown {
display: inline-block;
}
}

.card-footer a .text {
display: block;
font-size: 10px;
line-height: 8px;
}
}
}
}
Expand Down Expand Up @@ -448,7 +476,7 @@ h2#page-title a.dashicons {
}

img.avatar {
border-radius: 100%;
border-radius: 5px;
}

div.friends-widget {
Expand Down Expand Up @@ -492,16 +520,25 @@ h2#page-title a.dashicons {
line-height: 1.4;
max-width: 100%;
margin: auto -0.4rem;
padding: .5rem;
padding: 1rem;
padding-bottom: 1.5em;

div.avatar {
margin-right: .5em;
}

div.author {
max-width: 19em;
}

@media (min-width: $off-canvas-breakpoint) {
padding: .8rem;
padding-bottom: 1.5em;
padding-top: .5rem;
padding-right: 1rem;
padding-left: 1rem;
}

div.friends-dropdown {
display: inline-block;
}
}

Expand Down Expand Up @@ -535,13 +572,17 @@ h2#page-title a.dashicons {
opacity: .5;
}

article.card.column.post_format-post-format-status.format-status header.entry-header div.post-meta {
width: calc(100% - 12em);
}

&.all-collapsed article:not(.uncollapsed):not(:only-child),
article.collapsed {
div.card-body {
display: none;
}

header {
header.entry-header {
padding-left: 1rem;

div.avatar {
Expand All @@ -564,28 +605,25 @@ h2#page-title a.dashicons {
}

h4.card-title {
margin-bottom: 0;
padding-left: .5rem;
}

&.format-status {
padding-bottom: 0;
margin-bottom: .5em;
width: 100%;

.overflow {
width: 6em;
margin-left: 1em;
}

div.teaser {
text-overflow: ellipsis;
width: calc(100% - 7em);
width: calc(100% - 1em);
overflow: hidden;
white-space: nowrap;
display: inline-block;
margin-left: .5em;
margin-right: .5em;

@media (min-width: $off-canvas-breakpoint) {
width: calc(100% - 25em);
width: calc(100% - 35em);
}
}

Expand All @@ -594,14 +632,15 @@ h2#page-title a.dashicons {
margin-bottom: 0;

div.post-meta {
max-width: 15em;
width: calc(100% - 5em);
max-height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
}

div.avatar {
display: block;
margin-left: 1em;
}
}
}
Expand All @@ -621,6 +660,7 @@ h2#page-title a.dashicons {
.dashicons {
vertical-align: middle;
}

}

.btn:hover {
Expand All @@ -629,6 +669,7 @@ h2#page-title a.dashicons {
}

footer.comments-content {
border-top: 1px solid $border-color-light;
&.closed {
display: none;
}
Expand Down Expand Up @@ -663,6 +704,10 @@ h2#page-title a.dashicons {
}
}

.comment-reply-title {
margin-top: 1em;
}

.comment-reply-title small {
margin-left: 1em;
}
Expand Down Expand Up @@ -789,6 +834,10 @@ h2#page-title a.dashicons {
}
}

.chip {
background-color: #fff;
}

/* to support mastodon style tags */
.invisible {
font-size: 0;
Expand Down
Loading

0 comments on commit 439693b

Please sign in to comment.