From 50beeb9bdf74eebe88f84460c76907bcbb434f1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Ku=C5=BE=C3=ADlek?= Date: Wed, 11 Mar 2020 22:00:28 +0100 Subject: [PATCH] Forms. Styles. Scripts. Managements. BRUH. --- yadc/__init__.py | 10 +- yadc/{static => assets}/_include-media.scss | 0 yadc/assets/base-types.scss | 256 +++++++ yadc/{static => assets}/base.js | 0 yadc/assets/default.scss | 230 ++++++ yadc/assets/formswitchers.js | 31 + yadc/assets/header.scss | 160 +++++ yadc/assets/main.scss | 37 + yadc/{static => assets}/search.js | 0 yadc/bp/manage.py | 10 +- yadc/static/all.css | 2 +- yadc/static/all.js | 238 ++++++ yadc/static/comment.js | 17 - yadc/static/default.scss | 720 ------------------- yadc/static/management.js | 17 - yadc/templates/_formhelpers.html | 18 +- yadc/templates/_includes.html | 70 ++ yadc/templates/layout/base.html | 10 +- yadc/templates/layout/base_sidebar.html | 4 +- yadc/templates/layout/base_sidebar_tags.html | 62 +- yadc/templates/layout/management.html | 60 ++ yadc/templates/manage/posts.html | 70 +- yadc/templates/manage/tags.html | 71 +- yadc/templates/manage/users.html | 101 ++- yadc/templates/post/index.html | 2 +- yadc/templates/post/post.html | 145 ++-- 26 files changed, 1341 insertions(+), 1000 deletions(-) rename yadc/{static => assets}/_include-media.scss (100%) create mode 100644 yadc/assets/base-types.scss rename yadc/{static => assets}/base.js (100%) create mode 100644 yadc/assets/default.scss create mode 100644 yadc/assets/formswitchers.js create mode 100644 yadc/assets/header.scss create mode 100644 yadc/assets/main.scss rename yadc/{static => assets}/search.js (100%) create mode 100644 yadc/static/all.js delete mode 100644 yadc/static/comment.js delete mode 100644 yadc/static/default.scss delete mode 100644 yadc/static/management.js create mode 100644 yadc/templates/layout/management.html diff --git a/yadc/__init__.py b/yadc/__init__.py index fbb2cf1..2e04fce 100644 --- a/yadc/__init__.py +++ b/yadc/__init__.py @@ -50,13 +50,17 @@ def create_app(): def utility_processor(): return dict(utils=utils) + + with app.app_context(): + assets.append_path(os.path.join(app.root_path, 'assets')) + # print(assets.load_path) #assets.url = app.static_url_path scss = AssetsBundle( - 'default.scss', - filters=['libsass','cssmin'], output='all.css') + 'main.scss', + depends=('*.scss'), filters=['libsass','cssmin'], output='all.css') assets.register('scss_all', scss) js = AssetsBundle( - 'base.js', 'management.js', + 'formswitchers.js', 'base.js', 'search.js', # filters='rjsmin', output='all.js') diff --git a/yadc/static/_include-media.scss b/yadc/assets/_include-media.scss similarity index 100% rename from yadc/static/_include-media.scss rename to yadc/assets/_include-media.scss diff --git a/yadc/assets/base-types.scss b/yadc/assets/base-types.scss new file mode 100644 index 0000000..e055597 --- /dev/null +++ b/yadc/assets/base-types.scss @@ -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%; + // } +} \ No newline at end of file diff --git a/yadc/static/base.js b/yadc/assets/base.js similarity index 100% rename from yadc/static/base.js rename to yadc/assets/base.js diff --git a/yadc/assets/default.scss b/yadc/assets/default.scss new file mode 100644 index 0000000..7be8c9d --- /dev/null +++ b/yadc/assets/default.scss @@ -0,0 +1,230 @@ +.main-wrap { + $bp-desktop: ">=desktop"; + $bp-tablet: " 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(" 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(" .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; +} diff --git a/yadc/assets/formswitchers.js b/yadc/assets/formswitchers.js new file mode 100644 index 0000000..6b47f76 --- /dev/null +++ b/yadc/assets/formswitchers.js @@ -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() \ No newline at end of file diff --git a/yadc/assets/header.scss b/yadc/assets/header.scss new file mode 100644 index 0000000..a9fd6c0 --- /dev/null +++ b/yadc/assets/header.scss @@ -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(" nav { + flex-grow: 1; + + display: flex; + + > ._overlay { + display: none; + } + + @include media(" 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("') @@ -41,7 +41,7 @@ def manage_posts(page): status=post.status.name, source=post.source) - return render_template('manage/posts.html', posts=posts) + return render_template('manage/posts.html', posts=posts, elements=posts.items) @bp.route('/tags', defaults={'page': 1}) @bp.route('/tags/') @@ -56,7 +56,7 @@ def manage_tags(page): content=tag.content_deser, category=tag.category.name) - return render_template('manage/tags.html', tags=tags, createform=TagForm()) + return render_template('manage/tags.html', tags=tags, elements=tags.items, createform=TagForm()) @@ -182,7 +182,7 @@ def modify_comment(): # flash(str(request.form)) if form.validate(): if form.create.data: - el = Comment(content=form.content.data, post_id=form.post_id.data, user=current_user) + el = Comment(content=form.content.data.strip(), post_id=form.post_id.data, user=current_user) db.session.add(el) db.session.commit() @@ -198,7 +198,7 @@ def modify_comment(): db.session.commit() flash('{} deleted.'.format(str(el))) elif form.edit.data: - if form.content.data: el.content = form.content.data + if form.content.data: el.content = form.content.data.strip() db.session.commit() flash('Changes to {} have been applied.'.format(str(el))) diff --git a/yadc/static/all.css b/yadc/static/all.css index e9a1173..9ea4d7d 100644 --- a/yadc/static/all.css +++ b/yadc/static/all.css @@ -1 +1 @@ -*{box-sizing:border-box}body{margin:0;font-family:Verdana,Geneva,Tahoma,sans-serif;background-color:#222;color:#fff}a{color:#bbb;text-decoration:none}a:hover{color:#909090;text-decoration:none}header{display:flex;align-items:baseline;padding:0 10px;background-color:#222}header>a.logo{font-size:2em;margin:6px}@media(max-width:559px){header{position:relative}}header>nav{flex-grow:1;display:flex}header>nav>._overlay{display:none}@media(max-width:559px){header>nav{display:none}header>nav._drop{display:flex;flex-flow:column nowrap;position:absolute;margin:0;top:100%;left:0;right:0;z-index:10;background-color:#111d}header>nav>a,header>nav a#user-menu,header>nav .user_dropdown>a{padding:12px;padding-left:24px}header>nav>a:hover,header>nav>a:active,header>nav a#user-menu:hover,header>nav a#user-menu:active,header>nav .user_dropdown>a:hover,header>nav .user_dropdown>a:active{background-color:#333}header>nav .user::before{content:"";display:block;border-top:1px solid grey;margin:2px 12px}header>nav .user #user-menu{display:block}header>nav .user .user_dropdown{display:flex;flex-flow:column nowrap}header>nav>._overlay{display:block;position:fixed;width:100%;height:100%;z-index:-1;background-color:#0006}html.oh{overflow:hidden}}@media(min-width:560px){header>nav{margin:0 5px;align-items:center}header>nav>*{margin:0 5px;padding:6px 0}header>nav>.user{padding:0;margin-left:auto;margin-right:0;position:relative}header>nav>.user #user-menu{display:block;padding:6px 10px}header>nav>.user .user_dropdown{display:none}header>nav>.user .user_dropdown a{padding:10px}header>nav>.user .user_dropdown a:hover{background-color:#333}header>nav>.user:hover>.user_dropdown{display:flex;flex-flow:column nowrap;position:absolute;margin:0;top:100%;right:0;z-index:10;background-color:#111d}}header>#nav-menu{display:none}@media(max-width:559px){header>#nav-menu{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;bottom:0;right:0;margin:0;padding:10px;font-size:.9em;pointer-events:none}.flash_msgs>li{width:250px;padding:10px;background-color:#000c;overflow:hidden;opacity:0;animation:fade 7s normal}.flash_msgs>li:not(:first-child){margin-bottom:10px}@keyframes fade{0%,100%{opacity:0}20%,80%{opacity:1}}.main_wrap{margin:0 auto;max-width:1300px;padding:8px;padding-top:0;padding-bottom:0}.main_wrap h3{margin:0;margin-bottom:10px;font-size:1.3em}.main_wrap form .tag_input .tag_suggester,.main_wrap .tag_input form .tag_suggester{width:calc(100% - 50px);position:relative}.main_wrap form .tag_input .tag_suggester>.tag_suggest_dropdown,.main_wrap .tag_input form .tag_suggester>.tag_suggest_dropdown{display:flex;flex-flow:column nowrap;align-items:start;top:100%;left:0;position:absolute;z-index:10;overflow:auto;background-color:#2d2d2de0}.main_wrap form .tag_input .tag_container,.main_wrap .tag_input form .tag_container{display:flex}.main_wrap form .tag_input .tag_container>a,.main_wrap .tag_input form .tag_container>a{margin:2px 2px;padding:.35em .6em;border-radius:4px;background-color:#121212ff;cursor:pointer}.main_wrap form .tag_input .tag_container>a>*,.main_wrap .tag_input form .tag_container>a>*{pointer-events:none}.main_wrap form .tag_input .tag_container>a>.fa-tag,.main_wrap .tag_input form .tag_container>a>.fa-tag{font-size:.9em;margin-right:2px}.main_wrap form .tag_input .tag_container>a>.count,.main_wrap .tag_input form .tag_container>a>.count{font-size:.8em}.main_wrap form .tag_input .tag_container>a:not(:hover)>span.close,.main_wrap .tag_input form .tag_container>a:not(:hover)>span.close{display:none}.main_wrap form .tag_input .tag_container>a:not(:hover)>span.plus,.main_wrap .tag_input form .tag_container>a:not(:hover)>span.plus{display:none}.main_wrap form .tag_input .tag_container>a:hover>span.count,.main_wrap .tag_input form .tag_container>a:hover>span.count{display:none}.main_wrap form .tag_input .tag_container>a.tagselected,.main_wrap .tag_input form .tag_container>a.tagselected{background-color:#400808ff}.main_wrap form .tag_input .tag_container>a.tag_hide,.main_wrap .tag_input form .tag_container>a.tag_hide{display:none}.main_wrap .important_subwrap{display:flex;overflow:visible}@media(max-width:899px){.main_wrap .important_subwrap{flex-flow:column nowrap}}@media(min-width:900px){.main_wrap .important_subwrap{flex-flow:row nowrap}}.main_wrap .important_subwrap>section.side_panel{flex-shrink:0;padding:10px}@media(min-width:900px){.main_wrap .important_subwrap>section.side_panel{width:18rem;height:0}}.main_wrap .important_subwrap>section.side_panel article{margin-bottom:10px}@media(max-width:899px){.main_wrap .important_subwrap>section.side_panel article.tags .tag_container{flex-flow:row wrap}}@media(min-width:900px){.main_wrap .important_subwrap>section.side_panel article.tags .tag_container{flex-flow:column nowrap;align-items:start}}.main_wrap .important_subwrap>section.side_panel article.post_desc{display:flex;flex-flow:column nowrap;font-size:.9em}.main_wrap .important_subwrap>section.side_panel article.post_desc>img{display:block;max-width:128px}@media(min-width:900px){.main_wrap .important_subwrap>section:not(.side_panel){width:100%}}.main_wrap section.post_list{overflow:hidden}@media(max-width:559px){.main_wrap section.post_list{margin-left:-8px;margin-right:-8px}}.main_wrap section.post_list .posts{display:flex;flex-flow:row wrap}@media(max-width:899px){.main_wrap section.post_list .posts{margin-left:-8px;margin-right:-8px}}.main_wrap section.post_list .posts::after{content:"";flex:10000 0 350px}.main_wrap section.post_list .posts>figure{position:relative;margin:8px}.main_wrap section.post_list .posts>figure img{display:block;width:100%;height:100%;transition:.2s ease}.main_wrap section.post_list .posts>figure:hover img{opacity:.7}@media(min-width:900px){.main_wrap section.post_single{padding:8px}}@media(max-width:899px){.main_wrap section.post_single{order:-1;margin-bottom:8px}}@media(max-width:559px){.main_wrap section.post_single{margin-left:-8px;margin-right:-8px}}.main_wrap section.post_single img{display:block;max-width:100%}.main_wrap section.comments{padding:10px}@media(min-width:900px){.main_wrap section.comments{margin-left:18rem}}.main_wrap section.comments>.comment_container{padding:0 10px;max-width:500px}.main_wrap section.comments>.comment_container article.comment{overflow:hidden;margin-bottom:1em}.main_wrap section.comments>.comment_container h4{margin:0;margin-bottom:.5em}.main_wrap section.comments>.comment_container p,.main_wrap section.comments>.comment_container textarea{margin:0}.main_wrap section.comments>.comment_container p.deleted,.main_wrap section.comments>.comment_container textarea.deleted{color:red}.main_wrap section.comments>.comment_container .comment_head{display:flex;justify-content:space-between}.main_wrap section.comments>.form>form{margin-left:10px;max-width:500px}.main_wrap section.comments>.form>form input:required{box-shadow:none}.main_wrap section.comments>.form>form textarea{width:100%;background:#444a;border:none;color:inherit;font:inherit}.main_wrap section.management_table table{margin:0 auto}.main_wrap section.management_table tr{background-color:#303030}.main_wrap section.management_table tr th{background-color:#606060}.main_wrap section.management_table tr th,.main_wrap section.management_table tr td{padding:6px 10px}.main_wrap section.management_table tr:not(.edit) td>.edit{display:none}.main_wrap section.management_table tr.edit td>.show{display:none}.main_wrap section.management_table tr input[type=submit]:not([name=create]){display:none}.main_wrap section.management_table tr .fa{padding:4px 4px;align-self:center;font-size:1.5em;cursor:pointer}.main_wrap form.editingable:not(.time-to-edit) .edit{display:none}.main_wrap form.editingable.time-to-edit .notedit{display:none}.main_wrap form.editingable input[type=text],.main_wrap form.editingable textarea{resize:vertical;width:100%}.main_wrap form.editingable input[type=text].edit,.edit .main_wrap form.editingable input[type=text],.main_wrap form.editingable textarea.edit,.edit .main_wrap form.editingable textarea{background:#444a;border:none;color:inherit;font:inherit}.main_wrap form input{margin:5px 0}.main_wrap .pagin{margin:10px 0;display:flex;flex-flow:row nowrap;justify-content:center}.main_wrap .pagin>a{display:block;background-color:#0005;padding:8px 12px;margin:0 2px}footer{padding:10px;text-align:center} \ No newline at end of file +.flash_msgs{display:flex;flex-flow:column-reverse nowrap;position:fixed;z-index:20;bottom:0;right:0;margin:0;padding:10px;font-size:.9em;pointer-events:none}.flash_msgs>li{width:250px;padding:10px;background-color:#000c;overflow:hidden;opacity:0;animation:fade 7s normal}.flash_msgs>li:not(:first-child){margin-bottom:10px}@keyframes fade{0%,100%{opacity:0}20%,80%{opacity:1}}h3{margin:0;margin-bottom:1em;font-size:1.3em}h4{margin:0;margin-bottom:.8em}.comment-form{margin-left:10px;max-width:500px}.comment-form input:required{box-shadow:none}.comment-form textarea{width:100%;background:#444a;border:none;color:inherit;font:inherit}.editingable:not(.time-to-edit) .edit{display:none}.editingable.time-to-edit .notedit{display:none}input[type=text],textarea{resize:vertical;width:100%}input[type=text].edit,.edit input[type=text],input[type=text],textarea.edit,.edit textarea,textarea{background:#444a;border:none;color:inherit;font:inherit}form .tag_input .tag-suggester,.tag_input form .tag-suggester{width:calc(100% - 50px);position:relative}form .tag_input .tag-suggester>.tag_suggest_dropdown,.tag_input form .tag-suggester>.tag_suggest_dropdown{display:flex;flex-flow:column nowrap;align-items:start;top:100%;left:0;position:absolute;z-index:10;overflow:auto;background-color:#2d2d2de0}form .tag_input .tag-container,.tag_input form .tag-container{display:flex}form .tag_input .tag-container>a,.tag_input form .tag-container>a{margin:2px 2px;padding:.35em .6em;border-radius:4px;background-color:#121212ff;cursor:pointer}form .tag_input .tag-container>a>*,.tag_input form .tag-container>a>*{pointer-events:none}form .tag_input .tag-container>a>.fa-tag,.tag_input form .tag-container>a>.fa-tag{font-size:.9em;margin-right:2px}form .tag_input .tag-container>a>.count,.tag_input form .tag-container>a>.count{font-size:.8em}form .tag_input .tag-container>a:not(:hover)>span.close,.tag_input form .tag-container>a:not(:hover)>span.close{display:none}form .tag_input .tag-container>a:not(:hover)>span.plus,.tag_input form .tag-container>a:not(:hover)>span.plus{display:none}form .tag_input .tag-container>a:hover>span.count,.tag_input form .tag-container>a:hover>span.count{display:none}form .tag_input .tag-container>a.tagselected,.tag_input form .tag-container>a.tagselected{background-color:#400808ff}form .tag_input .tag-container>a.tag_hide,.tag_input form .tag-container>a.tag_hide{display:none}form input{margin:5px 0}header{display:flex;align-items:baseline;padding:0 10px;background-color:#222}header>a.logo{font-size:2em;margin:6px}@media(max-width:559px){header{position:relative}}header>nav{flex-grow:1;display:flex}header>nav>._overlay{display:none}@media(max-width:559px){header>nav{display:none}header>nav._drop{display:flex;flex-flow:column nowrap;position:absolute;margin:0;top:100%;left:0;right:0;z-index:10;background-color:#111d}header>nav>a,header>nav a#user-menu,header>nav .user_dropdown>a{padding:12px;padding-left:24px}header>nav>a:hover,header>nav>a:active,header>nav a#user-menu:hover,header>nav a#user-menu:active,header>nav .user_dropdown>a:hover,header>nav .user_dropdown>a:active{background-color:#333}header>nav .user::before{content:"";display:block;border-top:1px solid grey;margin:2px 12px}header>nav .user #user-menu{display:block}header>nav .user .user_dropdown{display:flex;flex-flow:column nowrap}header>nav>._overlay{display:block;position:fixed;width:100%;height:100%;z-index:-1;background-color:#0006}html.oh{overflow:hidden}}@media(min-width:560px){header>nav{margin:0 5px;align-items:center}header>nav>*{margin:0 5px;padding:6px 0}header>nav>.user{padding:0;margin-left:auto;margin-right:0;position:relative}header>nav>.user #user-menu{display:block;padding:6px 10px}header>nav>.user .user_dropdown{display:none}header>nav>.user .user_dropdown a{padding:10px}header>nav>.user .user_dropdown a:hover{background-color:#333}header>nav>.user:hover>.user_dropdown{display:flex;flex-flow:column nowrap;position:absolute;margin:0;top:100%;right:0;z-index:10;background-color:#111d}}header>#nav-menu{display:none}@media(max-width:559px){header>#nav-menu{display:block;margin:5px;margin-left:auto;padding:0 2px;align-self:center;font-size:2em;cursor:pointer}}.main-wrap{margin:0 auto;max-width:1300px;padding:8px;padding-top:0;padding-bottom:0}.main-wrap .important-subwrap{display:flex;overflow:visible}@media(max-width:899px){.main-wrap .important-subwrap{flex-flow:column nowrap}}@media(min-width:900px){.main-wrap .important-subwrap{flex-flow:row nowrap}}.main-wrap .important-subwrap>section.sidepanel{flex-shrink:0;padding:10px}@media(min-width:900px){.main-wrap .important-subwrap>section.sidepanel{width:18rem;height:0}}.main-wrap .important-subwrap>section.sidepanel article{margin-bottom:10px}@media(max-width:899px){.main-wrap .important-subwrap>section.sidepanel article.tags .tag-container{flex-flow:row wrap}}@media(min-width:900px){.main-wrap .important-subwrap>section.sidepanel article.tags .tag-container{flex-flow:column nowrap;align-items:start}}.main-wrap .important-subwrap>section.sidepanel article.post-desc{display:flex;flex-flow:column nowrap;font-size:.9em}.main-wrap .important-subwrap>section.sidepanel article.post-desc>img{display:block;max-width:128px}@media(min-width:900px){.main-wrap .important-subwrap>section:not(.sidepanel){width:100%}}.main-wrap section.post-list{overflow:hidden}@media(max-width:559px){.main-wrap section.post-list{margin-left:-8px;margin-right:-8px}}.main-wrap section.post-list .posts{display:flex;flex-flow:row wrap}@media(max-width:899px){.main-wrap section.post-list .posts{margin-left:-8px;margin-right:-8px}}.main-wrap section.post-list .posts::after{content:"";flex:10000 0 350px}.main-wrap section.post-list .posts>figure{position:relative;margin:8px}.main-wrap section.post-list .posts>figure img{display:block;width:100%;height:100%;transition:.2s ease}.main-wrap section.post-list .posts>figure:hover img{opacity:.7}@media(min-width:900px){.main-wrap section.post-single{padding:8px}}@media(max-width:899px){.main-wrap section.post-single{order:-1;margin-bottom:8px}}@media(max-width:559px){.main-wrap section.post-single{margin-left:-8px;margin-right:-8px}}.main-wrap section.post-single img{display:block;max-width:100%}.main-wrap section.comments{padding:10px}@media(min-width:900px){.main-wrap section.comments{margin-left:18rem}}.main-wrap section.comments>.comment-container{padding:0 10px;max-width:500px}.main-wrap section.comments>.comment-container article.comment{overflow:hidden;margin-bottom:1em}.main-wrap section.comments>.comment-container article.comment p,.main-wrap section.comments>.comment-container article.comment textarea{margin:0}.main-wrap section.comments>.comment-container article.comment p.deleted,.main-wrap section.comments>.comment-container article.comment textarea.deleted{color:red}.main-wrap section.comments>.comment-container article.comment .comment-head{display:flex;justify-content:space-between}.main-wrap section.management-table table{margin:0 auto}.main-wrap section.management-table tr{background-color:#303030}.main-wrap section.management-table tr th,.main-wrap section.management-table tr td{padding:6px 10px}.main-wrap section.management-table tr th{background-color:#606060}.main-wrap section.management-table tr label>input{display:none}.main-wrap section.management-table tr .fa{padding:4px 4px;align-self:center;font-size:1.5em;cursor:pointer}.main-wrap .pagin{margin:10px 0;display:flex;flex-flow:row nowrap;justify-content:center}.main-wrap .pagin>a{display:block;background-color:#0005;padding:8px 12px;margin:0 2px}footer{padding:10px;text-align:center}*{box-sizing:border-box}body{margin:0;font-family:Verdana,Geneva,Tahoma,sans-serif;background-color:#222;color:#fff}a{color:#bbb;text-decoration:none}a:hover{color:#909090;text-decoration:none} \ No newline at end of file diff --git a/yadc/static/all.js b/yadc/static/all.js new file mode 100644 index 0000000..2999d80 --- /dev/null +++ b/yadc/static/all.js @@ -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", ``) +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", ` + + + + `) + 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", ` + + + + `) + 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')) diff --git a/yadc/static/comment.js b/yadc/static/comment.js deleted file mode 100644 index 3ceb422..0000000 --- a/yadc/static/comment.js +++ /dev/null @@ -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)) -}) \ No newline at end of file diff --git a/yadc/static/default.scss b/yadc/static/default.scss deleted file mode 100644 index e21c42c..0000000 --- a/yadc/static/default.scss +++ /dev/null @@ -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(" nav { - flex-grow: 1; - - display: flex; - - > ._overlay { - display: none; - } - - @include media(" 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(" 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: " .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(" 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(" .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; -} diff --git a/yadc/static/management.js b/yadc/static/management.js deleted file mode 100644 index 88481bc..0000000 --- a/yadc/static/management.js +++ /dev/null @@ -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) - }) - -}); \ No newline at end of file diff --git a/yadc/templates/_formhelpers.html b/yadc/templates/_formhelpers.html index 4be005f..0267cdc 100644 --- a/yadc/templates/_formhelpers.html +++ b/yadc/templates/_formhelpers.html @@ -8,12 +8,24 @@ {% endif %} {% endmacro %} + {% macro management_gen_line(field, formfield) %} {{ field }} {{ formfield() }} {{ errors(formfield) }} {% endmacro %} -{% macro management_row_gen(field_formfield) %} - -{% endmacro %} \ No newline at end of file + +{% macro genfield(formfield=None) %} +{% if not formfield %} + + {{ caller() }} + +{% else %} + + {{ caller() }} + {{ formfield() }} + {{ errors(formfield) }} + +{% endif %} +{% endmacro %} diff --git a/yadc/templates/_includes.html b/yadc/templates/_includes.html index ec5dabd..ac8434e 100644 --- a/yadc/templates/_includes.html +++ b/yadc/templates/_includes.html @@ -28,6 +28,7 @@ {% endmacro %} --> + {% macro render_comments() %}
{% for comment in comments %} @@ -51,6 +52,7 @@
{% endmacro %} + {% macro render_post_edit() %}

