Prosty blog

Hej!

Ostatnio chciałem się zapoznać z .net Core i JavaScriptem bo nacodzień jestem daleko od webdevu, a chciałem go lepiej poznać :).
Naskrobałem więc małą apkę.
Najbardziej mi zależy na tym co źle robię w .js.

https://github.com/pixellos/MyWebpage/tree/New/src/RoadToCode/wwwroot/js

Krytykę chętnie przyjmę, płacę w okejkach :O.

Postawiona stronka tutaj;

Co wiem że mam źle/nie tak i muszę poprawić:

Kategorie pobierane z serwera zamiast z pobranych postów

Odpalanie scrollfira na ostatnim dodanym elemencie zamiast na jakimś elemencie na końcu (przez to np pobieranie w kategoriach nie działa)

Z góry dzięki :)

na pierwsze rzucają się dosyć duże fonty nagłówkowe (i nie tylko), sporo też przewijania contentu, przydałby się jakiś powrót na górę lub przyklejony navbar, a plus fajne cieniowanie kart

W załączniku widok na iOS, trochę się rozjechało ;)

http://roadtocode.azurewebsites.net/
Zabrałem się trochę za skrypty i front,

1. Przyciski kolejny/poprzedni, (lewa/prawa strzałka)

"use strict";
let Scroller = function () {
    let animateOptions = {
        duration: 400,
        queue: false,
    };
    this.animate = function(y){
        $('html, body').animate({
            scrollTop: y
        }, animateOptions);
    }
};
(function ScrollerInit() {
    Scroller.prototype.containerSelector = ".post";

    function currentContainerNotFoundCallBack() {
        Materialize.toast("I found nothing :(", 500);
    }
    function currentContainerSeeker(selector) {
        let x = window.innerWidth / 2;
        let y = window.innerHeight / 2;
        let middler = $(document.elementFromPoint(x, y));
        let result = middler.closest(selector);
        return result;
    }
       Scroller.prototype.prevHandler = function () {
        let searched = currentContainerSeeker(Scroller.prototype.containerSelector);
        if (searched.length == 0) {
            currentContainerNotFoundCallBack();
            return;
        }
        let prevElement = searched.prev();
        var scrollTo = prevElement.length == 0 ? searched.offset().top : prevElement.offset().top;
        this.animate(scrollTo);
    };
    Scroller.prototype.nextHandler = function () {
        let searched = currentContainerSeeker(Scroller.prototype.containerSelector);
        if (searched.length == 0) {
            currentContainerNotFoundCallBack();
            return;
        }
        let nextElement = searched.next();
        var scrollTo = nextElement.length == 0 ? searched.offset().top + searched.height() : nextElement.offset().top;
        this.animate(scrollTo);
    };
})();

2. Poprawiono CSS, czcionka nie jest taka duża

h1{
    font-size: 3rem !important;
}
h2{
    font-size: 2.6rem !important;
}
h3{
    font-size: 2.1rem !important;
}
h4{
    font-size: 1.7rem !important;
}
h5{
    font-size: 1.5rem !important;
}
h6{
    font-size: 1.2rem !important;
}

3. Dostęp do edycji postu/ usuwania go nie potrzebuje już autoryzacji, jest ona potrzebna do wprowadzenia zmian.

Edycja po id [Obsolete]
Edycja po nazwie
Publikowanie

4.Kompatybilność z niskimi X rozdzielczości powinna być naprawiona
5. Poprawione pobieranie, ScrollFire nie jest już dłużej ustawiane na ostatnim dodanym divie lecz na dedykowanym.

Jest trochę lepiej?

rób to w jakimś porządnym edytorze lub sprawdzaj w narzędziach wbudowanych w przeglądarkę, bo masz babole w sekcji head i body (znaczniki)

Co do wyglądu... biorąc pod uwagę zasady Material Design to moim zdaniem kartki z blogiem powinny być jedną "kartką", a nie tak jak teraz "kartka z tytułem" na "kartce z treścią",która znajduje sie na kolejnej "zewnetrznej kartce". Lepiej bedzie to wyglądać jak bedzie jedna "kartka", czyli tak jakbyś widział to w rzeczywistości.

aby nie odpowiadać w komentach, trochę biją po gałach te !important, myślę, że nie musisz tego używać, dodatkowo te fonty tam ci się rozjeżdżają za div, fajna sprawa to responsywne fonty które zmieniają wielkość, tutaj masz fajny art:
https://css-tricks.com/viewport-sized-typography/