Merge remote-tracking branch 'philo/1_2_stable'

Author: Meow

.dialyzer_ignore.exs

@@ -1,5 +1,8 @@
 # VSCode supports `jsonc` for all of its JSON files
 .vscode/*.json linguist-language=jsonc
 
+# tsconfig is actually in `jsonc` format
+.tsconfig*.json linguist-language=jsonc
+
 # We use PostCSS for CSS files
 *.css linguist-language=PostCSS

.gitattributes

@@ -27,13 +27,14 @@
 @import "elements/blocks";
 @import "elements/burger";
 @import "elements/button";
+@import "elements/checkbox";
 @import "elements/dropdown";
 @import "elements/forms";
 @import "elements/header";
 @import "elements/layout";
 @import "elements/media";
-@import "elements/shame";
 @import "elements/text";
+@import "elements/toggle";
 
 /* Style elements specific to certain pages. */
 @import "views/adverts";
@@ -58,4 +59,5 @@
 @import "views/search";
 @import "views/staff";
 @import "views/stats";
+@import "views/tag_change";
 @import "views/tags";

assets/css/application.css

@@ -18,12 +18,26 @@ $image-large-size: 512px;
   --limited-layout-width: $limited-layout-width;
   --min-desktop-thumb-width: $min-desktop-thumb-width;
   --border: 1px solid var(--border-color);
+  --border-radius-toggle: 0.3rem;
+  --border-radius-inner-toggle: 0.2rem;
+  --border-radius-checkbox: 0.3rem;
   --media-border: 1px solid var(--media-box-color);
   --media-over-border: 1px dotted var(--vote-down-color);
+  --media-box-header-height: 22px;
+  --media-container-width: 225px;
+  --media-tiny-container-width: 50px;
+  --media-small-container-width: 150px;
+  --media-medium-container-width: 250px;
+  --media-large-container-width: 500px;
+  --media-full-container-width: 100%;
+  --media-featured-width: 326px;
+  --media-small-header-height: 1rem;
   --font-family-base: $font-family-base;
   --font-family-monospace: $font-family-monospace;
-  --padding-small: 0.5em;
-  --padding-normal: 1em;
+  --padding-tiny: 0.3rem;
+  --padding-small: 0.4rem;
+  --padding-normal: 0.75rem;
+  --padding-large: 1.5rem;
   --centered-margin: 24px;
   --normal-margin: 12px;
   --image-tiny-size: $image-tiny-size;
@@ -40,6 +54,12 @@ $image-large-size: 512px;
   --block-header-height: 32px;
   --block-header-sub-height: 26px;
   --block-spacing: 6px;
-  --media-box-header-height: 22px;
   --reduced-communication-avatar-size: 50px;
+  --checkbox-size: 1.25rem;
+  --checkbox-border-width: 1px;
+  --toggle-width: 3rem;
+  --toggle-height: 1.5rem;
+  --toggle-border-width: 2px;
+  --transition-animation-duration: 0.15s;
+  --transition-long-animation-duration: 0.3s;
 }

assets/css/common/measurements.css

@@ -75,6 +75,15 @@ p,
 
 .communication__body__text .paragraph {
   margin-bottom: var(--padding-normal);
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+@media (max-width: $min-desktop-width) {
+  .communication__body__text pre {
+    /* 32px = page padding(4px * 2) + pre padding(10px * 2) + borders(1px * 4) */
+    max-width: calc(100vw - var(--block-spacing) * 2 - 32px);
+  }
 }
 
 img {
@@ -97,6 +106,7 @@ pre {
   border: 1px solid var(--meta-border-color);
   max-width: 100%;
   overflow: auto hidden;
+  overflow-x: auto;
 }
 
 a,
@@ -125,6 +135,12 @@ table,
   width: 100%;
   border-collapse: collapse;
   border: var(--border);
+  word-wrap: break-word;
+}
+
+.communication__body__text table,
+.communication__body__text .table {
+  word-break: break-all;
 }
 
 table th,
@@ -148,6 +164,12 @@ table > tbody,
   border: var(--border);
 }
 
+@media (max-width: $min-desktop-width) {
+  .communication__body__text table {
+    overflow-x: auto;
+  }
+}
+
 /* I know this looks odd, but first one expands to
  .table > ...
  while the other one does the table verbatim */

assets/css/elements/base.css

@@ -87,10 +87,6 @@
   background: 0;
 }
 
