update repo url

This reverts commit 267dfa2cca.

src/App.js

@@ -61,9 +61,17 @@ export default {
           '-no-sticky-headers': this.noSticky,
           '-has-new-post-button': this.newPostButtonShown
         },
-        '-' + this.layoutType
+        '-' + this.layoutType,
       ]
     },
+    columnWidth() {
+      let type = this.$store.getters.mergedConfig.widenTimeline
+      console.log(type);
+      if (type && type !== 'off') {
+        return `minmax(var(--miniColumn), ${type})`
+      }
+      return 'minmax(var(--miniColumn), 45rem)'
+    },
     pageBackground () {
       return this.mergedConfig.displayPageBackgrounds
         ? this.$store.state.users.displayBackground

src/App.scss

@@ -172,6 +172,10 @@ nav {
   background-color: rgba(0, 0, 0, 0.15);
   background-color: var(--underlay, rgba(0, 0, 0, 0.15));
   z-index: -1000;
+
+  .-wide-timeline & {
+    margin:0 calc(var(--columnGap) / -2);
+  }
 }
 
 .app-layout {
@@ -187,6 +191,7 @@ nav {
   grid-template-rows: 1fr;
   box-sizing: border-box;
   margin: 0 auto;
+  padding: 0 calc(var(--columnGap) / 2);
   align-content: flex-start;
   flex-wrap: wrap;
   justify-content: center;

src/App.vue

@@ -14,6 +14,7 @@
       id="content"
       class="app-layout container"
       :class="classes"
+      :style="{'--maxiColumn': this.columnWidth}"
     >
       <div class="underlay" />
       <div

src/components/gallery/gallery.js

@@ -88,10 +88,8 @@ const Gallery = {
       set(this.sizes, id, { width, height })
     },
     rowStyle (row) {
-      if (row.audio) {
-        return { 'padding-bottom': '25%' } // fixed reduced height for audio
-      } else if (!row.minimal && !row.grid) {
-        return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
+      if (!row.audio && !row.minimal && !row.grid) {
+        return { 'aspect-ratio': `1/${(1 / (row.items.length + 0.6))}` }
       }
     },
     itemStyle (id, row) {

src/components/gallery/gallery.vue

@@ -96,9 +96,15 @@
 
   .gallery-row {
     position: relative;
-    height: 0;
     width: 100%;
     flex-grow: 1;
+    .Status & {
+      max-height: 30em;
+    }
+
+    &.-audio {
+      aspect-ratio: 4/1; // this is terrible, but it's how it was before so I'm not changing it >:(
+    }
 
     &:not(:first-child) {
       margin-top: 0.5em;

src/components/post_status_form/post_status_form.vue

@@ -606,6 +606,16 @@
       border-top-right-radius: 0;
     }
 
+    &.-has-subject {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &.-has-subject {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
     &.scrollable-form {
       overflow-y: auto;
     }

src/components/settings_modal/tabs/general_tab.js

@@ -55,6 +55,11 @@ const GeneralTab = {
         value: tab,
         label: this.$t(`user_card.${tab}`)
       })),
+      widenTimelineOptions : ['1fr', '75%', '50%', 'off'].map(width => ({
+        key: width,
+        value: width,
+        label: this.$t(`settings.widen_timeline_option.${width}`)
+      })),
       profilesExpanded: false,
       newProfileName: '',
       loopSilentAvailable:

src/components/settings_modal/tabs/general_tab.vue

@@ -159,6 +159,16 @@
             {{ $t('settings.show_page_backgrounds') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="centerAlignBio">
+            {{ $t('settings.center_align_bio') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="compactUserInfo">
+            {{ $t('settings.compact_user_info') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
@@ -269,6 +279,14 @@
             {{ $t('settings.right_sidebar') }}
           </BooleanSetting>
         </li>
+        <li>
+          <ChoiceSetting
+            path="widenTimeline"
+            :options="widenTimelineOptions"
+          >
+            {{ $t('settings.widen_timeline') }}
+          </ChoiceSetting>
+        </li>
         <li>
           <ChoiceSetting
             v-if="user"

src/components/settings_modal/tabs/version_tab.js

@@ -1,7 +1,7 @@
 import { extractCommit } from 'src/services/version/version.service'
 
-const pleromaFeCommitUrl = 'https://akkoma.dev/AkkomaGang/pleroma-fe/commit/'
-const pleromaBeCommitUrl = 'https://akkoma.dev/AkkomaGang/akkoma/commit/'
+const pleromaFeCommitUrl = 'https://git.jeder.pl/jeder/akkoma-fe/commit/'
+const pleromaBeCommitUrl = 'https://iceshrimp.dev/iceshrimp/Iceshrimp.NET'
 
 const VersionTab = {
   data () {
@@ -16,7 +16,7 @@ const VersionTab = {
       return pleromaFeCommitUrl + this.frontendVersion
     },
     backendVersionLink () {
-      return pleromaBeCommitUrl + extractCommit(this.backendVersion)
+      return pleromaBeCommitUrl
     }
   }
 }

src/components/status/status.scss

@@ -322,6 +322,7 @@
 
     > * {
       min-width: fit-content;
+      max-width: 3em;
       flex: 1;
     }
   }

src/components/status/status.vue

@@ -460,12 +460,6 @@
               :status="status"
               @toggle="toggleReplying"
             />
-            <quote-button
-              :visibility="status.visibility"
-              :quoting="quoting"
-              :status="status"
-              @toggle="toggleQuoting"
-            />
             <retweet-button
               :visibility="status.visibility"
               :logged-in="loggedIn"
@@ -479,6 +473,12 @@
               v-if="loggedIn"
               :status="status"
             />
+            <quote-button
+              :visibility="status.visibility"
+              :quoting="quoting"
+              :status="status"
+              @toggle="toggleQuoting"
+            />
             <extra-buttons
               :status="status"
               @on-error="showError"

src/components/user_card/user_card.js

@@ -117,6 +117,11 @@ export default {
     shouldConfirmMute () {
       return this.mergedConfig.modalOnMute
     },
+    compactUserInfo () {
+      return this.$store.getters.mergedConfig.compactUserInfo
+        && (this.$store.state.interface.layoutType !== 'mobile')
+        && this.switcher
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {

src/components/user_card/user_card.scss

@@ -21,6 +21,13 @@
     position: relative;
   }
 
+  .user-buttons {
+    grid-area: edit;
+    display: flex;
+    padding: .5em 0 .5em 0;
+    justify-self: end;
+  }
+
   .panel-body {
     word-wrap: break-word;
     border-bottom-right-radius: inherit;
@@ -53,7 +60,6 @@
   }
 
   &-bio {
-    text-align: center;
     display: block;
     line-height: 1.3;
     padding: 1em;
@@ -100,15 +106,14 @@
   padding: 0 26px;
 
   .container {
-    min-width: 0;
     padding: 16px 0 6px;
-    display: flex;
-    align-items: flex-start;
-    max-height: 56px;
-
-    > * {
-      min-width: 0;
-    }
+    display: grid;
+    grid-template-areas:
+      "pfp name edit"
+      "pfp summary summary"
+      "stats stats stats";
+    grid-template-columns: auto 1fr auto;
+    align-items: start;
 
     .Avatar {
       --_avatarShadowBox: var(--avatarShadow);
@@ -123,6 +128,7 @@
   }
 
   &-avatar-link {
+    grid-area: pfp;
     position: relative;
     cursor: pointer;
 
@@ -153,8 +159,8 @@
 
   .external-link-button, .edit-profile-button {
     cursor: pointer;
-    width: 2.5em;
-    text-align: center;
+    width: 2.3em;
+    text-align: right;
     margin: -0.5em 0;
     padding: 0.5em 0;
 
@@ -165,12 +171,16 @@
   }
 
   .user-summary {
-    display: block;
+    grid-area: summary;
+    display: grid;
+    grid-template-areas:
+      "name name name name name"
+      "hand role lock avg _";
+    grid-template-columns:
+       auto auto auto auto 1fr;
+    justify-items: start;
     margin-left: 0.6em;
-    text-align: left;
     text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1 1 0;
     // This is so that text doesn't get overlapped by avatar's shadow if it has
     // big one
     z-index: 1;
@@ -178,56 +188,82 @@
 
     --emoji-size: 1.7em;
 
-    .top-line,
-    .bottom-line {
-      display: flex;
-    }
-  }
-
-  .user-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex: 1 1 auto;
-    margin-right: 1em;
-    font-size: 1.1em;
-  }
-
-  .bottom-line {
-    font-weight: light;
-    font-size: 1.1em;
-    align-items: baseline;
-
-    .lock-icon {
+    .user-locked {
       margin-left: 0.5em;
+      grid-area: lock;
     }
 
     .user-screen-name {
       min-width: 1px;
-      flex: 0 1 auto;
+      max-width: 100%;
       text-overflow: ellipsis;
       overflow: hidden;
       color: $fallback--lightText;
       color: var(--lightText, $fallback--lightText);
+      grid-area: hand;
     }
 
     .dailyAvg {
       min-width: 1px;
-      flex: 0 0 auto;
       margin-left: 1em;
       font-size: 0.7em;
       color: $fallback--text;
       color: var(--text, $fallback--text);
+      grid-area: avg;
     }
 
-    .user-role {
-      flex: none;
-      color: $fallback--text;
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--alertNeutral, $fallback--fg);
+    .user-roles {
+      display: flex;
+      grid-area: role;
+
+      .user-role {
+        color: $fallback--text;
+        color: var(--alertNeutralText, $fallback--text);
+        background-color: $fallback--fg;
+        background-color: var(--alertNeutral, $fallback--fg);
+      }
     }
   }
 
+  .user-counts {
+    grid-area: stats;
+    display: flex;
+    line-height:16px;
+    padding-top: 0.5em;
+    text-align: center;
+    justify-content: space-around;
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
+    align-self: center;
+
+    .user-count {
+      padding: .5em 0 .5em 0;
+      margin: 0 .5em;
+
+      h5 {
+        font-size:1em;
+        font-weight: bolder;
+        margin: 0 0 0.25em;
+      }
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .user-name {
+    text-align: start;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-left: 0.6em;
+    font-size: 1.1em;
+    grid-area: name;
+    align-self: center;
+    white-space: nowrap;
+    max-width: 100%;
+    z-index: 1; // so shadow from user avatar doesn't overlap it
+  }
+
   .user-meta {
     margin-bottom: .15em;
     display: flex;
@@ -290,34 +326,21 @@
       margin: 0;
     }
   }
+
+  &.-compact {
+    .container {
+      grid-template-areas:
+        "pfp name stats edit"
+        "pfp summary stats edit";
+      grid-template-columns: auto auto 1fr auto;
+    }
+    .user-counts {
+      padding-top: 0;
+      justify-content: space-evenly;
+    }
+  }
 }
 
 .sidebar .edit-profile-button {
   display: none;
 }
-
-.user-counts {
-  display: flex;
-  line-height:16px;
-  padding: .5em 1.5em 0em 1.5em;
-  text-align: center;
-  justify-content: space-between;
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  flex-wrap: wrap;
-}
-
-.user-count {
-  flex: 1 0 auto;
-  padding: .5em 0 .5em 0;
-  margin: 0 .5em;
-
-  h5 {
-    font-size:1em;
-    font-weight: bolder;
-    margin: 0 0 0.25em;
-  }
-  a {
-    text-decoration: none;
-  }
-}

src/components/user_card/user_card.vue

@@ -9,7 +9,10 @@
       class="background-image"
     />
     <div class="panel-heading -flexible-height">
-      <div class="user-info">
+      <div
+        class="user-info"
+        :class="{ '-compact': this.compactUserInfo }"
+      >
         <div class="container">
           <a
             v-if="allowZoomingAvatar"
@@ -29,6 +32,7 @@
           </a>
           <router-link
             v-else
+            class="user-info-avatar-link"
             :to="userProfileLink(user)"
           >
             <UserAvatar
@@ -36,15 +40,80 @@
               :user="user"
             />
           </router-link>
+          <RichContent
+            :title="user.name"
+            class="user-name"
+            :html="user.name"
+            :emoji="user.emoji"
+          />
           <div class="user-summary">
-            <div class="top-line">
-              <RichContent
-                :title="user.name"
-                class="user-name"
-                :html="user.name"
-                :emoji="user.emoji"
+            <router-link
+              class="user-screen-name"
+              :title="user.screen_name_ui"
+              :to="userProfileLink(user)"
+            >
+              @{{ user.screen_name_ui }}
+            </router-link>
+            <span class="user-roles" v-if="!hideBio && (user.deactivated || !!visibleRole || user.bot)">
+              <span
+                v-if="user.deactivated"
+                class="alert user-role"
+              >
+                {{ $t('user_card.deactivated') }}
+              </span>
+              <span
+                v-if="!!visibleRole"
+                class="alert user-role"
+              >
+                {{ $t(`general.role.${visibleRole}`) }}
+              </span>
+              <span
+                v-if="user.bot"
+                class="alert user-role"
+              >
+                {{ $t('user_card.bot') }}
+              </span>
+            </span>
+            <span class="user-locked" v-if="user.locked">
+              <FAIcon
+                class="lock-icon"
+                icon="lock"
+                size="sm"
               />
-              <button
+            </span>
+            <span
+              v-if="!mergedConfig.hideUserStats && !hideBio"
+              class="dailyAvg"
+            >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
+          </div>
+          <div
+            v-if="!mergedConfig.hideUserStats && switcher"
+            class="user-counts"
+          >
+            <div
+              class="user-count"
+              @click.prevent="setProfileView('statuses')"
+            >
+              <h5>{{ $t('user_card.statuses') }}</h5>
+              <span>{{ user.statuses_count }} <br></span>
+            </div>
+            <div
+              class="user-count"
+              @click.prevent="setProfileView('friends')"
+            >
+              <h5>{{ $t('user_card.followees') }}</h5>
+              <span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
+            </div>
+            <div
+              class="user-count"
+              @click.prevent="setProfileView('followers')"
+            >
+              <h5>{{ $t('user_card.followers') }}</h5>
+              <span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
+            </div>
+          </div>
+          <div class="user-buttons">
+            <button
                 v-if="!isOtherUser && user.is_local"
                 class="button-unstyled edit-profile-button"
                 @click.stop="openProfileTab"
@@ -83,47 +152,6 @@
                 :user="user"
                 :relationship="relationship"
               />
-            </div>
-            <div class="bottom-line">
-              <router-link
-                class="user-screen-name"
-                :title="user.screen_name_ui"
-                :to="userProfileLink(user)"
-              >
-                @{{ user.screen_name_ui }}
-              </router-link>
-              <template v-if="!hideBio">
-                <span
-                  v-if="user.deactivated"
-                  class="alert user-role"
-                >
-                  {{ $t('user_card.deactivated') }}
-                </span>
-                <span
-                  v-if="!!visibleRole"
-                  class="alert user-role"
-                >
-                  {{ $t(`general.role.${visibleRole}`) }}
-                </span>
-                <span
-                  v-if="user.bot"
-                  class="alert user-role"
-                >
-                  {{ $t('user_card.bot') }}
-                </span>
-              </template>
-              <span v-if="user.locked">
-                <FAIcon
-                  class="lock-icon"
-                  icon="lock"
-                  size="sm"
-                />
-              </span>
-              <span
-                v-if="!mergedConfig.hideUserStats && !hideBio"
-                class="dailyAvg"
-              >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
-            </div>
           </div>
         </div>
         <div class="user-meta">
@@ -269,38 +297,13 @@
       v-if="!hideBio"
       class="panel-body"
     >
-      <div
-        v-if="!mergedConfig.hideUserStats && switcher"
-        class="user-counts"
-      >
-        <div
-          class="user-count"
-          @click.prevent="setProfileView('statuses')"
-        >
-          <h5>{{ $t('user_card.statuses') }}</h5>
-          <span>{{ user.statuses_count }} <br></span>
-        </div>
-        <div
-          class="user-count"
-          @click.prevent="setProfileView('friends')"
-        >
-          <h5>{{ $t('user_card.followees') }}</h5>
-          <span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
-        </div>
-        <div
-          class="user-count"
-          @click.prevent="setProfileView('followers')"
-        >
-          <h5>{{ $t('user_card.followers') }}</h5>
-          <span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
-        </div>
-      </div>
       <RichContent
         v-if="!hideBio"
         class="user-card-bio"
         :html="user.description_html"
         :emoji="user.emoji"
         :handle-links="true"
+        :style='{"text-align": this.$store.getters.mergedConfig.centerAlignBio ? "center" : "start"}'
       />
     </div>
     <teleport to="#modal">

src/i18n/de.json

@@ -482,6 +482,7 @@
         "blocks_tab": "Blocks",
         "bot": "Dies ist ein Bot Account",
         "btnRadius": "Knöpfe",
+        "center_align_bio": "Zentrale Textausrichtung in der Bio",
         "cBlue": "Blau (Antworten, folgt dir)",
         "cGreen": "Grün (Retweet)",
         "cOrange": "Orange (Favorisieren)",
@@ -496,6 +497,7 @@
         "checkboxRadius": "Auswahlfelder",
         "collapse_subject": "Beiträge mit Inhaltswarnungen einklappen",
         "columns": "Spalten",
+        "compact_user_info": "Kompakte Benutzerinfos wenn genug Platz",
         "composing": "Verfassen",
         "confirm_dialogs": "Bestätigung erforderlich für:",
         "confirm_dialogs_approve_follow": "Annehmen einer Followanfrage",
@@ -934,6 +936,7 @@
             "title": "Version"
         },
         "virtual_scrolling": "Anzeige der Zeitleiste optimieren",
+        "widen_timeline": "Zeitleiste verbreitern, um horizontalen Platz zu füllen",
         "word_filter": "Wortfilter",
         "wordfilter": "Wortfilter"
     },

src/i18n/en.json

@@ -488,6 +488,7 @@
         "blocks_tab": "Blocks",
         "bot": "This is a bot account",
         "btnRadius": "Buttons",
+        "center_align_bio": "Center text in user bio",
         "cBlue": "Blue (Reply, follow)",
         "cGreen": "Green (Retweet)",
         "cOrange": "Orange (Favorite)",
@@ -502,6 +503,7 @@
         "checkboxRadius": "Checkboxes",
         "collapse_subject": "Collapse posts with content warnings",
         "columns": "Columns",
+        "compact_user_info": "Compact user info when enough space",
         "composing": "Composing",
         "confirm_dialogs": "Require confirmation for:",
         "confirm_dialogs_approve_follow": "Accepting a follow request",
@@ -948,6 +950,13 @@
         },
         "virtual_scrolling": "Optimize timeline rendering",
         "use_blurhash": "Use blurhashes for NSFW thumbnails",
+        "widen_timeline": "Widen the Timeline to fill horizontal space",
+        "widen_timeline_option": {
+            "1fr": "Full",
+            "75%": "75%",
+            "50%": "50%",
+            "off": "Off"
+        },
         "word_filter": "Word filter",
         "wordfilter": "Wordfilter"
     },

src/modules/config.js

@@ -56,6 +56,8 @@ export const defaultState = {
   autohideFloatingPostButton: false,
   pauseOnUnfocused: true,
   displayPageBackgrounds: true,
+  centerAlignBio: false,
+  compactUserInfo: true,
   stopGifs: undefined,
   replyVisibility: 'all',
   thirdColumnMode: 'notifications',
@@ -77,6 +79,7 @@ export const defaultState = {
   hideScopeNotice: false,
   useStreamingApi: false,
   sidebarRight: undefined, // instance default
+  widenTimeline: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
   alwaysShowSubjectInput: undefined, // instance default
   postContentType: undefined, // instance default

src/modules/instance.js

@@ -61,6 +61,7 @@ const defaultState = {
   showNavShortcuts: true,
   showWiderShortcuts: true,
   sidebarRight: false,
+  widenTimeline: true,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',
   virtualScrolling: true,

static/config.json

@@ -1,7 +1,7 @@
 {
   "alwaysShowSubjectInput": true,
-  "background": "/static/aurora_borealis.jpg",
-  "collapseMessageWithSubject": false,
+  "background": "/static/background.jpg",
+  "collapseMessageWithSubject": true,
   "greentext": false,
   "hideFilteredStatuses": false,
   "hideMutedPosts": false,
@@ -22,5 +22,5 @@
   "sidebarRight": false,
   "subjectLineBehavior": "email",
   "theme": "ihatebeingalive",
-  "webPushNotifications": false
+  "webPushNotifications": true
 }

static/terms-of-service.html

@@ -1,5 +1,3 @@
-<h4>Terms of Service</h4>
+<h3>Hello.</h3>
 
-<p>This is a placeholder, overwrite this by putting a file at <pre>$STATIC_DIR/static/terms-of-service.html</pre><p>
-
-<p>See the <a href="https://docs.akkoma.dev/main/backend/configuration/static_dir/">Static Directory</a> docs for more info.</p>
+<p>This is an <a href="https://iceshrimp.dev/iceshrimp/akkoma-fe">akkoma-fe</a> instance running for users of miau.jeder.pl which itself is running on <a href="https://iceshrimp.dev/iceshrimp/Iceshrimp.NET">Iceshrimp.NET</a>, and should be showing contents of the instance.</p>