pyoes: PYramid Onroerend Erfgoed Style¶
Pyoes is een package om het makkelijker te maken om layout te delen tussen de verschillende OE sites.
Installatie¶
Installatie¶
Om pyoes
te installeren, werk je best met de package die op pypi te
vinden is. Om te installeren vanaf pypi moet je eenvoudigweg een dependency op
pyoes declareren in setup.py
en zorgen dat pypi bereikbaar is.
requires = [
'pyramid',
'pyoes'
]
Ofwel maak je een lokale checkout van pyoes
, dit kun je doen
met je eigen account als deze rechten heeft op de git repository. Daarna kun
je de code builden tot een sdist met via het setup.py
script van
pyoes
. De resulterende sdist kun je dan installeren via pip.
$ git clone https://github.com/OnroerendErfgoed/pyoes
$ cd pyoes
$ python setup.py sdist
$ // activeer nu de virtual env van de pyramid app
$ pip install dist/pyoes-0.3.2.tar.gz
Je kan pyoes
ook in de requirements.txt
toevoegen. Deze zal dan mee installeren
wanneer de requirements geïnstalleerd worden.
pyoes==0.3.2
Als je op de master versie wil werken moet je deze lijn toevoegen:
-e git+https://github.com/OnroerendErfgoed/pyoes.git@master#egg=pyoes
Om te starten, kun je best gebruik maken van de pyoes scaffold. Deze zal de standaard bestanden die nodig zijn toevoegen aan een static dir. Op zich is dit geen volledige pyramid scaffold. Deze maakt dus geen models, views en andere aan. Gebruik hiervoor een andere scaffold zoals de alchemy scaffold. Er zijn 2 scaffolds beschikbaar in pyoes: * een scaffold voor de public frontend (pyoes) * een admin scffold (pyoesAdmin) De admin scaffold is nieuw vanaf versie 3.1.
$ pcreate -s alchemy <package_naam>
$ pcreate -s pyoes <package_naam>
# of
$ pcreate -s pyoesAdmin <package_naam>
Warning
Voer deze commando’s niet uit van in de folder waarin je code staat, maar
vanuit de bovenliggende folder. Dus, als je je git repository hebt
uitgecheckt naar /home/me/projects/my_app
, voer het commando dan
uit in de folder /home/me/projects
.
Vooraleer verder te gaan, moet je zorgen dat compass en bower aanwezig zijn op je systeem.
# ruby 1.9+
$ [sudo] apt-get install ruby-dev
$ [sudo] gem install compass
$ [sudo] npm install -g bower grunt-cli
Deze kunnen ook via Bundler geïnstalleerd worden met de resources die in
Gemfile
staan.
$ cd pyoes/static
$ bundle install
pyoes
komt met een set van Jinja2 templates. Om deze te kunnen gebruiken,
moet je wel nog de parameter jinja2.directories correct instellen. Daarnaast
zijn er ook nog filters die je kunt toevoegen aan je project.
jinja2.directories =
<package_name>:templates
pyoes:templates
jinja2.filters =
setattr = pyoes.utils.set_attr_filter
Installeer foundation en font-awesome nu lokaal via bower.
$ cd pyoes/static
$ bower install
Tenslotten moet je pyoes
toevoegen aan je main functie. Dit zorgt er voor
dat de correcte static dir wordt toegevoegd en dat een aantal static views
geregistreerd worden.
config.include('pyoes')
Update¶
Als er nieuwe versies van pyoes
zijn, moet je niet alle bovenstaande
stappen terug uitvoeren. Je kunt gewoon de scaffold terug uitvoeren en deze
zal de nodige bestanden terug kopiëren.
Je kunt op voorhand nagaan wat de wijzigingen zullen zijn door het commando te simuleren.
$ pcreate -s pyoes <package_name> --simulate
Indien er relevante wijzigingen zijn, kun je bestand per bestand beslissen wat er gedaan moet worden.
$ pcreate -s pyoes <package_name> --interactive
De Jinja2 templates zijn automatisch beschikbaar. Als er nieuwe filters zijn toegevoegd, moet je deze wel nog toevoegen aan je .ini bestand.
Van versie 1.x naar 2.x¶
Warning
Bij de update van 1.x naar 2.x zijn er vrij significante wijzigingen doorgevoerd in de organisatie van de bestanden. Het is dus best erg voorzichtig te zijn bij deze update. Indien er zware wijzigingen zijn doorgevoerd, zullen er conflicten optreden. Het is best deze update op voorhand goed te simuleren en interactief uit te voeren.
Volgende bestanden zullen gewijzigd worden.
static/css/app.css
: Is sowieso het resultaat van een compass compile operatie en moet dus gehergenereerd worden op basis van je eigen sass code.static/config.rb
: Mag gewoon vervangen worden en kan geen kwaad.templates/layout.jinja2
: Er wordt een starttemplate meegeleverd voor nieuwe scaffolds. Bij een update is het meestal best deze te laten zoals ze is. Je moet wel zorgen dat de declaratie van een app_package correct wordt ingesteld in je eigentemplates/layout.jinja2
.
Na de update mogen volgende bestanden in de static
folder verwijderd worden:
css/fonts
: We maken nu gebruik van de foundation icon fonts.js/foundation
enjs/vendor
: Worden nu uitbower_components
geladen. Indien nodig kan je hier libraries toevoegen.sass
: Deze volledige folder wordt vervangen door eenscss
folder. Voor je deze folder verwijderd, controleer je best of je hier insass/+package+/_+package+.scss
eigen wijzigingen hebt aangebracht. Indien dat zo is, dien je deze over te brengen naarscss/_+package+.scss
.extensions
: Werd aangemaakt door compass en is nu overbodig.img/icons
,img/pinpoints
en andere bestanden: Alle bestanden werden verplaatst naarimg/pyoes
. Alles buiten deze folder dat je niet zelf hebt toegevoegd, mag weg.
Van versie 2.x naar 3.x¶
Warning
Bij de update van 2.x naar 3.x zijn er vrij significante wijzigingen doorgevoerd in de organisatie van de bestanden. Het is dus best erg voorzichtig te zijn bij deze update. Indien er zware wijzigingen zijn doorgevoerd, zullen er conflicten optreden. Het is best deze update op voorhand goed te simuleren en interactief uit te voeren.
Gebruik¶
CSS bewerken¶
Als je aan css werkt is het best om compass je files te laten monitoren zodat deze wanneer nodig kan hercompileren.
$ cd static
$ compass watch .
# je kunt ook gewoon eenmalig compileren
$ compass compile
Maak je eigen .scss file aan in /<package_name>/static/sacss/_<package_name>.scss
.
De underscore aan het begint zorgt er voor dat dit bestand als een plugin
gezien wordt en niet afzonderlijk gecompileerd wordt.
Als je met compass watch werkt, dan zal telkens je een bestand wijzigt je
app.css
bestand opnieuw worden aangemaakt. Alhoewel we deze compilatie
ook bij het deployen zouden kunnen uitvoeren, zou dit weer tot extra build-time
dependencies leiden. Vergeet daarom zeker niet om telkens je app.css
bestand in te checken.
Jinja2 templates¶
pyoes
levert een een globale layout pyoes/layout.jinja2
die
vooral een algemene header en footer levert. In deze layout zijn er een aantal
blocks gedefinieerd die in andere templates kunnen overschreven worden.
De scaffold maakt voor je een eigen layout.jinja2
aan waarin je een aantal
zaken instelt die voor de ganse site van tel zijn.
{% extends "pyoes/layout.jinja2" %}
{% set app_package = 'pyoes' %}
{% set ga_key = request.registry.settings["ga.tracker_key"] %}
{% set top_nav = [
('Over deze site', request.route_path('home')),
('Contact', request.route_path('contact'))
]
-%}
{% set footer_nav = [
('Toegankelijkheid', 'https://www.onroerenderfgoed.be/toegankelijkheid'),
('Juridische Informatie', 'https://www.onroerenderfgoed.be/juridische-informatie'),
]
-%}
{% set zoeken_action = request.route_path('zoeken') %}
{% set zoeken_placeholder = 'Zoek iets op deze sites...' %}
{% block app_css %}{{request.static_path('<package_name>:static/css/app.css')}}{% endblock %}
In je individuele templates kun je dan weer erven van je eigen layout zodat je indien nodig wijzigingen kunt aanbrengen die over de ganse site werken.
{% extends "layout.jinja2" %}
{% block content %}
<section class="inhoud">
<div class="row">
<div class="large-3 columns">
<nav>
<h2>Een submenu of zo</h2>
...
</nav>
</div>
<div class="large-9 columns">
<h1>Over deze site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit condimentum sollicitudin. Curabitur molestie, dui vel ultricies facilisis, eros nulla bibendum erat, ut viverra elit ligula eget lectus. Donec et nibh eget ipsum porta dapibus. Curabitur placerat dapibus lacus sed gravida. Nulla tempor fermentum nibh ut porttitor. Pellentesque malesuada faucibus ante a eleifend. Donec feugiat felis ullamcorper enim aliquet laoreet. Praesent sodales gravida fermentum. Praesent condimentum sollicitudin libero, ac malesuada ligula cursus non. Nullam nisi neque, fermentum sit amet pretium condimentum, bibendum ac augue. Vivamus ornare tristique dolor sit amet suscipit. Aliquam aliquam arcu vel neque sollicitudin blandit. Praesent vitae urna sit amet ligula rutrum adipiscing sed quis erat. Suspendisse potenti. Nam erat sem, tincidunt id scelerisque ut, dignissim id mi.</p>
<p>Nullam ultricies consectetur quam nec sagittis. Aenean ultricies vulputate nunc hendrerit pharetra. Nam in lacus leo, ut sodales metus. Nulla nisl dolor, condimentum vel pulvinar vel, lobortis ut enim. Sed laoreet rutrum ligula quis dictum. Vivamus at sem at metus ullamcorper porta. Ut orci orci, sollicitudin ac fringilla et, tempus vel velit. Curabitur non quam sit amet tellus placerat consectetur. Duis congue consectetur faucibus. Maecenas tempor feugiat consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consequat sapien sit amet est pellentesque laoreet. Cras ullamcorper nisl et ipsum iaculis vel rutrum urna consectetur. Fusce mauris leo, tempus non rutrum eget, faucibus ac lorem. Aliquam eget erat tincidunt enim feugiat facilisis. Donec id sapien at mi molestie semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris nibh, egestas in vehicula vitae, dignissim a dui. Nam at augue mauris, eu vulputate lectus. Vivamus vulputate viverra dolor, ornare pharetra purus vehicula ut. Fusce lobortis, est feugiat pretium adipiscing, tortor orci porta orci, vel malesuada leo ligula nec ante. Vestibulum urna leo, varius vel adipiscing luctus, porta sit amet mi. Vivamus quis urna vitae nisi mollis feugiat vel in libero.</p>
</div>
</div>
</section>
{% endblock %}
demonstratie¶
Als je gewoon eens de nieuwe stijl wenst te bekijken en een overzicht van de mogelijkheden wil krijgen, kun je best de demo toepassing installeren.
Warning
De demo toepassing zit in de pyoes repository, maar wordt niet verdeeld in de pyoes package.
$ git clone https://github.com/OnroerendErfgoed/pyoes pyoes_demo
$ cd pyoes_demo
$ mkvirtualenv pyoes_demo
$ python setup.py develop
$ pip install -r requirements-dev.txt
Om het makkelijk te maken om de demo-toepassing te draaien naast een toepassing die je aan het ontwikkelen bent, draait deze op poort 6555 en niet op poort 6543.
$ pserve development.ini
Deze toepassing heeft een aantal eigen templates en stylesheets die als
inspiratie kunnen dienen. De templates kun je vinden in pyoes/templates
,
dit in tegenstelling tot de algemene pyoes templates die door een andere
applicatie worden overgenomen. Deze kun je vinden in pyoes/templates/pyoes
.
De pyoes/static
folder bevat de scss bestanden van deze demo toepassing.
Ontwikkeling¶
Deze bibliotheek is nog vrij nieuw en zal vrij veel wijzigen. Aangezien het hier eerder om visuele elementen gaat dan code, is het aantal unit tests eerder bescheiden.
Nieuwe features worden uitgewerkt in een feature branch in git en dan via een pull-request in Github gemerged met de master.
unit tests¶
Zoals altijd bij een bibliotheek proberen we zo goed mogelijk de code te testen. Om het ontwikkelen en testen makkelijk te maken werken we met tox. Via tox zal de code getest worden op python 2.7, 3.3 en 3.4. Er wordt ook code coverage berekend op basis van python 2.7.
Tox moet aanwezig zijn in je globale python installatie. Indien dit nog niet zo is, kan je het simpel installeren:
$ pip install tox
De uiteindelijke unit tests voer je uit door in de root van de repository te
gaan staan (de map waarin tox.ini
staat) en het tox commando uit te
voeren:
$ tox
Indien je aan het ontwikkelen bent kan het uitvoeren van alle tests (en vooral het opbouwen van de omgevingen) soms wat lang duren. Je kunt ook aangeven dat je enkel de tests van een enkele omgeving wenst uit te voeren:
# Enkel de python 2.7 tests uitvoeren
$ tox -e py27
# Enkel de coverage tests uitvoeren
$ tox -e cover
Geschiedenis¶
0.12.7 (22-12-2021)¶
- Aanpassingen zodat de wrapper mee scaled als een scherm groter/kleiner wordt. (#224)
0.12.6 (04-11-2021)¶
- haal app.css import uit plausible macro (#221)
0.12.5 (10-10-2021)¶
- Mobiele cookiebanner smaller gemaakt (#216)
0.12.4 (11-05-2021)¶
- Fix boolean check cookiebanner (#211)
0.12.3 (05-05-2021)¶
- Tekst cookiebanner aanpassen (#207)
0.12.2 (05-04-2021)¶
- Cookiebanner toevoegen (#190)
- Plausible toevoegen (#201)
0.12.1 (22-03-2021)¶
- Versprongen SVG oplossen (#197)
0.12.0 (15-03-2021)¶
- Tijdelijke boodschap tonen (#167)
0.11.3 (23-10-2020)¶
- Font size en color bij select in leesmodus aanpassen + Placeholder text lichter grijs maken (#182)
0.11.2 (28-07-2020)¶
- Responsive header aanpassen (#177)
- Icons toelaten in main navigatie (#176)
0.11.1 (14-05-2020)¶
- Header herbekijken ikv mobile layout (#169)
0.11.0 (27-01-2020)¶
- Update van Vlaanderen header en footer (#162)
0.10.0 (14-01-2020)¶
- height van selects weghalen (#148)
- input[type=”email”] zelfde stijl als input[type=”text”] maken (#153)
- updates dependencies via dependabot
0.9.2 (05-11-2019)¶
- Compile errors door unrecognized characters (#149)
0.9.1 (08-08-2019)¶
- “Flanders Art Sans Bold” ontbreekt in _oe-type.scss (#146)
0.9.0 (26-06-2019)¶
- Libs updaten - security alert (#140)
- Mobiele layout verbeteren (#139)
0.8.0 (22-02-2019)¶
- Header - contact & over ons links (#135)
0.7.0 (18-07-2018)¶
- Updaten van GA macro (#125)
- Aanpassen kleur active in menubar (#124)
0.6.0 (04-07-2018)¶
- Fix jquery versie in public scaffold bower.json (#97)
- admin bower.json template updaten (#98)
- Display aangemelde gebruiker in geval gebruiker geen Actor object heeft (#104)
- Aanpassen link color (#110)
- Privacybeleid link in footer (#116)
0.5.0 (27-0-2018)¶
- Added new jinja2 filter specific for formatting fuzzy_dates (also for dates before 1900)
0.4.8 (22-03-2018)¶
- Updates/aanpassingen voor oa Inventaris (#109)
0.4.7 (02-02-2017)¶
- bugfix datum
- favicon
- IE compatibility
- link ict mailbox
0.4.6 (30-06-2016)¶
- bugfix in code voor dropdowns
0.4.5 (29-06-2016¶
- mogelijkheid toegevoegd om dropdown in het menu te tonen
- enkele verbeteringen in de error pagina’s
- uitlijning van de Vlaanderen banners
- verschillende verbeteringen voor de admin stijl
0.4.4 (03-02-2016)¶
- Proces scaffold toegevoegd
- verbeterde error page templates
- nieuw Home icon
- verbeterde footer links
- social media links toegevoegd
- verschillende stijl verbeteringen
- update naar jinja2 2.8
0.4.3 (02-07-2015)¶
- Bugfix error pages
- Lijstweergave zoekresultaten aangepast
- Detailpagina besluitentype geupdate
- zoekwidget toegevoegd
0.4.2 (09-06-2015)¶
- Kleine layout fixes
- Admin interface update
0.4.1 (29-05-2015)¶
- Toevoegen van een textarea element met een inline label
- Toevoegen van een checkbox met een placeholder
- Toevoegen van een generieke profile template
- Toevoegen van een macro om een URI voor een resource te genereren
- Toevoegen van een generiek datetime format filter
- Opkuisen van het project
- Schrijven van nieuwe tests om coverage te vergroten
0.4.0 (24-04-2015)¶
- fix voor favicon
- Speciale input velden toegevoegd
- Voorbeeldtemplates verder uitgewerkt
- Generieke 404/500 templates toegevoegd
- Alertblock toegevoegd
- Mediaqueries toegevoegd die problemen met header op mobile devices oplost
- Problemen met footer verholpen
0.3.3 (04-03-2015)¶
- Fix voor gebruikersnamen
- Documentatie geupdate ivm admin scaffold
0.3.2 (26-02-2015)¶
- Aanpassingen vooral aan admin scaffold
0.3.1 (23-02-2015)¶
- Admin scaffold toegevoegd
- Aanmelden/Afmelden knop toegevoegd
- Google analytics geupdate naar Universal analytics
- Font-awesome toegevoegd als bower dependency
0.3.0 (12-02-2015)¶
- Erfgoedstijl aangepast aan vereisten van de nieuwe Vlaamse Huisstijl
0.2.1 (25-11-2014)¶
- Released as open source on PyPI.
- Copyright date can be changed again. Now works with a variable instead of a block.
0.2.0 (14-08-2014)¶
- Andere manier van omgaan met Foundation dependency. Gaat nu via bower.
- Upgraden naar Foundation 5.3.x. Bower zal steeds de laatste versie in de 5.3 reeks proberen aan te houden.
- Toevoegen van Foundation Icon Fonts 3
- Unit tests naar py.test ipv nose.
- Basistemplate is nu meer responsive dan vroeger.
- Standaard breedte van de css grid werd nu gelijk geschakeld met die van de corporate site.
- Footer werd gewijzigd zodat er blauw over de ganse breedte is.
0.1.1 (06-08-2014)¶
- Toevoegen van een mogelijkheid om css_files in de html header te injecteren. (#7) [JonathanGeosolutions]
- Toevoegen van een mogelijkheid om de HTML header te overriden in een template.
- Testen ook laten uitvoeren op py33 en py34.
0.1.0¶
- Eerste stabiele release.
- Maakt nu gebruik van onze eigen typekit code.
0.1.0b2¶
- Terug naar TypeKit. Voorlopig gebruiken we de account van Glue. Op een bepaald moment zal iemand wel eens voor onze eigen accout moeten betalen.
0.1.0b1¶
- Extra documentatie met sphinx. (#5)
- Static files zoals favicon en robots.txt kunnen geleverd worden door pyoes. (#6)
- Niet meer nodig om pyoes:static view te includen. Vanaf nu moet pyoes zelf wel geinclude worden, deze handelt dan de rest af.
- De scaffold zal meteen een sass bestand voor de applicatie specifieke css aanmaken.
0.1.0a3¶
- Overschakelen op open fonts. (#4)
- Js files kunnen doorgegeven worden door extended templates. (#3)
- Verwijderen van een onbestaande dit in het install_compass_extensions script werkt. (#1)
- Docs wat uitgebreid. (#2)
- Layout van de breadcrumbs wat compacter gemaakt.
0.1.0a2¶
- Zorgend dat jquery protocol onafhankelijk kan geladen worden. Gaf problemen op https sites.
0.1.0a1¶
- eerste versie die getagged wordt
- aantal jinja2 templates
- sass files
- nog zeer onvolledig en met gebrekkige documentatie
Glossarium¶
- git
- Het versie controle systeem waar we bij voorkeur mee werken. Zie Progit voor een goeie uitleg.
- Github
- Op Github plaatsen we onze git repositories. Voor toepassingen combineren we dit met Trac voor projectopvolging, voor libraries die enkel voor het IT-team van belang zijn, gebruiken we de Github issue tracker.
- Jinja2
- Jinja2 is de templating taal die we gebruiken voor onze python applicaties. De syntax lijkt vrij sterk op die van Django en werd ook overgenomen in Twig, een PHP templating taal.
- MMIS
- Milieu Management Informatie Systemen. Collega’s van de Vlaamse Overheid die horen tot het departement van het beleidsdomein LNE. Worden soms ook LNE of ACD genoemd. Zij zorgen voor de hosting van onze toepassingen, servers, databanken, … Waar mogelijk delen we oplossingen.
- Pyramid
- A web framework.