[Nowiny] Skrypt integracyjny

[Damiano Robingren]

Ostatnia wiadomość z poprzedniej strony wątku

Byłaby możliwość osadzenia reklamy, jako "czwartego kraju", myślę, że będzie to wyglądać schludniej.
Dołączam wizualizację o co mi chodzi.

Nowiny duże

Nowiny średnie

Nowiny małe

Nowiny telefon

Łamiecie mi serce! Niech ta reklama dopasowuje się do wymiarów standardowego okna z nowinami

[Sheldon Anszlus Robingren]

Łamiecie mi serce! Niech ta reklama dopasowuje się do wymiarów standardowego okna z nowinami

Głównie o to mi chodzi ♥️

[Damiano Robingren]

Łamiecie mi serce! Niech ta reklama dopasowuje się do wymiarów standardowego okna z nowinami

Głównie o to mi chodzi ♥️

Grafika mnie zmyliła :(

[Sheldon Anszlus Robingren]

Łamiecie mi serce! Niech ta reklama dopasowuje się do wymiarów standardowego okna z nowinami

Głównie o to mi chodzi ♥️

Grafika mnie zmyliła :(

Znaczy dokładnie chodzi mi o dwie rzeczy, te pusta przestrzeń pod reklamą na dużym ekranie, a jak już ja wrzucimy w kraje, to żeby była ta wysokość dopasowana. Błąd wynika z mojego braku umiejętności przekazywania myśli.

[Helwetyk Romański]

Byłaby możliwość osadzenia reklamy, jako "czwartego kraju", myślę, że będzie to wyglądać schludniej.

Nie obiecuję, że zajmę się tematem sprawnie z uwagi na kolejkę działania, ale wpisuję do planu.

[Sheldon Anszlus Robingren]

Żeby ułatwić Ci zadanie, postanowiłem wkleić style css, które użyłem do testów.
Jednak reklamę już musisz przenieść sam. :p

Kod: Zaznacz cały

body {
    background : #333;
    color      : #fff;
    margin     : 5vw;
    font-family: Arial, Helvetica, sans-serif;
    font-size  : 13px;
    line-height: 120%;
}

#ism_kraje {
    width          : 100%;
    margin         : 0;
    display        : flex;
    /* justify-content: space-between; */
    flex-wrap      : wrap;
    gap: 26px;
}

#ism_kraje>div {
    width: 100%;
}

#ism_kraje>div>h2 {
    width              : 100%;
    margin             : 0 0 26px 0;
    letter-spacing     : -1px;
    font-weight        : bold;
    font-size          : 26px;
    padding            : 0 0 13px;
    line-height        : 100%;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

#ism_kraje>div>h2 span {
    font-weight: normal;
}

#ism_kraje div p {
    margin: 0 0 13px 0;
}

#nowiny {
    display        : flex;
    justify-content: space-between;
    flex-flow      : row wrap;
}

#ism {
    width: 100%;
}

#kraj_reklama a {
    margin    : 0 auto;
    max-width : 100%;
    display   : block;
    text-align: center;
}

#kraj_reklama img {
    margin   : 0 auto;
    max-width: 100%;
}

i {
    font-style: italic;
}

@media only screen and (min-width: 700px) {
    #ism_kraje {
        gap: 26px 2%;
    }
    #ism_kraje>div {
        width : 49%;
    }
    #kraj_reklama img {
        max-height: 500px;
    }
}

@media only screen and (min-width: 1000px) {
    #ism_kraje {
        gap: 26px 3%;
    }
    #ism_kraje>div {
        width : 30%;
    }
}

@media only screen and (min-width: 1200px) {
    #ism_kraje {
        gap: 26px 4%;
    }
    #ism_kraje>div {
        width : 22%;
    }
}

