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ć:
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
http://roadtocode.azurewebsites.net/
Zabrałem się trochę za skrypty i front,
jQuery 
JavaScript 
C# 
"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);
};
})();
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;
}
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/