Changes of the last few months including restructuring system from using only ranks to permissions

assets/css/home.css

@@ -106,6 +106,158 @@
     animation: fadeInUp 300ms linear 1200ms both;
 }
 
+.tilted-column {
+    position: relative;
+    width: calc((100% / 3) + 6px + (32px / 3));
+    height: 33vw;
+    display: inline-block;
+    margin-left: -6px;
+    overflow: hidden;
+    border-right: 10px solid transparent;
+    transform: skewX(-6deg);
+}
+
+.tilted-column:nth-child(3n+1) {
+    margin-left: -24px;
+    margin-right: 0 !important;
+}
+
+.tilted-column:nth-child(3n+3) {
+    margin-right: -32px;
+    border-right: 0;
+}
+
+.tilted-column > .column-image {
+    width: 100%;
+    transform: skewX(6deg) scale(1.1);
+    transition: transform .8s;
+}
+
+.tilted-column > .column-caption {
+    position: absolute;
+    width: 75%;
+    top: 100%;
+    left: 56%;
+    opacity: 0;
+    transform: skewX(6deg) translate(-50%, 0);
+    transition: all .8s;
+}
+
+.tilted-column > .column-caption > .column-title,
+.tilted-column > .column-caption > .column-desc {
+    color: #fff;
+    background-color: rgba(0, 0, 0, .8);
+    padding: 4px 16px;
+    border-radius: 10px;
+    font-size: 2.5vw;
+}
+
+.tilted-column > .column-caption > .column-desc {
+    font-size: 1.25vw;
+    font-weight: bolder;
+    width: 100%;
+}
+
+.tilted-column:hover > .column-image {
+    transform: skewX(6deg) scale(1.5);
+}
+
+.tilted-column:hover > .column-caption {
+    top: 50%;
+    left: 54%;
+    transform: skewX(6deg) translate(-50%, -50%);
+    opacity: 1;
+}
+
+@media (max-width: 767px) {
+    .tilted-column {
+        width: calc(50% + 6px + (32px / 2));
+        height: 50vw;
+    }
+
+    .tilted-column:nth-child(3n+1) {
+        margin-left: -6px;
+    }
+
+    .tilted-column:nth-child(3n+3) {
+        margin-right: 0;
+        border-right: 10px solid transparent;
+    }
+
+    .tilted-column:nth-child(2n+1) {
+        margin-left: -24px;
+        margin-right: 0 !important;
+    }
+
+    .tilted-column:nth-child(2n + 2) {
+        margin-right: -32px !important;
+        border-right: none;
+    }
+
+    .tilted-column > .column-caption > .column-title {
+        font-size: 4vw;
+    }
+
+    .tilted-column > .column-caption > .column-desc {
+        font-size: 2.5vw;
+    }
+}
+
+@media (max-width: 575px) {
+    .tilted-column {
+        width: 100%;
+        height: 100vw;
+        margin: 10px 0 !important;
+        transform: none;
+    }
+
+    .tilted-column > .column-image {
+        transform: none;
+    }
+
+    .tilted-column > .column-caption {
+        left: 50%;
+        transform: translate(0, -50%);
+    }
+
+    .tilted-column:hover > .column-image {
+        transform: scale(1.5);
+    }
+
+    .tilted-column:hover > .column-caption {
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.grid-kod-network {
+    grid-template-areas: "posts" "active" "newest";
+}
+
+@media (min-width: 768px) {
+    .grid-kod-network {
+        grid-template-areas: "posts posts" "active newest";
+    }
+}
+
+@media (min-width: 992px) {
+    .grid-kod-network {
+        grid-template-areas: "active posts" "newest posts";
+    }
+}
+
+.grid-kod-network > .item-active {
+    grid-area: active;
+}
+
+.grid-kod-network > .item-newest {
+    grid-area: newest;
+}
+
+.grid-kod-network > .item-posts {
+    grid-area: posts;
+}
+
 /* Backgrounds for social media posts */
 .bg-twitter {
     background-color: #4099FF;

assets/css/main.css

@@ -18,6 +18,13 @@ body > section {
     padding: 50px 0;
 }
 
+.grid {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+    grid-gap: 10px 20px;
+}
+
 .dark {
     background: #222222;
     color: #FAFAFA;
@@ -1836,26 +1843,20 @@ ul#downloadSlider a.active .overlay {
 }
 
 .user-item {
+    display: grid;
+    grid-template-columns: 50px 1fr;
+    grid-gap: 10px;
     width: 100%;
     background-color: #fff;
     border-radius: 10px;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .5);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .25);
     padding: 10px;
     margin-bottom: 10px;
 }
 
 .user-item img {
     height: 50px;
-    display: inline-block;
     vertical-align: top;
-    margin-right: 10px;
-}
-
-.user-item .user-info {
-    display: inline-block;
-    width: calc(100% - 60px);
-    float: right;
-    margin: 2.5px 0;
 }
 
 .user-item .user-info h2 {

assets/js/admin_users.js

@@ -0,0 +1,27 @@
+function showDeleteModal(userID, username) {
+    const modal = $(`
+        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Bestätigung</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <b>Bist du dir sicher, dass du den Account von ${username} löschen möchtest?</b>
+        Die Account-Daten werden für eine gewisse Zeit noch auf dem Server gespeichert, allerdings wird der Nutzer nicht mehr dazu in der Lage sein, sich in seinen Account einzuloggen, und somit auch keine Posts, Kommentare etc. verfassen können.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary">Account löschen</button>
+        <button type="button" class="btn btn-primary" data-dismiss="modal">Abbruch</button>
+      </div>
+    </div>
+  </div>
+</div>
+`);
+    $('body').append(modal);
+
+    modal.modal('show');
+}

assets/js/blog-edit.js

@@ -219,6 +219,26 @@ $(function () {
     });
 });
 