-.block__tagbox {
-  padding-top: calc(var(--block-spacing) + 5px);
-}
-
 .block__header--light,
 .block__header--js-tabbed {
   background: var(--block-header-light-color);

assets/css/elements/blocks.css

@@ -0,0 +1,38 @@
+input[type="checkbox"].fancy-checkbox {
+  appearance: none;
+}
+
+.fancy-checkbox {
+  display: inline-block;
+  align-self: center;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  background: var(--input-color);
+  border: var(--checkbox-border-width) solid var(--input-border);
+  border-radius: var(--border-radius-checkbox);
+  transition:
+    background var(--transition-animation-duration) ease,
+    border-color var(--transition-animation-duration) ease;
+}
+
+.fancy-checkbox:checked,
+.fancy-checkbox:hover {
+  cursor: pointer;
+  background: var(--input-color-active);
+  border-color: var(--input-border-active);
+  transition:
+    background var(--transition-animation-duration) ease,
+    border-color var(--transition-animation-duration) ease;
+}
+
+.fancy-checkbox:checked:after {
+  content: "";
+  color: var(--foreground-color);
+  font-family: var(--fa-style-family, "Font Awesome 6 Free");
+  font-weight: var(--fa-style, 900);
+  text-align: center;
+  line-height: calc(var(--checkbox-size) - var(--checkbox-border-width) * 2);
+  display: block;
+  position: relative;
+  left: 0;
+}

assets/css/elements/checkbox.css

@@ -212,6 +212,12 @@ nav {
 
   .footercol {
     margin-left: 15px;
+    line-height: 1.35;
+  }
+
+  .footercol a {
+    margin-left: 1rem;
+    font-size: 14px;
   }
 }
 
@@ -252,6 +258,14 @@ nav {
   justify-content: space-between;
 }
 
+.flex--gap-small {
+  gap: var(--padding-small);
+}
+
+.flex--gap-normal {
+  gap: var(--padding-normal);
+}
+
 .grid {
   display: grid;
 }

assets/css/elements/layout.css

@@ -1,10 +1,57 @@
+.media-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--media-container-width), 1fr));
+  grid-auto-rows: 1fr;
+  grid-gap: var(--padding-small);
+}
+
+/* Ensure the shape of the image list entries is square
+   plus the media header height. */
+
+.media-list:before {
+  content: "";
+  width: 0;
+  padding-bottom: calc(100% + var(--media-box-header-height));
+  grid-row: 1 / 1;
+  grid-column: 1 / 1;
+}
+
+@media (max-width: $max-limited-desktop-width) {
+  .media-list {
+    grid-template-columns: repeat(auto-fill, minmax(var(--media-small-container-width), 1fr));
+  }
+}
+
+.media-list--small {
+  grid-template-columns: repeat(auto-fill, minmax(var(--media-small-container-width), 1fr));
+}
+
+.media-list--small-fixed-size {
+  grid-template-columns: repeat(auto-fill, var(--media-small-container-width));
+}
+
+.media-list--small-fixed-size.media-list:before {
+  padding-bottom: 0 !important;
+}
+
+.media-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  grid-gap: var(--padding-small);
+}
+
 .media-box {
-  display: inline-flex;
-  flex-flow: column;
-  position: relative;
   overflow: hidden;
   border: var(--media-border);
-  margin: 0 6px 6px 0;
+}
+
+/* Shift the image list by 1 element introduced due to
+   the .media-list:before rule */
+
+.media-box:first-child {
+  grid-row: 1 / 1;
+  grid-column: 1 / 1;
 }
 
 .media-box.over {
@@ -47,7 +94,7 @@ a.media-box__header--link:hover {
 }
 
 .media-box__header--small {
-  width: 150px;
+  width: var(--media-small-container-width);
   font-size: 11px;
 }
 
@@ -63,38 +110,59 @@ a.media-box__header--link:hover {
   background-color: var(--success-color);
 }
 
-/* TODO: properly fix this */
-.media-box__content .image-container {
+.media-box__content {
   width: 100%;
-  height: 100%;
+  padding-top: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.media-box__content .image-container {
+  position: absolute;
+  inset: 0;
 }
 
 .media-box__content--featured {
-  width: 326px;
-  height: 326px;
+  width: var(--media-featured-width);
+  height: auto;
+}
+
+.media-box__content--featured .image-container {
+  max-height: var(--media-featured-width);
 }
 
 .media-box__content--large {
-  width: 254px;
-  height: 254px;
+  max-height: var(--media-medium-container-width);
 }
 
 .media-box__content--small {
-  width: 150px;
-  height: 150px;
+  max-height: var(--media-small-container-width);
+}
+
+.media--featured {
+  display: flex;
+  justify-content: center;
+}
+
+.media--featured .media-box {
+  max-width: var(--media-featured-width);
+  max-height: calc(var(--media-featured-width) + var(--media-box-header-height));
+  margin-bottom: var(--padding-small);
 }
 
 .media-box__overlay {
   display: block;
   position: absolute;
   z-index: 4;
-  width: 100%;
+  min-width: 95%;
   text-align: left;
   font-weight: bold;
   word-wrap: break-word;
+  line-height: var(--media-box-header-height);
+  pointer-events: none;
+  top: 0;
   color: var(--image-overlay-color);
   background: var(--image-overlay-background-color);
-  pointer-events: none;
 }
 
 .thumb_small .media-box__overlay {