diff options
Diffstat (limited to '')
60 files changed, 1027 insertions, 982 deletions
diff --git a/src/public/css/common.css b/src/public/css/common.css deleted file mode 100644 index b941b1b..0000000 --- a/src/public/css/common.css +++ /dev/null @@ -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; -} diff --git a/src/public/css/error.css b/src/public/css/error.css deleted file mode 100644 index 5567cd5..0000000 --- a/src/public/css/error.css +++ /dev/null @@ -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; -} diff --git a/src/public/css/people.css b/src/public/css/people.css deleted file mode 100644 index d36e5e8..0000000 --- a/src/public/css/people.css +++ /dev/null @@ -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); -} diff --git a/src/public/css/post.css b/src/public/css/post.css deleted file mode 100644 index 254e82b..0000000 --- a/src/public/css/post.css +++ /dev/null @@ -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; -} diff --git a/src/public/css/profile.css b/src/public/css/profile.css deleted file mode 100644 index 0c8dd78..0000000 --- a/src/public/css/profile.css +++ /dev/null @@ -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; -} diff --git a/src/public/font/facebook.otf b/src/public/font/Facebook.otf Binary files differindex 97d5c6f..97d5c6f 100644 --- a/src/public/font/facebook.otf +++ b/src/public/font/Facebook.otf diff --git a/src/public/font/Facebook.ttf b/src/public/font/Facebook.ttf Binary files differnew file mode 100644 index 0000000..ad1183a --- /dev/null +++ b/src/public/font/Facebook.ttf diff --git a/src/public/font/Facebook.woff b/src/public/font/Facebook.woff Binary files differnew file mode 100644 index 0000000..80f9b1d --- /dev/null +++ b/src/public/font/Facebook.woff diff --git a/src/public/font/Facebook.woff2 b/src/public/font/Facebook.woff2 Binary files differnew file mode 100644 index 0000000..fcfea6c --- /dev/null +++ b/src/public/font/Facebook.woff2 diff --git a/src/public/font/helvetica-neue.otf b/src/public/font/Helvetica Neue.otf Binary files differindex 7a08ea0..7a08ea0 100644 --- a/src/public/font/helvetica-neue.otf +++ b/src/public/font/Helvetica Neue.otf diff --git a/src/public/font/Helvetica Neue.ttf b/src/public/font/Helvetica Neue.ttf Binary files differnew file mode 100644 index 0000000..90c5010 --- /dev/null +++ b/src/public/font/Helvetica Neue.ttf diff --git a/src/public/font/Helvetica Neue.woff b/src/public/font/Helvetica Neue.woff Binary files differnew file mode 100644 index 0000000..0d4e85f --- /dev/null +++ b/src/public/font/Helvetica Neue.woff diff --git a/src/public/font/Helvetica Neue.woff2 b/src/public/font/Helvetica Neue.woff2 Binary files differnew file mode 100644 index 0000000..c02d45d --- /dev/null +++ b/src/public/font/Helvetica Neue.woff2 diff --git a/src/public/font/Material Icons.otf b/src/public/font/Material Icons.otf Binary files differnew file mode 100644 index 0000000..844e52a --- /dev/null +++ b/src/public/font/Material Icons.otf diff --git a/src/public/font/material-icons.ttf b/src/public/font/Material Icons.ttf Binary files differindex 9d09b0f..9d09b0f 100644 --- a/src/public/font/material-icons.ttf +++ b/src/public/font/Material Icons.ttf diff --git a/src/public/font/Material Icons.woff b/src/public/font/Material Icons.woff Binary files differnew file mode 100644 index 0000000..02d9d8c --- /dev/null +++ b/src/public/font/Material Icons.woff diff --git a/src/public/font/Material Icons.woff2 b/src/public/font/Material Icons.woff2 Binary files differnew file mode 100644 index 0000000..4b3b9d4 --- /dev/null +++ b/src/public/font/Material Icons.woff2 diff --git a/src/public/font/sfpro.otf b/src/public/font/SF Pro.otf Binary files differindex 7042365..7042365 100644 --- a/src/public/font/sfpro.otf +++ b/src/public/font/SF Pro.otf diff --git a/src/public/font/SF Pro.ttf b/src/public/font/SF Pro.ttf Binary files differnew file mode 100644 index 0000000..aef375f --- /dev/null +++ b/src/public/font/SF Pro.ttf diff --git a/src/public/font/SF Pro.woff b/src/public/font/SF Pro.woff Binary files differnew file mode 100644 index 0000000..43226a3 --- /dev/null +++ b/src/public/font/SF Pro.woff diff --git a/src/public/font/SF Pro.woff2 b/src/public/font/SF Pro.woff2 Binary files differnew file mode 100644 index 0000000..5f7f7fb --- /dev/null +++ b/src/public/font/SF Pro.woff2 diff --git a/src/public/font/sfprobold.otf b/src/public/font/sfprobold.otf Binary files differdeleted file mode 100644 index 28fa5a4..0000000 --- a/src/public/font/sfprobold.otf +++ /dev/null diff --git a/src/public/icons/logo512.png b/src/public/icons/logo512.png Binary files differnew file mode 100644 index 0000000..2551beb --- /dev/null +++ b/src/public/icons/logo512.png diff --git a/src/public/js/lib.js b/src/public/js/lib.js index 4d08bab..e19f6c6 100644 --- a/src/public/js/lib.js +++ b/src/public/js/lib.js @@ -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(); } diff --git a/src/public/js/post.js b/src/public/js/post.js index 3c03bae..a7b05c6 100644 --- a/src/public/js/post.js +++ b/src/public/js/post.js @@ -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); } diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss new file mode 100644 index 0000000..bcb795d --- /dev/null +++ b/src/scss/_mixins.scss @@ -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; +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..3a81165 --- /dev/null +++ b/src/scss/_variables.scss @@ -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; diff --git a/src/public/css/auth.css b/src/scss/auth.scss index 2c31694..5f4fb91 100644 --- a/src/public/css/auth.css +++ b/src/scss/auth.scss @@ -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; } } + diff --git a/src/scss/common.scss b/src/scss/common.scss new file mode 100644 index 0000000..5a570f9 --- /dev/null +++ b/src/scss/common.scss @@ -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; +} diff --git a/src/scss/error.scss b/src/scss/error.scss new file mode 100644 index 0000000..0f4c0b1 --- /dev/null +++ b/src/scss/error.scss @@ -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; + } +} diff --git a/src/public/css/home.css b/src/scss/home.scss index 40e1063..e490f55 100644 --- a/src/public/css/home.css +++ b/src/scss/home.scss @@ -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; } diff --git a/src/scss/people.scss b/src/scss/people.scss new file mode 100644 index 0000000..4511aa8 --- /dev/null +++ b/src/scss/people.scss @@ -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; + } + } + +} diff --git a/src/scss/post.scss b/src/scss/post.scss new file mode 100644 index 0000000..8913be0 --- /dev/null +++ b/src/scss/post.scss @@ -0,0 +1,15 @@ +@import "./variables"; +@import "./mixins"; + +#post-container { + max-width: $content-width; + width: 100%; + + .post { + padding-bottom: 0; + } +} + +#new-post { + width: 100%; +} diff --git a/src/scss/profile.scss b/src/scss/profile.scss new file mode 100644 index 0000000..ec271e4 --- /dev/null +++ b/src/scss/profile.scss @@ -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; + } +} + diff --git a/src/public/css/settings.css b/src/scss/settings.scss index 8c3e9f7..2194bcc 100644 --- a/src/public/css/settings.css +++ b/src/scss/settings.scss @@ -1,3 +1,5 @@ +@import "./variables"; +@import "./mixins"; #main-content { display: flex; diff --git a/src/shim/shim.php b/src/shim/shim.php index 318d825..eb84412 100755 --- a/src/shim/shim.php +++ b/src/shim/shim.php @@ -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); } } diff --git a/src/web/_controller/_meta.php b/src/web/_controller/_meta.php new file mode 100644 index 0000000..bec3c65 --- /dev/null +++ b/src/web/_controller/_meta.php @@ -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); + } + +} + +?> diff --git a/src/web/_controller/apps/auth.php b/src/web/_controller/apps/auth.php index 6b30cc9..1df74da 100644 --- a/src/web/_controller/apps/auth.php +++ b/src/web/_controller/apps/auth.php @@ -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); } diff --git a/src/web/_views/apps/auth/login.php b/src/web/_views/apps/auth/login.php index c12af57..1741ac5 100644 --- a/src/web/_views/apps/auth/login.php +++ b/src/web/_views/apps/auth/login.php @@ -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> diff --git a/src/web/_views/apps/error/main.php b/src/web/_views/apps/error/main.php index 6d7e2ea..bcc6f90 100644 --- a/src/web/_views/apps/error/main.php +++ b/src/web/_views/apps/error/main.php @@ -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> diff --git a/src/web/_views/apps/home/main.php b/src/web/_views/apps/home/main.php index 6112173..05697b9 100644 --- a/src/web/_views/apps/home/main.php +++ b/src/web/_views/apps/home/main.php @@ -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> diff --git a/src/web/_views/apps/people/card.php b/src/web/_views/apps/people/card.php index eda49b5..93b1350 100644 --- a/src/web/_views/apps/people/card.php +++ b/src/web/_views/apps/people/card.php @@ -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> diff --git a/src/web/_views/apps/people/footer.php b/src/web/_views/apps/people/footer.php index ff93026..f18e031 100644 --- a/src/web/_views/apps/people/footer.php +++ b/src/web/_views/apps/people/footer.php @@ -1,3 +1,3 @@ <?php /* Copyright (c) 2024 Freya Murphy */ ?> <?php /* vi: syntax=php */ ?> -</div> +</main> diff --git a/src/web/_views/apps/people/header.php b/src/web/_views/apps/people/header.php index 1f3a025..b1099ec 100644 --- a/src/web/_views/apps/people/header.php +++ b/src/web/_views/apps/people/header.php @@ -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> diff --git a/src/web/_views/apps/people/main.php b/src/web/_views/apps/people/main.php index deec4c2..ec84ab9 100644 --- a/src/web/_views/apps/people/main.php +++ b/src/web/_views/apps/people/main.php @@ -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, diff --git a/src/web/_views/apps/profile/main.php b/src/web/_views/apps/profile/main.php index 6d25c98..e3ed26c 100644 --- a/src/web/_views/apps/profile/main.php +++ b/src/web/_views/apps/profile/main.php @@ -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> diff --git a/src/web/_views/apps/settings/main.php b/src/web/_views/apps/settings/main.php index dcfff92..02cbf57 100644 --- a/src/web/_views/apps/settings/main.php +++ b/src/web/_views/apps/settings/main.php @@ -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> diff --git a/src/web/_views/footer.php b/src/web/_views/footer.php index bc9b3a2..e26d4a5 100644 --- a/src/web/_views/footer.php +++ b/src/web/_views/footer.php @@ -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> diff --git a/src/web/_views/header_empty.php b/src/web/_views/head.php index cca43a1..cca43a1 100644 --- a/src/web/_views/header_empty.php +++ b/src/web/_views/head.php diff --git a/src/web/_views/header.php b/src/web/_views/header.php index 98fcf81..7315afb 100644 --- a/src/web/_views/header.php +++ b/src/web/_views/header.php @@ -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) { diff --git a/src/web/_views/modal/about.php b/src/web/_views/modal/about.php index d434908..55ea3f0 100644 --- a/src/web/_views/modal/about.php +++ b/src/web/_views/modal/about.php @@ -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 { diff --git a/src/web/_views/modal/new_post.php b/src/web/_views/modal/new_post.php index c9e9c7f..66e6561 100644 --- a/src/web/_views/modal/new_post.php +++ b/src/web/_views/modal/new_post.php @@ -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 )?> diff --git a/src/web/_views/modal/register.php b/src/web/_views/modal/register.php index a6a2f1f..9fa1fe2 100644 --- a/src/web/_views/modal/register.php +++ b/src/web/_views/modal/register.php @@ -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 )?> diff --git a/src/web/_views/template/comment.php b/src/web/_views/template/comment.php index 72bcedf..ceac588 100644 --- a/src/web/_views/template/comment.php +++ b/src/web/_views/template/comment.php @@ -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> diff --git a/src/web/_views/template/modal.php b/src/web/_views/template/modal.php index e3ce6fe..2a041a7 100644 --- a/src/web/_views/template/modal.php +++ b/src/web/_views/template/modal.php @@ -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) ?> diff --git a/src/web/_views/template/post.php b/src/web/_views/template/post.php index b8ea69a..48f8bb6 100644 --- a/src/web/_views/template/post.php +++ b/src/web/_views/template/post.php @@ -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" diff --git a/src/web/_views/template/posts.php b/src/web/_views/template/posts.php index 137c0dd..ed79688 100644 --- a/src/web/_views/template/posts.php +++ b/src/web/_views/template/posts.php @@ -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, diff --git a/src/web/config/routes.php b/src/web/config/routes.php index a2a71c0..20b499a 100644 --- a/src/web/config/routes.php +++ b/src/web/config/routes.php @@ -9,3 +9,4 @@ $routes['profile'] = 'apps/profile'; $routes['settings'] = 'apps/settings'; $routes[''] = '_index'; +$routes['manifest.json'] = '_meta/manifest'; diff --git a/src/web/helper/image.php b/src/web/helper/image.php index 1b6650f..6d42678 100644 --- a/src/web/helper/image.php +++ b/src/web/helper/image.php @@ -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 = ''; diff --git a/src/web/lang/en_US/common_lang.php b/src/web/lang/en_US/common_lang.php index ad75bec..073229f 100644 --- a/src/web/lang/en_US/common_lang.php +++ b/src/web/lang/en_US/common_lang.php @@ -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 |
