clean up readme

README.md

@@ -1,26 +1,20 @@
-# Pleroma-FE 
+# Akkoma-FE-Mobile
 
-This is a fork of Pleroma-FE from the Pleroma project, with support for new Akkoma features such as:
-- MFM support via [marked-mfm](https://akkoma.dev/sfr/marked-mfm)
-- Custom emoji reactions
+[screenshot of the frontend](sample.png) 
+
+This is a fork of Akkoma-FE from the Akkoma project, with what I think is a better UI for mobile devices and things of that nature.
 
 # For Translators
 
-The [Weblate UI](https://translate.akkoma.dev/projects/akkoma/pleroma-fe/) is recommended for adding or modifying translations for Pleroma-FE. 
-
-Alternatively, edit/create `src/i18n/$LANGUAGE_CODE.json` (where `$LANGUAGE_CODE` is the [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for your language), then add your language to [src/i18n/messages.js](https://akkoma.dev/AkkomaGang/pleroma-fe/src/branch/develop/src/i18n/messages.js) if it doesn't already exist there.
-
-Pleroma-FE will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.
-
-# FOR ADMINS
-
-To use Pleroma-FE in Akkoma, use the [frontend](https://docs.akkoma.dev/stable/administration/CLI_tasks/frontend/) CLI task to install Pleroma-FE, then modify your configuration as described in the [Frontend Management](https://docs.akkoma.dev/stable/configuration/frontend_management/) doc.
+Please put translations in the real Akkoma-FE repo.
 
 ## Build Setup
 
 ``` bash
+# enter dev shell
+nix-shell -p nodejs nodePackages.npm yarn
+
 # install dependencies
-npm install -g yarn
 yarn
 
 # serve with hot reload at localhost:8080

src/App.scss

@@ -7,7 +7,7 @@
 }
 
 html {
-  font-size: 14px;
+  font-size: 18px;
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
@@ -127,7 +127,7 @@ nav {
   box-shadow: var(--topBarShadow);
   box-sizing: border-box;
   height: var(--navbar-height);
-  position: fixed;
+  position: relative;
 }
 
 #sidebar {
@@ -135,7 +135,7 @@ nav {
 }
 
 .column.-scrollable {
-  top: var(--navbar-height);
+  top: 0;
   position: sticky;
 }
 
@@ -297,7 +297,7 @@ nav {
       margin-left: 0;
       margin-right: 0;
       padding-top: 0;
-      margin-top: var(--navbar-height);
+      margin-top: 0;
       margin-bottom: 0;
     }
 
@@ -339,7 +339,7 @@ nav {
   cursor: pointer;
   box-shadow: $fallback--buttonShadow;
   box-shadow: var(--buttonShadow);
-  font-size: 1em;
+  font-size: 0.8em;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 

src/components/status/status.scss

@@ -83,7 +83,7 @@
   .status-username {
     white-space: nowrap;
     overflow: hidden;
-    max-width: 85%;
+    max-width: 100%;
     font-weight: bold;
     flex-shrink: 1;
     margin-right: 0.4em;

src/components/status/status.vue

@@ -166,18 +166,6 @@
                 >
                   {{ status.user.name }}
                 </h4>
-                <router-link
-                  class="account-name"
-                  :title="status.user.screen_name_ui"
-                  :to="userProfileLink"
-                >
-                  {{ status.user.screen_name_ui }}
-                </router-link>
-                <img
-                  v-if="!!(status.user && status.user.favicon)"
-                  class="status-favicon"
-                  :src="status.user.favicon"
-                >
               </div>
 
               <span class="heading-right">
@@ -190,143 +178,68 @@
                     :auto-update="60"
                   />
                 </router-link>
-                <span
-                  v-if="status.visibility"
-                  class="visibility-icon"
-                  :title="visibilityLocalized"
-                >
-                  <FAIcon
-                    fixed-width
-                    class="fa-scale-110"
-                    :icon="visibilityIcon(status.visibility)"
-                  />
-                </span>
-                <button
-                  v-if="expandable && !isPreview"
-                  class="button-unstyled"
-                  :title="$t('status.expand')"
-                  @click.prevent="toggleExpanded"
-                >
-                  <FAIcon
-                    fixed-width
-                    class="fa-scale-110"
-                    icon="plus-square"
-                  />
-                </button>
-                <button
-                  v-if="unmuted"
-                  class="button-unstyled"
-                  @click.prevent="toggleMute"
-                >
-                  <FAIcon
-                    fixed-width
-                    icon="eye-slash"
-                    class="fa-scale-110"
-                  />
-                </button>
-                <button
-                  v-if="inThreadForest && replies && replies.length && !simpleTree"
-                  class="button-unstyled"
-                  :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
-                  :aria-expanded="threadShowing ? 'true' : 'false'"
-                  @click.prevent="toggleThreadDisplay"
-                >
-                  <FAIcon
-                    fixed-width
-                    class="fa-scale-110"
-                    :icon="threadShowing ? 'chevron-up' : 'chevron-down'"
-                  />
-                </button>
-                <button
-                  v-if="dive && !simpleTree"
-                  class="button-unstyled"
-                  :title="$t('status.show_only_conversation_under_this')"
-                  @click.prevent="dive"
-                >
-                  <FAIcon
-                    fixed-width
-                    class="fa-scale-110"
-                    :icon="'angle-double-right'"
-                  />
-                </button>
               </span>
             </div>
-            <div
-              v-if="isReply || hasMentionsLine"
-              class="heading-reply-row"
-            >
-              <span
-                v-if="isReply"
-                class="glued-label reply-glued-label"
+            <div class="heading-name-row">
+              <router-link
+                class="account-name"
+                :title="status.user.screen_name_ui"
+                :to="userProfileLink"
               >
-                <StatusPopover
-                  v-if="!isPreview"
-                  :status-id="status.parent_visible && status.in_reply_to_status_id"
-                  class="reply-to-popover"
-                  style="min-width: 0"
-                  :class="{ '-strikethrough': !status.parent_visible }"
-                >
-                  <button
-                    class="button-unstyled reply-to"
-                    :aria-label="$t('tool_tip.reply')"
-                    @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
-                  >
-                    <FAIcon
-                      class="fa-scale-110 fa-old-padding"
-                      icon="reply"
-                      flip="horizontal"
-                    />
-                    {{ ' ' }}
-                    <span
-                      class="reply-to-text"
-                    >
-                      {{ $t('status.reply_to') }}
-                    </span>
-                  </button>
-                </StatusPopover>
-
-                <span
-                  v-else
-                  class="reply-to-no-popover"
-                >
-                  <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
-                </span>
-                <MentionLink
-                  :content="replyToName"
-                  :url="replyProfileLink"
-                  :user-id="status.in_reply_to_user_id"
-                  :user-screen-name="status.in_reply_to_screen_name"
+                {{ status.user.screen_name_ui }}
+              </router-link>
+              <img
+                v-if="!!(status.user && status.user.favicon)"
+                class="status-favicon"
+                :src="status.user.favicon"
+              >
+               <span
+                v-if="status.visibility"
+                class="visibility-icon"
+                :title="visibilityLocalized"
+              >
+                <FAIcon
+                  fixed-width
+                  class="fa-scale-110"
+                  :icon="visibilityIcon(status.visibility)"
                 />
               </span>
-
-              <!-- This little wrapper is made for sole purpose of "gluing" -->
-              <!-- "Mentions" label to the first mention -->
-              <span
-                v-if="hasMentionsLine"
-                class="glued-label"
+              <button
+                v-if="unmuted"
+                class="button-unstyled"
+                @click.prevent="toggleMute"
               >
-                <span
-                  class="mentions"
-                  :aria-label="$t('tool_tip.mentions')"
-                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
-                >
-                  <span
-                    class="mentions-text"
-                  >
-                    {{ $t('status.mentions') }}
-                  </span>
-                </span>
-                <MentionsLine
-                  v-if="hasMentionsLine"
-                  :mentions="mentionsLine.slice(0, 1)"
-                  class="mentions-line-first"
+                <FAIcon
+                  fixed-width
+                  icon="eye-slash"
+                  class="fa-scale-110"
                 />
-              </span>
-              <MentionsLine
-                v-if="hasMentionsLine"
-                :mentions="mentionsLine.slice(1)"
-                class="mentions-line"
-              />
+              </button>
+              <button
+                v-if="inThreadForest && replies && replies.length && !simpleTree"
+                class="button-unstyled"
+                :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
+                :aria-expanded="threadShowing ? 'true' : 'false'"
+                @click.prevent="toggleThreadDisplay"
+              >
+                <FAIcon
+                  fixed-width
+                  class="fa-scale-110"
+                  :icon="threadShowing ? 'chevron-up' : 'chevron-down'"
+                />
+              </button>
+              <button
+                v-if="dive && !simpleTree"
+                class="button-unstyled"
+                :title="$t('status.show_only_conversation_under_this')"
+                @click.prevent="dive"
+              >
+                <FAIcon
+                  fixed-width
+                  class="fa-scale-110"
+                  :icon="'angle-double-right'"
+                />
+              </button>
             </div>
           </div>
 
@@ -420,7 +333,64 @@
             v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
             :status="status"
           />
-
+          <div
+            v-if="isReply || hasMentionsLine"
+            class="footing-reply-row"
+          >
+            <button
+              v-if="expandable && !isPreview"
+              class="button-unstyled"
+              :title="$t('status.expand')"
+              @click.prevent="toggleExpanded"
+            >
+              <FAIcon
+                class="fa-scale-110 fa-old-padding"
+                icon="reply"
+                flip="horizontal"
+              />
+              {{ ' ' }}
+              <span
+                class="reply-to-text"
+              >
+                {{ $t('status.reply_to') }}
+              </span>
+            </button>
+            {{ ' ' }}
+            <MentionLink
+              :content="replyToName"
+              :url="replyProfileLink"
+              :user-id="status.in_reply_to_user_id"
+              :user-screen-name="status.in_reply_to_screen_name"
+            />
+            <!-- This little wrapper is made for sole purpose of "gluing" -->
+            <!-- "Mentions" label to the first mention -->
+            <span
+              v-if="hasMentionsLine"
+              class="glued-label"
+            >
+              <span
+                class="mentions"
+                :aria-label="$t('tool_tip.mentions')"
+                @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+              >
+                <span
+                  class="mentions-text"
+                >
+                  {{ $t('status.mentions') }}
+                </span>
+              </span>
+              <MentionsLine
+                v-if="hasMentionsLine"
+                :mentions="mentionsLine.slice(0, 1)"
+                class="mentions-line-first"
+              />
+            </span>
+            <MentionsLine
+              v-if="hasMentionsLine"
+              :mentions="mentionsLine.slice(1)"
+              class="mentions-line"
+            />
+          </div>
           <div
             v-if="!noHeading && !isPreview"
             class="status-actions"

src/components/timeline/timeline.scss

@@ -23,6 +23,7 @@
 
     .timeline-heading {
       .button-default, .alert {
+	position: sticky;
         line-height: 2em;
         width: 100%;
       }

src/panel.scss

@@ -81,7 +81,7 @@
 
   &.-sticky {
     position: sticky;
-    top: var(--navbar-height);
+    top: 0;
   }
 
   &::after,