[bugfix] show header logo + align header buttons

the logo wasn’t showing on the small screen layout. this fixes that. it also neatly aligns the buttons in the header area.

.woodpecker/snapshot_next.yaml

@@ -0,0 +1,24 @@
+# https://woodpecker-ci.org/docs/usage/workflow-syntax#when---global-workflow-conditions
+when:
+  - event: push
+    branch: next
+
+# https://goreleaser.com/ci/woodpecker/
+# https://woodpecker-ci.org/docs/usage/workflow-syntax#clone
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      tags: true
+
+# https://woodpecker-ci.org/plugins/docker-buildx
+steps:
+  publish:
+    image: woodpeckerci/plugin-docker-buildx:5.2.2
+    settings:
+      pull_image: true
+      username: gotosocial
+      password:
+        from_secret: gts_docker_password
+      repo: superseriousbusiness/masto-fe-standalone
+      tag: next

CHANGELOG.md

@@ -11,7 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added documentation for `yarn dev` (#75)
 - Added an .editorconfig (#78)
-- Added a CHANGELOG.md basaed on “Keep a Changelog” (#80)
+- Added a CHANGELOG.md based on “Keep a Changelog” (#80)
 
 ### Changed
 
@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated Yarn to 4.10.3 (#90)
 - Updated Webpack to 5.102.1 (#83)
 - Updated ESlint to 9.37.0 (#88)
+- Fixed an issue where media items wouldn’t show correctly (#109)
 
 ### Removed
 

Dockerfile

@@ -27,7 +27,6 @@ RUN apk upgrade --update --no-cache
 
 # Copy bigger nested stuff.
 COPY --from=builder /build/public/packs/js/flavours/glitch /usr/share/nginx/html/packs/js/flavours/glitch
-COPY --from=builder /build/public/packs/js/flavours/vanilla /usr/share/nginx/html/packs/js/flavours/vanilla
 
 # Copy remaining files.
 COPY --from=builder /build/public /usr/share/nginx/html/

app/javascript/flavours/glitch/features/ui/components/header.jsx

@@ -19,7 +19,7 @@ const Account = connect(state => ({
   account: state.getIn(["accounts", me]),
 }))(({ account }) => (
   <Permalink href={account.get("url")} to={`/@${account.get("acct")}`} title={account.get("acct")}>
-    <Avatar account={account} size={35} />
+    <Avatar account={account} size={34} />
   </Permalink>
 ));
 
@@ -108,8 +108,7 @@ class Header extends PureComponent {
     return (
       <div className='ui__header'>
         <Link to='/' className='ui__header__logo'>
-          <WordmarkLogo />
-          <SymbolLogo />
+          <Icon id='gts-simple' />
         </Link>
 
         <div className='ui__header__links'>

app/javascript/flavours/glitch/styles/components/columns.scss

@@ -56,57 +56,6 @@
 
 $ui-header-height: 55px;
 
-.ui__header {
-  display: none;
-  box-sizing: border-box;
-  height: $ui-header-height;
-  position: sticky;
-  top: 0;
-  z-index: 3;
-  justify-content: space-between;
-  align-items: center;
-
-  &__logo {
-    display: inline-flex;
-    padding: 15px;
-
-    .logo {
-      height: $ui-header-height - 30px;
-      width: auto;
-    }
-
-    .logo--wordmark {
-      display: none;
-    }
-
-    @media screen and (width >= 320px) {
-      .logo--wordmark {
-        display: block;
-      }
-
-      .logo--icon {
-        display: none;
-      }
-    }
-  }
-
-  &__links {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 0 10px;
-    overflow: hidden;
-
-    .button {
-      flex: 0 0 auto;
-    }
-
-    .button-tertiary {
-      flex-shrink: 1;
-    }
-  }
-}
-
 .tabs-bar__wrapper {
   background: darken($ui-base-color, 8%);
   position: sticky;

app/javascript/flavours/glitch/styles/components/media.scss

@@ -64,29 +64,7 @@
   line-height: 18px;
 }
 
-.media-gallery {
-  box-sizing: border-box;
-  overflow: hidden;
-  border-radius: 4px;
-  position: relative;
-  width: 100%;
-  min-height: 64px;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 50% 50%;
-  gap: 2px;
-
-  @include fullwidth-gallery;
-}
-
 .media-gallery__item {
-  border: 0;
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  border-radius: 4px;
-  overflow: hidden;
-
   &--tall {
     grid-row: span 2;
   }

app/javascript/flavours/glitch/styles/components/single_column.scss

@@ -277,8 +277,8 @@
 
   .layout-single-column .ui__header {
     display: flex;
-    background: $ui-base-color;
     border-bottom: 1px solid lighten($ui-base-color, 8%);
+    background: $ui-base-color;
   }
 
   .layout-single-column {

app/javascript/flavours/glitch/styles/gts/_config.scss

@@ -10,4 +10,6 @@
 @import "sizes";
 
 /* 🧩 Components */
+@import "media-gallery";
 @import "status";
+@import "ui-header";

app/javascript/flavours/glitch/styles/gts/media-gallery.scss

@@ -1 +1,73 @@
 /* 🖼️ Media Gallery */
+.media-gallery {
+    position: relative;
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: var(--size-ui-gap);
+    overflow: hidden;
+}
+
+.media-gallery:not(.full-width) {
+    border-radius: var(--size-ui-radius);
+}
+
+.media-gallery.full-width {
+    margin-inline: -15px;
+
+    /* the `div` is there for specificity */
+    div.media-gallery__item {
+        border-radius: 0;
+    }
+}
+
+.media-gallery:not(.full-width) .spoiler-button__overlay {
+    border-radius: var(--size-ui-radius);
+}
+
+.media-gallery__item {
+    overflow: hidden;
+}
+
+/* Only one image */
+.media-gallery__item:nth-child(2):nth-last-child(1) {
+    border-radius: var(--size-ui-radius);
+}
+
+/* First image in a set of two */
+.media-gallery__item:nth-child(2):nth-last-child(2) {
+    border-top-left-radius: var(--size-ui-radius);
+    border-bottom-left-radius: var(--size-ui-radius);
+}
+
+/* Second image in a set of two */
+.media-gallery__item:nth-child(3):nth-last-child(1) {
+    border-top-right-radius: var(--size-ui-radius);
+    border-bottom-right-radius: var(--size-ui-radius);
+}
+
+/* First image in a set of at least two */
+.media-gallery__item:nth-child(2):not(:nth-last-child(1)) {
+    border-top-left-radius: var(--size-ui-radius);
+}
+
+/* Second image in a set of at least two */
+.media-gallery__item:nth-child(3):not(:nth-last-child(1)) {
+    border-top-right-radius: var(--size-ui-radius);
+}
+
+/* Second to last image in an even set */
+.media-gallery__item:nth-last-child(2):nth-child(even) {
+    border-bottom-left-radius: var(--size-ui-radius);
+}
+
+/* Last image in an even set */
+.media-gallery__item:last-child:nth-child(odd) {
+    border-bottom-right-radius: var(--size-ui-radius);
+}
+
+/* Last image in an uneven set */
+.media-gallery__item:last-child:nth-child(even) {
+    grid-column: 1/-1;
+    border-bottom-right-radius: var(--size-ui-radius);
+    border-bottom-left-radius: var(--size-ui-radius);
+}

app/javascript/flavours/glitch/styles/gts/sizes.scss

@@ -11,4 +11,5 @@
     /* Components */
     --size-avatar: 46px;
     --size-icon: 20px;
+    --size-header-block: #{$ui-header-height};
 }

app/javascript/flavours/glitch/styles/gts/ui-header.scss

@@ -0,0 +1,43 @@
+/* 🧑‍💻 UI: Header */
+.ui__header {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline-start: 7px;
+    height: var(--size-header-block);
+    box-sizing: border-box;
+
+    svg.gts-icon {
+        display: block;
+    }
+}
+
+.ui__header__logo {
+    --size-icon: 32px;
+    padding: 8px;
+}
+
+.ui__header__links {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-inline: 10px;
+    overflow: hidden;
+
+    a {
+        display: flex;
+        align-items: center;
+        line-height: 20px;
+    }
+
+    .button {
+        flex: 0 0 auto;
+    }
+
+    .button-tertiary {
+        flex-shrink: 1;
+    }
+}