Redo version page (#777)

* Redo version page

* More work on editing page

* Make saving work

* Finish version editing

* Version creation (base)

* Add creation buttons

* Add file uploader to versions page

* Add version file parsing

* Finish PR

* Fix version page responsiveness and use more consistent card design

* Whoops that wasn't supposed to be there

* Fixes + allow whole page dragging

* Re-add lost merge data

* Remove debug line

* Move back to list btm

Co-authored-by: Prospector <prospectordev@gmail.com>

assets/images/utils/file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>

assets/images/utils/hash.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>

assets/styles/components.scss

@@ -381,25 +381,25 @@ tr.button-transparent {
   background-color: transparent;
   border-radius: var(--size-rounded-sm);
 
-    &:focus-visible:not(&:disabled) > *,
-    &:hover:not(&:disabled) > * {
-      cursor: pointer;
-      filter: brightness(0.85);
-      background-color: var(--color-raised-bg);
-    }
+  &:focus-visible:not(&:disabled) > *,
+  &:hover:not(&:disabled) > * {
+    cursor: pointer;
+    filter: brightness(0.85);
+    background-color: var(--color-raised-bg);
+  }
 
-    &:active:not(&:disabled) > * {
-      filter: brightness(0.8);
-      background-color: var(--color-raised-bg);
-    }
+  &:active:not(&:disabled) > * {
+    filter: brightness(0.8);
+    background-color: var(--color-raised-bg);
+  }
 
-    &:disabled > *,
-    &[disabled] > * {
-      cursor: not-allowed;
-      filter: grayscale(50%);
-      opacity: 0.5;
-      box-shadow: none;
-    }
+  &:disabled > *,
+  &[disabled] > * {
+    cursor: not-allowed;
+    filter: grayscale(50%);
+    opacity: 0.5;
+    box-shadow: none;
+  }
 }
 
 .button-within {
@@ -886,6 +886,7 @@ textarea.known-error {
 }
 
 .known-errors {
+  min-height: 0;
   color: var(--color-special-red);
 
   ul {
@@ -999,6 +1000,7 @@ h1 {
         color: var(--color-special-red);
       }
     }
+
     .label__description {
       display: block;
       margin-block-end: var(--spacing-card-sm);
@@ -1067,11 +1069,14 @@ h1 {
     width: 15rem;
   }
 
-  >,
-  .extend-styling> {
-    input + *,
-    .input-group + * {
-      margin-block-start: var(--spacing-card-md);
+  > :where(input + *, .input-group + *) {
+    margin-block-start: var(--spacing-card-md);
+  }
+
+  .input-group {
+    .multiselect, input {
+      width: auto;
+      flex-basis: 0;
     }
   }
 
@@ -1146,6 +1151,13 @@ h1 {
   margin-right: 0;
 }
 
+.full-width-inputs {
+  .multiselect, input, .iconified-input {
+    width: 100%;
+    flex-basis: 100%;
+  }
+}
+
 input,
 button {
   &:disabled {
@@ -1356,3 +1368,10 @@ button {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 }
+
+.sr-only {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}

assets/styles/global.scss

@@ -72,7 +72,7 @@ html {
   --color-banner-side: hsl(357, 78%, 40%);
 
   --color-block-quote: var(--color-tooltip-bg);
-  --color-header-underline: var(--color-tooltip-text);
+  --color-header-underline: var(--color-divider-dark);
   --color-hr: var(--color-text);
 
   --color-table-border: #dfe2e5;
@@ -156,7 +156,7 @@ html {
   --color-banner-side: hsl(357, 78%, 40%);
 
   --color-block-quote: var(--color-code-bg);
-  --color-header-underline: var(--color-tooltip-text);
+  --color-header-underline: var(--color-divider-dark);
   --color-hr: var(--color-text);
 
   --color-table-border: #4f5864;

assets/styles/layout.scss

@@ -38,9 +38,26 @@
 }
 
 .normal-page {
-  display: flex;
-  flex-direction: column;
-  margin: 0 0.75rem;
+  display: grid;
+  padding: 0 0.75rem;
+
+  grid-template:
+    'sidebar'
+    'content'
+    'info'
+    / 100%;
+
+  .normal-page__sidebar {
+    grid-area: sidebar;
+  }
+
+  .normal-page__info {
+    grid-area: info;
+  }
+
+  .normal-page__content {
+    grid-area: content;
+  }
 }
 
 .site-header {
@@ -49,13 +66,22 @@
 
 @media (min-width: 1024px) {
   .normal-page {
-    flex-direction: row;
     margin: 0 auto;
     max-width: 80rem;
     column-gap: 0.75rem;
 
+    grid-template:
+      'sidebar content' auto
+      'info content' auto
+      'dummy content' 1fr
+      / 20rem 1fr;
+
     &.alt-layout {
-      flex-direction: row-reverse;
+      grid-template:
+      'content sidebar' auto
+      'content info' auto
+      'content dummy' 1fr
+      / 1fr 20rem;
     }
   }
 
@@ -65,11 +91,12 @@
   }
 
   .normal-page__content {
-    width: 60rem;
-    max-width: 60rem;
-  }
-
-  .site-header {
-    margin: 0 auto;
+    max-width: calc(60rem - .75rem);
+  }
+}
+
+@media (min-width: 80rem) {
+  .normal-page__content {
+    width: calc(60rem - .75rem);
   }
 }