fix loadingIndicator clipping top left corner

modrinth · Apr 7, 2024 · cca40c7 · cca40c7
1 parent 6699b4c
commit cca40c7
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 17 deletions.
diff --git a/theseus_gui/src/App.vue b/theseus_gui/src/App.vue
@@ -373,10 +373,7 @@ command_listener(async (e) => {
         </section>
       </div>
       <div class="router-view">
-        <ModrinthLoadingIndicator
-          offset-height="var(--appbar-height)"
-          offset-width="var(--sidebar-width)"
-        />
+        <ModrinthLoadingIndicator />
         <RouterView v-slot="{ Component }">
           <template v-if="Component">
             <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
@@ -474,6 +471,8 @@ command_listener(async (e) => {
       overflow-x: hidden;
       background-color: var(--color-bg);
       border-top-left-radius: var(--radius-xl);
+
+      position: relative;
     }
   }
 }

diff --git a/theseus_gui/src/components/modrinth-loading-indicator.js b/theseus_gui/src/components/modrinth-loading-indicator.js
@@ -20,14 +20,6 @@ export default defineComponent({
       default:
         'repeating-linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) 100%)',
     },
-    offsetWidth: {
-      type: String,
-      default: '208px',
-    },
-    offsetHeight: {
-      type: String,
-      default: '52px',
-    },
   },
   setup(props, { slots }) {
     const indicator = useLoadingIndicator({
@@ -52,12 +44,9 @@ export default defineComponent({
         'div',
         {
           style: {
-            position: 'fixed',
-            top: props.offsetHeight,
-            right: 0,
-            left: props.offsetWidth,
+            position: 'absolute',
             pointerEvents: 'none',
-            width: `calc((100vw - ${props.offsetWidth}) * ${indicator.progress.value / 100})`,
+            width: `calc(100% * ${indicator.progress.value / 100})`,
             height: `${props.height}px`,
             opacity: indicator.isLoading.value ? 1 : 0,
             background: props.color || undefined,