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
|
||||
/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) {
|
||||
me.parentElement.classList.remove('image-loading');
|
||||
me.parentElement.classList.add('image-loaded');
|
||||
me.parentElement.classList.remove('loading');
|
||||
me.parentElement.classList.add('loaded');
|
||||
}
|
||||
|
||||
var onImgError = function(me) {
|
||||
me.parentElement.classList.remove('image-loading');
|
||||
me.parentElement.classList.add('image-loaded');
|
||||
me.parentElement.classList.remove('loading');
|
||||
me.parentElement.classList.add('loaded');
|
||||
me.remove();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ $$('.action-new-comment-form').on('submit', function(e) {
|
|||
|
||||
$$('.action-like').on('click', function() {
|
||||
let me = $(this);
|
||||
let liked = me.hasClass('btn-blue');
|
||||
let liked = me.hasClass('btn-primary');
|
||||
let like_id = me.attr('likeId');
|
||||
let post_id = me.attr('postId');
|
||||
|
||||
|
|
@ -119,15 +119,15 @@ $$('.action-like').on('click', function() {
|
|||
}
|
||||
|
||||
const onPatch = () => {
|
||||
let liked = me.hasClass('btn-blue');
|
||||
me.toggleClass('btn-blue');
|
||||
let liked = me.hasClass('btn-primary');
|
||||
me.toggleClass('btn-primary');
|
||||
updateLiked(!liked);
|
||||
}
|
||||
|
||||
const onPost = (data) => {
|
||||
let liked = me.hasClass('btn-blue');
|
||||
let liked = me.hasClass('btn-primary');
|
||||
me.attr('likeId', data[0].id + '');
|
||||
me.toggleClass('btn-blue');
|
||||
me.toggleClass('btn-primary');
|
||||
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 {
|
||||
padding-top: 20rem;
|
||||
padding-bottom: 5rem;
|
||||
|
|
@ -13,7 +16,7 @@
|
|||
}
|
||||
|
||||
.branding h1 {
|
||||
color: var(--blue);
|
||||
color: $blue;
|
||||
font-family: facebook;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
|
@ -45,3 +48,4 @@
|
|||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -16,6 +19,6 @@
|
|||
height: 10rem;
|
||||
flex-grow: 1;
|
||||
background-color: transparent;
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
color: $text;
|
||||
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 {
|
||||
display: flex;
|
||||
|
|
@ -69,12 +69,12 @@ function clear_all() {
|
|||
extract($GLOBALS);
|
||||
$psql->beginTransaction();
|
||||
$psql->exec(
|
||||
'DELETE FROM admin.user;
|
||||
DELETE FROM admin.post;
|
||||
DELETE FROM admin.comment;
|
||||
DELETE FROM admin.like;
|
||||
DELETE FROM admin.follow;
|
||||
DELETE FROM admin.user_media;'
|
||||
'DELETE FROM xssbook.user;
|
||||
DELETE FROM xssbook.post;
|
||||
DELETE FROM xssbook.comment;
|
||||
DELETE FROM xssbook.like;
|
||||
DELETE FROM xssbook.follow;
|
||||
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;'
|
||||
);
|
||||
$submit = $psql->prepare(
|
||||
'INSERT INTO admin.user
|
||||
'INSERT INTO xssbook.user
|
||||
(id, username, password, first_name, last_name, email, gender, birth_date, created)
|
||||
VALUES
|
||||
(?, ?, ?, ?, ?, ?, ?, ?, to_timestamp(?));'
|
||||
|
|
@ -125,7 +125,7 @@ function migrate_posts() {
|
|||
'SELECT post_id, user_id, content, date FROM posts;'
|
||||
);
|
||||
$submit = $psql->prepare(
|
||||
'INSERT INTO admin.post
|
||||
'INSERT INTO xssbook.post
|
||||
(id, user_id, content, created)
|
||||
VALUES
|
||||
(?, ?, ?, to_timestamp(?));'
|
||||
|
|
@ -154,7 +154,7 @@ function migrate_comments() {
|
|||
'SELECT comment_id, user_id, post_id, content, date FROM comments;'
|
||||
);
|
||||
$submit = $psql->prepare(
|
||||
'INSERT INTO admin.comment
|
||||
'INSERT INTO xssbook.comment
|
||||
(id, user_id, post_id, content, created)
|
||||
VALUES
|
||||
(?, ?, ?, ?, to_timestamp(?));'
|
||||
|
|
@ -184,7 +184,7 @@ function migrate_likes() {
|
|||
'SELECT user_id, post_id FROM likes;'
|
||||
);
|
||||
$submit = $psql->prepare(
|
||||
'INSERT INTO admin.like
|
||||
'INSERT INTO xssbook.like
|
||||
(user_id, post_id)
|
||||
VALUES
|
||||
(?, ?);'
|
||||
|
|
@ -210,7 +210,7 @@ function migrate_follow() {
|
|||
'SELECT follower_id, followee_id FROM friends;'
|
||||
);
|
||||
$submit = $psql->prepare(
|
||||
'INSERT INTO admin.follow
|
||||
'INSERT INTO xssbook.follow
|
||||
(follower_id, followee_id)
|
||||
VALUES
|
||||
(?, ?);'
|
||||
|
|
@ -233,7 +233,7 @@ function migrate_user_media($type) {
|
|||
|
||||
// load queries
|
||||
$submit = $psql->prepare(
|
||||
'INSERT INTO admin.user_media
|
||||
'INSERT INTO xssbook.user_media
|
||||
(user_id, content, mime, type)
|
||||
VALUES
|
||||
(?, decode(?, \'base64\'), ?, ?);'
|
||||
|
|
@ -273,7 +273,7 @@ function migrate_seq() {
|
|||
$tables = array('user', 'post', 'like', 'comment', 'follow', 'user_media');
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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();
|
||||
$data = $this->auth_model->get_data();
|
||||
$this->view('header_empty', $data);
|
||||
$this->view('head', $data);
|
||||
$this->view('apps/auth/login', $data);
|
||||
$this->view('footer', $data);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||
<?php /* vi: syntax=php */ ?>
|
||||
<div id="main-content">
|
||||
<main id="main">
|
||||
<div class="branding col">
|
||||
<h1>xssbook</h1>
|
||||
<span><?=ucfirst(lang('login_branding'))?></span>
|
||||
|
|
@ -31,18 +31,18 @@
|
|||
</label>
|
||||
</div>
|
||||
<?=ilang('action_login',
|
||||
class: 'btn btn-submit btn-wide',
|
||||
class: 'btn btn-submit grow',
|
||||
button: TRUE,
|
||||
attrs: array('type' => 'submit')
|
||||
)?>
|
||||
<?=ilang('action_forgot_passwd',
|
||||
class: 'btn btn-line btn-blue btn-wide mt'
|
||||
class: 'btn btn-blend btn-primary grow mt'
|
||||
)?>
|
||||
</form>
|
||||
<hr>
|
||||
<?=ilang('action_create_account',
|
||||
id: 'action-register',
|
||||
class: 'btn btn-success btn-wide',
|
||||
class: 'btn btn-success grow',
|
||||
button: TRUE,
|
||||
attrs: array('type' => 'submit')
|
||||
)?>
|
||||
|
|
@ -84,4 +84,4 @@
|
|||
});
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||
<?php /* vi: syntax=php */ ?>
|
||||
<div id="main-content">
|
||||
<main id="main">
|
||||
<h1><?=$title?></h1>
|
||||
<span><?=ucfirst($msg)?></span>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||
<?php /* vi: syntax=php */ ?>
|
||||
<div id="main-content" class="container">
|
||||
<main id="main" class="container">
|
||||
<?php if ($self): ?>
|
||||
<div id="new-post" class="card">
|
||||
<div class="row grow">
|
||||
<?=pfp($self)?>
|
||||
<a
|
||||
id="action-new-post"
|
||||
class="btn btn-alt btn-wide ml"
|
||||
class="btn btn-alt grow ml"
|
||||
autocomplete="off"
|
||||
aria-label="<?=ucfirst(lang('action_new_post_tip'))?>"
|
||||
>
|
||||
|
|
@ -24,4 +24,4 @@
|
|||
</div>
|
||||
<?php endif; ?>
|
||||
<?php $this->post_controller->index(); ?>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
<div class="col">
|
||||
<?=pfp($user, FALSE)?>
|
||||
<div class="col ml">
|
||||
<strong class=""><?=$this->format_model->name($user)?></strong>
|
||||
<span class="dim"><?=$user['username']?></span>
|
||||
<span class="name"><?=$this->format_model->name($user)?></span>
|
||||
<span class="subtext"><?=$user['username']?></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||
<?php /* vi: syntax=php */ ?>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||
<?php /* vi: syntax=php */ ?>
|
||||
<div id="main-content" class="col">
|
||||
<main id="main">
|
||||
<h1 class="title"><?=ucfirst(lang('title'))?></h1>
|
||||
<h3 class="desc"><?=ucfirst(lang('desc'))?></h3>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<?php if ($loaded >= $page_size && $page_size < $total): ?>
|
||||
<?=ilang('action_load_users',
|
||||
id: 'action-load-users',
|
||||
class: 'btn btn-line btn-wide mb',
|
||||
class: 'btn btn-blend grow mb',
|
||||
attrs: array(
|
||||
'loaded' => $loaded,
|
||||
'pageSize' => $page_size,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||
<?php /* vi: syntax=php */ ?>
|
||||
<div id="main-content">
|
||||
<main id="main">
|
||||
<div id="profile-header-container">
|
||||
<div id="profile-header" class="col">
|
||||
<?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner', mime: $user['banner_mime'])?>
|
||||
|
|
@ -12,13 +12,13 @@
|
|||
<div class="row grow">
|
||||
<div class="col mb">
|
||||
<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>
|
||||
<?php if (
|
||||
$this->main->session &&
|
||||
(!isset($self) || $self['id'] != $user['id'])
|
||||
): ?>
|
||||
<div id="follow-container">
|
||||
<div class="follow">
|
||||
<?=ilang(
|
||||
'action_follow',
|
||||
id: 'action-follow-follow',
|
||||
|
|
@ -36,14 +36,14 @@
|
|||
<?=ilang(
|
||||
'action_following',
|
||||
id: 'action-follow-following',
|
||||
class: 'btn btn-alt btn-blue',
|
||||
class: 'btn btn-alt btn-primary',
|
||||
style: ($following && !$followed) ? '' : 'display: none',
|
||||
sub: [$user['first_name']]
|
||||
)?>
|
||||
<?=ilang(
|
||||
'action_friends',
|
||||
id: 'action-follow-friends',
|
||||
class: 'btn btn-alt btn-blue',
|
||||
class: 'btn btn-alt btn-primary',
|
||||
style: ($following && $followed) ? '' : 'display: none',
|
||||
sub: [$user['first_name']]
|
||||
)?>
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
<?php if(strlen($user['profile_bio']) > 0): ?>
|
||||
<br>
|
||||
<strong><?=ucfirst(lang('bio'))?></strong>
|
||||
<span class="dim"><?=$user['profile_bio']?></span>
|
||||
<span class="subtext"><?=$user['profile_bio']?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
<div class="row options">
|
||||
<?=ilang('action_posts',
|
||||
sub: [$user['first_name']],
|
||||
class: 'btn btn-blue btn-border',
|
||||
class: 'btn btn-primary btn-border',
|
||||
id: 'action-posts'
|
||||
)?>
|
||||
<?=ilang('action_about',
|
||||
|
|
@ -231,13 +231,13 @@
|
|||
let tabs = {};
|
||||
|
||||
const disableTab = (tab) => {
|
||||
tab.btn.removeClass('btn-blue');
|
||||
tab.btn.removeClass('btn-primary');
|
||||
tab.btn.removeClass('btn-border');
|
||||
tab.tab.css('display', 'none');
|
||||
};
|
||||
|
||||
const enableTab = (tab) => {
|
||||
tab.btn.addClass('btn-blue');
|
||||
tab.btn.addClass('btn-primary');
|
||||
tab.btn.addClass('btn-border');
|
||||
tab.tab.css('display', '');
|
||||
};
|
||||
|
|
@ -266,4 +266,4 @@
|
|||
loadTab('followers');
|
||||
loadTab('following');
|
||||
</script>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ function resetMedia(media_type) {
|
|||
}
|
||||
</script>
|
||||
|
||||
<div id="main-content">
|
||||
<main id="main">
|
||||
<div id="settings" class="card">
|
||||
<h1><?=ucfirst(lang('title'))?></h1>
|
||||
<hr class="mt">
|
||||
|
|
@ -155,7 +155,7 @@ function resetMedia(media_type) {
|
|||
</label>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-wide btn-submit"
|
||||
class="btn grow btn-alt btn-submit"
|
||||
style="flex: 0; height: fit-content;"
|
||||
><?=lang('update')?></button>
|
||||
</form>
|
||||
|
|
@ -170,11 +170,11 @@ function resetMedia(media_type) {
|
|||
)?>
|
||||
<div class="col ml">
|
||||
<button
|
||||
class="btn btn-alt btn-blue"
|
||||
class="btn btn-alt btn-primary"
|
||||
onclick="updateMedia('avatar')"
|
||||
><?=ucfirst(lang('update'))?></button>
|
||||
<button
|
||||
class="btn btn-alt btn-blue mt"
|
||||
class="btn btn-alt btn-primary mt"
|
||||
onclick="resetMedia('avatar')"
|
||||
><?=ucfirst(lang('reset'))?></button>
|
||||
</div>
|
||||
|
|
@ -187,14 +187,14 @@ function resetMedia(media_type) {
|
|||
)?>
|
||||
<div class="col ml">
|
||||
<button
|
||||
class="btn btn-alt btn-blue"
|
||||
class="btn btn-alt btn-primary"
|
||||
onclick="updateMedia('banner')"
|
||||
><?=ucfirst(lang('update'))?></button>
|
||||
<button
|
||||
class="btn btn-alt btn-blue mt"
|
||||
class="btn btn-alt btn-primary mt"
|
||||
onclick="resetMedia('banner')"
|
||||
><?=ucfirst(lang('reset'))?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||
<?php /* vi: syntax=php */ ?>
|
||||
<footer>
|
||||
<footer id="footer">
|
||||
<?=ucfirst(lang('copyright'))?> | <a href="https://freya.cat">freya.cat</a>
|
||||
</footer>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<?php /* vim: syntax=php */ ?>
|
||||
<?php
|
||||
$self = $this->main->user();
|
||||
$this->view('header_empty', $data);
|
||||
$this->view('head', $data);
|
||||
?>
|
||||
<header class="nav">
|
||||
<div class="nav-left">
|
||||
<header id="header">
|
||||
<div class="left">
|
||||
<span class="logo">xssbook</span>
|
||||
</div>
|
||||
<div class="nav-center" :class="{hidden: !visible}">
|
||||
<div class="center" :class="{hidden: !visible}">
|
||||
<a
|
||||
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"
|
||||
title="<?=ucfirst(lang('action_home_tip'))?>"
|
||||
>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</a>
|
||||
<a
|
||||
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"
|
||||
title="<?=ucfirst(lang('action_people_tip'))?>"
|
||||
>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</a>
|
||||
<!--a
|
||||
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"
|
||||
title="<?=lang('action_chat_tip')?>"
|
||||
>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<span><?=lang('action_chat_text')?></span>
|
||||
</a-->
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="right">
|
||||
<button
|
||||
id="action-hamburger"
|
||||
title="<?=ucfirst(lang('action_hamburger_tip'))?>"
|
||||
|
|
@ -55,11 +55,11 @@
|
|||
</script>
|
||||
<?=pfp($self, FALSE, 'toggleUserMenu()')?>
|
||||
<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)?>
|
||||
<span class="col">
|
||||
<strong><?=$this->format_model->name($self)?></strong>
|
||||
<span class="dim"><?=$self['username']?></span>
|
||||
<span class="subtext"><?=$self['username']?></span>
|
||||
</span>
|
||||
</span>
|
||||
<hr>
|
||||
|
|
@ -99,14 +99,14 @@
|
|||
});
|
||||
})
|
||||
$('#action-hamburger').on('click', function() {
|
||||
let menu = $('.nav-center');
|
||||
let menu = $('.center');
|
||||
menu.toggleClass('visible');
|
||||
});
|
||||
</script>
|
||||
</header>
|
||||
<script>
|
||||
userMenu = $('#user-menu');
|
||||
var nav = $('.nav');
|
||||
var nav = $('header#header');
|
||||
document.onclick = function(event) {
|
||||
let outside = !(nav[0].contains(event.target));
|
||||
if (outside) {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<span class="logo">xssbook</span>
|
||||
<span class="mb"><?=ucfirst(lang('version'))?></span>
|
||||
<span><?=ucfirst(lang('copyright'))?></span>
|
||||
<a class="btn btn-blue 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>
|
||||
<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-primary" href="mailto:contact@freyacat.org">contact@freyacat.org</a></p>
|
||||
</div>
|
||||
<style>
|
||||
#about-modal-body {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<?=pfp($user)?>
|
||||
<div class="col ml">
|
||||
<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
|
||||
<span class="dim"><?=ucfirst(lang('now'))?></span>
|
||||
<span class="subtext"><?=ucfirst(lang('now'))?></span>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="modal-footer">
|
||||
<?=ilang('action_submit',
|
||||
id: 'new-post-submit',
|
||||
class: 'btn btn-wide btn-submit',
|
||||
class: 'btn btn-submit btn-alt grow',
|
||||
attrs: array('type' => 'submit'),
|
||||
button: TRUE
|
||||
)?>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<?=ucwords(lang('ph_basic_info'))?>
|
||||
</label>
|
||||
<div class="row mt">
|
||||
<div class="rel btn-wide">
|
||||
<div class="rel grow">
|
||||
<input
|
||||
type="text"
|
||||
name="first_name"
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<?=ucwords(lang('ph_first_name'))?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="rel ml btn-wide">
|
||||
<div class="rel ml grow">
|
||||
<input
|
||||
type="text"
|
||||
name="last_name"
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
<div class="modal-footer">
|
||||
<?=ilang('action_register',
|
||||
id: 'register-submit',
|
||||
class: 'btn btn-wide btn-success',
|
||||
class: 'btn grow btn-success',
|
||||
attrs: array('type' => 'submit'),
|
||||
button: TRUE
|
||||
)?>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="ml col sub-card">
|
||||
<div class="row">
|
||||
<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>
|
||||
<?=$comment['content']?>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
<div class="modal-container">
|
||||
<div class="modal">
|
||||
<div class="modal-header row">
|
||||
<?=$title?>
|
||||
<span class="modal-title"><?=$title?></span>
|
||||
<?=ilang(
|
||||
'action_modal_close',
|
||||
class: 'float-right btn btn-action modal-close',
|
||||
class: 'btn btn-action modal-close',
|
||||
)?>
|
||||
</div>
|
||||
<?php $this->view('modal/' . $content) ?>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<?=pfp($user)?>
|
||||
<div class="col ml">
|
||||
<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>
|
||||
<p>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</p>
|
||||
<?php
|
||||
$self = $this->main->user();
|
||||
$liked = $post['like_id'] ? 'btn-blue' : '';
|
||||
$liked = $post['like_id'] ? 'btn-primary' : '';
|
||||
$post_attrs = array(
|
||||
'postId' => $post['id']
|
||||
);
|
||||
|
|
@ -21,15 +21,15 @@
|
|||
$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): ?>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<?=ilang('action_like',
|
||||
class: 'btn btn-wide action-like ' . $liked,
|
||||
class: 'btn grow action-like ' . $liked,
|
||||
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()'
|
||||
)?>
|
||||
</div>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
if ($loaded >= $page_size && $page_size < $total) {
|
||||
ilang('action_load_comments',
|
||||
class: 'action-load-comments btn btn-line mt',
|
||||
class: 'action-load-comments btn btn-blend mt',
|
||||
attrs: array(
|
||||
'postId' => $post['id'],
|
||||
'loaded' => $loaded,
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
>
|
||||
<input
|
||||
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']?>"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
if ($loaded >= $page_size && $page_size < $total) {
|
||||
ilang('action_load_posts',
|
||||
id: 'action-load-posts',
|
||||
class: 'btn btn-line btn-wide mb mt',
|
||||
class: 'btn btn-blend grow mb mt',
|
||||
attrs: array(
|
||||
'loaded' => $loaded,
|
||||
'pageSize' => $page_size,
|
||||
|
|
|
|||
|
|
@ -9,3 +9,4 @@ $routes['profile'] = 'apps/profile';
|
|||
$routes['settings'] = 'apps/settings';
|
||||
|
||||
$routes[''] = '_index';
|
||||
$routes['manifest.json'] = '_meta/manifest';
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ function image(
|
|||
$mime = NULL,
|
||||
): string {
|
||||
if ($class) {
|
||||
$class = 'image-loading ' . $class;
|
||||
$class = 'image loading ' . $class;
|
||||
} else {
|
||||
$class = 'image-loading';
|
||||
$class = 'image loading';
|
||||
}
|
||||
|
||||
$content = '';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php /* Copyright (c) 2024 Freya Murphy */
|
||||
|
||||
$lang['version'] = 'Version 2.0.7';
|
||||
$lang['version'] = 'Version 2.0.8';
|
||||
$lang['copyright'] = 'Freya Murphy © 2024';
|
||||
|
||||
// Navigation Bar Lang
|
||||
|
|
|
|||
Loading…
Reference in a new issue