rework styles with scss
This commit is contained in:
parent
fa9dbe0eda
commit
4334596d4b
GPG key ID:
9FBC6FFD6D2DBF17
63 changed files with 1064 additions and 982 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
||||||
/data
|
/data
|
||||||
/src/web/lang/en_CAT
|
/src/web/lang/en_CAT
|
||||||
|
/src/public/css/*
|
||||||
|
|
|
||||||
22
Makefile
Normal file
22
Makefile
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
|
||||||
|
MIXINS = $(shell find src/scss -name "_*.scss")
|
||||||
|
SCSS = $(shell find src/scss -name "*.scss" -not -name "_*")
|
||||||
|
CSS = $(patsubst src/scss/%.scss,src/public/css/%.css,$(SCSS))
|
||||||
|
|
||||||
|
.PHONY: all clean css
|
||||||
|
|
||||||
|
all: clean css
|
||||||
|
|
||||||
|
clean:
|
||||||
|
@# clean scss
|
||||||
|
@printf "\033[31m RM \033[0m%s\n" src/public/css
|
||||||
|
@rm -fr src/public/css/*
|
||||||
|
|
||||||
|
# =============================================== COMPILE SCSS ==
|
||||||
|
|
||||||
|
css: $(CSS)
|
||||||
|
|
||||||
|
$(CSS): src/public/css/%.css : src/scss/%.scss $(MIXINS)
|
||||||
|
@printf "\033[33m SCSS \033[0m%s\n" $<
|
||||||
|
@mkdir -p $(@D)
|
||||||
|
@sassc --style compressed $< $@
|
||||||
14
build/stamp.sh
Normal file
14
build/stamp.sh
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
out="./src/web/stamp.php"
|
||||||
|
public="./src/public"
|
||||||
|
files=$(find "$public" -type f -printf %P\\n)
|
||||||
|
|
||||||
|
printf "<?php\n\$__stamps = array();\n" > "$out"
|
||||||
|
for file in $files; do
|
||||||
|
stamp=$(date +%s -r "$public/$file")
|
||||||
|
echo "\$__stamps['public/$file'] = $stamp;" >> "$out";
|
||||||
|
done
|
||||||
|
echo "define('FILE_TIMES', \$__stamps);" >> "$out"
|
||||||
|
echo "unset(\$__stamps);" >> "$out"
|
||||||
|
|
||||||
|
|
@ -1,644 +0,0 @@
|
||||||
:root {
|
|
||||||
--white: #E4E6EB;
|
|
||||||
--blue: #1778f2;
|
|
||||||
--red: #f02849;
|
|
||||||
--green: #30ab5a;
|
|
||||||
|
|
||||||
--blue-alt: #1D85FC;
|
|
||||||
--green-alt: #39B463;
|
|
||||||
|
|
||||||
--font: Helvetica;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--base :#18191A;
|
|
||||||
--surface0: #242526;
|
|
||||||
--surface1: #3A3B3C;
|
|
||||||
--surface2: #4E4F50;
|
|
||||||
|
|
||||||
--text: #E4E6EB;
|
|
||||||
--subtext: #B0B3B8;
|
|
||||||
--btntext: #E4E6EB;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
:root {
|
|
||||||
--base: #f0f2f5;
|
|
||||||
--surface0: #ffffff;
|
|
||||||
--surface1: #f0f2f5;
|
|
||||||
--surface2: #dadde1;
|
|
||||||
|
|
||||||
--text: #000000;
|
|
||||||
--subtext: #1d2129;
|
|
||||||
--btntext: #606770;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Helvetica Neue';
|
|
||||||
font-style: normal;
|
|
||||||
src: url("/public/font/helvetica-neue.otf") format("opentype");
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Material Icons';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url("/public/font/material-icons.ttf") format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: facebook;
|
|
||||||
src: url("/public/font/facebook.otf") format("opentype");
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: sfpro;
|
|
||||||
src: url("/public/font/sfpro.otf") format("opentype");
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--surface0);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
color: var(--text);
|
|
||||||
font-family: var(--font);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-content {
|
|
||||||
background-color: var(--base);
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
top: 0;
|
|
||||||
position: sticky;
|
|
||||||
height: 3.5rem;
|
|
||||||
background-color: var(--surface0);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 1rem;
|
|
||||||
border-bottom: 1px solid var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
header .logo {
|
|
||||||
font-family: facebook;
|
|
||||||
color: var(--blue);
|
|
||||||
font-size: 2.25rem;
|
|
||||||
height: 100%;
|
|
||||||
line-height: 2rem;
|
|
||||||
margin-top: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1rem;
|
|
||||||
color: var(--subtext);
|
|
||||||
font-size: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
color: var(--surface2);
|
|
||||||
background-color: var(--surface2);
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, button, input, div {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, button, input {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, button {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
color: var(--btntext);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
align-content: center;
|
|
||||||
flex-direction: row;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1rem;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
padding: .4rem .6rem;
|
|
||||||
border-radius: .25rem;
|
|
||||||
background-color: transparent;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
|
||||||
background-color: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-alt {
|
|
||||||
background-color: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-alt:hover {
|
|
||||||
background-color: var(--surface2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-alt.btn-blue {
|
|
||||||
background-color: var(--blue);
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-alt.btn-blue:hover {
|
|
||||||
background-color: var(--blue-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-wide {
|
|
||||||
width: auto;
|
|
||||||
flex-grow: 1;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-line:hover {
|
|
||||||
background-color: inherit;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-blue {
|
|
||||||
color: var(--blue-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-border::before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
bottom: -1px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 1px;
|
|
||||||
background: var(--blue-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
input.btn:focus {
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-submit {
|
|
||||||
color: var(--white);
|
|
||||||
background-color: var(--blue);
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-submit:hover {
|
|
||||||
background-color: var(--blue-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success {
|
|
||||||
color: var(--white);
|
|
||||||
background-color: var(--green);
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success:hover {
|
|
||||||
background-color: var(--green-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav,
|
|
||||||
.nav-left,
|
|
||||||
.nav-center,
|
|
||||||
.nav-right {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
position: sticky;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-right {
|
|
||||||
flex: 1;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-center {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 0;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
flex: 1;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 6;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 800px) {
|
|
||||||
.nav-center .btn > span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-center .btn {
|
|
||||||
padding: 0 3rem;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#action-hamburger {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.nav-center {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
flex-direction: column;
|
|
||||||
top: 100%;
|
|
||||||
height: fit-content;
|
|
||||||
background-color: var(--surface0);
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
transform: translateX(0%);
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-center.visible {
|
|
||||||
display: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-center .btn {
|
|
||||||
width: calc(100% - 3rem);
|
|
||||||
padding: .75rem 0rem !important;
|
|
||||||
padding-left: 3rem !important;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-center .btn > span {
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-center .btn.active {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav .btn-border::before {
|
|
||||||
background: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-right .image-loading {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pfp, .pfp .inner {
|
|
||||||
height: 2.5rem;
|
|
||||||
border-radius: 2.5rem;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
border-radius: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pfp-sm, .pfp-sm .inner {
|
|
||||||
height: 1.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
object.inner {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-loading {
|
|
||||||
background: linear-gradient(-45deg, var(--surface0) 0%, var(--base) 25%, var(--surface0) 50%);
|
|
||||||
background-size: 500%;
|
|
||||||
background-position-x: 150%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-loaded {
|
|
||||||
background-color: var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background-color: var(--surface0);
|
|
||||||
border-radius: .5rem;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card form {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card .sub-card {
|
|
||||||
background-color: var(--surface1);
|
|
||||||
border-radius: .5rem;
|
|
||||||
padding: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grow {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ml-sm {
|
|
||||||
margin-left: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ml {
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr-sm {
|
|
||||||
margin-right: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb {
|
|
||||||
margin-bottom: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb {
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dim {
|
|
||||||
color: var(--subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(255, 255, 255, .1);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
background-color: var(--surface0);
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
min-width: 40rem;
|
|
||||||
min-height: 24rem;
|
|
||||||
border-radius: .5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
animation: fadeIn .1s, slideInModal .1s linear;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 40rem) {
|
|
||||||
.modal {
|
|
||||||
min-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInModal {
|
|
||||||
0% {
|
|
||||||
animation-timing-function: ease-in;
|
|
||||||
transform: translate(-50%, -60%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideIn {
|
|
||||||
0% {
|
|
||||||
animation-timing-function: ease-in;
|
|
||||||
transform: translate(0, -20%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal>form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
font-weight: bold;
|
|
||||||
position: relative;
|
|
||||||
border-bottom: 1px solid var(--surface1);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: grab;
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 0 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float-right {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 100%;
|
|
||||||
transform: translate(-125%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mi {
|
|
||||||
font-family: 'Material Icons';
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mi-sm {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mi-lg {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toast-container {
|
|
||||||
position: fixed;
|
|
||||||
top: 4rem;
|
|
||||||
left: 100%;
|
|
||||||
transform: translateX(-110%);
|
|
||||||
margin-top: 1rem;
|
|
||||||
z-index: 10000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast {
|
|
||||||
color: var(--white);
|
|
||||||
padding: .75rem;
|
|
||||||
margin: .5rem;
|
|
||||||
border-radius: .5rem;
|
|
||||||
min-width: 15rem;
|
|
||||||
animation: fadeIn .1s, slideIn .25s linear;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast.error {
|
|
||||||
background-color: var(--red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast.success {
|
|
||||||
background-color: var(--green);
|
|
||||||
}
|
|
||||||
|
|
||||||
form input:not(.btn) {
|
|
||||||
display: block;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
outline: 2px solid var(--surface2);
|
|
||||||
border-radius: .25rem;
|
|
||||||
padding: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input:not(.btn):focus {
|
|
||||||
outline-color: var(--blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
form .rel label:not(.static) {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(.5rem, -40%);
|
|
||||||
color: var(--subtext);
|
|
||||||
transition: all 0.2s ease-out;
|
|
||||||
pointer-events: none;
|
|
||||||
width: fit-content;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:focus + label:not(.static),
|
|
||||||
input:not(:placeholder-shown) + label:not(.static) {
|
|
||||||
color: var(--text);
|
|
||||||
top: 0;
|
|
||||||
padding: .5rem;
|
|
||||||
padding-top: 0;
|
|
||||||
font-size: .75rem;
|
|
||||||
transform: translate(.5rem, -25%);
|
|
||||||
background-color: var(--surface0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rel {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rel input {
|
|
||||||
width: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=radio] {
|
|
||||||
padding: 3rem !important;
|
|
||||||
width: 1rem !important;
|
|
||||||
outline: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
width: auto;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio label {
|
|
||||||
border: 1px solid var(--surface2);
|
|
||||||
height: fit-content;
|
|
||||||
width: 100%;
|
|
||||||
padding: .75rem;
|
|
||||||
border-radius: .25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio input {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 100%;
|
|
||||||
transform: translate(-250%, -70%);
|
|
||||||
width: fit-content;
|
|
||||||
outline: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grow {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#user-menu {
|
|
||||||
position: fixed;
|
|
||||||
right: .5rem;
|
|
||||||
top: 4rem;
|
|
||||||
min-width: fit-content;
|
|
||||||
animation: fadeIn .1s, slideIn .1s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
#user-menu .btn {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#user-menu-header {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#user-menu-header .pfp {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
#main-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-content h1 {
|
|
||||||
color: var(--blue);
|
|
||||||
font-family: Facebook;
|
|
||||||
font-size: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-content span {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-top: 2rem;
|
|
||||||
margin-left: 3rem;
|
|
||||||
font-size: 3rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc {
|
|
||||||
margin-left: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#people-container {
|
|
||||||
display: grid;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr) );
|
|
||||||
grid-auto-rows: max-content;
|
|
||||||
grid-gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile {
|
|
||||||
width: 16rem;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile:hover {
|
|
||||||
outline: 1px solid var(--blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile strong {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .pfp, .profile .pfp .inner {
|
|
||||||
padding: none;
|
|
||||||
margin: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
border-radius: .3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .pfp {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:nth-child(1) {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--subtext);
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:nth-child(2) {
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
|
|
||||||
.action-load-comments {
|
|
||||||
margin-left: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#action-load-posts {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#post-container {
|
|
||||||
max-width: 40rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post, #new-post {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
max-width: 40rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post .likes {
|
|
||||||
display: block;
|
|
||||||
padding-top: .25rem;
|
|
||||||
}
|
|
||||||
|
|
@ -1,142 +0,0 @@
|
||||||
#main-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header-container {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: var(--surface0);
|
|
||||||
border-bottom: 1px solid var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header {
|
|
||||||
min-width: 0;
|
|
||||||
max-width: 80rem;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header .banner {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
min-height: 30rem;
|
|
||||||
aspect-ratio: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner .inner {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header .banner img {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header .info .pfp-wrapper .pfp,
|
|
||||||
#profile-header .info .pfp-wrapper .pfp .inner {
|
|
||||||
height: 12.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header .info {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header .info .pfp-wrapper {
|
|
||||||
padding: .5rem;
|
|
||||||
background-color: var(--surface0);
|
|
||||||
height: fit-content;
|
|
||||||
border-radius: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: -2.5rem;
|
|
||||||
left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header .info .content {
|
|
||||||
margin-left: 17rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width: 800px) {
|
|
||||||
#profile-header .info .pfp-wrapper .pfp,
|
|
||||||
#profile-header .info .pfp-wrapper .pfp .inner {
|
|
||||||
height: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header .info .content {
|
|
||||||
margin-left: 12rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header .info .content .name {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile-header > hr {
|
|
||||||
border-bottom: 1px solid var(--surface1);
|
|
||||||
height: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options {
|
|
||||||
width: 100%;
|
|
||||||
height: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options .btn {
|
|
||||||
height: 100%;
|
|
||||||
width: 10rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options .btn span {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
max-width: 80rem;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#post-container {
|
|
||||||
max-width: 40rem;
|
|
||||||
width: 100%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: -1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#post-container .post {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:nth-child(1) {
|
|
||||||
padding-right: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about-tab {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#follow-container {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#follow-container > a {
|
|
||||||
width: 10rem;
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#follow-container > a > span {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
BIN
src/public/font/Facebook.ttf
Normal file
BIN
src/public/font/Facebook.ttf
Normal file
Binary file not shown.
BIN
src/public/font/Facebook.woff
Normal file
BIN
src/public/font/Facebook.woff
Normal file
Binary file not shown.
BIN
src/public/font/Facebook.woff2
Normal file
BIN
src/public/font/Facebook.woff2
Normal file
Binary file not shown.
BIN
src/public/font/Helvetica Neue.ttf
Normal file
BIN
src/public/font/Helvetica Neue.ttf
Normal file
Binary file not shown.
BIN
src/public/font/Helvetica Neue.woff
Normal file
BIN
src/public/font/Helvetica Neue.woff
Normal file
Binary file not shown.
BIN
src/public/font/Helvetica Neue.woff2
Normal file
BIN
src/public/font/Helvetica Neue.woff2
Normal file
Binary file not shown.
BIN
src/public/font/Material Icons.otf
Normal file
BIN
src/public/font/Material Icons.otf
Normal file
Binary file not shown.
BIN
src/public/font/Material Icons.woff
Normal file
BIN
src/public/font/Material Icons.woff
Normal file
Binary file not shown.
BIN
src/public/font/Material Icons.woff2
Normal file
BIN
src/public/font/Material Icons.woff2
Normal file
Binary file not shown.
BIN
src/public/font/SF Pro.ttf
Normal file
BIN
src/public/font/SF Pro.ttf
Normal file
Binary file not shown.
BIN
src/public/font/SF Pro.woff
Normal file
BIN
src/public/font/SF Pro.woff
Normal file
Binary file not shown.
BIN
src/public/font/SF Pro.woff2
Normal file
BIN
src/public/font/SF Pro.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
src/public/icons/logo512.png
Normal file
BIN
src/public/icons/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
|
|
@ -131,12 +131,12 @@ $.ajaxSetup({
|
||||||
})
|
})
|
||||||
|
|
||||||
var onImgLoad = function(me) {
|
var onImgLoad = function(me) {
|
||||||
me.parentElement.classList.remove('image-loading');
|
me.parentElement.classList.remove('loading');
|
||||||
me.parentElement.classList.add('image-loaded');
|
me.parentElement.classList.add('loaded');
|
||||||
}
|
}
|
||||||
|
|
||||||
var onImgError = function(me) {
|
var onImgError = function(me) {
|
||||||
me.parentElement.classList.remove('image-loading');
|
me.parentElement.classList.remove('loading');
|
||||||
me.parentElement.classList.add('image-loaded');
|
me.parentElement.classList.add('loaded');
|
||||||
me.remove();
|
me.remove();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -104,7 +104,7 @@ $$('.action-new-comment-form').on('submit', function(e) {
|
||||||
|
|
||||||
$$('.action-like').on('click', function() {
|
$$('.action-like').on('click', function() {
|
||||||
let me = $(this);
|
let me = $(this);
|
||||||
let liked = me.hasClass('btn-blue');
|
let liked = me.hasClass('btn-primary');
|
||||||
let like_id = me.attr('likeId');
|
let like_id = me.attr('likeId');
|
||||||
let post_id = me.attr('postId');
|
let post_id = me.attr('postId');
|
||||||
|
|
||||||
|
|
@ -119,15 +119,15 @@ $$('.action-like').on('click', function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const onPatch = () => {
|
const onPatch = () => {
|
||||||
let liked = me.hasClass('btn-blue');
|
let liked = me.hasClass('btn-primary');
|
||||||
me.toggleClass('btn-blue');
|
me.toggleClass('btn-primary');
|
||||||
updateLiked(!liked);
|
updateLiked(!liked);
|
||||||
}
|
}
|
||||||
|
|
||||||
const onPost = (data) => {
|
const onPost = (data) => {
|
||||||
let liked = me.hasClass('btn-blue');
|
let liked = me.hasClass('btn-primary');
|
||||||
me.attr('likeId', data[0].id + '');
|
me.attr('likeId', data[0].id + '');
|
||||||
me.toggleClass('btn-blue');
|
me.toggleClass('btn-primary');
|
||||||
updateLiked(!liked);
|
updateLiked(!liked);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
22
src/scss/_mixins.scss
Normal file
22
src/scss/_mixins.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
@mixin font-face($name) {
|
||||||
|
@font-face {
|
||||||
|
font-family: $name;
|
||||||
|
src: url("../font/" + $name + ".woff2") format("woff2"),
|
||||||
|
url("../font/" + $name + ".woff") format("woff"),
|
||||||
|
url("../font/" + $name + ".ttf") format("truetype"),
|
||||||
|
url("../font/" + $name + ".otf") format("opentype");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
71
src/scss/_variables.scss
Normal file
71
src/scss/_variables.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
|
||||||
|
$varient: "dark";
|
||||||
|
|
||||||
|
$white: #e4e6eb;
|
||||||
|
$white-alt: #b0b3b8;
|
||||||
|
$black: #000000;
|
||||||
|
$black-alt: #1d2129;
|
||||||
|
$red: #f02849;
|
||||||
|
$red-alt: #f02849;
|
||||||
|
$green: #30ab5a;
|
||||||
|
$green-alt: #39b463;
|
||||||
|
$blue: #1778f2;
|
||||||
|
$blue-alt: #1d85fc;
|
||||||
|
$yellow: #dcde81;
|
||||||
|
$yellow-alt: #808037;
|
||||||
|
$grey-100: #18191a;
|
||||||
|
$grey-200: #242526;
|
||||||
|
$grey-300: #3a3b3c;
|
||||||
|
$grey-400: #4e4f50;
|
||||||
|
$grey-500: #606770;
|
||||||
|
$grey-700: #dadde1;
|
||||||
|
$grey-800: #f0f2f5;
|
||||||
|
$grey-900: #fff;
|
||||||
|
|
||||||
|
$base: null !default;
|
||||||
|
$surface0: null !default;
|
||||||
|
$surface1: null !default;
|
||||||
|
$surface2: null !default;
|
||||||
|
$text: null !default;
|
||||||
|
$subtext: null !default;
|
||||||
|
$btntext: null !default;
|
||||||
|
|
||||||
|
@if $varient == "dark" {
|
||||||
|
$base: $grey-100;
|
||||||
|
$surface0: $grey-200;
|
||||||
|
$surface1: $grey-300;
|
||||||
|
$surface2: $grey-400;
|
||||||
|
$text: $white;
|
||||||
|
$subtext: $white-alt;
|
||||||
|
$btntext: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $varient == "light" {
|
||||||
|
$base: $grey-900;
|
||||||
|
$surface0: $grey-900;
|
||||||
|
$surface1: $grey-800;
|
||||||
|
$surface2: $grey-700;
|
||||||
|
$text: $black;
|
||||||
|
$subtext: $black-alt;
|
||||||
|
$btntext: $grey-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
$font: "Helvetica Neue", Helvetica, Verdana, Courier, monospace;
|
||||||
|
$header-font: "Facebook";
|
||||||
|
|
||||||
|
$scale: 16px;
|
||||||
|
$outer-gap: $scale;
|
||||||
|
$inner-gap: $scale;
|
||||||
|
$inner-inner-gap: $scale * 0.75;
|
||||||
|
$outer-radius: $scale / 2;
|
||||||
|
$inner-radius: $scale / 3;
|
||||||
|
$font-size: $scale;
|
||||||
|
$font-size-small: $scale * 0.75;
|
||||||
|
|
||||||
|
$header-height: $scale * 3.5;
|
||||||
|
|
||||||
|
$base-z-index: 1;
|
||||||
|
$header-z-index: 2;
|
||||||
|
$modal-z-index: 5;
|
||||||
|
|
||||||
|
$content-width: $scale * 40;
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
|
@import "./variables";
|
||||||
|
@import "./mixins";
|
||||||
|
|
||||||
#main-content {
|
#main-content {
|
||||||
padding-top: 20rem;
|
padding-top: 20rem;
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem;
|
||||||
|
|
@ -13,7 +16,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.branding h1 {
|
.branding h1 {
|
||||||
color: var(--blue);
|
color: $blue;
|
||||||
font-family: facebook;
|
font-family: facebook;
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -45,3 +48,4 @@
|
||||||
margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
600
src/scss/common.scss
Normal file
600
src/scss/common.scss
Normal file
|
|
@ -0,0 +1,600 @@
|
||||||
|
@import "./variables";
|
||||||
|
@import "./mixins";
|
||||||
|
|
||||||
|
@include font-face("Helvetica Neue");
|
||||||
|
@include font-face("Material Icons");
|
||||||
|
@include font-face("Facebook");
|
||||||
|
@include font-face("SF Pro");
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
color: $surface2;
|
||||||
|
background: $surface2;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
input,
|
||||||
|
button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
color: $text;
|
||||||
|
font-family: $font;
|
||||||
|
font-size: $font-size;
|
||||||
|
background: $surface0;
|
||||||
|
|
||||||
|
.subtext {
|
||||||
|
color: $subtext;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header#header {
|
||||||
|
height: $header-height;
|
||||||
|
background: $surface0;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 $inner-gap;
|
||||||
|
border-bottom: 1px solid $surface1;
|
||||||
|
z-index: $header-z-index;
|
||||||
|
|
||||||
|
.left,
|
||||||
|
.center,
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
.logo {
|
||||||
|
font-family: $header-font;
|
||||||
|
color: $blue;
|
||||||
|
font-size: 2.25em;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 2rem;
|
||||||
|
margin-top: $inner-gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
> .pfp {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-menu {
|
||||||
|
position: fixed;
|
||||||
|
right: $inner-gap;
|
||||||
|
top: $header-height + $inner-gap;
|
||||||
|
min-width: fit-content;
|
||||||
|
width: 20em;
|
||||||
|
animation: fadeIn .1s, slideIn .1s linear;
|
||||||
|
|
||||||
|
.user-menu-header {
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.pfp {
|
||||||
|
margin-right: $inner-gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
header#header {
|
||||||
|
.center {
|
||||||
|
.btn {
|
||||||
|
padding: 0 3rem;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
#action-hamburger {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
header#header {
|
||||||
|
.center {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
flex-direction: column;
|
||||||
|
top: 100%;
|
||||||
|
height: fit-content;
|
||||||
|
background-color: $surface0;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
transform: translateX(0%);
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
&.visible {
|
||||||
|
display: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: $inner-gap 0;
|
||||||
|
padding-left: 3rem;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
margin-left: $inner-gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-border {
|
||||||
|
::before {
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main#main {
|
||||||
|
background: $base;
|
||||||
|
padding-top: $inner-gap;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer#footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: $inner-gap;
|
||||||
|
color: $subtext;
|
||||||
|
font-size: $font-size-small;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: $inner-radius;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: $inner-gap * 0.5;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $surface1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-alt {
|
||||||
|
background: $surface1;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $surface2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-primary {
|
||||||
|
color: $blue-alt;
|
||||||
|
|
||||||
|
&.btn-alt {
|
||||||
|
background: $blue;
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $blue-alt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-success,
|
||||||
|
&.btn-submit {
|
||||||
|
color: $green-alt;
|
||||||
|
|
||||||
|
&.btn-alt {
|
||||||
|
background: $green;
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $green-alt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-blend {
|
||||||
|
font-weight: inherit;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: inherit !important;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-border {
|
||||||
|
::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
bottom: -1px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: $blue-alt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: inherit;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.pfp {
|
||||||
|
height: 2.5em;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix banner on profile pages */
|
||||||
|
object.inner {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* loading animation*/
|
||||||
|
.loading {
|
||||||
|
background: linear-gradient(-45deg, $surface0) 0%, var(--base) 25%, var(--surface0) 50%;
|
||||||
|
background-size: 500%;
|
||||||
|
background-position-x: 150%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* loaded bg to fix transparent images */
|
||||||
|
.loaded {
|
||||||
|
background-color: $base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: $surface0;
|
||||||
|
border-radius: $outer-radius;
|
||||||
|
padding: $inner-gap;
|
||||||
|
max-width: $content-width;
|
||||||
|
margin-bottom: $outer-gap;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-card {
|
||||||
|
background-color: $surface1;
|
||||||
|
border-radius: $inner-radius;
|
||||||
|
padding: $inner-inner-gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
@include row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
@include column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grow {
|
||||||
|
width: auto;
|
||||||
|
flex: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml-sm {
|
||||||
|
margin-left: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-sm {
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb {
|
||||||
|
margin-bottom: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-container {
|
||||||
|
z-index: $modal-z-index;
|
||||||
|
position: fixed;
|
||||||
|
background: #fff2;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
background-color: $surface0;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
min-width: $content-width;
|
||||||
|
min-height: $content-width * 0.6;
|
||||||
|
border-radius: $outer-radius;
|
||||||
|
@include column;
|
||||||
|
animation: fadeIn .1s, slideInModal .1s linear;
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid $surface1;
|
||||||
|
cursor: grab;
|
||||||
|
padding: $inner-gap;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
margin-top: auto;
|
||||||
|
padding: 0 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
> form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $content-width) {
|
||||||
|
.modal-container {
|
||||||
|
.modal {
|
||||||
|
min-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInModal {
|
||||||
|
0% {
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
transform: translate(-50%, -60%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
0% {
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
transform: translate(0, -20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 100%;
|
||||||
|
transform: translate(-125%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mi {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mi-sm {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mi-lg {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toast-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 4rem;
|
||||||
|
left: 100%;
|
||||||
|
transform: translateX(-110%);
|
||||||
|
margin-top: 1rem;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
color: $white;
|
||||||
|
padding: .75rem;
|
||||||
|
margin: .5rem;
|
||||||
|
border-radius: .5rem;
|
||||||
|
min-width: 15rem;
|
||||||
|
animation: fadeIn .1s, slideIn .25s linear;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.error {
|
||||||
|
background-color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.success {
|
||||||
|
background-color: $green;
|
||||||
|
}
|
||||||
|
|
||||||
|
form input:not(.btn) {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
outline: 2px solid $surface2;
|
||||||
|
border-radius: .25rem;
|
||||||
|
padding: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
form input:not(.btn):focus {
|
||||||
|
outline-color: $blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
form .rel label:not(.static) {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(.5rem, -40%);
|
||||||
|
color: $subtext;
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
pointer-events: none;
|
||||||
|
width: fit-content;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + label:not(.static),
|
||||||
|
input:not(:placeholder-shown) + label:not(.static) {
|
||||||
|
color: $text;
|
||||||
|
top: 0;
|
||||||
|
padding: .5rem;
|
||||||
|
padding-top: 0;
|
||||||
|
font-size: .75rem;
|
||||||
|
transform: translate(.5rem, -25%);
|
||||||
|
background-color: $surface0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rel {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rel input {
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=radio] {
|
||||||
|
padding: 3rem !important;
|
||||||
|
width: 1rem !important;
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio label {
|
||||||
|
border: 1px solid $surface2;
|
||||||
|
height: fit-content;
|
||||||
|
width: 100%;
|
||||||
|
padding: .75rem;
|
||||||
|
border-radius: .25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio input {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 100%;
|
||||||
|
transform: translate(-250%, -70%);
|
||||||
|
width: fit-content;
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grow {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
16
src/scss/error.scss
Normal file
16
src/scss/error.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
@import "./variables";
|
||||||
|
@import "./mixins";
|
||||||
|
|
||||||
|
main#main {
|
||||||
|
padding: 10rem 0;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: $blue;
|
||||||
|
font-family: $header-font;
|
||||||
|
font-size: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
|
@import "./variables";
|
||||||
|
@import "./mixins";
|
||||||
|
|
||||||
#main-content {
|
#main-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -16,6 +19,6 @@
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--text);
|
color: $text;
|
||||||
font-family: var(--font);
|
font-family: $font;
|
||||||
}
|
}
|
||||||
46
src/scss/people.scss
Normal file
46
src/scss/people.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
@import "./variables";
|
||||||
|
@import "./mixins";
|
||||||
|
|
||||||
|
$profile-width: 16em;
|
||||||
|
|
||||||
|
main#main {
|
||||||
|
.title {
|
||||||
|
margin-top: $outer-gap;
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#people-container {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
padding: $inner-gap;
|
||||||
|
margin-bottom: $outer-gap;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax($profile-width, 1fr) );
|
||||||
|
grid-auto-rows: max-content;
|
||||||
|
grid-gap: 2em;
|
||||||
|
|
||||||
|
.profile {
|
||||||
|
width: $profile-width;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
outline: 1px solid $blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pfp {
|
||||||
|
border-radius: $inner-gap / 4;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin-bottom: $inner-gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
15
src/scss/post.scss
Normal file
15
src/scss/post.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
@import "./variables";
|
||||||
|
@import "./mixins";
|
||||||
|
|
||||||
|
#post-container {
|
||||||
|
max-width: $content-width;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.post {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#new-post {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
121
src/scss/profile.scss
Normal file
121
src/scss/profile.scss
Normal file
|
|
@ -0,0 +1,121 @@
|
||||||
|
@import "./variables";
|
||||||
|
@import "./mixins";
|
||||||
|
|
||||||
|
main#main {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
$pfp-size: 12.5em;
|
||||||
|
|
||||||
|
#profile-header-container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: $surface0;
|
||||||
|
border-bottom: 1px solid $surface1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#profile-header {
|
||||||
|
min-width: 0;
|
||||||
|
max-width: 80rem;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
min-height: 30em;
|
||||||
|
aspect-ratio: 5;
|
||||||
|
|
||||||
|
img {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 6em;
|
||||||
|
|
||||||
|
.pfp-wrapper {
|
||||||
|
padding: $inner-gap / 2;
|
||||||
|
background-color: $surface0;
|
||||||
|
height: fit-content;
|
||||||
|
border-radius: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: -2.5rem;
|
||||||
|
left: $inner-gap;
|
||||||
|
|
||||||
|
.pfp {
|
||||||
|
height: $pfp-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-left: $pfp-size + 5em;
|
||||||
|
margin-top: 2em;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 2em;;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 2rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 10rem;
|
||||||
|
padding: $inner-gap / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> hr {
|
||||||
|
margin: 0;
|
||||||
|
border-bottom: 1px solid $surface1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
height: 3rem;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: 800px) {
|
||||||
|
#profile-header {
|
||||||
|
.info {
|
||||||
|
.pfp-wrapper {
|
||||||
|
.pfp {
|
||||||
|
height: $pfp-size * 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-left: ($pfp-size + 5em) * 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#tab-container {
|
||||||
|
width: 100%;
|
||||||
|
@include column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tab-posts,
|
||||||
|
#tab-about {
|
||||||
|
width: 100%;
|
||||||
|
max-width: $content-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tab-about {
|
||||||
|
td:nth-child(1) {
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "./variables";
|
||||||
|
@import "./mixins";
|
||||||
|
|
||||||
#main-content {
|
#main-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -69,12 +69,12 @@ function clear_all() {
|
||||||
extract($GLOBALS);
|
extract($GLOBALS);
|
||||||
$psql->beginTransaction();
|
$psql->beginTransaction();
|
||||||
$psql->exec(
|
$psql->exec(
|
||||||
'DELETE FROM admin.user;
|
'DELETE FROM xssbook.user;
|
||||||
DELETE FROM admin.post;
|
DELETE FROM xssbook.post;
|
||||||
DELETE FROM admin.comment;
|
DELETE FROM xssbook.comment;
|
||||||
DELETE FROM admin.like;
|
DELETE FROM xssbook.like;
|
||||||
DELETE FROM admin.follow;
|
DELETE FROM xssbook.follow;
|
||||||
DELETE FROM admin.user_media;'
|
DELETE FROM xssbook.user_media;'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -87,7 +87,7 @@ function migrate_users() {
|
||||||
'SELECT user_id, firstname, lastname, email, password, gender, date, day, month, year FROM users;'
|
'SELECT user_id, firstname, lastname, email, password, gender, date, day, month, year FROM users;'
|
||||||
);
|
);
|
||||||
$submit = $psql->prepare(
|
$submit = $psql->prepare(
|
||||||
'INSERT INTO admin.user
|
'INSERT INTO xssbook.user
|
||||||
(id, username, password, first_name, last_name, email, gender, birth_date, created)
|
(id, username, password, first_name, last_name, email, gender, birth_date, created)
|
||||||
VALUES
|
VALUES
|
||||||
(?, ?, ?, ?, ?, ?, ?, ?, to_timestamp(?));'
|
(?, ?, ?, ?, ?, ?, ?, ?, to_timestamp(?));'
|
||||||
|
|
@ -125,7 +125,7 @@ function migrate_posts() {
|
||||||
'SELECT post_id, user_id, content, date FROM posts;'
|
'SELECT post_id, user_id, content, date FROM posts;'
|
||||||
);
|
);
|
||||||
$submit = $psql->prepare(
|
$submit = $psql->prepare(
|
||||||
'INSERT INTO admin.post
|
'INSERT INTO xssbook.post
|
||||||
(id, user_id, content, created)
|
(id, user_id, content, created)
|
||||||
VALUES
|
VALUES
|
||||||
(?, ?, ?, to_timestamp(?));'
|
(?, ?, ?, to_timestamp(?));'
|
||||||
|
|
@ -154,7 +154,7 @@ function migrate_comments() {
|
||||||
'SELECT comment_id, user_id, post_id, content, date FROM comments;'
|
'SELECT comment_id, user_id, post_id, content, date FROM comments;'
|
||||||
);
|
);
|
||||||
$submit = $psql->prepare(
|
$submit = $psql->prepare(
|
||||||
'INSERT INTO admin.comment
|
'INSERT INTO xssbook.comment
|
||||||
(id, user_id, post_id, content, created)
|
(id, user_id, post_id, content, created)
|
||||||
VALUES
|
VALUES
|
||||||
(?, ?, ?, ?, to_timestamp(?));'
|
(?, ?, ?, ?, to_timestamp(?));'
|
||||||
|
|
@ -184,7 +184,7 @@ function migrate_likes() {
|
||||||
'SELECT user_id, post_id FROM likes;'
|
'SELECT user_id, post_id FROM likes;'
|
||||||
);
|
);
|
||||||
$submit = $psql->prepare(
|
$submit = $psql->prepare(
|
||||||
'INSERT INTO admin.like
|
'INSERT INTO xssbook.like
|
||||||
(user_id, post_id)
|
(user_id, post_id)
|
||||||
VALUES
|
VALUES
|
||||||
(?, ?);'
|
(?, ?);'
|
||||||
|
|
@ -210,7 +210,7 @@ function migrate_follow() {
|
||||||
'SELECT follower_id, followee_id FROM friends;'
|
'SELECT follower_id, followee_id FROM friends;'
|
||||||
);
|
);
|
||||||
$submit = $psql->prepare(
|
$submit = $psql->prepare(
|
||||||
'INSERT INTO admin.follow
|
'INSERT INTO xssbook.follow
|
||||||
(follower_id, followee_id)
|
(follower_id, followee_id)
|
||||||
VALUES
|
VALUES
|
||||||
(?, ?);'
|
(?, ?);'
|
||||||
|
|
@ -233,7 +233,7 @@ function migrate_user_media($type) {
|
||||||
|
|
||||||
// load queries
|
// load queries
|
||||||
$submit = $psql->prepare(
|
$submit = $psql->prepare(
|
||||||
'INSERT INTO admin.user_media
|
'INSERT INTO xssbook.user_media
|
||||||
(user_id, content, mime, type)
|
(user_id, content, mime, type)
|
||||||
VALUES
|
VALUES
|
||||||
(?, decode(?, \'base64\'), ?, ?);'
|
(?, decode(?, \'base64\'), ?, ?);'
|
||||||
|
|
@ -273,7 +273,7 @@ function migrate_seq() {
|
||||||
$tables = array('user', 'post', 'like', 'comment', 'follow', 'user_media');
|
$tables = array('user', 'post', 'like', 'comment', 'follow', 'user_media');
|
||||||
|
|
||||||
foreach ($tables as $table) {
|
foreach ($tables as $table) {
|
||||||
$sql = "SELECT setval('sys.{$table}_id_seq', (SELECT MAX(id) FROM admin.{$table}), true);";
|
$sql = "SELECT setval('sys.{$table}_id_seq', (SELECT MAX(id) FROM xssbook.{$table}), true);";
|
||||||
$psql->exec($sql);
|
$psql->exec($sql);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
34
src/web/_controller/_meta.php
Normal file
34
src/web/_controller/_meta.php
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
<?php /* Copyright (c) 2024 Freya Murphy */
|
||||||
|
class _meta_controller extends Controller {
|
||||||
|
|
||||||
|
public function manifest(): void {
|
||||||
|
|
||||||
|
$json = array(
|
||||||
|
'short_name' => 'xssbook.com',
|
||||||
|
'name' => 'xssbook.com',
|
||||||
|
'icons' => [
|
||||||
|
array(
|
||||||
|
'src' => 'https://xssbook.com/public/icons/logo512.png',
|
||||||
|
'type' => 'image/png',
|
||||||
|
'sizes' => '512x512',
|
||||||
|
'purpose' => 'any maskable'
|
||||||
|
)
|
||||||
|
],
|
||||||
|
'id' => 'https://xssbook.com/home',
|
||||||
|
'start_url' => 'https://xssbook.com/home',
|
||||||
|
'background_color' => '#181818',
|
||||||
|
'display' => 'standalone',
|
||||||
|
'scope' => '/',
|
||||||
|
'theme_color' => '#181818',
|
||||||
|
'shortcuts' => [],
|
||||||
|
'description' => 'Post posts postfully on XSSBook',
|
||||||
|
'screenshots' => []
|
||||||
|
);
|
||||||
|
|
||||||
|
header('Content-type: application/json');
|
||||||
|
echo json_encode($json);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
@ -27,7 +27,7 @@ class Auth_controller extends Controller {
|
||||||
|
|
||||||
parent::index();
|
parent::index();
|
||||||
$data = $this->auth_model->get_data();
|
$data = $this->auth_model->get_data();
|
||||||
$this->view('header_empty', $data);
|
$this->view('head', $data);
|
||||||
$this->view('apps/auth/login', $data);
|
$this->view('apps/auth/login', $data);
|
||||||
$this->view('footer', $data);
|
$this->view('footer', $data);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||||
<?php /* vi: syntax=php */ ?>
|
<?php /* vi: syntax=php */ ?>
|
||||||
<div id="main-content">
|
<main id="main">
|
||||||
<div class="branding col">
|
<div class="branding col">
|
||||||
<h1>xssbook</h1>
|
<h1>xssbook</h1>
|
||||||
<span><?=ucfirst(lang('login_branding'))?></span>
|
<span><?=ucfirst(lang('login_branding'))?></span>
|
||||||
|
|
@ -31,18 +31,18 @@
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<?=ilang('action_login',
|
<?=ilang('action_login',
|
||||||
class: 'btn btn-submit btn-wide',
|
class: 'btn btn-submit grow',
|
||||||
button: TRUE,
|
button: TRUE,
|
||||||
attrs: array('type' => 'submit')
|
attrs: array('type' => 'submit')
|
||||||
)?>
|
)?>
|
||||||
<?=ilang('action_forgot_passwd',
|
<?=ilang('action_forgot_passwd',
|
||||||
class: 'btn btn-line btn-blue btn-wide mt'
|
class: 'btn btn-blend btn-primary grow mt'
|
||||||
)?>
|
)?>
|
||||||
</form>
|
</form>
|
||||||
<hr>
|
<hr>
|
||||||
<?=ilang('action_create_account',
|
<?=ilang('action_create_account',
|
||||||
id: 'action-register',
|
id: 'action-register',
|
||||||
class: 'btn btn-success btn-wide',
|
class: 'btn btn-success grow',
|
||||||
button: TRUE,
|
button: TRUE,
|
||||||
attrs: array('type' => 'submit')
|
attrs: array('type' => 'submit')
|
||||||
)?>
|
)?>
|
||||||
|
|
@ -84,4 +84,4 @@
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||||
<?php /* vi: syntax=php */ ?>
|
<?php /* vi: syntax=php */ ?>
|
||||||
<div id="main-content">
|
<main id="main">
|
||||||
<h1><?=$title?></h1>
|
<h1><?=$title?></h1>
|
||||||
<span><?=ucfirst($msg)?></span>
|
<span><?=ucfirst($msg)?></span>
|
||||||
</div>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||||
<?php /* vi: syntax=php */ ?>
|
<?php /* vi: syntax=php */ ?>
|
||||||
<div id="main-content" class="container">
|
<main id="main" class="container">
|
||||||
<?php if ($self): ?>
|
<?php if ($self): ?>
|
||||||
<div id="new-post" class="card">
|
<div id="new-post" class="card">
|
||||||
<div class="row grow">
|
<div class="row grow">
|
||||||
<?=pfp($self)?>
|
<?=pfp($self)?>
|
||||||
<a
|
<a
|
||||||
id="action-new-post"
|
id="action-new-post"
|
||||||
class="btn btn-alt btn-wide ml"
|
class="btn btn-alt grow ml"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
aria-label="<?=ucfirst(lang('action_new_post_tip'))?>"
|
aria-label="<?=ucfirst(lang('action_new_post_tip'))?>"
|
||||||
>
|
>
|
||||||
|
|
@ -24,4 +24,4 @@
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php $this->post_controller->index(); ?>
|
<?php $this->post_controller->index(); ?>
|
||||||
</div>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,8 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<?=pfp($user, FALSE)?>
|
<?=pfp($user, FALSE)?>
|
||||||
<div class="col ml">
|
<div class="col ml">
|
||||||
<strong class=""><?=$this->format_model->name($user)?></strong>
|
<span class="name"><?=$this->format_model->name($user)?></span>
|
||||||
<span class="dim"><?=$user['username']?></span>
|
<span class="subtext"><?=$user['username']?></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||||
<?php /* vi: syntax=php */ ?>
|
<?php /* vi: syntax=php */ ?>
|
||||||
</div>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||||
<?php /* vi: syntax=php */ ?>
|
<?php /* vi: syntax=php */ ?>
|
||||||
<div id="main-content" class="col">
|
<main id="main">
|
||||||
<h1 class="title"><?=ucfirst(lang('title'))?></h1>
|
<h1 class="title"><?=ucfirst(lang('title'))?></h1>
|
||||||
<h3 class="desc"><?=ucfirst(lang('desc'))?></h3>
|
<h3 class="desc"><?=ucfirst(lang('desc'))?></h3>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
<?php if ($loaded >= $page_size && $page_size < $total): ?>
|
<?php if ($loaded >= $page_size && $page_size < $total): ?>
|
||||||
<?=ilang('action_load_users',
|
<?=ilang('action_load_users',
|
||||||
id: 'action-load-users',
|
id: 'action-load-users',
|
||||||
class: 'btn btn-line btn-wide mb',
|
class: 'btn btn-blend grow mb',
|
||||||
attrs: array(
|
attrs: array(
|
||||||
'loaded' => $loaded,
|
'loaded' => $loaded,
|
||||||
'pageSize' => $page_size,
|
'pageSize' => $page_size,
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||||
<?php /* vi: syntax=php */ ?>
|
<?php /* vi: syntax=php */ ?>
|
||||||
<div id="main-content">
|
<main id="main">
|
||||||
<div id="profile-header-container">
|
<div id="profile-header-container">
|
||||||
<div id="profile-header" class="col">
|
<div id="profile-header" class="col">
|
||||||
<?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner', mime: $user['banner_mime'])?>
|
<?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner', mime: $user['banner_mime'])?>
|
||||||
|
|
@ -12,13 +12,13 @@
|
||||||
<div class="row grow">
|
<div class="row grow">
|
||||||
<div class="col mb">
|
<div class="col mb">
|
||||||
<strong class="name"><?=$this->format_model->name($user)?></strong>
|
<strong class="name"><?=$this->format_model->name($user)?></strong>
|
||||||
<span class="dim"><?=$user['follower_count'] . ' ' . ucfirst(lang('followers'))?></span>
|
<span class="subtext"><?=$user['follower_count'] . ' ' . ucfirst(lang('followers'))?></span>
|
||||||
</div>
|
</div>
|
||||||
<?php if (
|
<?php if (
|
||||||
$this->main->session &&
|
$this->main->session &&
|
||||||
(!isset($self) || $self['id'] != $user['id'])
|
(!isset($self) || $self['id'] != $user['id'])
|
||||||
): ?>
|
): ?>
|
||||||
<div id="follow-container">
|
<div class="follow">
|
||||||
<?=ilang(
|
<?=ilang(
|
||||||
'action_follow',
|
'action_follow',
|
||||||
id: 'action-follow-follow',
|
id: 'action-follow-follow',
|
||||||
|
|
@ -36,14 +36,14 @@
|
||||||
<?=ilang(
|
<?=ilang(
|
||||||
'action_following',
|
'action_following',
|
||||||
id: 'action-follow-following',
|
id: 'action-follow-following',
|
||||||
class: 'btn btn-alt btn-blue',
|
class: 'btn btn-alt btn-primary',
|
||||||
style: ($following && !$followed) ? '' : 'display: none',
|
style: ($following && !$followed) ? '' : 'display: none',
|
||||||
sub: [$user['first_name']]
|
sub: [$user['first_name']]
|
||||||
)?>
|
)?>
|
||||||
<?=ilang(
|
<?=ilang(
|
||||||
'action_friends',
|
'action_friends',
|
||||||
id: 'action-follow-friends',
|
id: 'action-follow-friends',
|
||||||
class: 'btn btn-alt btn-blue',
|
class: 'btn btn-alt btn-primary',
|
||||||
style: ($following && $followed) ? '' : 'display: none',
|
style: ($following && $followed) ? '' : 'display: none',
|
||||||
sub: [$user['first_name']]
|
sub: [$user['first_name']]
|
||||||
)?>
|
)?>
|
||||||
|
|
@ -124,7 +124,7 @@
|
||||||
<?php if(strlen($user['profile_bio']) > 0): ?>
|
<?php if(strlen($user['profile_bio']) > 0): ?>
|
||||||
<br>
|
<br>
|
||||||
<strong><?=ucfirst(lang('bio'))?></strong>
|
<strong><?=ucfirst(lang('bio'))?></strong>
|
||||||
<span class="dim"><?=$user['profile_bio']?></span>
|
<span class="subtext"><?=$user['profile_bio']?></span>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -132,7 +132,7 @@
|
||||||
<div class="row options">
|
<div class="row options">
|
||||||
<?=ilang('action_posts',
|
<?=ilang('action_posts',
|
||||||
sub: [$user['first_name']],
|
sub: [$user['first_name']],
|
||||||
class: 'btn btn-blue btn-border',
|
class: 'btn btn-primary btn-border',
|
||||||
id: 'action-posts'
|
id: 'action-posts'
|
||||||
)?>
|
)?>
|
||||||
<?=ilang('action_about',
|
<?=ilang('action_about',
|
||||||
|
|
@ -231,13 +231,13 @@
|
||||||
let tabs = {};
|
let tabs = {};
|
||||||
|
|
||||||
const disableTab = (tab) => {
|
const disableTab = (tab) => {
|
||||||
tab.btn.removeClass('btn-blue');
|
tab.btn.removeClass('btn-primary');
|
||||||
tab.btn.removeClass('btn-border');
|
tab.btn.removeClass('btn-border');
|
||||||
tab.tab.css('display', 'none');
|
tab.tab.css('display', 'none');
|
||||||
};
|
};
|
||||||
|
|
||||||
const enableTab = (tab) => {
|
const enableTab = (tab) => {
|
||||||
tab.btn.addClass('btn-blue');
|
tab.btn.addClass('btn-primary');
|
||||||
tab.btn.addClass('btn-border');
|
tab.btn.addClass('btn-border');
|
||||||
tab.tab.css('display', '');
|
tab.tab.css('display', '');
|
||||||
};
|
};
|
||||||
|
|
@ -266,4 +266,4 @@
|
||||||
loadTab('followers');
|
loadTab('followers');
|
||||||
loadTab('following');
|
loadTab('following');
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -116,7 +116,7 @@ function resetMedia(media_type) {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="main-content">
|
<main id="main">
|
||||||
<div id="settings" class="card">
|
<div id="settings" class="card">
|
||||||
<h1><?=ucfirst(lang('title'))?></h1>
|
<h1><?=ucfirst(lang('title'))?></h1>
|
||||||
<hr class="mt">
|
<hr class="mt">
|
||||||
|
|
@ -155,7 +155,7 @@ function resetMedia(media_type) {
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class="btn btn-wide btn-submit"
|
class="btn grow btn-alt btn-submit"
|
||||||
style="flex: 0; height: fit-content;"
|
style="flex: 0; height: fit-content;"
|
||||||
><?=lang('update')?></button>
|
><?=lang('update')?></button>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -170,11 +170,11 @@ function resetMedia(media_type) {
|
||||||
)?>
|
)?>
|
||||||
<div class="col ml">
|
<div class="col ml">
|
||||||
<button
|
<button
|
||||||
class="btn btn-alt btn-blue"
|
class="btn btn-alt btn-primary"
|
||||||
onclick="updateMedia('avatar')"
|
onclick="updateMedia('avatar')"
|
||||||
><?=ucfirst(lang('update'))?></button>
|
><?=ucfirst(lang('update'))?></button>
|
||||||
<button
|
<button
|
||||||
class="btn btn-alt btn-blue mt"
|
class="btn btn-alt btn-primary mt"
|
||||||
onclick="resetMedia('avatar')"
|
onclick="resetMedia('avatar')"
|
||||||
><?=ucfirst(lang('reset'))?></button>
|
><?=ucfirst(lang('reset'))?></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -187,14 +187,14 @@ function resetMedia(media_type) {
|
||||||
)?>
|
)?>
|
||||||
<div class="col ml">
|
<div class="col ml">
|
||||||
<button
|
<button
|
||||||
class="btn btn-alt btn-blue"
|
class="btn btn-alt btn-primary"
|
||||||
onclick="updateMedia('banner')"
|
onclick="updateMedia('banner')"
|
||||||
><?=ucfirst(lang('update'))?></button>
|
><?=ucfirst(lang('update'))?></button>
|
||||||
<button
|
<button
|
||||||
class="btn btn-alt btn-blue mt"
|
class="btn btn-alt btn-primary mt"
|
||||||
onclick="resetMedia('banner')"
|
onclick="resetMedia('banner')"
|
||||||
><?=ucfirst(lang('reset'))?></button>
|
><?=ucfirst(lang('reset'))?></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||||
<?php /* vi: syntax=php */ ?>
|
<?php /* vi: syntax=php */ ?>
|
||||||
<footer>
|
<footer id="footer">
|
||||||
<?=ucfirst(lang('copyright'))?> | <a href="https://freya.cat">freya.cat</a>
|
<?=ucfirst(lang('copyright'))?> | <a href="https://freya.cat">freya.cat</a>
|
||||||
</footer>
|
</footer>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -2,16 +2,16 @@
|
||||||
<?php /* vim: syntax=php */ ?>
|
<?php /* vim: syntax=php */ ?>
|
||||||
<?php
|
<?php
|
||||||
$self = $this->main->user();
|
$self = $this->main->user();
|
||||||
$this->view('header_empty', $data);
|
$this->view('head', $data);
|
||||||
?>
|
?>
|
||||||
<header class="nav">
|
<header id="header">
|
||||||
<div class="nav-left">
|
<div class="left">
|
||||||
<span class="logo">xssbook</span>
|
<span class="logo">xssbook</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-center" :class="{hidden: !visible}">
|
<div class="center" :class="{hidden: !visible}">
|
||||||
<a
|
<a
|
||||||
id="action-home"
|
id="action-home"
|
||||||
class="btn<?=$this->main->info['app'] == 'home' ? ' btn-blue btn-border' : ''?>"
|
class="btn <?=$this->main->info['app'] == 'home' ? 'btn-primary btn-border' : ''?>"
|
||||||
href="/home"
|
href="/home"
|
||||||
title="<?=ucfirst(lang('action_home_tip'))?>"
|
title="<?=ucfirst(lang('action_home_tip'))?>"
|
||||||
>
|
>
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
id="action-people"
|
id="action-people"
|
||||||
class="btn<?=$this->main->info['app'] == 'people' ? ' btn-blue btn-border' : ''?>"
|
class="btn <?=$this->main->info['app'] == 'people' ? 'btn-primary btn-border' : ''?>"
|
||||||
href="/people"
|
href="/people"
|
||||||
title="<?=ucfirst(lang('action_people_tip'))?>"
|
title="<?=ucfirst(lang('action_people_tip'))?>"
|
||||||
>
|
>
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
</a>
|
</a>
|
||||||
<!--a
|
<!--a
|
||||||
id="action-chat"
|
id="action-chat"
|
||||||
class="btn<?=$this->main->info['app'] == 'chat' ? ' btn-blue btn-border' : ''?>"
|
class="btn <?=$this->main->info['app'] == 'chat' ? 'btn-primary btn-border' : ''?>"
|
||||||
href="/chat"
|
href="/chat"
|
||||||
title="<?=lang('action_chat_tip')?>"
|
title="<?=lang('action_chat_tip')?>"
|
||||||
>
|
>
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
<span><?=lang('action_chat_text')?></span>
|
<span><?=lang('action_chat_text')?></span>
|
||||||
</a-->
|
</a-->
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-right">
|
<div class="right">
|
||||||
<button
|
<button
|
||||||
id="action-hamburger"
|
id="action-hamburger"
|
||||||
title="<?=ucfirst(lang('action_hamburger_tip'))?>"
|
title="<?=ucfirst(lang('action_hamburger_tip'))?>"
|
||||||
|
|
@ -55,11 +55,11 @@
|
||||||
</script>
|
</script>
|
||||||
<?=pfp($self, FALSE, 'toggleUserMenu()')?>
|
<?=pfp($self, FALSE, 'toggleUserMenu()')?>
|
||||||
<div class="card col hidden" id="user-menu">
|
<div class="card col hidden" id="user-menu">
|
||||||
<span class="row mr" id="user-menu-header">
|
<span class="user-menu-header row mr">
|
||||||
<?=pfp($self, FALSE)?>
|
<?=pfp($self, FALSE)?>
|
||||||
<span class="col">
|
<span class="col">
|
||||||
<strong><?=$this->format_model->name($self)?></strong>
|
<strong><?=$this->format_model->name($self)?></strong>
|
||||||
<span class="dim"><?=$self['username']?></span>
|
<span class="subtext"><?=$self['username']?></span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
@ -99,14 +99,14 @@
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
$('#action-hamburger').on('click', function() {
|
$('#action-hamburger').on('click', function() {
|
||||||
let menu = $('.nav-center');
|
let menu = $('.center');
|
||||||
menu.toggleClass('visible');
|
menu.toggleClass('visible');
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</header>
|
</header>
|
||||||
<script>
|
<script>
|
||||||
userMenu = $('#user-menu');
|
userMenu = $('#user-menu');
|
||||||
var nav = $('.nav');
|
var nav = $('header#header');
|
||||||
document.onclick = function(event) {
|
document.onclick = function(event) {
|
||||||
let outside = !(nav[0].contains(event.target));
|
let outside = !(nav[0].contains(event.target));
|
||||||
if (outside) {
|
if (outside) {
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@
|
||||||
<span class="logo">xssbook</span>
|
<span class="logo">xssbook</span>
|
||||||
<span class="mb"><?=ucfirst(lang('version'))?></span>
|
<span class="mb"><?=ucfirst(lang('version'))?></span>
|
||||||
<span><?=ucfirst(lang('copyright'))?></span>
|
<span><?=ucfirst(lang('copyright'))?></span>
|
||||||
<a class="btn btn-blue mt" href="https://g.freya.cat/freya/xssbook2">Source Code</a>
|
<a class="btn btn-primary mt" href="https://g.freya.cat/freya/xssbook2">Source Code</a>
|
||||||
<p>For reports of abuse, please email <a class="btn-blue" href="mailto:contact@freyacat.org">contact@freyacat.org</a></p>
|
<p>For reports of abuse, please email <a class="btn-primary" href="mailto:contact@freyacat.org">contact@freyacat.org</a></p>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
#about-modal-body {
|
#about-modal-body {
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<?=pfp($user)?>
|
<?=pfp($user)?>
|
||||||
<div class="col ml">
|
<div class="col ml">
|
||||||
<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
|
<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
|
||||||
<span class="dim"><?=ucfirst(lang('now'))?></span>
|
<span class="subtext"><?=ucfirst(lang('now'))?></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<textarea
|
<textarea
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<?=ilang('action_submit',
|
<?=ilang('action_submit',
|
||||||
id: 'new-post-submit',
|
id: 'new-post-submit',
|
||||||
class: 'btn btn-wide btn-submit',
|
class: 'btn btn-submit btn-alt grow',
|
||||||
attrs: array('type' => 'submit'),
|
attrs: array('type' => 'submit'),
|
||||||
button: TRUE
|
button: TRUE
|
||||||
)?>
|
)?>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<?=ucwords(lang('ph_basic_info'))?>
|
<?=ucwords(lang('ph_basic_info'))?>
|
||||||
</label>
|
</label>
|
||||||
<div class="row mt">
|
<div class="row mt">
|
||||||
<div class="rel btn-wide">
|
<div class="rel grow">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="first_name"
|
name="first_name"
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<?=ucwords(lang('ph_first_name'))?>
|
<?=ucwords(lang('ph_first_name'))?>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="rel ml btn-wide">
|
<div class="rel ml grow">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="last_name"
|
name="last_name"
|
||||||
|
|
@ -123,7 +123,7 @@
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<?=ilang('action_register',
|
<?=ilang('action_register',
|
||||||
id: 'register-submit',
|
id: 'register-submit',
|
||||||
class: 'btn btn-wide btn-success',
|
class: 'btn grow btn-success',
|
||||||
attrs: array('type' => 'submit'),
|
attrs: array('type' => 'submit'),
|
||||||
button: TRUE
|
button: TRUE
|
||||||
)?>
|
)?>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<div class="ml col sub-card">
|
<div class="ml col sub-card">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<strong><?=$format_model->name($user)?></strong>
|
<strong><?=$format_model->name($user)?></strong>
|
||||||
<span class="dim ml"><?=$this->main->date($comment['created'])?></span>
|
<span class="subtext ml"><?=$this->main->date($comment['created'])?></span>
|
||||||
</div>
|
</div>
|
||||||
<?=$comment['content']?>
|
<?=$comment['content']?>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,10 @@
|
||||||
<div class="modal-container">
|
<div class="modal-container">
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
<div class="modal-header row">
|
<div class="modal-header row">
|
||||||
<?=$title?>
|
<span class="modal-title"><?=$title?></span>
|
||||||
<?=ilang(
|
<?=ilang(
|
||||||
'action_modal_close',
|
'action_modal_close',
|
||||||
class: 'float-right btn btn-action modal-close',
|
class: 'btn btn-action modal-close',
|
||||||
)?>
|
)?>
|
||||||
</div>
|
</div>
|
||||||
<?php $this->view('modal/' . $content) ?>
|
<?php $this->view('modal/' . $content) ?>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<?=pfp($user)?>
|
<?=pfp($user)?>
|
||||||
<div class="col ml">
|
<div class="col ml">
|
||||||
<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
|
<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
|
||||||
<span class="dim"><?=$this->main->date($post['created'])?></span>
|
<span class="subtext"><?=$this->main->date($post['created'])?></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
</p>
|
</p>
|
||||||
<?php
|
<?php
|
||||||
$self = $this->main->user();
|
$self = $this->main->user();
|
||||||
$liked = $post['like_id'] ? 'btn-blue' : '';
|
$liked = $post['like_id'] ? 'btn-primary' : '';
|
||||||
$post_attrs = array(
|
$post_attrs = array(
|
||||||
'postId' => $post['id']
|
'postId' => $post['id']
|
||||||
);
|
);
|
||||||
|
|
@ -21,15 +21,15 @@
|
||||||
$post_attrs['likeId'] = $post['like_id'];
|
$post_attrs['likeId'] = $post['like_id'];
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<span class="likes dim"><span class="count"><?=$post['like_count']?></span><?=' ' . ucfirst(lang('likes'))?></span>
|
<span class="likes subtext"><span class="count"><?=$post['like_count']?></span><?=' ' . ucfirst(lang('likes'))?></span>
|
||||||
<?php if ($self): ?>
|
<?php if ($self): ?>
|
||||||
<hr>
|
<hr>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<?=ilang('action_like',
|
<?=ilang('action_like',
|
||||||
class: 'btn btn-wide action-like ' . $liked,
|
class: 'btn grow action-like ' . $liked,
|
||||||
attrs: $post_attrs
|
attrs: $post_attrs
|
||||||
)?>
|
)?>
|
||||||
<?=ilang('action_comment', class: 'btn btn-wide action-comment',
|
<?=ilang('action_comment', class: 'btn grow action-comment',
|
||||||
click: '$(\'#action-new-comment-' . $post['id'] . '\').focus()'
|
click: '$(\'#action-new-comment-' . $post['id'] . '\').focus()'
|
||||||
)?>
|
)?>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
|
|
||||||
if ($loaded >= $page_size && $page_size < $total) {
|
if ($loaded >= $page_size && $page_size < $total) {
|
||||||
ilang('action_load_comments',
|
ilang('action_load_comments',
|
||||||
class: 'action-load-comments btn btn-line mt',
|
class: 'action-load-comments btn btn-blend mt',
|
||||||
attrs: array(
|
attrs: array(
|
||||||
'postId' => $post['id'],
|
'postId' => $post['id'],
|
||||||
'loaded' => $loaded,
|
'loaded' => $loaded,
|
||||||
|
|
@ -71,7 +71,7 @@
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
id="action-new-comment-<?=$post['id']?>"
|
id="action-new-comment-<?=$post['id']?>"
|
||||||
class="action-new-comment btn btn-wide btn-alt"
|
class="action-new-comment btn grow btn-alt"
|
||||||
postId="<?=$post['id']?>"
|
postId="<?=$post['id']?>"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
type="text"
|
type="text"
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
if ($loaded >= $page_size && $page_size < $total) {
|
if ($loaded >= $page_size && $page_size < $total) {
|
||||||
ilang('action_load_posts',
|
ilang('action_load_posts',
|
||||||
id: 'action-load-posts',
|
id: 'action-load-posts',
|
||||||
class: 'btn btn-line btn-wide mb mt',
|
class: 'btn btn-blend grow mb mt',
|
||||||
attrs: array(
|
attrs: array(
|
||||||
'loaded' => $loaded,
|
'loaded' => $loaded,
|
||||||
'pageSize' => $page_size,
|
'pageSize' => $page_size,
|
||||||
|
|
|
||||||
|
|
@ -9,3 +9,4 @@ $routes['profile'] = 'apps/profile';
|
||||||
$routes['settings'] = 'apps/settings';
|
$routes['settings'] = 'apps/settings';
|
||||||
|
|
||||||
$routes[''] = '_index';
|
$routes[''] = '_index';
|
||||||
|
$routes['manifest.json'] = '_meta/manifest';
|
||||||
|
|
|
||||||
|
|
@ -10,9 +10,9 @@ function image(
|
||||||
$mime = NULL,
|
$mime = NULL,
|
||||||
): string {
|
): string {
|
||||||
if ($class) {
|
if ($class) {
|
||||||
$class = 'image-loading ' . $class;
|
$class = 'image loading ' . $class;
|
||||||
} else {
|
} else {
|
||||||
$class = 'image-loading';
|
$class = 'image loading';
|
||||||
}
|
}
|
||||||
|
|
||||||
$content = '';
|
$content = '';
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<?php /* Copyright (c) 2024 Freya Murphy */
|
<?php /* Copyright (c) 2024 Freya Murphy */
|
||||||
|
|
||||||
$lang['version'] = 'Version 2.0.7';
|
$lang['version'] = 'Version 2.0.8';
|
||||||
$lang['copyright'] = 'Freya Murphy © 2024';
|
$lang['copyright'] = 'Freya Murphy © 2024';
|
||||||
|
|
||||||
// Navigation Bar Lang
|
// Navigation Bar Lang
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue