Adds global mcontent class to modal contents

Note: This is poorly designed, the modal should control the padding on its children and avoid the use of a global selector.
MuckRock · Dec 13, 2023 · 5ff74d1 · 5ff74d1
1 parent ac9bb3c
commit 5ff74d1
Showing 1 changed file with 67 additions and 59 deletions.
diff --git a/src/common/dialog/RevisionsDialog.svelte b/src/common/dialog/RevisionsDialog.svelte
@@ -40,72 +40,80 @@
   <Loader active />
 {:then user}
   <Loader active={false}>
-    <header>
-      <h3>{$_("dialogRevisionsDialog.heading")}</h3>
-      <PremiumBadge />
-    </header>
+    <div class="mcontent">
+      <header>
+        <h3>{$_("dialogRevisionsDialog.heading")}</h3>
+        <PremiumBadge />
+      </header>
 
-    {#if isPremiumOrg(user.organization)}
-      <form>
-        <label class="revision-control-input">
-          <input
-            type="checkbox"
-            name="revision_control"
-            checked={enabled}
-            on:change={handleRevisionControlChange}
-          />
-          {$_("dialogRevisionsDialog.controlLabel")}
-        </label>
-      </form>
-      {#if enabled}
-        <div class="overflow-scroll">
-          <table class="revisions">
-            {#each sortedRevisions as revision}
-              <tr class="revision">
-                <td class="revision-version count">{revision.version}</td>
-                <td class="revision-details">
-                  <p class="revision-comment">{revision.comment}</p>
-                  <span class="revision-time"
-                    ><RelativeTime date={new Date(revision.created_at)} /></span
+      {#if isPremiumOrg(user.organization)}
+        <form>
+          <label class="revision-control-input">
+            <input
+              type="checkbox"
+              name="revision_control"
+              checked={enabled}
+              on:change={handleRevisionControlChange}
+            />
+            {$_("dialogRevisionsDialog.controlLabel")}
+          </label>
+        </form>
+        {#if enabled}
+          <div class="overflow-scroll">
+            <table class="revisions">
+              {#each sortedRevisions as revision}
+                <tr class="revision">
+                  <td class="revision-version count">{revision.version}</td>
+                  <td class="revision-details">
+                    <p class="revision-comment">{revision.comment}</p>
+                    <span class="revision-time"
+                      ><RelativeTime
+                        date={new Date(revision.created_at)}
+                      /></span
+                    >
+                  </td>
+                  <td class="revision-download"
+                    ><Button href={revision.url} download nomargin
+                      >{$_("dialogRevisionsDialog.download")}</Button
+                    ></td
                   >
-                </td>
-                <td class="revision-download"
-                  ><Button href={revision.url} download nomargin
-                    >{$_("dialogRevisionsDialog.download")}</Button
-                  ></td
+                </tr>
+              {:else}
+                <tr class="empty"
+                  ><td>{$_("dialogRevisionsDialog.empty")}</td></tr
                 >
-              </tr>
-            {:else}
-              <tr class="empty"><td>{$_("dialogRevisionsDialog.empty")}</td></tr
-              >
-            {/each}
-          </table>
-        </div>
-        {#if revisions.length > 0}<p class="count">
-            {$_("dialogRevisionsDialog.total", {
-              values: { n: revisions.length },
-            })}
-          </p>{/if}
+              {/each}
+            </table>
+          </div>
+          {#if revisions.length > 0}<p class="count">
+              {$_("dialogRevisionsDialog.total", {
+                values: { n: revisions.length },
+              })}
+            </p>{/if}
+        {/if}
+      {:else if isOrgAdmin(user)}
+        <UpgradePrompt
+          message={$_("dialogRevisionsDialog.upgrade.message")}
+          callToAction={$_("dialogRevisionsDialog.upgrade.adminCta")}
+          on:click={() => triggerPremiumUpgradeFlow(user?.organization)}
+        />
+      {:else}
+        <UpgradePrompt
+          message={$_("dialogRevisionsDialog.upgrade.message") +
+            " " +
+            $_("dialogRevisionsDialog.upgrade.nonAdminCta")}
+        />
       {/if}
-    {:else if isOrgAdmin(user)}
-      <UpgradePrompt
-        message={$_("dialogRevisionsDialog.upgrade.message")}
-        callToAction={$_("dialogRevisionsDialog.upgrade.adminCta")}
-        on:click={() => triggerPremiumUpgradeFlow(user?.organization)}
-      />
-    {:else}
-      <UpgradePrompt
-        message={$_("dialogRevisionsDialog.upgrade.message") +
-          " " +
-          $_("dialogRevisionsDialog.upgrade.nonAdminCta")}
-      />
-    {/if}
+    </div>
   </Loader>
 {:catch}
   <Loader active={false}>
-    <ErrorMessage message={$_("dialogRevisionsDialog.error")}
-      ><Button caution action on:click={retryGetMe}>Retry</Button></ErrorMessage
-    >
+    <div class="mcontent">
+      <ErrorMessage message={$_("dialogRevisionsDialog.error")}
+        ><Button caution action on:click={retryGetMe}>Retry</Button
+        ></ErrorMessage
+      >
+    </div>
   </Loader>
 {/await}