mstar/linstrom
1
0
Fork 0
Code Issues 27 Pull requests Projects Releases Packages 1 Wiki Activity Actions

JS frontend stuff

Browse source 
Move old ember frontend to properly named folder
Add vue based new frontend
This commit is contained in:
Melody Becker 2025-07-07 21:48:39 +02:00
parent 8947d97825
commit 88398334fe
Signed by: mstar
SSH key fingerprint: SHA256:vkXfS9FG2pVNVfvDrzd1VW9n8VJzqqdKQGljxxX8uK8
254 changed files with 837 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend-old-ember/app/styles/app.css Normal file
View file

@ -0,0 +1,16 @@
/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
/* Note: CSS is fucking stupid. It applies styles not in the order classes are set on an element,
* but in the order they appear in the css files */
/* @import url("debug.css"); */
@import url("fonts.css");
@import url("colors.css");
@import url("util.css");
@import url("util/stringArray.css");
@import url("util/mailEntry.css");
@import url("svgs.css");
@import url("notes.css");
@import url("timeline.css");
@import url("auth.css");
@import url("auth/registerForm.css");

0
frontend-old-ember/app/styles/auth.css Normal file
View file

77
frontend-old-ember/app/styles/auth/registerForm.css Normal file
View file

@ -0,0 +1,77 @@
.registration-form {
background: var(--secondary);
display: flex;
flex-direction: column;
align-items: center;
width: fit-content;
}
.registration-form-name-mail-wrapper {
width: fit-content;
display: flex;
flex-direction: column;
align-items: end;
}
.registration-form-username {
width: max-content;
}
.registration-form-displayname-wrapper {
display: flex;
}
.registration-form-mail-wrapper {
display: flex;
width: max-content;
flex-direction: row;
}
.registration-form-mail-input {
width: max-content;
/* display: flex; */
/* flex-grow: 1; */
}
.registration-form-description-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.registration-form-gender-wrapper {
}
.registration-form-gender-info {
}
.register-form-being-wrapper {
margin: 1em;
}
.registration-form-being-info {
}
.register-form-default-post-mode-wrapper {
margin-bottom: 1em;
}
.registration-form-default-post-mode-info {
}
.register-form-follow-approval-wrapper {
margin-bottom: 0.5em;
}
.register-form-indexable-wrapper {
margin-bottom: 0.5em;
}
.register-form-custom-fields-wrapper {
flex-grow: 1;
width: 80%;
margin-bottom: 1em;
}

152
frontend-old-ember/app/styles/colors-precise.css Normal file
View file