+Number.prototype.pad = function(size) {
+    let s = String(this);
+    while(s.length < (size || 2)) s = "0" + s;
+    return s;
+};
+
+function convertDate(dbDate) {
+    const date = new Date(dbDate);
+    console.log(date);
+
+    const day = date.getDate().pad();
+    const month = (date.getMonth() + 1).pad();
+    const year = date.getFullYear();
+
+    const hour = date.getHours().pad();
+    const minutes = date.getMinutes().pad();
+
+    return `${day}.${month}.${year} ${hour}:${minutes}`;
+}
+
 function getPostData() {
     const postID = $('#postID').val();
     $.ajax({
@@ -234,7 +254,9 @@ function getPostData() {
                 $('#postUrl').val(result.postData.postUrl);
                 $('#postCategory').val(result.postData.postCategoryID);
                 switchCategory();
-                $('#postPublishDate').val(result.postData.postPublishDate);
+
+                $('#postPublishDate').data('DateTimePicker').setValue(convertDate(result.postData.postPublishDate));
+                // $('#postPublishDate').val(convertDate(result.postData.postPublishDate));
                 $('#uploadedImage').val(result.postData.postImage);
                 $('.img-container').css('background-image', 'url(' + result.postData.postImage + ')');
 

assets/js/profile_edit.js

@@ -90,4 +90,16 @@ $(function () {
                 }
             `)
         });
+});
+
+const chk = $('input[type="checkbox"]');
+
+chk.each(function () {
+    const v = $(this).is(':checked');
+    $(this).after(`<input type="hidden" name="${$(this).attr('rel')}" value="${v.toString()}" />`);
+});
+
+chk.change(function () {
+    const v = $(this).is(':checked');
+    $(this).next('input[type="hidden"]').val(v.toString());
 });

assets/js/user-edit.js

@@ -0,0 +1,28 @@
+$('.group-all').change(function () {
+    const v = $(this).is(':checked');
+
+    const items = $(this).parent().next('ul').children();
+    items.each(function () {
+        $(this).find('input[type=checkbox]').prop('checked', v);
+    });
+});
+
+$('input[type=checkbox]:not(.group-all)').change(function () {
+    const groupAll = $(this).parent().parent().prev('h4').find('.group-all');
+    if(!$(this).is(':checked')) {
+        groupAll.prop('checked', false);
+    } else {
+        const siblings = $(this).parent().siblings().find('input[type=checkbox]:not(:checked)');
+        if(siblings.length === 0) {
+            groupAll.prop('checked', true);
+        }
+    }
+});
+
+function checkSiblings() {
+
+}
+
+$(function () {
+
+});