Forms. Styles. Scripts. Managements. BRUH.
parent
16123a078e
commit
50beeb9bdf
@ -0,0 +1,256 @@
|
||||
.flash_msgs {
|
||||
display: flex;
|
||||
flex-flow: column-reverse nowrap;
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
// top: 0;
|
||||
//left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
margin: 0;
|
||||
// margin-top: 20px;
|
||||
padding: 10px;
|
||||
//max-width: 1300;
|
||||
|
||||
font-size: .9em;
|
||||
pointer-events: none;
|
||||
|
||||
> li {
|
||||
//width: 300px;
|
||||
//margin: 0 auto;
|
||||
width: 250px;
|
||||
padding: 10px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
background-color: $notif-bg-color;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
@keyframes fade {
|
||||
0%,100% { opacity: 0 }
|
||||
20%,80% { opacity: 1 }
|
||||
}
|
||||
|
||||
opacity: 0;
|
||||
animation: fade 7s normal;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-left: 10px;
|
||||
|
||||
max-width: 500px;
|
||||
|
||||
input:required {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
|
||||
background: #444a;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.editingable {
|
||||
&:not(.time-to-edit){
|
||||
.edit {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.time-to-edit {
|
||||
.notedit {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text], textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
|
||||
&.edit, .edit & {
|
||||
background: #444a;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
form .tag_input, .tag_input form {
|
||||
.tag-suggester {
|
||||
width: calc(100% - 50px);
|
||||
position: relative;
|
||||
|
||||
// input[type=text] {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
> .tag_suggest_dropdown {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: start;
|
||||
|
||||
// width: 100%;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
overflow: auto;
|
||||
|
||||
background-color: #2d2d2de0;
|
||||
}
|
||||
}
|
||||
.tag-container {
|
||||
display: flex;
|
||||
|
||||
> a {
|
||||
margin: 2px 2px;
|
||||
// padding: .4em .75em;
|
||||
padding: .35em .6em;
|
||||
|
||||
//text-align: center;
|
||||
border-radius: 4px;
|
||||
background-color: #121212ff;
|
||||
|
||||
cursor: pointer;
|
||||
> * { pointer-events: none; }
|
||||
|
||||
> .fa-tag {
|
||||
font-size: .9em;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
> .count {
|
||||
// display: none;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
> span.close {
|
||||
display: none;
|
||||
}
|
||||
> span.plus {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
> span.count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.tagselected {
|
||||
background-color: #400808ff;
|
||||
}
|
||||
&.tag_hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
// margin: 0 auto;
|
||||
// width: 300px;
|
||||
//text-align: center;
|
||||
// padding: 5px;
|
||||
|
||||
// input[type=text] {
|
||||
// @extend .fb-input;
|
||||
// margin: 0;
|
||||
// // background: none;
|
||||
// // border: none;
|
||||
// // color: inherit;
|
||||
// // font: inherit;
|
||||
|
||||
// //line-height: 2em;
|
||||
// // padding: 2px 6px;
|
||||
// }
|
||||
// input[type=submit] {
|
||||
// @extend .fb-input;
|
||||
// // padding: 0;
|
||||
// width: unset;
|
||||
// margin: .2rem;
|
||||
// }
|
||||
// select {
|
||||
// @extend .fb-select;
|
||||
// -moz-appearance: none;
|
||||
// -webkit-appearance: none;
|
||||
// margin: 0;
|
||||
// // width: 100%;
|
||||
// }
|
||||
// input[type=file] {
|
||||
// @extend .fb-input;
|
||||
// padding: 0;
|
||||
// background: none;
|
||||
// border: none;
|
||||
// color: inherit;
|
||||
// width: unset;
|
||||
// }
|
||||
|
||||
input {
|
||||
margin: 5px 0;
|
||||
//font-size: 1em;
|
||||
|
||||
&:not([type=checkbox]):not([type=submit]):not([type=radio]):not([type=file]) {
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
// &[type=file] {
|
||||
// //display: none;
|
||||
|
||||
// @extend .fb-input;
|
||||
// padding: 0;
|
||||
// background: none;
|
||||
// border: none;
|
||||
// }
|
||||
|
||||
// &[type=text] {
|
||||
// @extend .fb-input;
|
||||
// // margin: 0;
|
||||
// // background: none;
|
||||
// // border: none;
|
||||
// // color: inherit;
|
||||
// // font: inherit;
|
||||
|
||||
// //line-height: 2em;
|
||||
// // padding: 2px 6px;
|
||||
// }
|
||||
// &[type=submit] {
|
||||
// @extend .fb-input;
|
||||
// // padding: 0;
|
||||
// width: unset;
|
||||
// margin: .2rem;
|
||||
// }
|
||||
}
|
||||
// select {
|
||||
// @extend .fb-select;
|
||||
// -moz-appearance: none;
|
||||
// -webkit-appearance: none;
|
||||
// margin: 0;
|
||||
// // width: 100%;
|
||||
// }
|
||||
}
|
||||
@ -0,0 +1,230 @@
|
||||
.main-wrap {
|
||||
$bp-desktop: ">=desktop";
|
||||
$bp-tablet: "<desktop";
|
||||
|
||||
margin: 0 auto;
|
||||
max-width: 1300px;
|
||||
|
||||
$main-wrap-padding: 8px;
|
||||
padding: $main-wrap-padding;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
|
||||
// $sidepanel-width: 14rem;
|
||||
$sidepanel-width: 18rem;
|
||||
.important-subwrap {
|
||||
display: flex;
|
||||
@include media($bp-tablet) {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
@include media($bp-desktop) {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
overflow: visible; // for negative margin of .post-single
|
||||
|
||||
> section.sidepanel {
|
||||
flex-shrink: 0;
|
||||
|
||||
@include media($bp-desktop) {
|
||||
// width: 14em;
|
||||
width: $sidepanel-width;
|
||||
height: 0; // for overflow
|
||||
}
|
||||
|
||||
padding: 10px;
|
||||
article {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
article.tags {
|
||||
@include media($bp-tablet) {
|
||||
.tag-container {
|
||||
flex-flow: row wrap;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@include media($bp-desktop) {
|
||||
.tag-container {
|
||||
flex-flow: column nowrap;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article.post-desc {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
font-size: .9em;
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
max-width: 128px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> section:not(.sidepanel) {
|
||||
// fucking just for desktop because son of a bitch negative margin does shit when in mobile layout
|
||||
// it's a hack and I know it
|
||||
// pls, destiny, have a mercy
|
||||
@include media($bp-desktop) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.post-list {
|
||||
overflow: hidden;
|
||||
@include media("<tablet") {
|
||||
margin-left: -#{$main-wrap-padding};
|
||||
margin-right: -#{$main-wrap-padding};
|
||||
}
|
||||
.posts {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
$figure-margin: 8px;
|
||||
|
||||
@include media($bp-tablet) {
|
||||
margin-left: -#{$figure-margin};
|
||||
margin-right: -#{$figure-margin};
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
flex: 10000/*350*/ 0 350px;
|
||||
}
|
||||
|
||||
> figure {
|
||||
position: relative;
|
||||
margin: $figure-margin;
|
||||
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 4px;
|
||||
|
||||
transition: .2s ease;
|
||||
}
|
||||
&:hover img {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.post-single {
|
||||
@include media($bp-desktop) {
|
||||
padding: 8px;
|
||||
}
|
||||
@include media($bp-tablet) {
|
||||
order: -1;
|
||||
margin-bottom: $main-wrap-padding;
|
||||
}
|
||||
@include media("<tablet") {
|
||||
// margin-top: -$main-wrap-padding;
|
||||
margin-left: -#{$main-wrap-padding};
|
||||
margin-right: -#{$main-wrap-padding};
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
section.comments {
|
||||
padding: 10px;
|
||||
|
||||
@include media($bp-desktop) {
|
||||
margin-left: $sidepanel-width;
|
||||
}
|
||||
|
||||
> .comment-container {
|
||||
padding: 0 10px;
|
||||
max-width: 500px;
|
||||
|
||||
article.comment {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1em;
|
||||
|
||||
p, textarea {
|
||||
// margin-top: .5em;
|
||||
margin: 0;
|
||||
// margin-bottom: 1em;
|
||||
|
||||
&.deleted {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.management-table {
|
||||
table {
|
||||
margin: 0 auto;
|
||||
// border-collapse: collapse
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #303030;
|
||||
|
||||
th, td {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
th {
|
||||
background-color: #606060;
|
||||
}
|
||||
|
||||
// input[type=submit]:not([name=create]) {
|
||||
label > input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fa {
|
||||
padding: 4px 4px;
|
||||
align-self: center;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagin {
|
||||
margin: 10px 0;
|
||||
|
||||
// @include media($bp-desktop) {
|
||||
// margin-right: calc(#{$sidepanel-width}*3/4);
|
||||
// }
|
||||
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
|
||||
background-color: #0005;
|
||||
padding: 8px 12px;
|
||||
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer { // DUE TO OVERFLOW OF THE SIDE PANEL, TRY TO KEEP IT ON THE RIGHT
|
||||
padding: 10px;
|
||||
// background-color: $header-bg-color;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
function switchEdit(el) {
|
||||
if (!el.classList.contains('time-to-edit')) {
|
||||
el.classList.add('time-to-edit')
|
||||
} else {
|
||||
el.classList.remove('time-to-edit')
|
||||
}
|
||||
}
|
||||
|
||||
function commentSwitcher() {
|
||||
let comments = document.querySelectorAll('section.comments article.comment')
|
||||
comments.forEach(comment => comment
|
||||
.querySelectorAll('.comment-head .control-edit')
|
||||
.forEach(el => el
|
||||
.addEventListener('click', ev => switchEdit(comment.querySelector('.editingable')))
|
||||
)
|
||||
)
|
||||
// comment.target.closest('form.editingable')
|
||||
}
|
||||
|
||||
function mgmtSwitcher() {
|
||||
let rows = document.querySelectorAll("section.management-table tbody > tr")
|
||||
rows.forEach(row => row
|
||||
.querySelectorAll('label.to-edit, label.to-close')
|
||||
.forEach(el => el
|
||||
.addEventListener('click', ev => switchEdit(row))
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
commentSwitcher()
|
||||
mgmtSwitcher()
|
||||
@ -0,0 +1,160 @@
|
||||
$header-bg-color: #222;
|
||||
$nav-bg-color: #111d;//#20141fd0;
|
||||
$nav-bg-color_hover: #333;//#20141fa0;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
padding: 0 10px;
|
||||
|
||||
background-color: $header-bg-color;
|
||||
|
||||
> a.logo {
|
||||
font-size: 2em;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
// @include mobile { font-size: 1.3em; }
|
||||
// @include desktop { font-size: 1.1em; }
|
||||
|
||||
@include media("<tablet") { position: relative; }
|
||||
> nav {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
|
||||
> ._overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media("<tablet") {
|
||||
display: none;
|
||||
|
||||
&._drop {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: $nav-bg-color;
|
||||
}
|
||||
|
||||
> a, a#user-menu, .user_dropdown > a {
|
||||
padding: 12px;
|
||||
padding-left: 24px;
|
||||
//text-align: center;
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: $nav-bg-color_hover;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-top: 1px solid grey;
|
||||
margin: 2px 12px;
|
||||
}
|
||||
#user-menu {
|
||||
display: block;
|
||||
|
||||
}
|
||||
.user_dropdown {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
> ._overlay {
|
||||
display: block;
|
||||
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background-color: #0006;
|
||||
|
||||
@at-root {
|
||||
html.oh { overflow: hidden; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media(">=tablet") {
|
||||
margin: 0px 5px;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
margin: 0 5px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
> .user {
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
|
||||
#user-menu {
|
||||
display: block;
|
||||
padding: 6px 10px; //replication of nav/*
|
||||
}
|
||||
|
||||
position: relative;
|
||||
.user_dropdown {
|
||||
display: none;
|
||||
// opacity: .1; // BOI DAT HACK
|
||||
// height: 0;
|
||||
// width: 0;
|
||||
// overflow: hidden;
|
||||
|
||||
a {
|
||||
padding: 10px;
|
||||
}
|
||||
a:hover {
|
||||
|
||||
background-color: $nav-bg-color_hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > .user_dropdown {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 100%;
|
||||
// left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: $nav-bg-color;
|
||||
|
||||
// opacity: 1; // BOI DAT HACK
|
||||
// height: unset;
|
||||
// width: unset;
|
||||
// transition: .2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> #nav-menu {
|
||||
display: none;
|
||||
|
||||
@include media("<tablet") {
|
||||
display: block;
|
||||
margin: 5px;
|
||||
margin-left: auto;
|
||||
|
||||
padding: 0 2px;
|
||||
align-self: center;
|
||||
font-size: 2em;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
@import "_include-media";
|
||||
$breakpoints: (tablet: 560px, desktop: 900px);
|
||||
|
||||
$bg-color: #222; //#20141f;
|
||||
$text-color: #fff;
|
||||
$a-color: #bbb;
|
||||
$ahover-color: #909090;
|
||||
|
||||
//$notif-bg-color: #542772d0;
|
||||
$notif-bg-color: #000c;
|
||||
|
||||
@import "base-types";
|
||||
@import "header";
|
||||
@import "default";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
// font-family: monospace; font-size: 1.1em;
|
||||
//font-size: 14px;
|
||||
|
||||
background-color: $bg-color;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $a-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: $ahover-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,238 @@
|
||||
function switchEdit(el) {
|
||||
if (!el.classList.contains('time-to-edit')) {
|
||||
el.classList.add('time-to-edit')
|
||||
} else {
|
||||
el.classList.remove('time-to-edit')
|
||||
}
|
||||
}
|
||||
|
||||
function commentSwitcher() {
|
||||
let comments = document.querySelectorAll('section.comments article.comment')
|
||||
comments.forEach(comment => comment
|
||||
.querySelectorAll('.comment-head .control-edit')
|
||||
.forEach(el => el
|
||||
.addEventListener('click', ev => switchEdit(comment.querySelector('.editingable')))
|
||||
)
|
||||
)
|
||||
// comment.target.closest('form.editingable')
|
||||
}
|
||||
|
||||
function mgmtSwitcher() {
|
||||
let rows = document.querySelectorAll("section.management-table tbody > tr")
|
||||
rows.forEach(row => row
|
||||
.querySelectorAll('label.to-edit, label.to-close')
|
||||
.forEach(el => el
|
||||
.addEventListener('click', ev => switchEdit(row))
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
commentSwitcher()
|
||||
mgmtSwitcher()
|
||||
let nav_menu = document.querySelectorAll("#nav-menu, nav#main-nav > ._overlay")
|
||||
function nav_menu_event(event) {
|
||||
let drop = document.getElementById("main-nav")
|
||||
let html = document.getElementsByTagName('html')[0]
|
||||
if (!drop.classList.contains("_drop")) {
|
||||
drop.classList.add("_drop")
|
||||
html.classList.add("oh")
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
} else {
|
||||
drop.classList.remove("_drop")
|
||||
html.classList.remove("oh")
|
||||
}
|
||||
}
|
||||
nav_menu.forEach(element => {
|
||||
element.addEventListener('click', nav_menu_event)
|
||||
});
|
||||
|
||||
document.getElementById("user-menu").addEventListener('click', (ev) => {
|
||||
let drop = document.getElementsByClassName("user_dropdown")[0]
|
||||
if (!drop.classList.contains("_drop")) {
|
||||
drop.classList.add("_drop")
|
||||
} else {
|
||||
drop.classList.remove("_drop")
|
||||
}
|
||||
})
|
||||
let tagroot = document.querySelector('.tag_input')
|
||||
let sel_tags = tagroot.querySelector('div.tags_selected')
|
||||
let predef_tags = tagroot.querySelector('div.tags_inpage') // Should be optional
|
||||
|
||||
let suggestroot = tagroot.querySelector('.tag_suggester')
|
||||
|
||||
suggestroot.insertAdjacentHTML("beforeend", `<input type="hidden" name="${suggestroot.dataset.inputname}">`)
|
||||
let suggest_hidden = suggestroot.querySelector(`input[name=${suggestroot.dataset.inputname}][type=hidden]`)
|
||||
|
||||
let suggest_input = suggestroot.querySelector(`input[name=${suggestroot.dataset.inputname}][type=text]`)
|
||||
suggest_input.removeAttribute('name')
|
||||
if (suggest_input.hasAttribute('required')) {
|
||||
suggest_input.removeAttribute('required')
|
||||
suggest_hidden.setAttribute('required', '')
|
||||
}
|
||||
// suggest_input.value = ''
|
||||
suggest_input.removeAttribute('value')
|
||||
|
||||
let tag_suggest_dropdown = suggestroot.querySelector('.tag_suggest_dropdown')
|
||||
|
||||
// https://stackoverflow.com/questions/8486099/how-do-i-parse-a-url-query-parameters-in-javascript
|
||||
function getJsonFromUrl(url) {
|
||||
if(!url) url = location.search;
|
||||
var query = url.substr(1);
|
||||
var result = {};
|
||||
query.split("&").forEach(function(part) {
|
||||
var item = part.split("=");
|
||||
result[item[0]] = decodeURIComponent(item[1]);
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
function create_selection_tag(tagname) {
|
||||
let tag = document.createElement("a")
|
||||
tag.classList.add("tagselected")
|
||||
tag.dataset.tagname = tagname
|
||||
|
||||
tag.insertAdjacentHTML("beforeend", `
|
||||
<span class="fa fa-tag"></span>
|
||||
<span class="name"></span>
|
||||
<span class="fa fa-close close"></span>
|
||||
`)
|
||||
tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
|
||||
// tag.querySelector("input[type=hidden]").setAttribute('name', `tag#${tagname}`)
|
||||
return tag
|
||||
}
|
||||
|
||||
function form_addtag(tagname) {
|
||||
let val = suggest_hidden.value.split(' ')
|
||||
val.push(tagname)
|
||||
suggest_hidden.value = val.join(' ').trim()
|
||||
}
|
||||
function form_removetag(tagname) {
|
||||
let val = suggest_hidden.value.split(' ')
|
||||
val.splice(val.indexOf(tagname), 1)
|
||||
suggest_hidden.value = val.join(' ').trim()
|
||||
}
|
||||
|
||||
function add_selected(tagname) {
|
||||
if (predef_tags) {
|
||||
let pagetag = predef_tags.querySelector(`a[data-tagname=${tagname}]`)
|
||||
if (pagetag) {
|
||||
pagetag.classList.add('tag_hide')
|
||||
}
|
||||
}
|
||||
let newtag = create_selection_tag(tagname)
|
||||
newtag.addEventListener('click', (event) => {
|
||||
remove_selected(event.target.dataset.tagname)
|
||||
// console.log(`Deselected: ${event.target.dataset.tagname}`)
|
||||
})
|
||||
|
||||
sel_tags.appendChild(newtag)
|
||||
form_addtag(tagname)
|
||||
}
|
||||
function remove_selected(tagname) {
|
||||
if (predef_tags) {
|
||||
let pagetag = predef_tags.querySelector(`a[data-tagname=${tagname}]`)
|
||||
if (pagetag) {
|
||||
pagetag.classList.remove('tag_hide')
|
||||
}
|
||||
}
|
||||
|
||||
sel_tags.querySelector(`a[data-tagname=${tagname}]`).remove()
|
||||
form_removetag(tagname)
|
||||
}
|
||||
|
||||
// Page tags click to select
|
||||
if (predef_tags) {
|
||||
predef_tags.querySelectorAll("a").forEach(element => {
|
||||
element.addEventListener('click', (event) => {
|
||||
add_selected(event.target.dataset.tagname)
|
||||
event.preventDefault()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Generate selected by url query
|
||||
let query = getJsonFromUrl()
|
||||
if (query['tags']) {
|
||||
query['tags'].split('+').forEach((tag) => {
|
||||
add_selected(tag)
|
||||
})
|
||||
}
|
||||
|
||||
// Suggestions
|
||||
function create_suggestion_tag(tagname) {
|
||||
let tag = document.createElement("a")
|
||||
tag.classList.add("tagsuggestion")
|
||||
tag.dataset.tagname = tagname
|
||||
|
||||
tag.insertAdjacentHTML("beforeend", `
|
||||
<span class="fa fa-tag"></span>
|
||||
<span class="name"></span>
|
||||
<span class="fa fa-plus plus"></span>
|
||||
`)
|
||||
tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
|
||||
return tag
|
||||
}
|
||||
function render_suggestions(data) {
|
||||
tag_suggest_dropdown.innerHTML = ''
|
||||
|
||||
let tagnames = Array.from(sel_tags.querySelectorAll('a')).map(a => a.dataset.tagname)
|
||||
let i = 0
|
||||
data.forEach((el) => {
|
||||
if (i > 5) return
|
||||
if (tagnames.includes(el.content)) return
|
||||
|
||||
let sugtag = create_suggestion_tag(el.content)
|
||||
|
||||
sugtag.addEventListener('click', (event) => {
|
||||
add_selected(event.target.dataset.tagname)
|
||||
suggest_input.value = ''
|
||||
render_suggestions([])
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
tag_suggest_dropdown.appendChild(sugtag)
|
||||
|
||||
i++
|
||||
});
|
||||
}
|
||||
|
||||
// Ajax suggestion handler
|
||||
var ajax_timeout
|
||||
suggest_input.addEventListener('input', (event) => {
|
||||
clearTimeout(ajax_timeout)
|
||||
|
||||
let value = suggest_input.value.replace(/ /g, '_').trim()
|
||||
|
||||
if (value.length < 2) {
|
||||
render_suggestions([])
|
||||
return
|
||||
}
|
||||
|
||||
ajax_timeout = setTimeout(() => {
|
||||
fetch('/post/tags?q='+value).then((response) => {
|
||||
console.log(response)
|
||||
return response.json()
|
||||
}).then((data) => {
|
||||
// fill suggestions
|
||||
// console.log(data)
|
||||
render_suggestions(data)
|
||||
})
|
||||
}, 500)
|
||||
})
|
||||
|
||||
// search_input.addEventListener('keypress', (event) => {
|
||||
// if (event.keyCode == 13) {
|
||||
// // event.preventDefault()
|
||||
// }
|
||||
// })
|
||||
// search_input.addEventListener('blur', (event) => {
|
||||
// if (event.explicitOriginalTarget != null) {
|
||||
// classlist = event.explicitOriginalTarget.parentNode.classList
|
||||
// if (classlist.contains('tags_selected') || classlist.contains('tags_inpage') || classlist.contains('search_dropdown')) {
|
||||
// setTimeout(() => search_input.focus(), 2)
|
||||
// }
|
||||
// }
|
||||
// console.log(event)
|
||||
// })
|
||||
// page_tags.querySelectorAll('a').forEach((el) => el.removeAttribute('href'))
|
||||
@ -1,17 +0,0 @@
|
||||
let comment_container = document.querySelector('section.comments .comment_container')
|
||||
|
||||
let comments = comment_container.querySelectorAll('.comment')
|
||||
|
||||
function triggerEdit(comment) {
|
||||
let form = comment.querySelector('form.editingable')
|
||||
if (!form.classList.contains('time-to-edit')) {
|
||||
form.classList.add('time-to-edit')
|
||||
} else {
|
||||
form.classList.remove('time-to-edit')
|
||||
}
|
||||
}
|
||||
|
||||
comments.forEach((comment) => {
|
||||
// comment.querySelector('p.comment_content').addEventListener('dblclick', (event) => triggerEdit(comment))
|
||||
comment.querySelector('.comment_head .control_edit').addEventListener('click', (event) => triggerEdit(comment))
|
||||
})
|
||||
@ -1,720 +0,0 @@
|
||||
@import "_include-media";
|
||||
// @import "include-media/dist/_include-media";
|
||||
$breakpoints: (tablet: 560px, desktop: 900px);
|
||||
|
||||
// $formbase__prefix: "fb-";
|
||||
// $formbase__padding: .2rem;
|
||||
// @import "formbase/src/styles/main";
|
||||
|
||||
// @import "boilerform/assets/scss/boilerform";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
$bg-color: #222; //#20141f;
|
||||
$text-color: #fff;
|
||||
$a-color: #bbb;
|
||||
$ahover-color: #909090;
|
||||
|
||||
$header-bg-color: #222;
|
||||
$nav-bg-color: #111d;//#20141fd0;
|
||||
$nav-bg-color_hover: #333;//#20141fa0;
|
||||
|
||||
//$notif-bg-color: #542772d0;
|
||||
$notif-bg-color: #000c;
|
||||
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
// font-family: monospace; font-size: 1.1em;
|
||||
//font-size: 14px;
|
||||
|
||||
background-color: $bg-color;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $a-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: $ahover-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
padding: 0 10px;
|
||||
|
||||
background-color: $header-bg-color;
|
||||
|
||||
> a.logo {
|
||||
font-size: 2em;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
// @include mobile { font-size: 1.3em; }
|
||||
// @include desktop { font-size: 1.1em; }
|
||||
|
||||
@include media("<tablet") { position: relative; }
|
||||
> nav {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
|
||||
> ._overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media("<tablet") {
|
||||
display: none;
|
||||
|
||||
&._drop {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: $nav-bg-color;
|
||||
}
|
||||
|
||||
> a, a#user-menu, .user_dropdown > a {
|
||||
padding: 12px;
|
||||
padding-left: 24px;
|
||||
//text-align: center;
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: $nav-bg-color_hover;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-top: 1px solid grey;
|
||||
margin: 2px 12px;
|
||||
}
|
||||
#user-menu {
|
||||
display: block;
|
||||
|
||||
}
|
||||
.user_dropdown {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
> ._overlay {
|
||||
display: block;
|
||||
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background-color: #0006;
|
||||
|
||||
@at-root {
|
||||
html.oh { overflow: hidden; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media(">=tablet") {
|
||||
margin: 0px 5px;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
margin: 0 5px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
> .user {
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
|
||||
#user-menu {
|
||||
display: block;
|
||||
padding: 6px 10px; //replication of nav/*
|
||||
}
|
||||
|
||||
position: relative;
|
||||
.user_dropdown {
|
||||
display: none;
|
||||
// opacity: .1; // BOI DAT HACK
|
||||
// height: 0;
|
||||
// width: 0;
|
||||
// overflow: hidden;
|
||||
|
||||
a {
|
||||
padding: 10px;
|
||||
}
|
||||
a:hover {
|
||||
|
||||
background-color: $nav-bg-color_hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > .user_dropdown {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 100%;
|
||||
// left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: $nav-bg-color;
|
||||
|
||||
// opacity: 1; // BOI DAT HACK
|
||||
// height: unset;
|
||||
// width: unset;
|
||||
// transition: .2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> #nav-menu {
|
||||
display: none;
|
||||
|
||||
@include media("<tablet") {
|
||||
display: block;
|
||||
margin: 5px;
|
||||
margin-left: auto;
|
||||
|
||||
padding: 0 2px;
|
||||
align-self: center;
|
||||
font-size: 2em;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flash_msgs {
|
||||
display: flex;
|
||||
flex-flow: column-reverse nowrap;
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
// top: 0;
|
||||
//left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
margin: 0;
|
||||
// margin-top: 20px;
|
||||
padding: 10px;
|
||||
//max-width: 1300;
|
||||
|
||||
font-size: .9em;
|
||||
pointer-events: none;
|
||||
|
||||
> li {
|
||||
//width: 300px;
|
||||
//margin: 0 auto;
|
||||
width: 250px;
|
||||
padding: 10px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
background-color: $notif-bg-color;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
@keyframes fade {
|
||||
0%,100% { opacity: 0 }
|
||||
20%,80% { opacity: 1 }
|
||||
}
|
||||
|
||||
opacity: 0;
|
||||
animation: fade 7s normal;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main_wrap {
|
||||
$bp-desktop: ">=desktop";
|
||||
$bp-tablet: "<desktop";
|
||||
|
||||
margin: 0 auto;
|
||||
max-width: 1300px;
|
||||
|
||||
$main-wrap-padding: 8px;
|
||||
padding: $main-wrap-padding;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
form .tag_input, .tag_input form {
|
||||
.tag_suggester {
|
||||
width: calc(100% - 50px);
|
||||
position: relative;
|
||||
|
||||
// input[type=text] {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
> .tag_suggest_dropdown {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: start;
|
||||
|
||||
// width: 100%;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
overflow: auto;
|
||||
|
||||
background-color: #2d2d2de0;
|
||||
}
|
||||
}
|
||||
.tag_container {
|
||||
display: flex;
|
||||
|
||||
> a {
|
||||
margin: 2px 2px;
|
||||
// padding: .4em .75em;
|
||||
padding: .35em .6em;
|
||||
|
||||
//text-align: center;
|
||||
border-radius: 4px;
|
||||
background-color: #121212ff;
|
||||
|
||||
cursor: pointer;
|
||||
> * { pointer-events: none; }
|
||||
|
||||
> .fa-tag {
|
||||
font-size: .9em;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
> .count {
|
||||
// display: none;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
> span.close {
|
||||
display: none;
|
||||
}
|
||||
> span.plus {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
> span.count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.tagselected {
|
||||
background-color: #400808ff;
|
||||
}
|
||||
&.tag_hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// $side-panel-width: 14rem;
|
||||
$side-panel-width: 18rem;
|
||||
.important_subwrap {
|
||||
|
||||
display: flex;
|
||||
@include media($bp-tablet) {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
@include media($bp-desktop) {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
overflow: visible; // for negative margin of .post_single
|
||||
|
||||
> section.side_panel {
|
||||
flex-shrink: 0;
|
||||
|
||||
@include media($bp-desktop) {
|
||||
// width: 14em;
|
||||
width: $side-panel-width;
|
||||
|
||||
height: 0; // for overflow
|
||||
}
|
||||
|
||||
padding: 10px;
|
||||
|
||||
article {
|
||||
// &:not(:last-child) {
|
||||
// margin-bottom: 10px;
|
||||
// }
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
article.tags {
|
||||
@include media($bp-tablet) {
|
||||
.tag_container {
|
||||
flex-flow: row wrap;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@include media($bp-desktop) {
|
||||
.tag_container {
|
||||
flex-flow: column nowrap;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article.post_desc {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
font-size: .9em;
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
max-width: 128px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> section:not(.side_panel) {
|
||||
// fucking just for desktop because son of a bitch negative margin does shit when in mobile layout
|
||||
// it's a hack and I know it
|
||||
// pls, destiny, have a mercy
|
||||
@include media($bp-desktop) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.post_list {
|
||||
overflow: hidden;
|
||||
@include media("<tablet") {
|
||||
margin-left: -#{$main-wrap-padding};
|
||||
margin-right: -#{$main-wrap-padding};
|
||||
}
|
||||
.posts {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
$figure-margin: 8px;
|
||||
|
||||
@include media($bp-tablet) {
|
||||
margin-left: -#{$figure-margin};
|
||||
margin-right: -#{$figure-margin};
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
flex: 10000/*350*/ 0 350px;
|
||||
}
|
||||
|
||||
> figure {
|
||||
position: relative;
|
||||
margin: $figure-margin;
|
||||
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 4px;
|
||||
|
||||
transition: .2s ease;
|
||||
}
|
||||
&:hover img {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.post_single {
|
||||
@include media($bp-desktop) {
|
||||
padding: 8px;
|
||||
}
|
||||
@include media($bp-tablet) {
|
||||
order: -1;
|
||||
margin-bottom: $main-wrap-padding;
|
||||
}
|
||||
@include media("<tablet") {
|
||||
// margin-top: -$main-wrap-padding;
|
||||
margin-left: -#{$main-wrap-padding};
|
||||
margin-right: -#{$main-wrap-padding};
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
section.comments {
|
||||
padding: 10px;
|
||||
|
||||
@include media($bp-desktop) {
|
||||
margin-left: $side-panel-width;
|
||||
}
|
||||
|
||||
> .comment_container {
|
||||
padding: 0 10px;
|
||||
|
||||
max-width: 500px;
|
||||
|
||||
|
||||
article.comment {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
h4 {
|
||||
// margin-top: .5em;
|
||||
margin: 0;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
p, textarea {
|
||||
// margin-top: .5em;
|
||||
margin: 0;
|
||||
// margin-bottom: 1em;
|
||||
|
||||
&.deleted {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.comment_head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
> .form > form {
|
||||
margin-left: 10px;
|
||||
|
||||
max-width: 500px;
|
||||
|
||||
input:required {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
|
||||
background: #444a;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.management_table {
|
||||
table {
|
||||
margin: 0 auto;
|
||||
// border-collapse: collapse
|
||||
}
|
||||
|
||||
tr {
|
||||
|
||||
|
||||
// &:nth-child(even), th {
|
||||
// background-color: #404040;
|
||||
// }
|
||||
th {
|
||||
background-color: #606060;
|
||||
}
|
||||
// &:nth-child(even) {
|
||||
background-color: #303030;
|
||||
// }
|
||||
|
||||
th, td {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
}
|
||||
|
||||
&:not(.edit) {
|
||||
td > .edit {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.edit {
|
||||
td > .show {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
input[type=submit]:not([name=create]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fa {
|
||||
padding: 4px 4px;
|
||||
align-self: center;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.editingable {
|
||||
&:not(.time-to-edit){
|
||||
.edit {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.time-to-edit {
|
||||
.notedit {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text], textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
|
||||
&.edit, .edit & {
|
||||
background: #444a;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
form {
|
||||
// margin: 0 auto;
|
||||
// width: 300px;
|
||||
//text-align: center;
|
||||
// padding: 5px;
|
||||
|
||||
// input[type=text] {
|
||||
// @extend .fb-input;
|
||||
// margin: 0;
|
||||
// // background: none;
|
||||
// // border: none;
|
||||
// // color: inherit;
|
||||
// // font: inherit;
|
||||
|
||||
// //line-height: 2em;
|
||||
// // padding: 2px 6px;
|
||||
// }
|
||||
// input[type=submit] {
|
||||
// @extend .fb-input;
|
||||
// // padding: 0;
|
||||
// width: unset;
|
||||
// margin: .2rem;
|
||||
// }
|
||||
// select {
|
||||
// @extend .fb-select;
|
||||
// -moz-appearance: none;
|
||||
// -webkit-appearance: none;
|
||||
// margin: 0;
|
||||
// // width: 100%;
|
||||
// }
|
||||
// input[type=file] {
|
||||
// @extend .fb-input;
|
||||
// padding: 0;
|
||||
// background: none;
|
||||
// border: none;
|
||||
// color: inherit;
|
||||
// width: unset;
|
||||
// }
|
||||
|
||||
input {
|
||||
margin: 5px 0;
|
||||
//font-size: 1em;
|
||||
|
||||
&:not([type=checkbox]):not([type=submit]):not([type=radio]):not([type=file]) {
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
// &[type=file] {
|
||||
// //display: none;
|
||||
|
||||
// @extend .fb-input;
|
||||
// padding: 0;
|
||||
// background: none;
|
||||
// border: none;
|
||||
// }
|
||||
|
||||
// &[type=text] {
|
||||
// @extend .fb-input;
|
||||
// // margin: 0;
|
||||
// // background: none;
|
||||
// // border: none;
|
||||
// // color: inherit;
|
||||
// // font: inherit;
|
||||
|
||||
// //line-height: 2em;
|
||||
// // padding: 2px 6px;
|
||||
// }
|
||||
// &[type=submit] {
|
||||
// @extend .fb-input;
|
||||
// // padding: 0;
|
||||
// width: unset;
|
||||
// margin: .2rem;
|
||||
// }
|
||||
}
|
||||
// select {
|
||||
// @extend .fb-select;
|
||||
// -moz-appearance: none;
|
||||
// -webkit-appearance: none;
|
||||
// margin: 0;
|
||||
// // width: 100%;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
.pagin {
|
||||
margin: 10px 0;
|
||||
|
||||
// @include media($bp-desktop) {
|
||||
// margin-right: calc(#{$side-panel-width}*3/4);
|
||||
// }
|
||||
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
|
||||
background-color: #0005;
|
||||
padding: 8px 12px;
|
||||
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer { // DUE TO OVERFLOW OF THE SIDE PANEL, TRY TO KEEP IT ON THE RIGHT
|
||||
padding: 10px;
|
||||
|
||||
// background-color: $header-bg-color;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
let rows = document.querySelectorAll("section.management_table tbody > tr")
|
||||
function show_edit_controls(event) {
|
||||
let row = event.target.closest("tr")
|
||||
console.log(row)
|
||||
if (!row.classList.contains("edit")) {
|
||||
row.classList.add("edit")
|
||||
} else {
|
||||
row.classList.remove("edit")
|
||||
}
|
||||
}
|
||||
|
||||
rows.forEach(element => {
|
||||
element.querySelectorAll("label.to-edit, label.to-close").forEach(el => {
|
||||
el.addEventListener('click', show_edit_controls)
|
||||
})
|
||||
|
||||
});
|
||||
@ -0,0 +1,60 @@
|
||||
{% extends 'layout/settings.html' %}
|
||||
|
||||
{% block main_content %}{{ self.management_table() }}{% endblock %}
|
||||
|
||||
{% block management_table %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{% block field_headings %}{% endblock %}
|
||||
<th>Manage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for element in elements %}
|
||||
<tr class="editingable">
|
||||
<form action="{{ url_for('manage.modify_tag') }}" method="post">
|
||||
{{ element.editform.csrf_token }}
|
||||
{{ element.editform.id() }}
|
||||
|
||||
{% block fields scoped %}{% endblock %}
|
||||
|
||||
<td>
|
||||
<label class="notedit to-edit">
|
||||
<span class="fa fa-edit"></span>
|
||||
</label>
|
||||
<label class="edit to-close">
|
||||
<span class="fa fa-close"></span>
|
||||
</label>
|
||||
<label class="edit">
|
||||
<span class="fa fa-check"></span>
|
||||
{{ element.editform.edit() }}
|
||||
</label>
|
||||
<label>
|
||||
<span class="fa fa-trash-o"></span>
|
||||
{{ element.editform.delete() }}
|
||||
</label>
|
||||
</td>
|
||||
</form>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
{% block createform %}{% endblock %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endblock %}
|
||||
|
||||
{% from "_formhelpers.html" import errors %}
|
||||
{% macro genfield(formfield=None) %}
|
||||
{% if not formfield %}
|
||||
<td>
|
||||
<span>{{ caller() }}</span>
|
||||
</td>
|
||||
{% else %}
|
||||
<td>
|
||||
<span class="notedit">{{ caller() }}</span>
|
||||
<span class="edit">{{ formfield() }}</span>
|
||||
{{ errors(formfield) }}
|
||||
</td>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
@ -1,42 +1,40 @@
|
||||
{% extends 'layout/settings.html' %}
|
||||
{% extends 'layout/management.html' %}
|
||||
{% from '_includes.html' import render_pagination with context %}
|
||||
{% from "_formhelpers.html" import management_gen_line, errors %}
|
||||
|
||||
{% block main_content %}
|
||||
<section class="management_table manage_posts">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>MD5</th>
|
||||
<th>Rating</th>
|
||||
<th>Status</th>
|
||||
<th>Source</th>
|
||||
<th>Manage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for post in posts.items %}
|
||||
<form action="{{ url_for('manage.modify_post') }}" method="post">
|
||||
{{ post.editform.csrf_token }}
|
||||
{{ post.editform.id() }}
|
||||
<tr>
|
||||
<td>{{ post.id }}</td>
|
||||
<td><pre style="margin: 0;">{{ post.md5[:7] }}</pre></td>
|
||||
<td>{{ management_gen_line(post.rating.name.capitalize(), post.editform.rating) }}</td>
|
||||
<td>{{ management_gen_line(post.status.name.capitalize(), post.editform.status) }}</td>
|
||||
<td>{{ management_gen_line(post.source, post.editform.source) }}</td>
|
||||
<td>
|
||||
<label class="show to-edit"><span class="fa fa-edit"></span></label>
|
||||
<label class="edit to-close"><span class="fa fa-close"></span></label>
|
||||
<label class="edit"><span class="fa fa-check"></span>{{ post.editform.edit() }}</label>
|
||||
<label><span class="fa fa-trash-o"></span>{{ post.editform.delete() }}</label>
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<section class="management-table manage-posts">
|
||||
{{ super() }}
|
||||
|
||||
{{ render_pagination('manage.manage_posts', posts) }}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block field_headings %}
|
||||
<th>ID</th>
|
||||
<th>MD5</th>
|
||||
<th>Rating</th>
|
||||
<th>Status</th>
|
||||
<th>Source</th>
|
||||
{% endblock %}
|
||||
|
||||
{% block fields %}
|
||||
{% call genfield() %}
|
||||
{{ element.id }}
|
||||
{% endcall %}
|
||||
|
||||
{% call genfield() %}
|
||||
<pre style="margin: 0;">{{ element.md5[:7] }}</pre>
|
||||
{% endcall %}
|
||||
|
||||
{% call genfield(element.editform.rating) %}
|
||||
{{ element.rating.name.capitalize() }}
|
||||
{% endcall %}
|
||||
|
||||
{% call genfield(element.editform.status) %}
|
||||
{{ element.status.name.capitalize() }}
|
||||
{% endcall %}
|
||||
|
||||
{% call genfield(element.editform.source) %}
|
||||
{{ element.source }}
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
@ -1,47 +1,36 @@
|
||||
{% extends 'layout/settings.html' %}
|
||||
{% extends 'layout/management.html' %}
|
||||
{% from '_includes.html' import render_pagination with context %}
|
||||
{% from "_formhelpers.html" import management_gen_line, errors %}
|
||||
|
||||
{% block main_content %}
|
||||
<section class="management_table manage_posts">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- <th>ID</th> -->
|
||||
<th>Content</th>
|
||||
<th>Category</th>
|
||||
<th>Manage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for tag in tags.items %}
|
||||
<form action="{{ url_for('manage.modify_tag') }}" method="post">
|
||||
{{ tag.editform.csrf_token }}
|
||||
{{ tag.editform.id() }}
|
||||
<tr>
|
||||
<!-- <td>{{ tag.id }}</td> -->
|
||||
<td>{{ tag.content_deser }}</td>
|
||||
<td>{{ management_gen_line(tag.category.name.capitalize(), tag.editform.category) }}</td>
|
||||
<td>
|
||||
<label class="show to-edit"><span class="fa fa-edit"></span></label>
|
||||
<label class="edit to-close"><span class="fa fa-close"></span></label>
|
||||
<label class="edit"><span class="fa fa-check"></span>{{ tag.editform.edit() }}</label>
|
||||
<label><span class="fa fa-trash-o"></span>{{ tag.editform.delete() }}</label>
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
{% endfor %}
|
||||
<section class="management-table manage-tags">
|
||||
{{ super() }}
|
||||
|
||||
{{ render_pagination('manage.manage_tags', tags) }}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block field_headings %}
|
||||
<th>Content</th>
|
||||
<th>Category</th>
|
||||
{% endblock %}
|
||||
|
||||
{% block fields %}
|
||||
{% call genfield() %}
|
||||
{{ element.content_deser }}
|
||||
{% endcall %}
|
||||
|
||||
{% call genfield(element.editform.category) %}
|
||||
{{ element.category.name.capitalize() }}
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
||||
{% block createform %}
|
||||
<tr>
|
||||
<form action="{{ url_for('manage.modify_tag') }}" method="post">
|
||||
{{ createform.csrf_token }}
|
||||
<tr>
|
||||
<!-- <td></td> -->
|
||||
<td>{{ createform.content() }}</td>
|
||||
<td>{{ createform.category() }}</td>
|
||||
<td>{{ createform.create() }}</td>
|
||||
</tr>
|
||||
</form>
|
||||
</tbody>
|
||||
</table>
|
||||
{{ render_pagination('manage.manage_tags', tags) }}
|
||||
</section>
|
||||
</tr>
|
||||
{% endblock %}
|
||||
@ -1,56 +1,55 @@
|
||||
{% extends 'layout/settings.html' %}
|
||||
{% extends 'layout/management.html' %}
|
||||
{% from '_includes.html' import render_pagination with context %}
|
||||
{% from "_formhelpers.html" import management_gen_line, errors %}
|
||||
|
||||
{% block main_content %}
|
||||
<section class="management_table manage_users">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Username</th>
|
||||
<th>User status</th>
|
||||
<th>Perm level</th>
|
||||
<th>Last login</th>
|
||||
<th>Manage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in users.items %}
|
||||
<section class="management-table manage-users">
|
||||
{{ super() }}
|
||||
|
||||
{{ render_pagination('manage.manage_users', users) }}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block field_headings %}
|
||||
<th>ID</th>
|
||||
<th>Username</th>
|
||||
<th>User status</th>
|
||||
<th>Perm level</th>
|
||||
<th>Last login</th>
|
||||
{% endblock %}
|
||||
|
||||
{% block fields %}
|
||||
{% call genfield() %}
|
||||
{{ element.id }}
|
||||
{% endcall %}
|
||||
|
||||
{% call genfield(element.editform.username) %}
|
||||
{{ element.username }}
|
||||
{% endcall %}
|
||||
|
||||
{% call genfield(element.editform.user_status) %}
|
||||
{{ element.user_status.name.capitalize() }}
|
||||
{% endcall %}
|
||||
|
||||
{% call genfield(element.editform.op_level) %}
|
||||
{{ element.op_level.name.capitalize() }}
|
||||
{% endcall %}
|
||||
|
||||
{% call genfield() %}
|
||||
{{ element.last_login.strftime('%I:%M %p %d %b, %Y') if element.last_login else 'Not yet logged in' }}
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
||||
{#{% block createform %}
|
||||
<tr>
|
||||
<form action="{{ url_for('manage.modify_user') }}" method="post">
|
||||
{{ user.editform.csrf_token }}
|
||||
{{ user.editform.id() }}
|
||||
<tr>
|
||||
<td>{{ user.id }}</td>
|
||||
<td>{{ management_gen_line(user.username, user.editform.username) }}</td>
|
||||
<td>{{ management_gen_line(user.user_status.name.capitalize(), user.editform.user_status) }}</td>
|
||||
<td>{{ management_gen_line(user.op_level.name.capitalize(), user.editform.op_level) }}</td>
|
||||
<td>{{ user.last_login.strftime('%I:%M %p %d %b, %Y') if user.last_login else 'Not yet logged in' }}</td>
|
||||
<td>
|
||||
<label class="show to-edit"><span class="fa fa-edit"></span></label>
|
||||
<label class="edit to-close"><span class="fa fa-close"></span></label>
|
||||
<label class="edit"><span class="fa fa-check"></span>{{ user.editform.edit() }}</label>
|
||||
<label><span class="fa fa-trash-o"></span>{{ user.editform.delete(
|
||||
onclick="return confirm('Do you really want to delete this user?')"
|
||||
)}}</label>
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
{% endfor %}
|
||||
{#<!-- <form action="{{ url_for('manage.modify_user') }}" method="post">
|
||||
{{ createform.csrf_token }}
|
||||
{{ createform.id() }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>{{ createform.username() }}</td>
|
||||
<td>{{ createform.user_status() }}</td>
|
||||
<td>{{ createform.op_level() }}</td>
|
||||
<td></td>
|
||||
<td>{{ createform.create() }}</td>
|
||||
</tr>
|
||||
</form> -->#}
|
||||
</tbody>
|
||||
</table>
|
||||
{{ render_pagination('manage.manage_users', users) }}
|
||||
</section>
|
||||
{% endblock %}
|
||||
</form>
|
||||
</tr>
|
||||
{% endblock %}#}
|
||||
Loading…
Reference in New Issue