@ -0,0 +1,152 @@
@media (prefers-color-scheme: light) {
:root {
--text: hsl(273deg 35% 6%);
--background: hsl(267deg 36% 95%);
--primary: hsl(273deg 37% 27%);
--secondary: hsl(307deg 37% 68%);
--accent: hsl(318deg 37% 42%);
}
}
@media (prefers-color-scheme: dark) {
:root {
--text: hsl(273deg 35% 94%);
--background: hsl(267deg 36% 5%);
--primary: hsl(273deg 37% 73%);
--secondary: hsl(307deg 37% 32%);
--accent: hsl(318deg 37% 58%);
}
}
@media (prefers-color-scheme: light) {
:root {
--text-5: hsl(273deg 36% 95%);
--text-10: hsl(272deg 33% 90%);
--text-15: hsl(272deg 33% 85%);
--text-20: hsl(273deg 35% 80%);
--text-25: hsl(273deg 35% 75%);
--text-30: hsl(273deg 35% 70%);
--text-35: hsl(273deg 35% 65%);
--text-40: hsl(273deg 35% 60%);
--text-45: hsl(273deg 35% 55%);
--text-50: hsl(273deg 35% 50%);
--text-55: hsl(273deg 35% 45%);
--text-60: hsl(273deg 35% 40%);
--text-65: hsl(273deg 35% 35%);
--text-70: hsl(273deg 35% 30%);
--text-75: hsl(273deg 35% 25%);
--text-80: hsl(273deg 35% 20%);
--text-85: hsl(273deg 35% 20%);
--text-90: hsl(272deg 33% 10%);
--text-95: hsl(273deg 36% 5%);
--background-5: hsl(267deg 36% 95%);
--background-10: hsl(268deg 37% 90%);
--background-15: hsl(267deg 36% 85%);
--background-20: hsl(267deg 35% 80%);
--background-25: hsl(267deg 35% 75%);
--background-30: hsl(267deg 36% 70%);
--background-35: hst(267, 36%, 65%);
--background-40: hsl(267deg 36% 60%);
--background-45: hsl(267deg 36% 55%);
--background-50: hsl(267deg 36% 50%);
--background-60: hsl(267deg 36% 40%);
--background-70: hsl(267deg 36% 30%);
--background-80: hsl(267deg 35% 20%);
--background-85: hsl(267deg 36% 15%);
--background-90: hsl(268deg 37% 10%);
--background-95: hsl(267deg 36% 5%);
--primary-5: hsl(273deg 36% 95%);
--primary-10: hsl(272deg 37% 90%);
--primary-20: hsl(273deg 37% 80%);
--primary-30: hsl(273deg 37% 70%);
--primary-40: hsl(273deg 37% 60%);
--primary-50: hsl(273deg 37% 50%);
--primary-60: hsl(273deg 37% 40%);
--primary-70: hsl(273deg 37% 30%);
--primary-80: hsl(273deg 37% 20%);
--primary-90: hsl(272deg 37% 10%);
--primary-95: hsl(273deg 36% 5%);
--secondary-5: hsl(307deg 36% 95%);
--secondary-10: hsl(306deg 37% 90%);
--secondary-20: hsl(308deg 37% 80%);
--secondary-30: hsl(307deg 37% 70%);
--secondary-40: hsl(307deg 37% 60%);
--secondary-50: hsl(307deg 37% 50%);
--secondary-60: hsl(307deg 37% 40%);
--secondary-70: hsl(307deg 37% 30%);
--secondary-80: hsl(308deg 37% 20%);
--secondary-90: hsl(306deg 37% 10%);
--secondary-95: hsl(307deg 36% 5%);
--accent-5: hsl(320deg 36% 95%);
--accent-10: hsl(319deg 37% 90%);
--accent-20: hsl(317deg 37% 80%);
--accent-30: hsl(318deg 37% 70%);
--accent-40: hsl(318deg 37% 60%);
--accent-50: hsl(318deg 37% 50%);
--accent-60: hsl(318deg 37% 40%);
--accent-70: hsl(318deg 37% 30%);
--accent-80: hsl(317deg 37% 20%);
--accent-90: hsl(319deg 37% 10%);
--accent-95: hsl(313deg 36% 5%);
}
}
@media (prefers-color-scheme: dark) {
:root {
--text-50: hsl(273deg 36% 5%);
--text-100: hsl(272deg 33% 10%);
--text-200: hsl(273deg 35% 20%);
--text-300: hsl(273deg 35% 30%);
--text-400: hsl(273deg 35% 40%);
--text-500: hsl(273deg 35% 50%);
--text-600: hsl(273deg 35% 60%);
--text-700: hsl(273deg 35% 70%);
--text-800: hsl(273deg 35% 80%);
--text-900: hsl(272deg 33% 90%);
--text-950: hsl(273deg 36% 95%);
--background-50: hsl(267deg 36% 5%);
--background-100: hsl(268deg 37% 10%);
--background-200: hsl(267deg 35% 20%);
--background-300: hsl(267deg 36% 30%);
--background-400: hsl(267deg 36% 40%);
--background-500: hsl(267deg 36% 50%);
--background-600: hsl(267deg 36% 60%);
--background-700: hsl(267deg 36% 70%);
--background-800: hsl(267deg 35% 80%);
--background-900: hsl(268deg 37% 90%);
--background-950: hsl(267deg 36% 95%);
--primary-50: hsl(273deg 36% 5%);
--primary-100: hsl(272deg 37% 10%);
--primary-200: hsl(273deg 37% 20%);
--primary-300: hsl(273deg 37% 30%);
--primary-400: hsl(273deg 37% 40%);
--primary-500: hsl(273deg 37% 50%);
--primary-600: hsl(273deg 37% 60%);
--primary-700: hsl(273deg 37% 70%);
--primary-800: hsl(273deg 37% 80%);
--primary-900: hsl(272deg 37% 90%);
--primary-950: hsl(273deg 36% 95%);
--secondary-50: hsl(307deg 36% 5%);
--secondary-100: hsl(306deg 37% 10%);
--secondary-200: hsl(308deg 37% 20%);
--secondary-300: hsl(307deg 37% 30%);
--secondary-400: hsl(307deg 37% 40%);
--secondary-500: hsl(307deg 37% 50%);
--secondary-600: hsl(307deg 37% 60%);
--secondary-700: hsl(307deg 37% 70%);
--secondary-800: hsl(308deg 37% 80%);
--secondary-900: hsl(306deg 37% 90%);
--secondary-950: hsl(307deg 36% 95%);
--accent-50: hsl(313deg 36% 5%);
--accent-100: hsl(319deg 37% 10%);
--accent-200: hsl(317deg 37% 20%);
--accent-300: hsl(318deg 37% 30%);
--accent-400: hsl(318deg 37% 40%);
--accent-500: hsl(318deg 37% 50%);
--accent-600: hsl(318deg 37% 60%);
--accent-700: hsl(318deg 37% 70%);
--accent-800: hsl(317deg 37% 80%);
--accent-900: hsl(319deg 37% 90%);
--accent-950: hsl(320deg 36% 95%);
}
}

