layout updates (#83)

* changed menu bottom line from red to grey
* added more space around the more button

Following changes are about the article view on the front page
  - added color grey around the version badge
  - moved version badges to the right side
  - removed view button
  - moved open access badge to right bottom
  - changed open access badge to text only without background-color
  - added bottom border to the last article

The following changes are about the record landing page.
NOTE: the modified record landing page is for now disabled
  - added color grey around the version badge
  - moved DOI to the left side
  - moved open access to the same level as the DOI
  - changed open access badge to text only without background-color
  - unset box-shadow from the .rdm-sidebar
This commit is contained in:
Christoph Ladurner
2020-09-30 13:39:25 +02:00
committed by GitHub
parent 7a60cef6a6
commit 4c3a4f8eb3
10 changed files with 411 additions and 217 deletions

View File

@@ -6,21 +6,41 @@
* under the terms of the MIT License; see LICENSE file for more details.
*/
h4{
display: block;
margin-block-start: 0.33em;
margin-block-end: 0.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
h4 {
display: block;
margin-block-start: 0.33em;
margin-block-end: 0.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
h2{
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
h2 {
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.record-version{
color: #777777;
}
.record-version {
color: #777777;
background-color: #f2f2f2 !important;
}
.random-records-frontpage article {
border-bottom: 1px solid rgba(34,36,38,.15);
margin-bottom: 1rem;
padding-bottom: 1rem;
}
.random-records-frontpage .more {
margin-top: 20px !important;
margin-bottom: 35px !important;
}
.random-records-frontpage h2 {
text-align: center;
}
.badges {
float: right;
}

View File

@@ -190,7 +190,7 @@ svg:not(:root) {
}
.main-menu-underline-line {
border: 2px solid #e4154b !important;
border: 2px solid #e0e1e2 !important;
border-radius: 0;
}
@@ -247,4 +247,4 @@ svg:not(:root) {
}
.inline-elements{
display: flex;
}
}

View File

@@ -6,162 +6,120 @@
* under the terms of the MIT License; see LICENSE file for more details.
*/
/*
* Logos background frontpage.
* from rgba(173, 206, 224, 0.52)
* to #ffffff
*/
/***
* Logos background frontpage.
* from rgba(173, 206, 224, 0.52)
* to #ffffff
***/
.section-content-light-bg {
background-color: #ffffff;
}
/*
* section title.
* from #0377cd
* to #000000
*/
/***
* section title.
* from #0377cd
* to #000000
***/
.section-title {
color: #000000;
}
/***
login background color
from : rgba(13,95,137,.8)
To #ffffff
*/
* login background color
* from : rgba(13,95,137,.8)
* To #ffffff
***/
.cover-page {
//text-align: center;
background-color: #ffffff;
}
/***
login & sigup page title
from : #0377cd
To #000000
*/
* login & sigup page title
* from : #0377cd
* To #000000
***/
.panel-free-title {
color: #000000;
}
/***
forcing the font changes
*/
* {
* force: the font changes
***/
*,
html, body,
h1, h2, h3, h4, h5, h6,
pre,
.ui.button,
.ui.items,
.ui.accordion .title:not(.ui),
.ui.items > .item > .content > .header,
.ui.modal > .header,
.ui.menu,
.ui.header,
.ui.form input[type],
.ui.form input[type]:focus {
font-family: "Source Sans Pro";
}
html, body {
font-family: "Source Sans Pro";
}
body, h1, h2, h3, h4, h5, h6 {
font-family: "Source Sans Pro";
}
.ui.button{
font-family: "Source Sans Pro";
}
.ui.items{
font-family: "Source Sans Pro";
}
}
pre {
font-size: 14px;
}
.ui.form input:not([type]),
.ui.form input[type=date],
.ui.form input[type=datetime-local],
.ui.form input[type=email],
.ui.form input[type=file],
.ui.form input[type=number],
.ui.form input[type=password],
.ui.form input[type=search],
.ui.form input[type=tel],
.ui.form input[type=text],
.ui.form input[type=time], .ui.form input[type=url] {
font-family: "Source Sans Pro";
}
.ui.accordion .title:not(.ui) {
font-family: "Source Sans Pro";
}
.ui.items>.item>.content>.header {
font-family: "Source Sans Pro";
}
.ui.menu{
font-family: "Source Sans Pro";
}
.ui.header {
font-family: "Source Sans Pro";
}
/***
search.button
**/
.ui.search.button{
* search.button
***/
/*.ui.button,*/
.ui.search.button {
background-color:#e4154b;
}
.ui.search.button:hover{
.ui.button:hover,
.ui.search.button:hover {
background-color:#000000;
}
/**
.ui.button{
background-color:#e4154b;
}
*/
.ui.button:hover{
background-color:#000000;
.ui.button:hover {
color:#fff;
}
/***
remove corners from border
**/
* force: remove corners from border
***/
.label-keyword,
.ui.label,
.ui.button,
.ui.rdm-sidebar,
.ui.menu,
.ui.input > input, /* it seams redundant but it is not */
.ui.segment,
.ui.selection.dropdown,
.ui.card,
.ui.cards > .card,
.ui.basic.button, .ui.basic.buttons .button,
.ui.action.input:not([class*="left action"]) > .button:last-child,
.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button,
.ui.action.input:not([class*="left action"]) > .dropdown:last-child,
.ui.form input[type],
.ui.form input[type]:focus {
border-radius: 0;
}
/***
* force: rdm-side-bar same empty box as on the frontpage
***/
.ui.rdm-sidebar {
background-color: unset;
box-shadow: unset;
}
/***
* force: font weight: normal
***/
.ui.label {
border-radius: 0;
font-weight: 400;
}
.ui.button{
border-radius: 0;
}
.ui.rdm-sidebar{
border-radius: 0;
}
.label-keyword {
border-radius: 0;
}
.ui.menu {
border-radius: 0;
}
.ui.form input:not([type]),
.ui.form input[type=date],
.ui.form input[type=datetime-local],
.ui.form input[type=email],
.ui.form input[type=file],
.ui.form input[type=number],
.ui.form input[type=password],
.ui.form input[type=search],
.ui.form input[type=tel],
.ui.form input[type=text],
.ui.form input[type=time],
.ui.form input[type=url] {
border-radius: 0;
}
.ui.input>input {
border-radius: 0;
}
.ui.segment {
border-radius: 0;
}
.ui.selection.dropdown {
border-radius: 0;
}
.ui.card, .ui.cards>.card {
border-radius: 0;
}
.ui.action.input:not([class*="left action"])>.button:last-child,
.ui.action.input:not([class*="left action"])>.buttons:last-child>
.button, .ui.action.input:not([class*="left action"])>
.dropdown:last-child {
border-radius: 0;
}
.ui.basic.button, .ui.basic.buttons .button {
border-radius: 0;
}

View File

@@ -0,0 +1,11 @@
/*
* Copyright (C) 2020 Graz University of Technology
*
* invenio-theme-tugraz is free software; you can redistribute it and/or modify
* it under the terms of the MIT License; see LICENSE file for more details.
*/
.access-right {
color: #e9711c;
float: right;
}

View File

@@ -11,6 +11,7 @@
@import "footer";
@import "overrides";
@import "frontpage";
@import "record";
@import "macros";
@import "login";
@import (css)

View File

@@ -10,32 +10,33 @@
from flask_babelex import gettext as _
INVENIO_THEME_TUGRAZ_DEFAULT_VALUE = 'foobar'
INVENIO_THEME_TUGRAZ_DEFAULT_VALUE = "foobar"
"""Default value for the application."""
INVENIO_THEME_TUGRAZ_BASE_TEMPLATE = 'invenio_theme_tugraz/base.html'
INVENIO_THEME_TUGRAZ_BASE_TEMPLATE = "invenio_theme_tugraz/base.html"
"""TU Graz Default base template"""
INVENIO_THEME_TUGRAZ_ACCOUNT_BASE = \
'invenio_theme_tugraz/accounts/accounts_base.html'
"invenio_theme_tugraz/accounts/accounts_base.html"
"""TU Graz Default account base template"""
INVENIO_THEME_TUGRAZ_ICON = 'images/icon_use.png'
INVENIO_THEME_TUGRAZ_ICON = "images/icon_use.png"
"""icon used in login page"""
INVENIO_THEME_TUGRAZ_LOGIN_IMG = 'images/login_logo.png'
INVENIO_THEME_TUGRAZ_LOGIN_IMG = "images/login_logo.png"
"""TU Logo for forms"""
# Invenio-theme
# ============
# See https://invenio-theme.readthedocs.io/en/latest/configuration.html
THEME_LOGO = 'images/tug_logo.png'
#
THEME_LOGO = "images/tug_logo.png"
"""TU Graz logo"""
THEME_SEARCHBAR = False
"""Enable or disable the header search bar."""
THEME_HEADER_TEMPLATE = 'invenio_theme_tugraz/header.html'
THEME_HEADER_TEMPLATE = "invenio_theme_tugraz/header.html"
"""TU Graz header template"""
# THEME_FRONTPAGE_TEMPLATE = 'invenio_theme_tugraz/frontpage.html'
@@ -44,16 +45,17 @@ THEME_HEADER_TEMPLATE = 'invenio_theme_tugraz/header.html'
THEME_FRONTPAGE = False
"""Use default frontpage."""
THEME_HEADER_LOGIN_TEMPLATE = 'invenio_theme_tugraz/accounts/header_login.html'
THEME_HEADER_LOGIN_TEMPLATE = \
"invenio_theme_tugraz/accounts/header_login.html"
"""login page header"""
THEME_FOOTER_TEMPLATE = 'invenio_theme_tugraz/footer.html'
THEME_FOOTER_TEMPLATE = "invenio_theme_tugraz/footer.html"
"""footer template"""
THEME_FRONTPAGE_TITLE = _('TU Graz Repository')
THEME_FRONTPAGE_TITLE = _("TU Graz Repository")
"""Frontpage title."""
THEME_SITENAME = _('Repository')
THEME_SITENAME = _("Repository")
"""Site name."""
# Invenio-accounts
@@ -63,29 +65,39 @@ THEME_SITENAME = _('Repository')
# COVER_TEMPLATE = 'invenio_theme_tugraz/accounts/accounts_base.html'
"""Cover page template for login and sign up pages."""
SECURITY_LOGIN_USER_TEMPLATE = 'invenio_theme_tugraz/accounts/login_user.html'
SECURITY_LOGIN_USER_TEMPLATE = \
"invenio_theme_tugraz/accounts/login_user.html"
"""Login template"""
SECURITY_REGISTER_USER_TEMPLATE = \
'invenio_theme_tugraz/accounts/register_user.html'
"invenio_theme_tugraz/accounts/register_user.html"
"""Sigup template"""
# Invenio-I18N
# ============
# See https://invenio-i18n.readthedocs.io/en/latest/configuration.html
BABEL_DEFAULT_LOCALE = 'en'
BABEL_DEFAULT_LOCALE = "en"
# Default time zone
BABEL_DEFAULT_TIMEZONE = 'Europe/Vienna'
BABEL_DEFAULT_TIMEZONE = "Europe/Vienna"
# Other supported languages (do not include BABEL_DEFAULT_LOCALE in list).
I18N_LANGUAGES = [
('de', _('German'))
]
I18N_LANGUAGES = [("de", _("German"))]
# Invenio-app-rdm
# =============
# See https://invenio-app-rdm.readthedocs.io/en/latest/configuration.html
SEARCH_UI_HEADER_TEMPLATE = 'invenio_theme_tugraz/header.html'
SEARCH_UI_HEADER_TEMPLATE = "invenio_theme_tugraz/header.html"
"""Search page's header template."""
DEPOSITS_HEADER_TEMPLATE = 'invenio_theme_tugraz/header.html'
DEPOSITS_HEADER_TEMPLATE = "invenio_theme_tugraz/header.html"
"""Deposits header page's template."""
# Invenio-rdm-records
# =============
# See https://invenio-rdm-records.readthedocs.io/en/latest/configuration.html
# Uncomment below to override records landingpage.
# from invenio_rdm_records.config import RECORDS_UI_ENDPOINTS
# RECORDS_UI_ENDPOINTS["recid"].update(
# template="invenio_theme_tugraz/record_landing_page.html"
# )
"""override the default record landing page"""

View File

@@ -0,0 +1,41 @@
{#
Copyright (C) 2020 CERN.
Copyright (C) 2020 Northwestern University.
Copyright (C) 2020 Graz University of Technology
invenio-theme-tugraz is free software; you can redistribute it and/or modify
it under the terms of the MIT License; see LICENSE file for more details.
origin: invenio-rdm-records/doi.html
#}
{%- set id_doi = record.identifiers | doi_identifier %}
<div>
<div class="get-badge"
data-toggle="tooltip"
data-placement="bottom"
style="cursor: pointer;"
title="Get the DOI badge!">
<img id="record-doi-badge"
data-target="[data-modal='{{ id_doi }}']"
src="{{ url_for('invenio_formatter_badges.badge', title='DOI', value=id_doi, ext='svg') }}"
alt="{{ id_doi }}">
</div>
<div id="doi-modal" class="ui modal fade badge-modal" data-modal="{{ id_doi }}">
<h2 class="header">
RDM DOI Badge
</h2>
<div class="content">
<h4><small>DOI</small></h4>
<h4><pre>{{ id_doi }}</pre></h4>
{% from "semantic-ui/invenio_formatter/macros/badges.html" import badges_formats_list %}
{{ badges_formats_list(url_for('invenio_formatter_badges.badge', title='DOI', value=id_doi, ext='svg',
_external=True, _scheme='https'), id_doi | pid_url(scheme='doi')) }}
</div>
</div>
</div>

View File

@@ -11,10 +11,8 @@
{%- from "invenio_theme_tugraz/macros/authors.html" import creators -%}
{%- block page_body %}
<div class="ui container">
{%- block frontpage_search %}
@@ -23,8 +21,10 @@
<div class="sixteen wide column">
<form action="{{config.THEME_SEARCH_ENDPOINT}}" class="ui form" role="search">
<div class="ui fluid big action icon input">
<input type="text" name="q" autofocus="autofocus" placeholder="{{ _("Type and press enter to search") }}" style="border-radius: 0;">
<button type="submit" class="ui icon search button"><i class="icon search"></i></button>
<input type="text" name="q" autofocus="autofocus" placeholder="{{ _("Type and press enter to search") }}">
<button type="submit" class="ui icon search button">
<i class="icon search"></i>
</button>
</div>
</form>
</div>
@@ -36,73 +36,99 @@
<div class="ui stackable grid">
<!---Recent uploads-->
<div class="ten wide column">
<div class="ten wide column random-records-frontpage">
<h2>{{_('Recent uploads')}}</h2>
{%- for r in records %}
{%- set creation_date = r._created|from_isodatetime -%}
{%- set record_url = url_for('invenio_records_ui.recid', pid_value=r['recid']) %}
<!--btn view-->
<a href="{{ record_url }}" class="ui right floated button">{{_('View')}}</a>
<!--TODO:
something with doi
<article>
<!--TODO:
something with doi
-->
<div class="left floated left aligned column">
<div class="badges">
<!--Publication date badge-->
<span class="ui label teal" title="{{_('Publication date')}}">
{{ r.publication_date }}
</span>
<!--Publication date badge-->
<span class="ui label teal" title="{{_('Publication date')}}">{{ r.publication_date }}
</span>
<!--Version badge-->
<span class="ui label record-version" title="{{_('Version')}}">
{{ (' Version ' ~ r.version ~ '') if r.version else 'Version' }}
</span>
<!--Version badge-->
<span class="label record-version" title="{{_('Version')}}">
{{ (' | Version ' ~ r.version ~ '') if r.version else ' ' }}</span>
<!--Resource type badge-->
<span class="ui label grey" title="{{_('Resource type')}}">
{{r.resource_type | cast_to_dict | vocabulary_title('resource_type') }}
</span>
<!--Resource type badge-->
<span class="ui label grey" title="{{_('Resource type')}}">{{r.resource_type.type}}</span>
<span class="label record-version">
<!--TODO: add subtype---></span>
<span class="label record-version">
<!--TODO: add subtype--->
</span>
</div>
<!--Access right badge-->
<span class="ui label green">{{_('Open Access')}}</span>
<h4>
<a href="{{ record_url }}">
{{r.titles[0].title}}
</a>
</h4>
</div>
<p>
{{ creators(r.creators) }}
</p>
<h4><a href="{{ record_url }}">{{r.titles[0].title}}</a></h4>
<p class="hidden-xs">
<a href="{{record_url}}">
{{ r.descriptions[0].description | striptags | truncate(300) }}
</a>
</p>
<p>{{ creators(r.creators) }}</p>
<p class="hidden-xs"><a href="{{record_url}}">{{ r.descriptions[0].description|striptags|truncate(300) }}</a></p>
<small>{% trans user=userprofile, date=creation_date|dateformat('long') %}Uploaded on
{{date}}{% endtrans %}</small>
<div class="ui grid">
<div class="two column row">
<div class="left floated column">
<small>
{% trans user=userprofile, date=creation_date | dateformat('long')%}
Uploaded on {{date}}
{% endtrans %}
</small>
</div>
<div class="right floated column">
<span class="access-right">
{{ r.access_right | make_dict_like('access_right') | vocabulary_title('access_right') | lower }}
</span>
</div>
</div>
</div>
</article>
<!----TODO: more versions
-->
{%- if not loop.last %}
<div class="ui divider"></div>
{%- else%}
<div class="spacer"></div>
<div class="ui two column centered grid">
<a class="ui button" href="{{url_for('invenio_search_ui.search')}}">{{_('More')}}</a>
</div>
{%- endif %}
{%- endfor %}
<div class="ui two column centered grid">
<a class="ui button more" href="{{url_for('invenio_search_ui.search')}}">{{_('More')}}</a>
</div>
</div>
<!---segments-->
<div class="six wide column">
<!--contact us-->
<div class="ui segment" style="padding-bottom: 10px;">
<h4>Need help?</h4>
<div style="padding-bottom: 10px;">
<a href="{{ url_for('invenio_theme_tugraz.index')}}" class="fluid ui button">Contact us</a>
<a href="{{ url_for('invenio_theme_tugraz.index')}}" class="fluid ui button">
Contact us
</a>
</div>
<p>{{config.THEME_SITENAME}} prioritizes all requested related to the COVID-19 outbreak.</p>
<p>We can help with:</p>
<p>
{{config.THEME_SITENAME}} prioritizes all requested related to the COVID-19 outbreak.
</p>
<p>
We can help with:
</p>
<ul>
<li>Uploading your research data, software, preprints, etc.</li>
@@ -110,22 +136,16 @@
<li>Quota increases beyond our default policy.</li>
<li>Scripts for automated uploading of larger datasets.</li>
</ul>
</div>
<div class="ui segment" style="padding-bottom: 10px;">
<h4>Why use {{config.THEME_SITENAME}}?</h4>
{% include "invenio_theme_tugraz/benefits.html" %}
</div>
</div>
</div>
<div class="spacer"></div>
</div>
{%- endblock %}
{%- endblock %}

View File

@@ -0,0 +1,113 @@
{#
Copyright (C) 2020 CERN.
Copyright (C) 2020 Northwestern University.
Copyright (C) 2020 Graz University of Technology
invenio-theme-tugraz is free software; you can redistribute it and/or modify
it under the terms of the MIT License; see LICENSE file for more details.
origin: invenio-rdm-records/record_landing_page.html
#}
{%- extends config.BASE_TEMPLATE %}
{%- block css %}
{{ super() }}
{{ webpack['invenio-rdm-records-theme.css'] }}
{%- endblock css %}
{%- from "invenio_rdm_records/macros/files.html" import file_list_box, preview_file_box %}
{%- block page_body %}
<div class="ui container">
<div class="ui padded relaxed grid">
<div class="two column row">
<div class="ten wide column">
{%- block record_body %}
<div class="left floated left aligned column">
<span class="ui label teal" title="Publication date">
{{ record.publication_date|to_date|format_date(format='long') }}
</span>
<span class="ui label record-version">
Version {{ record.version }}
</span>
<span class="ui label grey">
{{ record.resource_type | vocabulary_title('resource_type') }}
</span>
</div>
<h1>{{ record.titles[0].title }}</h1>
<p>
{%- include "invenio_rdm_records/details/creators.html" %}
</p>
{%- if record.contributors %}
<p>
{%- include "invenio_rdm_records/details/contributors.html" %}
</p>
{%- endif %}
<div class="ui grid">
<div class="two column row">
<div class="left floated column">
{%- include "invenio_theme_tugraz/details/doi.html" %}
</div>
<div class="right floated column">
{#
{%- include "invenio_rdm_records/details/contact.html" %}
#}
<span class="access-right">
{{ record | vocabulary_title('access_right') | lower_case }}
</span>
</div>
</div>
</div>
{%- include "invenio_rdm_records/details/citation.html" %}
{%- include "invenio_rdm_records/details/keywords.html" %}
{%- include "invenio_rdm_records/details/description.html" %}
{%- include "invenio_rdm_records/details/licenses.html" %}
{# files #}
{%- if record.files and record | can_list_files %}
{%- set files = record.files %}
{{ preview_file_box(files | select_preview_file, pid) }}
{{ file_list_box(files.dumps(), pid) }}
{%- else %}
<br>
<p style="text-align: center;">
No associated files.
</p>
{% endif %}
{# More details #}
{%- endblock record_body %}
</div>
<div class="six wide column">
{% block sidebar %}
<div class="ui segment rdm-sidebar">
{%- include "invenio_rdm_records/details/side_bar.html" %}
</div>
{% endblock sidebar %}
</div>
</div>
</div>
</div>
{%- endblock page_body %}
{%- block javascript %}
{{ super() }}
{{ webpack['invenio-rdm-records-js.js'] }}
{# Communities management #}
{{ webpack['invenio-communities-records.js'] }}
{{webpack['previewer_theme.js']}}
{%- endblock javascript %}

View File

@@ -8,16 +8,18 @@
"""invenio module for TUGRAZ theme."""
from typing import Dict
from elasticsearch_dsl.utils import AttrDict
from flask import Blueprint, render_template
from flask_babelex import gettext as _
from .search import FrontpageRecordsSearch
blueprint = Blueprint(
'invenio_theme_tugraz',
"invenio_theme_tugraz",
__name__,
template_folder='templates',
static_folder='static',
template_folder="templates",
static_folder="static",
)
@@ -26,4 +28,20 @@ def index():
"""Render frontpage view."""
return render_template(
"invenio_theme_tugraz/index.html",
records=FrontpageRecordsSearch()[:5].sort('-_created').execute(),)
records=FrontpageRecordsSearch()[:5].sort("-_created").execute(),
) # pragma: no cover
@blueprint.app_template_filter("make_dict_like")
def make_dict_like(value: str, key: str) -> Dict[str, str]:
"""Convert the value to a dict like structure.
in the form of a key -> value pair.
"""
return {key: value} # pragma: no cover
@blueprint.app_template_filter("cast_to_dict")
def cast_to_dict(attr_dict):
"""Return the dict structure of AttrDict variable."""
return AttrDict.to_dict(attr_dict) # pragma: no cover