Joggerowa skórka dla Planet Venus, v. 0.01 alpha

Planet Venus, skonfigurowana dzięki uprzejmości m.in. roziego, jakkolwiek funkcjonalnie mocno zbliżona do joggera, to jednak nie do końca to samo, głównie przez niedostatki warstwy graficznej. Dlatego też, po rozmowie z d4rky’m i wyrażonym w niej przezeń ostrożnym przypuszczeniu, że raczej chyba być może całkiem prawdopodobne, że nie pójdę za to do kryminału, zdecydowałem mimo wszystko z drżącą duszą o udostępnieniu stworzonego niedawno duetu do Venus: pliku szablonu oraz CSS, mających choć w części zabrać Was w krainę nostalgii i w jakiejś części nawiązać do ostatniego layoutu głównej strony joggera. Moja lokalna wersja PlanetJogger [oryginalne pliki roziego] po zastosowaniu „skórki” wygląda aktualnie tak:

planetjogger

Zalety [w porównaniu do istniejącego szablonu]:

  • subiektywnie przyjaźniejszy, a obiektywnie bardziej przypominający joggera układ,
  • niezerowa skalowalność, usuwająca na małych viewportach niepotrzebne i upierdliwe marginesy,
  • możliwość relatywnie łatwej ingerencji w długość wpisu na stronie głównej [więcej o tym poniżej],
  • możliwość dalszego upodobnienia do joggera – oczywiście z zastrzeżeniem poszanowania praw autorskich, w kwestii których prawdę mówiąc zdaję się na łaskę i niełaskę PT Community i projektantów oryginału.

Technikalia:

  • całość testowana tylko lokalnie w lokalnym środowisku, tj. Chromium 14.04 @ Linux, i nigdzie indziej,
  • na różne viewporty skaluje się… jakoś; nie bardzo wiem, jak, ale chyba niezgorzej,
  • oryginalna grafika dociągana jest póki co z oryginalnego serwera [raptem bodajże tylko obrazek z logo…],
  • nie do przejścia wydaje się niestety pasek z komentarzami pod każdym wpisem, a przynajmniej chwilowo poza moimi możliwościami – javascriptowe ograniczenie długości wpisu,
  • inne elementy orginalnego interfejsu byłyby być może portowalne z sensem, ale do tego potrzebna byłaby ingerencja w kod planety, a na to nie mam niestety czasu; pomniejsze pierdółki dałoby się jeszcze przenieść, ale raczej tylko jako atrapy, do czego prawdę mówiąc niespecjalnie się palę.

Całość prezentowanej skórki składa się z dwóch plików, do wykorzystania na dowolnej licencji na dowolnej instalacji Planet Venus – z zastrzeżeniem pracy roziego oraz ewentualnych obostrzeń dot. pracy autorów oryginalnego layoutu.

Jeśli mamy dostęp do własnej instalacji planety, poniższy plik tmpl należy wgrać w miejsce standardowego szablonu generowania strony głównej, a CSS do katalogu, w którym tworzony jest wynikowy index.html. I już; po następnym wygenerowaniu treści przez planetę całość powinna zadziałać, a zmiany być już widoczne. Ten wariant nie wymaga żadnych zmian w przeglądarce po stronie klienta.

Wariantem, wymagającym niestety pewnej znajomości CSS w sytuacji, w której nikt nie udostępni nam zmodyfikowanej wersji planety, jest stworzenie na bazie podanego własnego pliku CSS i użycie go z wykorzystaniem Stylish we własnej przeglądarce. Tym wariantem bawiłem się wcześniej, ale udostępnia on mniej opcji z tego względu, że uzyskanie wyglądu strony, jak na screenie staje się łatwiejsze, jeśli zmodyfikujemy generowany index.html; bez dostępu do oryginalnego html nie można np. prosto wygenerować górnego paska na stronie, ciężko wygenerować prawidłowy układ „tytuł wpisu na górze – autor poniżej”, etc. Do tej wersji modyfikacji nie posiadam gotowych plików; jeśli ktoś byłby zainteresowany, spróbuję takowe stworzyć i również je udostępnię. Mam jednak nadzieję, że któryś z publicznych właścicieli planet zechce skorzystać z poniższych – oczywiście po testach.

Aktualnie widzę tylko jedną sensowną możliwość dostosowania poniższych ustawień do własnego systemu; maksymalną wysokość wpisu można zmienić poprzez regulację max-width w poniższym CSS. Jeśli usunąć z CSS zarówno max-width, jak i overflow, wówczas pod każdym wpisem pojawia się błękitny pasek, w oryginalnej wersji zawierający link do komentarzy; moim zdaniem ograniczenie długości wpisów na głównej jest jednak ważniejsze, niż „kolejne oczko kompatybilności UI”.