152
frontend-old-ember/app/styles/colors.css Normal file
View file

@ -0,0 +1,152 @@
@media (prefers-color-scheme: light) {
:root {
--text: hsl(273deg 35% 6%);
--background: hsl(267deg 36% 95%);
--primary: hsl(273deg 37% 27%);
--secondary: hsl(307deg 37% 68%);
--accent: hsl(318deg 37% 42%);
}
}
@media (prefers-color-scheme: dark) {
:root {
--text: hsl(273deg 35% 94%);
--background: hsl(267deg 36% 5%);
--primary: hsl(273deg 37% 73%);
--secondary: hsl(307deg 37% 32%);
--accent: hsl(318deg 37% 58%);
}
}
@media (prefers-color-scheme: light) {
:root {
--text-50: hsl(273deg 36% 95%);
--text-100: hsl(272deg 33% 90%);
--text-200: hsl(273deg 35% 80%);
--text-300: hsl(273deg 35% 70%);
--text-400: hsl(273deg 35% 60%);
--text-500: hsl(273deg 35% 50%);
--text-600: hsl(273deg 35% 40%);
--text-700: hsl(273deg 35% 30%);
--text-800: hsl(273deg 35% 20%);
--text-900: hsl(272deg 33% 10%);
--text-950: hsl(273deg 36% 5%);
--background-50: hsl(267deg 36% 95%);
--background-100: hsl(268deg 37% 90%);
--background-200: hsl(267deg 35% 80%);
--background-300: hsl(267deg 36% 70%);
--background-400: hsl(267deg 36% 60%);
--background-500: hsl(267deg 36% 50%);
--background-600: hsl(267deg 36% 40%);
--background-700: hsl(267deg 36% 30%);
--background-800: hsl(267deg 35% 20%);
--background-900: hsl(268deg 37% 10%);
--background-950: hsl(267deg 36% 5%);
--primary-50: hsl(273deg 36% 95%);
--primary-100: hsl(272deg 37% 90%);
--primary-200: hsl(273deg 37% 80%);
--primary-300: hsl(273deg 37% 70%);
--primary-400: hsl(273deg 37% 60%);
--primary-500: hsl(273deg 37% 50%);
--primary-600: hsl(273deg 37% 40%);
--primary-700: hsl(273deg 37% 30%);
--primary-800: hsl(273deg 37% 20%);
--primary-900: hsl(272deg 37% 10%);
--primary-950: hsl(273deg 36% 5%);
--secondary-50: hsl(307deg 36% 95%);
--secondary-100: hsl(306deg 37% 90%);
--secondary-200: hsl(308deg 37% 80%);
--secondary-300: hsl(307deg 37% 70%);
--secondary-400: hsl(307deg 37% 60%);
--secondary-500: hsl(307deg 37% 50%);
--secondary-600: hsl(307deg 37% 40%);
--secondary-700: hsl(307deg 37% 30%);
--secondary-800: hsl(308deg 37% 20%);
--secondary-900: hsl(306deg 37% 10%);
--secondary-950: hsl(307deg 36% 5%);
--accent-50: hsl(320deg 36% 95%);
--accent-100: hsl(319deg 37% 90%);
--accent-200: hsl(317deg 37% 80%);
--accent-300: hsl(318deg 37% 70%);
--accent-400: hsl(318deg 37% 60%);
--accent-500: hsl(318deg 37% 50%);
--accent-600: hsl(318deg 37% 40%);
--accent-700: hsl(318deg 37% 30%);
--accent-800: hsl(317deg 37% 20%);
--accent-900: hsl(319deg 37% 10%);
--accent-950: hsl(313deg 36% 5%);
}
}
@media (prefers-color-scheme: dark) {
:root {
--text-50: hsl(273deg 36% 5%);
--text-100: hsl(272deg 33% 10%);
--text-200: hsl(273deg 35% 20%);
--text-300: hsl(273deg 35% 30%);
--text-400: hsl(273deg 35% 40%);
--text-500: hsl(273deg 35% 50%);
--text-600: hsl(273deg 35% 60%);
--text-700: hsl(273deg 35% 70%);
--text-800: hsl(273deg 35% 80%);
--text-900: hsl(272deg 33% 90%);
--text-950: hsl(273deg 36% 95%);
--background-50: hsl(267deg 36% 5%);
--background-100: hsl(268deg 37% 10%);
--background-200: hsl(267deg 35% 20%);
--background-300: hsl(267deg 36% 30%);
--background-400: hsl(267deg 36% 40%);
--background-500: hsl(267deg 36% 50%);
--background-600: hsl(267deg 36% 60%);
--background-700: hsl(267deg 36% 70%);
--background-800: hsl(267deg 35% 80%);
--background-900: hsl(268deg 37% 90%);
--background-950: hsl(267deg 36% 95%);
--primary-50: hsl(273deg 36% 5%);
--primary-100: hsl(272deg 37% 10%);
--primary-200: hsl(273deg 37% 20%);
--primary-300: hsl(273deg 37% 30%);
--primary-400: hsl(273deg 37% 40%);
--primary-500: hsl(273deg 37% 50%);
--primary-600: hsl(273deg 37% 60%);
--primary-700: hsl(273deg 37% 70%);
--primary-800: hsl(273deg 37% 80%);
--primary-900: hsl(272deg 37% 90%);
--primary-950: hsl(273deg 36% 95%);
--secondary-50: hsl(307deg 36% 5%);
--secondary-100: hsl(306deg 37% 10%);
--secondary-200: hsl(308deg 37% 20%);
--secondary-300: hsl(307deg 37% 30%);
--secondary-400: hsl(307deg 37% 40%);
--secondary-500: hsl(307deg 37% 50%);
--secondary-600: hsl(307deg 37% 60%);
--secondary-700: hsl(307deg 37% 70%);
--secondary-800: hsl(308deg 37% 80%);
--secondary-900: hsl(306deg 37% 90%);
--secondary-950: hsl(307deg 36% 95%);
--accent-50: hsl(313deg 36% 5%);
--accent-100: hsl(319deg 37% 10%);
--accent-200: hsl(317deg 37% 20%);
--accent-300: hsl(318deg 37% 30%);
--accent-400: hsl(318deg 37% 40%);
--accent-500: hsl(318deg 37% 50%);
--accent-600: hsl(318deg 37% 60%);
--accent-700: hsl(318deg 37% 70%);
--accent-800: hsl(317deg 37% 80%);
--accent-900: hsl(319deg 37% 90%);
--accent-950: hsl(320deg 36% 95%);
}
}
:root {
background-color: var(--background);
color: var(--text);
}