li {
    margin         : 0 0 3px 0;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

.forum {
    color        : #333;
    font-size    : 9px;
    display      : inline-block;
    box-sizing   : border-box;
    padding      : 2px 5px 0px;
    white-space  : nowrap;
    text-overflow: ellipsis;
    overflow     : hidden;
    max-width    : 25%;
    border-radius: 6px;
}

a {
    display        : inline-block;
    white-space    : nowrap;
    text-overflow  : ellipsis;
    overflow       : hidden;
    max-width      : 74%;
    color          : #fff;
    text-decoration: none;
}

a:visited {
    color: #999;
}

.kraj_1 .forum {
    background: #1cbe4f;
}

.kraj_2 .forum {
    background: #b00068;
}

.kraj_3 .forum {
    background: #ffffff;
}

.kraj_4 .forum {
    background: #1c7f93;
}

.kraj_5 .forum {
    background: #fbe426;
}

.kraj_6 .forum {
    background: #0065bd;
}

.kraj_7 .forum {
    background: #3283fe;
}

.kraj_8 .forum {
    background: #f7e1a0;
}

.kraj_9 .forum {
    background: #485fc7;
}

.kraj_10 .forum {
    background: #009241;
}

.kraj_11 .forum {
    background: #f6222e;
}

.kraj_12 .forum {
    background: #cadceb;
}

.kraj_13 .forum {
    background: #00d8ff;
}

.kraj_14 .forum {
    background: #782ab6;
}

.kraj_15 .forum {
    background: #3d9970;
}

.kraj_16 .forum {
    background: #c09855;
}

.kraj_17 .forum {
    background: #2182bd;
}

.kraj_18 .forum {
    background: #90ad1c;
}

.kraj_19 .forum {
    background: #999999;
}

.kraj_20 .forum {
    background: #90ad1c;
}

.kraj_21 .forum {
    background: #6abbff;
}

.kraj_22 .forum {
    background: #ff0000;
}

.kraj_23 .forum {
    background: #fec356;
}

.kraj_1 h2 {
    border-bottom-color: #1cbe4f;
}

.kraj_2 h2 {
    border-bottom-color: #b00068;
}

.kraj_3 h2 {
    border-bottom-color: #ffffff;
}

.kraj_4 h2 {
    border-bottom-color: #1c7f93;
}

.kraj_5 h2 {
    border-bottom-color: #fbe426;
}

.kraj_6 h2 {
    border-bottom-color: #0065bd;
}

.kraj_7 h2 {
    border-bottom-color: #3283fe;
}

.kraj_8 h2 {
    border-bottom-color: #f7e1a0;
}

.kraj_9 h2 {
    border-bottom-color: #485fc7;
}

.kraj_10 h2 {
    border-bottom-color: #009241;
}

.kraj_11 h2 {
    border-bottom-color: #f6222e;
}

.kraj_12 h2 {
    border-bottom-color: #cadceb;
}

.kraj_13 h2 {
    border-bottom-color: #00d8ff;
}

.kraj_14 h2 {
    border-bottom-color: #782ab6;
}

.kraj_15 h2 {
    border-bottom-color: #3d9970;
}

.kraj_16 h2 {
    border-bottom-color: #c09855;
}

.kraj_17 h2 {
    border-bottom-color: #2182bd;
}

.kraj_18 h2 {
    border-bottom-color: #90ad1c;
}

.kraj_19 h2 {
    border-bottom-color: #999999;
}

.kraj_20 h2 {
    border-bottom-color: #90ad1c;
}

.kraj_21 h2 {
    border-bottom-color: #6abbff;
}

.kraj_22 h2 {
    border-bottom-color: #ff0000;
}

.kraj_23 h2 {
    border-bottom-color: #fec356;
}

[Helwetyk Romański]

Żeby ułatwić Ci zadanie, postanowiłem wkleić style css, które użyłem do testów.

To   r a d y k a l n i e   zwiększa prawdopodobieństwo wdrożenia. Wpisuję na wieczór!

[Helwetyk Romański]

Jednak reklamę już musisz przenieść sam. :p

No i jak wyżej, radykalnie przyspieszyło. Pozmieniałem tylko gapy, a w przypadku reklamy zrezygnowałem z nagłówka w celu oszczędności miejsca. (I tak musiałem ją zmniejszyć tak, żeby nie była wyższa od bloków krajowych, bo nie mogłem przeboleć tego widoku). Dziękuję! 🖤🤍❤️

[Sheldon Anszlus Robingren]

Dziękuję Ci dobry człowieku ♥️ teraz zostało tylko ogarnąć ranking i ism 🤘🏿

[Helwetyk Romański]

teraz zostało tylko ogarnąć ranking i ism 🤘🏿

Co jeszcze w rankingu zostało do zrobienia? Żyję (żyłem) w szczęśliwym przekonaniu, że po ostatnich zmianach omawianych na Discordzie został, w wystarczającym stopniu, wyklepany.

ISM z kolei omijam szerokim łukiem. Tam powinna być tabliczka „zapraszamy do korzystania z ekranu komputera”. Mógłbym, co najwyżej, po latach naprawić wygląd „tymczasowego” przycisku do przełączania widoczności danych.

[Sheldon Anszlus Robingren]

teraz zostało tylko ogarnąć ranking i ism 🤘🏿

Co jeszcze w rankingu zostało do zrobienia? Żyję (żyłem) w szczęśliwym przekonaniu, że po ostatnich zmianach omawianych na Discordzie został, w wystarczającym stopniu, wyklepany.

ISM z kolei omijam szerokim łukiem. Tam powinna być tabliczka „zapraszamy do korzystania z ekranu komputera”. Mógłbym, co najwyżej, po latach naprawić wygląd „tymczasowego” przycisku do przełączania widoczności danych.

Nie zwróciłem uwagi, że ranking już poprawiony. Byłem święcie przekonany, że zapisałeś to sobie na jutro. Niech Matka Prokrastynacja będzie dla Ciebie łaskawa 🖤🤍❤️


W ISM, może by było wygodniej, jakby wykres był na górze, a lista krajów pod nimi? Może będzie to wygodniejsze do przeglądania na mobilkach?