Obydwa pliki pisane „na kolanie”; wszelkie uwagi mile widziane.

Szablon generowanej strony index.html.tmpl


<!DOCTYPE HTML>
<html lang=pl>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="robots" content="noindex, follow, noarchive" />
<meta http-equiv=refresh content=1200 />
<title><TMPL_VAR name></title>
				<link rel=alternate type=application/atom+xml href=/planetjogger/atom.xml title=Feed>
<style type=text/css media=screen>
html{background:#FFF}
html,a{color:#333333}
body{font:normal medium 'Gill Sans',Optima,Verdana,sans-serif;margin:40px auto 1em auto;width:70%;line-height:180%}
#footer{clear:both;text-align:center;font-size:small;background:#a2d1e0;color:#81a8b4}
h1,.feedflare{display:none}
.horizontal,.simple li{margin:0;padding:0;list-style:none;display:inline}
.simple li:before{content:"+ "}
.simple > li:first-child:before{content:""}
.author{text-decoration:none;margin-left:2em;font-size:small;background:#e8f4f8;color:#81a8b4;}}
ul{list-style:none;margin-left:0;padding-left:0}
li{clear:both}
.content{margin:1em 40px}
img{max-width:100%;height:auto;width:auto\9;border:0}
</style>
				<link rel="stylesheet" type="text/css" href="jogger-like.css" />
</head>
<body>
<h1><TMPL_VAR name></h1>
<div class=top_bar></div>
<ul>
<TMPL_LOOP Items>
				<li<TMPL_IF channel_language> lang="<TMPL_VAR channel_language>"</TMPL_IF>>
<h2 class=entry_head><TMPL_IF title> <a<TMPL_IF link> class=entry_title href="<TMPL_VAR link ESCAPE="HTML">"</TMPL_IF><TMPL_IF title_language> lang="<TMPL_VAR title_language>"</TMPL_IF>><TMPL_VAR title></a>
<a class=author href="<TMPL_VAR channel_link ESCAPE="HTML">" title="<TMPL_VAR channel_title_plain ESCAPE="HTML">"><TMPL_VAR channel_name ESCAPE="HTML"></a></h2>
</TMPL_IF>
<TMPL_IF content>
<div class="content"><TMPL_VAR content></div>
<div class=fake_comments></div>
</TMPL_IF></li>
</TMPL_LOOP></ul>

<hr>

<div id=footer>
Planeta agreguje wpisy z następujących blogów, których autorzy pisali kiedyś na Jogger.pl:
<ul class="simple horizontal">
<TMPL_LOOP Channels>
	<li><a href="<TMPL_VAR link ESCAPE="HTML">" title="<TMPL_VAR title ESCAPE="HTML">"><TMPL_VAR name></a></li>
</TMPL_LOOP></ul>
Kod i konfiguracja: <a href="https://github.com/rozie/PlanetJogger">repozytorium GitHub</a>. Kontakt: <a href="https://zakr.es/">znajdziesz na głównej</a>.</div>
</body>
</html>

jogger-like.css


body {font-family: "Lucida Grande", "Lucida Sans Unicode", "Droid Sans", "Tahoma", sans-serif;}

body ul {padding-left: 0;}

body ul li {list-style-type: none;
margin-bottom: 20px;
border: 1px solid #a2d1e0;
border-left: none;
max-height: 30em;
overflow: hidden;}

body ul li a {text-decoration: none;}

.entry_head {font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 1.86em;}

.top_bar {height: 140px;
width: 100%;
background-color: #a2d1e0;
border-top-width: 9px;
border-top-style: solid;
border-top-color: #ee4e4e;
background-image: url(http://jogger.pl/t/s/i/joggerpl-logo.png);
background-repeat: no-repeat;
background-position: 40px 0;}

a.author {margin-left: 0; padding: 5px;}

.content {margin-left: 0;}

.fake_comments {height: 28px;
background-color: #e8f4f8;}

 

10 thoughts on “Joggerowa skórka dla Planet Venus, v. 0.01 alpha

  1. Jak dla mnie wygląda OK, ale czy z tej planety coś w ogóle będzie? D4rky raczył przy okazji coś zasugerować na temat domeny albo co?

    Lubię to

    1. Przecież to co się stało z Joggerem to między innymi wielkie deklaracje i słomiany zapał związany z takimi zrywami. Nie ma co liczyć na więcej. A zresztą po co? Planeta taka jaka jest daje spięcie pozostałych aktywnych piszących i to chyba był główny cel. Więc chyba coś z niej jednak wyszło.

      Polubione przez 1 osoba

  2. Nie, rozmawialiśmy tylko o ew. możliwości upublicznienia tego szablonu, będącego wtedy w fazie pomysłów.

    Nie śledziłem zbyt aktywnie dyskusji na zamknięcie, ale… kurczę, nie wiem do końca, czym właściwie jest „core” joggera; coś, o co możnaby się bić i co właściwie możnaby starać się zachować, a o tym wypadałoby porozmawiać „na początek”. Komunikacja / dodawanie wpisów via jabber IMO odpada; sam nie używam go od parunastu miesięcy, jeśli nie dłużej i nie sądzę, żeby wielu z tego korzystało. Na własne domeny towarzystwo poprzenosiło się już dawno temu.

    Wychodzi więc na to, że owym „core” [oczywiście poza niemierzalną „community”] są dwa elementy: 1) scentralizowana planeta [bo w rozproszonych wezmą IMO nieuchronnie górę partykularyzmy i różne listy feedów] i 2) sensowny de facto layout, a) uwspólniający doznania 😉 i b) pozwalający bez drgawek czytać wspomniany jednolity feed [bo jeśli stronę planety – jakiejkolwiek! – nie będzie dało się czytać, wszyscy pójdą w RSSy – o ile jeszcze tego nie zrobili – i całą community diabli wezmą [o ile już nie wzięli].

    Co do wzmiankowanego szablonu, dłubię jeszcze parę drobiazgów [ucząc się przy okazji] i tak:

    DA SIĘ / DAŁOBY SIĘ [i pewnie się zrobi, choć deadline’u oczywiście nie podam – bawię się tym 4phun i kiedy będę miał coś gotowego, chętnie to udostępnię]:
    a) zagospodarować prawą stronę szablonu, tylko nie bardzo wiem czym, listą blogów z dołu?
    b) obok autora, a pod tytułem, wstawić datę i czas wpisu; jeśli znajdę czas na przyspieszoną naukę XSLT, to to zrobię,
    c) powstawiać część „starych” elementów graficznych, choć jak wspomniałem, funkcjonowałyby one na zasadzie zaślepek,
    d) ograniczyć długość wpisów javascriptem, widziałem coś w źródłach planetjogger, ale nie patrzyłem na to dokładniej i chyba liczyłbym na czyjąś pomoc; taki sposób umożliwiłby przeniesienie kolejnego elementu starego layoutu, a mianowicie błękitnego „kontenera” na link do komentarzy pod każdym wpisem – aktualny „hack” z max-height nie pozwala na to we wszystkich komentarzach, a jedynie w tych, gdzie faktyczna długość notki jest mniejsza od max-width,
    e) wywalić obrazki z głównej, o czym ktoś kiedyś już pisał; to akurat jest proste wystarczy w CSS [można nawet lokalnie, spod Stylisha] dopisać na końcu linię img {display: none;}

    NIE DA SIĘ [przynajmniej AFAIK w łatwy sposób]:
    a) ucywilizować linka z liczbą komentarzy do każdego wpisu; w feedzie jest to w postaci obrazka, a ja nie podejmę się podpięcia pod to żadnej captchy,
    b) przywrócić w ładnej formie najczęściej komentowanych, ze wspomnianego powodu nieprzekazywania przez feed WP ilości komciów w postaci numerycznej.

    Mogłoby się chyba dać wrzucić na prawą część panelu same nagłówki nowych wpisów [z różnym kolorowaniem tagów a i a:visited, żeby zrobić coś na kształt listy ze starego joggera, spełniającej jednocześnie funkcję nawigacyjną].

    Przydałoby się stronicowanie, ale na ten temat się nie wypowiem, bo [jeszcze] się nie znam.

    Lubię to

    1. Na WordPress.com są komentarze przez Jabbera jeżeli komuś by tego brakowało: https://en.support.wordpress.com/jabber/ a jeżeli chodzi o unifikację użytkowników do komentarzy i samych komentarzy to samą planetą się tego raczej zrobić nie da.

      Tak jak napisałeś fajnie byłoby przycinać wpisy do iluś paragrafów. Ale przy przenoszeniu layoutu nie można przenieść jego ograniczeń (nie działa zbyt dobrze na urządzeniach mobilnych – dziesięć lat temu to było do zaakceptowania, a dziś już nie).

      Także nie można skupić się tylko na wyglądzie (logo) przy zmianach. Bez tego chyba lepiej zostawić wersję vanilla.

      Lubię to

  3. Na wersji testowej udało mi się przyciąć wpisy przy użyciu jQuery, a nie overflow i max-width, dzięki czemu możliwe będzie odtworzenie błękitnego paska z linkiem „Czytaj dalej” [co jest mniej istotne] i linkiem z liczbą komentarzy [co wydaje się istotne bardziej]. Na razie bawię się jeszcze paroma drobiazgami; jak skończę, dam znać.

    Tak na marginesie: ktoś tego mojego szablonu – poza mną – używa / zamierza używać? Dla siebie będę robił go tak czy siak, więc go udostępnię, ciekawym tylko, czy ktoś jeszcze ma z tego jakiś pożytek, czy to krew w piach.

    Lubię to

  4. Zamieściłem przydługi komentarz, którego niestety nie widzę. Ani nie mam w Vivaldi możliwości odzyskania, więc nie powtórzę, a szkoda, bo było w punktach i merytorycznie. Może wpadł do spamu?

    Krótko powtórzę:
    @torero Zamieściłem w README zasady commitowania. Jeśli nie będziesz się stosował, to raczej krew w piach – nie chce mi się diffować, śledzić, domyślać co jest co.

    @cichyfragles FB ani jogger.pl z planety nie będzie, bo nie taka jej rola. Planeta już jest. Jaka jest, każdy widzi. Każdy może tworzyć/poprawiać, więc zachęcam.

    Domena – ja nic nie wiem i jak widziałem podejście w ostatnich wpisach, to nie spodziewam się, by była. Ani długiego utrzymania. Ja mam mniej roboty z trzymaniem tego w swojej domenie, więc ciśnienia nie mam.

    Lubię to

  5. @rozie: Ja też Twojego komcia nigdzie nie widzę; znajdę [jeśli znajdę…], to oczywiście zamieszczę. Ad rem:

    1. Wstyd przyznać, ale gita nie znam [nie jestem aktualnie frontendowcem ani żadnym koderem nawet w 1/10 etatu, wszystko powyższe robię w zasadzie czysto hobbystycznie], co akurat w podstawowym zakresie nie jest specjalnie wielkim problemem, ale może stworzyć problem czasowy, jako że zanim to ogarnę, zleci czas, którego zwyczajnie szkoda. OTOH rozumiem Twój brak czasu, więc w kwestii pospolitego commitu otwiera się pole do dobrego uczynku dla osoby trzeciej 🙂

    2. @README: W silniku zmian nie trzeba dokonywać, przynajmniej na razie, gorzej z JS – powyższa wersja jest prawdopodobnie ostatnią, która obędzie się bez JS. Kolejne wersje [if any] będą już wykorzystywały jQuery do:
    – regulacji długości wpisów na głównej,
    – odtworzenia funkcji dolnego paska pod wpisem [link „Czytaj dalej” i licznik komentarzy / „Dodaj komentarz”],
    – weryfikacji teoretycznej póki co koncepcji odtworzenia prawej części oryginalnego panelu, zarówno z popularnymi, jak i najczęściej komentowanymi,
    – całej reszty funkcji, które być może dałoby się zrobić; większość możliwości HMTL/CSS wydaje mi się wyczerpana.

    btw. Czysto subiektywnie wydaje mi się, że przesadzasz z tą zachowawczością. Zauważ, że planetę można stawiać lokalnie, a tam JS jest pod kontrolą; OTOH pierdyliard forków dla kilku osób to czysta sztuka dla sztuki. No ale w końcu to Twoje repo.

    Lubię to

    1. @torero No i skończyło się używanie Vivaldi bez blokowania reklam i JS do planety. Tu mam Lazarusa i nic nie ginie…

      Git jest prosty. http://rozie.blox.pl/2012/11/Git-for-dummies-czyli-kolejna-sciagawka-z-gita.html Plus GH daje dobre instrukcje. Jak znasz w jakimkolwiek zakresie cvs czy svn, to jesteś w domu. Co do bycia programistą itd. itp. – mam dokładnie tak samo.

      Dajże sobie spokój ze zliczaniem komentarzy i topkami. Ruch jest niewielki, można czytać wszystko, a jeśli nawet uda się zrobić coś sensownego, co będzie działało nie tylko z WP (w co szczerze wątpię), to będzie to wrażliwe na jakiekolwiek zmiany w platformach. Jeśli ktoś chce robić klona Joggera, to trzeba to zrobić zupełnie inaczej. Planeta nie ma być klonem, tylko pomniczkiem/drogowskazem.

      Stawianie lokalnego klona planety, na własny użytek? Wyrafinowany masochizm – czytniki RSS są o niebo wygodniejsze. Repo nie jest moje. Tzn. to jest, ale to open source. Git promuje forkowanie. I jest zdecentralizowany.

      Lubię to

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s