3
frontend-old-ember/app/styles/debug.css Normal file
View file

@ -0,0 +1,3 @@
* {
border: red 1px dashed;
}

83
frontend-old-ember/app/styles/fonts.css Normal file
View file

@ -0,0 +1,83 @@
/* Copied from: https://github.com/Vjecni/OpenDyslexic-Font/blob/main/opendyslexic.css */
@font-face {
font-family: OpenDyslexic;
src: url("/assets/fonts/OpenDyslexic-Regular.eot");
src:
url("/assets/fonts/OpenDyslexic-Regular.eot?#iefix")
format("embedded-opentype"),
url("/assets/fonts/OpenDyslexic-Regular.woff2") format("woff2"),
url("/assets/fonts/OpenDyslexic-Regular.woff") format("woff"),
url("/assets/fonts/OpenDyslexic-Regular.otf") format("opentype");
font-weight: normal;
font-style: normal;
font-size: 0.8em;
}
@font-face {
font-family: OpenDyslexic;
src: url("/assets/fonts/OpenDyslexic-Bold.eot");
src:
url("/assets/fonts/OpenDyslexic-Bold.eot?#iefix")
format("embedded-opentype"),
url("/assets/fonts/OpenDyslexic-Bold.woff2") format("woff2"),
url("/assets/fonts/OpenDyslexic-Bold.woff") format("woff"),
url("/assets/fonts/OpenDyslexic-Bold.otf") format("opentype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: OpenDyslexic;
src: url("/assets/fonts/OpenDyslexic-Italic.eot");
src:
url("/assets/fonts/OpenDyslexic-Italic.eot?#iefix")
format("embedded-opentype"),
url("/assets/fonts/OpenDyslexic-Italic.woff2") format("woff2"),
url("/assets/fonts/OpenDyslexic-Italic.woff") format("woff"),
url("/assets/fonts/OpenDyslexic-Italic.otf") format("opentype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: OpenDyslexic;
src: url("/assets/fonts/OpenDyslexic-BoldItalic.eot");
src:
url("/assets/fonts/OpenDyslexic-BoldItalic.eot?#iefix")
format("embedded-opentype"),
url("/assets/fonts/OpenDyslexic-BoldItalic.woff2") format("woff2"),
url("/assets/fonts/OpenDyslexic-BoldItalic.woff") format("woff"),
url("/assets/fonts/OpenDyslexic-BoldItalic.otf") format("opentype");
font-weight: bold;
font-style: italic;
}
body {
font-family: OpenDyslexic, sans-serif;
}
/* Apply OpenDyslexic Bold font to h1, h2, and h3 */
h1,
h2,
h3 {
font-family: OpenDyslexic, sans-serif;
font-weight: bold;
}
/* Apply OpenDyslexic Normal weight to p, span, a, label, and li */
p,
span,
a,
label,
li {
font-family: OpenDyslexic, sans-serif;
font-weight: normal;
}
/* Apply OpenDyslexic Light weight to input, textarea, and button */
input,
textarea,
button {
font-family: OpenDyslexic, sans-serif;
font-weight: 300; /* Light weight */
}

136
frontend-old-ember/app/styles/notes.css Normal file
View file

@ -0,0 +1,136 @@
.note {
display: flex;
flex-direction: column;
/* width: fit-content; */
height: fit-content;
/* align-items: center; */
/* max-width: 50em; */
padding: 0.5em;
background-color: var(--background-100);
color: var(--text);
border-radius: 1em;
}
.note-user-header {
display: flex;
flex-direction: row;
border: 2px solid black;
width: fit-content;
padding-right: 0.5em;
}
.note-user-pfp {
width: 3em;
height: 3em;
padding-bottom: 0.1em;
text-align: center;
}
.note-user-name-and-handle {
display: flex;
flex-direction: column;
/* align-items: center; */
padding: 0.2em;
}
.note-user-displayname {
padding-top: 0.1em;
margin: 0.1em;
}
.note-user-handle {
font-size: 0.8em;
color: #555;
margin: 0;
}
.note-timestamps-container {
padding-top: 0.2em;
padding-bottom: 0.2em;
}
.note-timestamp {
font-size: 0.8em;
margin: -0.1em;
color: var(--text-700);
}
.note-content {
display: flex;
flex-direction: column;
width: fit-content;
align-items: center;
}
.note-content-text {
margin-top: -0.08em;
margin-bottom: -0.08em;
padding: 0.2em;
}
.note-content-toggle {
margin-top: 0.3em;
margin-bottom: 0.3em;
cursor: pointer;
background-color: var(--secondary-300);
padding: 0.1em 0.3em;
border-radius: 8px;
border: 1px solid #aaa;
}
.note-content-toggle:hover {
background-color: var(--secondary-200);
}
.note-interactions-wrapper {
display: flex;
flex-direction: row;
align-items: center;
border-top: 1px solid var(--text-300);
padding-top: 0.5em;
}
.note-interactions-interaction-button {
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid #aaa;
padding-left: 0.6em;
/* padding-right: 0.6em; */
border-radius: 8px;
margin-right: 0.7em;
cursor: pointer;
}
.note-interactions-interaction-icon {
height: 2.5ex;
padding-right: 0.2em;
width: 100%;
}
.note-interactions-interaction-counter {
font-weight: bold;
padding: 0.3em;
margin-top: -0.01em;
margin-bottom: -0.01em;
margin-right: 0.2em;
}
.note-interactions-interactions-button-like {
display: flex;
flex-direction: row;
align-items: center;
}
.note-interactions-interactions-button-custom {
align-items: center;
border-left: 1px black solid;
padding-top: 0.5em;
padding-left: 0.4em;
padding-right: 0.4em;
}

4
frontend-old-ember/app/styles/svgs.css Normal file
View file

@ -0,0 +1,4 @@
.svg-black-white {
fill: var(--text);
stroke: var(--text);
}

11
frontend-old-ember/app/styles/timeline.css Normal file
View file

@ -0,0 +1,11 @@
.timeline {
max-width: 50%;
width: fit-content;
height: 100%;
scroll-behavior: smooth;
overflow-y: scroll;
}
.timeline-separator {
color: var(--text-400);
}

21
frontend-old-ember/app/styles/util.css Normal file
View file

@ -0,0 +1,21 @@
.hide {
display: none;
}
/* Copied from: https://stackoverflow.com/a/4407335 */
.noselect {
-webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
.separator-horizontal {
width: 100%;
border: 1px solid black;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
.filling-spacer {
flex-grow: 1;
}

43
frontend-old-ember/app/styles/util/mailEntry.css Normal file
View file

@ -0,0 +1,43 @@
.mail-entry {
display: flex;
flex-direction: row;
}
.mail-input {
outline: 0;
margin-top: 1em;
margin-bottom: 1em;
}
.mail-input-ok {
border: 1px solid green;
box-shadow: 0 0 5px green;
}
.mail-input-error {
border: 1px solid red;
box-shadow: 0 0 5px red;
}
.mail-status {
/* margin: 0; */
margin-top: 0.75em;
margin-left: 0.4em;
}
.mail-ok {
color: green;
/* margin-top: -0.25lh; */
/* margin-bottom: -0.28lh; */
font-size: 0.9lh;
margin: 0;
margin-left: 0.2em;
}
.mail-error {
color: red;
margin-bottom: 0;
margin-left: 0.6em;
}

4
frontend-old-ember/app/styles/util/stringArray.css Normal file
View file

@ -0,0 +1,4 @@
.string-array-element-wrapper {
display: flex;
flex-direction: row;
}