Edit

@@ -58,6 +60,7 @@
{% endmacro %} + {% macro render_sidenav(sidenav_links) %}
{% for class, (name, link) in sidenav_links.items() %} @@ -76,4 +79,71 @@
+{% endmacro %} + + +{% from "_formhelpers.html" import errors %} +{% macro render_management_table(elements) %} + + + + {% for heading in elements[0][1].keys() %} + + {% endfor %} + + + + + {% for element,fields in elements %} + + + {{ element.editform.csrf_token }} + {{ element.editform.id() }} + + {% for field,formfield in fields.values() %} + {% if not formfield %} + + {% else %} + + {% endif %} + {% endfor %} + + + + + {% endfor %} + + {{ caller() }} + + {##} + +
{{ heading }}Manage
+ {{ field }} + + {{ field }} + {{ formfield() }} + {{ errors(formfield) }} + + + + + +
{% endmacro %} \ No newline at end of file diff --git a/yadc/templates/layout/base.html b/yadc/templates/layout/base.html index b1fd100..c6b5634 100644 --- a/yadc/templates/layout/base.html +++ b/yadc/templates/layout/base.html @@ -53,14 +53,18 @@ {% endif %} {% endwith %} -
+
{% block content %}{% endblock %}
Produced by KuxaBeast
- - + +{% assets "js_all" %} + +{% endassets %} + {# + #} \ No newline at end of file diff --git a/yadc/templates/layout/base_sidebar.html b/yadc/templates/layout/base_sidebar.html index 838b4b0..f54211a 100644 --- a/yadc/templates/layout/base_sidebar.html +++ b/yadc/templates/layout/base_sidebar.html @@ -1,8 +1,8 @@ {% extends 'layout/base.html' %} {% block content %} -
-
+
+
{% block sidebar %}{% endblock %}
{% block main_content %}{% endblock %} diff --git a/yadc/templates/layout/base_sidebar_tags.html b/yadc/templates/layout/base_sidebar_tags.html index a1c4138..7fb5298 100644 --- a/yadc/templates/layout/base_sidebar_tags.html +++ b/yadc/templates/layout/base_sidebar_tags.html @@ -1,37 +1,41 @@ {% extends 'layout/base_sidebar.html' %} {% block sidebar %} +
+

Rating

+
+ {% for rating in ('safe', 'questionable', 'explicit') %} + + +
+ {% endfor %} +
+
{% endblock %} diff --git a/yadc/templates/layout/management.html b/yadc/templates/layout/management.html new file mode 100644 index 0000000..d8889f8 --- /dev/null +++ b/yadc/templates/layout/management.html @@ -0,0 +1,60 @@ +{% extends 'layout/settings.html' %} + +{% block main_content %}{{ self.management_table() }}{% endblock %} + +{% block management_table %} + + + + {% block field_headings %}{% endblock %} + + + + + {% for element in elements %} + + + {{ element.editform.csrf_token }} + {{ element.editform.id() }} + + {% block fields scoped %}{% endblock %} + + + + + {% endfor %} + + {% block createform %}{% endblock %} + +
Manage
+ + + + +
+{% endblock %} + +{% from "_formhelpers.html" import errors %} +{% macro genfield(formfield=None) %} +{% if not formfield %} + + {{ caller() }} + +{% else %} + + {{ caller() }} + {{ formfield() }} + {{ errors(formfield) }} + +{% endif %} +{% endmacro %} \ No newline at end of file diff --git a/yadc/templates/manage/posts.html b/yadc/templates/manage/posts.html index ecc5997..c445d82 100644 --- a/yadc/templates/manage/posts.html +++ b/yadc/templates/manage/posts.html @@ -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 %} -
- - - - - - - - - - - - - {% for post in posts.items %} - - {{ post.editform.csrf_token }} - {{ post.editform.id() }} - - - - - - - - - - {% endfor %} - -
IDMD5RatingStatusSourceManage
{{ post.id }}
{{ post.md5[:7] }}
{{ management_gen_line(post.rating.name.capitalize(), post.editform.rating) }}{{ management_gen_line(post.status.name.capitalize(), post.editform.status) }}{{ management_gen_line(post.source, post.editform.source) }} - - - - -
+
+ {{ super() }} + {{ render_pagination('manage.manage_posts', posts) }}
+{% endblock %} + +{% block field_headings %} +ID +MD5 +Rating +Status +Source +{% endblock %} + +{% block fields %} + {% call genfield() %} + {{ element.id }} + {% endcall %} + + {% call genfield() %} + 
{{ element.md5[:7] }}
+ {% 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 %} \ No newline at end of file diff --git a/yadc/templates/manage/tags.html b/yadc/templates/manage/tags.html index 7c50b1e..8a6143b 100644 --- a/yadc/templates/manage/tags.html +++ b/yadc/templates/manage/tags.html @@ -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 %} -
- - - - - - - - - - - {% for tag in tags.items %} - - {{ tag.editform.csrf_token }} - {{ tag.editform.id() }} - - - - - - - - {% endfor %} - - {{ createform.csrf_token }} - - - - - - - - -
ContentCategoryManage
{{ tag.content_deser }}{{ management_gen_line(tag.category.name.capitalize(), tag.editform.category) }} - - - - -
{{ createform.content() }}{{ createform.category() }}{{ createform.create() }}
+
+ {{ super() }} + {{ render_pagination('manage.manage_tags', tags) }}
+{% endblock %} + +{% block field_headings %} +Content +Category +{% endblock %} + +{% block fields %} + {% call genfield() %} + {{ element.content_deser }} + {% endcall %} + + {% call genfield(element.editform.category) %} + {{ element.category.name.capitalize() }} + {% endcall %} +{% endblock %} + +{% block createform %} + +
+ {{ createform.csrf_token }} + {{ createform.content() }} + {{ createform.category() }} + {{ createform.create() }} +
+ {% endblock %} \ No newline at end of file diff --git a/yadc/templates/manage/users.html b/yadc/templates/manage/users.html index 8b442b6..e4fa256 100644 --- a/yadc/templates/manage/users.html +++ b/yadc/templates/manage/users.html @@ -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 %} -
- - - - - - - - - - - - - {% for user in users.items %} - - {{ user.editform.csrf_token }} - {{ user.editform.id() }} - - - - - - - - - - {% endfor %} - {##} - -
IDUsernameUser statusPerm levelLast loginManage
{{ user.id }}{{ management_gen_line(user.username, user.editform.username) }}{{ management_gen_line(user.user_status.name.capitalize(), user.editform.user_status) }}{{ management_gen_line(user.op_level.name.capitalize(), user.editform.op_level) }}{{ user.last_login.strftime('%I:%M %p %d %b, %Y') if user.last_login else 'Not yet logged in' }} - - - - -
+
+ {{ super() }} + {{ render_pagination('manage.manage_users', users) }}
-{% endblock %} \ No newline at end of file +{% endblock %} + +{% block field_headings %} +ID +Username +User status +Perm level +Last login +{% 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 %} + +
+ {{ createform.csrf_token }} + {{ createform.id() }} + + {{ createform.username() }} + {{ createform.user_status() }} + {{ createform.op_level() }} + + {{ createform.create() }} +
+ +{% endblock %}#} \ No newline at end of file diff --git a/yadc/templates/post/index.html b/yadc/templates/post/index.html index b5cc266..f7dfd4c 100644 --- a/yadc/templates/post/index.html +++ b/yadc/templates/post/index.html @@ -4,7 +4,7 @@ {% block search_endpoint %}{% endblock %} {% block main_content %} -
+
{% for post in posts.items %}
diff --git a/yadc/templates/post/post.html b/yadc/templates/post/post.html index 2fd335b..77b80aa 100644 --- a/yadc/templates/post/post.html +++ b/yadc/templates/post/post.html @@ -3,56 +3,57 @@ {% from "_formhelpers.html" import errors %} {% block sidebar %} -
- - -
Id: {{ post.id }}
-
Author: {{ post.author.username or "Deleted Account" }}
- - {% if post.is_approved %} -
Approved by: {{ post.approver.username }}
- {% endif %} +
+ + +
Id: {{ post.id }}
+
Author: {{ post.author.username or "Deleted Account" }}
- {% if not post.is_approved %} -
Status: {{ post.status.name.capitalize() }}
- {% endif %} + {% if post.is_approved %} +
Approved by: {{ post.approver.username }}
+ {% endif %} -
Posted: {{ post.natural_created() }}
-
Source: {{ post.source }}
-
File size: {{ post.filesize_human }}
-
Image res: {{ post.image_resolution }}
-
Enlarge image
+ {% if not post.is_approved %} +
Status: {{ post.status.name.capitalize() }}
+ {% endif %} - {% if post.filetype.name == 'png' %} -
Original PNG file
- {% endif %} -
+
Posted: {{ post.natural_created() }}
+
Source: {{ post.source }}
+
File size: {{ post.filesize_human }}
+
Image res: {{ post.image_resolution }}
+
Enlarge image
- {{ super() }} + {% if post.filetype.name == 'png' %} +
Original PNG file
+ {% endif %} +
- {% if post.can_edit %} -
-

Edit

+{{ super() }} + +{% if post.can_edit %} +
+

Edit

+
{{ editform.csrf_token }} {{ editform.id() }} -
- {{ render_tag_input(editform.tags) }} - {{ errors(editform.tags) }} -
-
- {{ editform.source }} -
-
- {{ editform.edit() }} -
+ + {{ render_tag_input(editform.tags) }} + {{ errors(editform.tags) }} + + {{ editform.source }} + {{ errors(editform.source) }} + + {{ editform.edit() }}
-
- {% endif %} +
+
+{% endif %} + {% endblock %} {% block main_content %} -
+
@@ -63,34 +64,35 @@ {{ super() }}

Comments

-
+
{% for comment in comments %}
-
-

{{ comment.user.username or "Deleted account" }}

- {% if comment.can_edit %} - - edit - - {% endif %} -
- - {% if not comment.deleted %} - -
- {{ comment.editform.csrf_token }} - {{ comment.editform.id() }} -

{{ comment.content }}

- - {{ comment.editform.content(class="edit") }} - {{ comment.editform.edit(class="edit") }} - {{ comment.editform.delete(class="edit") }} -
- - {% else %} +
+
+

{{ comment.user.username or "Deleted account" }}

+ + {% if comment.can_edit %} + edit + {% endif %} + +
+ +
+ {{ comment.editform.csrf_token }} + {{ comment.editform.id() }} -

{{ comment.delete_reason }}

- {% endif %} + {% if not comment.deleted %} +

{{ comment.content }}

+ {{ comment.editform.content(class="edit") }} + {% else %} +

{{ comment.delete_reason }}

+ {##} + {% endif %} + + {{ comment.editform.edit(class="edit") }} + {{ comment.editform.delete(class="edit") }} +
+
{% endfor %} @@ -98,19 +100,20 @@

No comments so far.

{% endif %}
- + {##} {% if current_user.is_authenticated %} -
-

Reply

+ +

Reply

+
{{ comment_form.csrf_token }} {{ comment_form.post_id() }} -
- {{ comment_form.content() }} - {{ errors(comment_form.content) }} -
-
{{ comment_form.create() }}
+ + {{ comment_form.content() }} + {{ errors(comment_form.content) }} + + {{ comment_form.create() }}
{% else %}