Invenio standard theme.
Home Page: https://invenio-theme.readthedocs.io
License: MIT License
Invenio standard theme.
Features:
Further documentation available at https://invenio-theme.readthedocs.io/
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
See example 4e07607
Override invenio_theme/page.html:
{%- extends "invenio_theme/page.html" %}
{%- block css %}
{% include "mytheme/css.html" %}
{%- endblock css %}Use the new asset:
#mytheme/css.html
{%- assets "my_theme_css" %}
<link href="{{ ASSET_URL }}" rel="stylesheet">
{%- endassets %}
Define the bundle:
```python
css = NpmBundle(
Bundle(
'scss/styles.scss',
filters='node-scss, cleancssurl',
),
depends=('scss/*.scss', ),
output="gen/mytheme.%(version)s.css",
npm={
'bootstrap-sass': '~3.3.5',
'font-awesome': '~4.4.0',
}
)Define the styles:
@import "variables";
$icon-font-path: "/static/node_modules/bootstrap-sass/assets/fonts/bootstrap/";
$fa-font-path: "/static/node_modules/font-awesome/fonts";
@import "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap";
@import "../node_modules/font-awesome/scss/font-awesome";
@import "type";
...Would probably be easiest to just automate the creating via a cookiecutter package.
Overriding SCSS styles at the moment is not very flexible, especially because of the way styles.scss is structured:
// styles.scss
// Usually messing with "variables" is where most things are overridden
@import "variables"; // (1)
// ...a bunch of "@import"'s that depend on "variables" // (2)
@import "type";
@import "navbar";
// ...
// ...some angular stuff... // (3)At the moment it's pretty difficult to get between (1) and (2).
(On a separate note, the angular-specific rules in (3) should be moved to a angular.scss file)
Adding a new file, (e.g. theme.scss) which is going to be the main webpack entrypoint, will allow easier overriding:
// theme.scss
@import "variables";
@import "styles";Overriding now would just require:
// my_site/assets/scss/my_site/variables.scss
$color1: #FFF;
// ...rest of variables...// my_site/assets/scss/my_site/theme.scss
@import "variables"; // the one defined above ^^
@import "../invenio_theme/styles";When trying to run my Invenio installation with ASSETS_DEBUG=True, I get an error complaining about missing output BuildError: No output target found from bundles.py:
js = Bundle(
NpmBundle(
'node_modules/almond/almond.js',
'js/settings.js',
filters='uglifyjs',
npm={
"almond": "~0.3.1",
"jquery": "~1.9.1"
}
),
Bundle(
'js/base.js',
filters='requirejs',
**** MISSING OUTPUT ****
),
filters='jsmin',
output="gen/packed.%(version)s.js",
)
When fixing this, I get (as @jalavik mentioned on Gitter yesterday) the following javascript error from almond.js:310: Uncaught Error: undefined missing jquery. I thought ASSETS_DEBUG was supposed to let require.js do the work? Does anyone know what's going on?
Replace with use of current_i18n
header.htmlheader_frontpage.htmlheader_login.htmlDisplay search form also on small displays.
Check https://sandbox.zenodo.org/
Wide
Narrow
Bonus: fix button height.
@lnielsen commented on Mon Sep 29 2014
What I did:
Browse http://invenio-demo-next.cern.ch in Chrome using Samsung Galaxy S4 emulation mode:
What happend:
Search field width is very small, meaning it's very difficult to see what is being typed.
What I expected:
A wider search field.
Possibly by moving Search tips, advanced search and search settings to out of the search field.
Add page cover template based on e.g.:
Needed by Invenio-Accounts for sign-in page.
invenio-theme module is using flask menu to render dynamically menu for pages as well for admin pages, this translation approach is not working for dynamic rendered flask menu.
page.htmlpage_admin.htmlpage_cover.htmlpage_error.htmlpage_settings.htmlpywebpack dependencyFlask-webpackext dependencyWe're currently using the "stock" Semantic-UI theme where e.g. primary color is black. Using the semantic-ui-less and our own theme.config and sites folder we can override whatever's needed to have some base Invenio theming applied to the built bundle.
TODO: Figure out what has to be transferred from the old Bootstrap theming to Semantic-UI
body.htmlbreadcrumbs.htmlfooter.htmlfrontpage.htmljavascript.htmltrackingcode.htmlIn Safari on macOS the sign up button is not orange:
Same in Firefox:
First ideas:
https://codimd.web.cern.ch/bfDyh_ejQJSq-DZpGCSfMA
In other modules, we use examples directory to provide examples. This is also what cookiecutter generates.
In invenio-theme, we have example only.
It would be good to harmonise this with others modules. I'd prefer the plural so that we could later introduce, if needed:
examples/simple/...examples/complex/...See for instance:
And add pending deprecation warning
The package contains examples/app.py example application, but there is no test
for it in tests/test_example_app.py. It should be added. See existing examples:
<html lang="...">http://mdo.github.io/code-guide/ especially sass
The header should not have around corners. See attached screenshot:
401.html403.html404.html429.html500.htmladmin_header.htmladmin_layout.htmlCurrently, the module does not allow setting THEME_LOGO = None.
$ git grep FIXME
invenio_theme/bundles.py:# FIXME: This bundle doesn't build without the outputSame as:
https://travis-ci.org/inveniosoftware/invenio-theme/jobs/656629115
Warning, treated as error:
autodoc: failed to import module u'ext' from module u'invenio_theme'; the following exception was raised:
cannot import name ImmutableDict
The command "./run-tests.sh" exited with 2.
Fix also deprecation warning in Travis config:
https://travis-ci.org/inveniosoftware/invenio-theme/jobs/656629115/config
param, returns, raises, versionadded)The following cookiecutter change:
inveniosoftware/cookiecutter-invenio-module#98
should be propagated to this Invenio module.
Namely, in run-tests.sh, the sphinx for doctests is invoked after pytest run:
$ tail -3 ./\{\{\ cookiecutter.project_shortname\ \}\}/run-tests.sh
sphinx-build -qnNW docs docs/_build/html && python setup.py test && sphinx-build -qnNW -b doctest docs docs/_build/doctestThis sometimes led to problems on Travis CI with the second sphinx-build run due
to "disappearing" dependencies after the example application was tested.
A solution that worked for invenio-marc21 (see
inveniosoftware/invenio-marc21#49 (comment))
and that was integrated in cookiecutter (see
inveniosoftware/cookiecutter-invenio-module#98) was to
run doctest execution in pytest, removing the second sphinx-build invocation.
This both solved Travis CI build failures and simplified test suite execution.
Note that this change may necessitate to amend the code tests etc so that things
would be executed with the Flask application context (see
inveniosoftware/invenio-marc21@09e98fc).
Invenio-Theme: Polish UI to match bootstrap style - compare with bootstrap code.
In an Invenio 3.1 application, the blueprint is set up such that its static_folder is set to 'static'. But adding a logo file to <app>/theme/static/ and setting THEME_LOGO doesn't find the logo file because invenio-theme's templates/invenio_theme/header.html has:
<a href="/"><img class="navbar-brand" src="{{ url_for('static', filename=config.THEME_LOGO) }}" alt="{{ _(config.THEME_SITENAME) }}"/></a>
Where the url_for() call uses 'static' which finds only the theme's static folder, not our custom one.
Overriding the brand block doesn't work because invenio_theme/frontpage.html includes invenio_theme/header_frontpage.html and Jinja2 doesn't support overriding blocks in included files.
One solution of course is to use something like Nginx to serve static files, but it would be nice to have this work in the development server.
The footer line (see screenshot) extends edge to edge the search result page, compared to eg. frontpage.
Expected:
When i18n is enable boostrapjs is not yet available. Can be tested by enter $().tab in the debug console. This can be solved by adding bootstrap inclusion in invenio-i18nbut perhaps it can be a cleaner way...
Make a pass to clean up all the non-semantic classes, not used divs, semantic-ui elements not properly used on the following modules
The current example is incorrect. It will never set the FOO_BASE_TEMPLATE to the module's base the template. It should probably be changed to something like this:
# invenio_foo/config.py
FOO_BASE_TEMPLATE = 'invenio_foo/base.html'
# invenio_foo/ext.py
from . import config
class InvenioFoo(object):
# ...
def init_config(app):
# Set FOO_BASE_TEMPLATE to the theme's
# base template if theme is installed
if 'BASE_TEMPLATE' in app.config:
app.config.setdefault(
'FOO_BASE_TEMPLATE',
app.config['BASE_TEMPLATE'],
)
# If no theme is installed, this will set
# the base template to the module's
# base template.
for k in dir(config):
if k.startswith('FOO_'):
app.config.setdefault(
k,
getattr(config, k))
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.