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 '_includes.html' import render_pagination with context %}
|
||||||
{% from "_formhelpers.html" import management_gen_line, errors %}
|
|
||||||
|
|
||||||
{% block main_content %}
|
{% block main_content %}
|
||||||
<section class="management_table manage_posts">
|
<section class="management-table manage-posts">
|
||||||
<table>
|
{{ super() }}
|
||||||
<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>
|
|
||||||
{{ render_pagination('manage.manage_posts', posts) }}
|
{{ render_pagination('manage.manage_posts', posts) }}
|
||||||
</section>
|
</section>
|
||||||
{% endblock %}
|
{% 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 '_includes.html' import render_pagination with context %}
|
||||||
{% from "_formhelpers.html" import management_gen_line, errors %}
|
|
||||||
|
|
||||||
{% block main_content %}
|
{% block main_content %}
|
||||||
<section class="management_table manage_posts">
|
<section class="management-table manage-tags">
|
||||||
<table>
|
{{ super() }}
|
||||||
<thead>
|
|
||||||
<tr>
|
{{ render_pagination('manage.manage_tags', tags) }}
|
||||||
<!-- <th>ID</th> -->
|
</section>
|
||||||
<th>Content</th>
|
{% endblock %}
|
||||||
<th>Category</th>
|
|
||||||
<th>Manage</th>
|
{% block field_headings %}
|
||||||
</tr>
|
<th>Content</th>
|
||||||
</thead>
|
<th>Category</th>
|
||||||
<tbody>
|
{% endblock %}
|
||||||
{% for tag in tags.items %}
|
|
||||||
<form action="{{ url_for('manage.modify_tag') }}" method="post">
|
{% block fields %}
|
||||||
{{ tag.editform.csrf_token }}
|
{% call genfield() %}
|
||||||
{{ tag.editform.id() }}
|
{{ element.content_deser }}
|
||||||
<tr>
|
{% endcall %}
|
||||||
<!-- <td>{{ tag.id }}</td> -->
|
|
||||||
<td>{{ tag.content_deser }}</td>
|
{% call genfield(element.editform.category) %}
|
||||||
<td>{{ management_gen_line(tag.category.name.capitalize(), tag.editform.category) }}</td>
|
{{ element.category.name.capitalize() }}
|
||||||
<td>
|
{% endcall %}
|
||||||
<label class="show to-edit"><span class="fa fa-edit"></span></label>
|
{% endblock %}
|
||||||
<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>
|
{% block createform %}
|
||||||
<label><span class="fa fa-trash-o"></span>{{ tag.editform.delete() }}</label>
|
<tr>
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</form>
|
|
||||||
{% endfor %}
|
|
||||||
<form action="{{ url_for('manage.modify_tag') }}" method="post">
|
<form action="{{ url_for('manage.modify_tag') }}" method="post">
|
||||||
{{ createform.csrf_token }}
|
{{ createform.csrf_token }}
|
||||||
<tr>
|
|
||||||
<!-- <td></td> -->
|
|
||||||
<td>{{ createform.content() }}</td>
|
<td>{{ createform.content() }}</td>
|
||||||
<td>{{ createform.category() }}</td>
|
<td>{{ createform.category() }}</td>
|
||||||
<td>{{ createform.create() }}</td>
|
<td>{{ createform.create() }}</td>
|
||||||
</tr>
|
|
||||||
</form>
|
</form>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
|
||||||
{{ render_pagination('manage.manage_tags', tags) }}
|
|
||||||
</section>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@ -1,56 +1,55 @@
|
|||||||
{% extends 'layout/settings.html' %}
|
{% extends 'layout/management.html' %}
|
||||||
{% from '_includes.html' import render_pagination with context %}
|
{% from '_includes.html' import render_pagination with context %}
|
||||||
{% from "_formhelpers.html" import management_gen_line, errors %}
|
|
||||||
|
|
||||||
{% block main_content %}
|
{% block main_content %}
|
||||||
<section class="management_table manage_users">
|
<section class="management-table manage-users">
|
||||||
<table>
|
{{ super() }}
|
||||||
<thead>
|
|
||||||
<tr>
|
{{ render_pagination('manage.manage_users', users) }}
|
||||||
<th>ID</th>
|
</section>
|
||||||
<th>Username</th>
|
{% endblock %}
|
||||||
<th>User status</th>
|
|
||||||
<th>Perm level</th>
|
{% block field_headings %}
|
||||||
<th>Last login</th>
|
<th>ID</th>
|
||||||
<th>Manage</th>
|
<th>Username</th>
|
||||||
</tr>
|
<th>User status</th>
|
||||||
</thead>
|
<th>Perm level</th>
|
||||||
<tbody>
|
<th>Last login</th>
|
||||||
{% for user in users.items %}
|
{% 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">
|
<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.csrf_token }}
|
||||||
{{ createform.id() }}
|
{{ createform.id() }}
|
||||||
<tr>
|
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>{{ createform.username() }}</td>
|
<td>{{ createform.username() }}</td>
|
||||||
<td>{{ createform.user_status() }}</td>
|
<td>{{ createform.user_status() }}</td>
|
||||||
<td>{{ createform.op_level() }}</td>
|
<td>{{ createform.op_level() }}</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>{{ createform.create() }}</td>
|
<td>{{ createform.create() }}</td>
|
||||||
</tr>
|
</form>
|
||||||
</form> -->#}
|
</tr>
|
||||||
</tbody>
|
{% endblock %}#}
|
||||||
</table>
|
|
||||||
{{ render_pagination('manage.manage_users', users) }}
|
|
||||||
</section>
|
|
||||||
{% endblock %}
|
|
||||||
Loading…
Reference in New Issue