Cian-H/invenio-theme-iform
1
0
Fork 0
mirror of https://github.com/Cian-H/invenio-theme-iform.git synced 2025-12-22 20:51:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Theme improvement (#78)

Browse Source 
# Frontpage
* red divider border to 2px
* Recent uploads ```more``` button to the center of the column.
* Searchbar aligned with the rest of content, inside frontpage container.

# Header
* logos row from bootstrap to semantic UI classes.
* added first version repository logo.
* removed extra margin between menu and content.
* Navbar to a separate file, this way we can include with jinja to other pages such as login&signup.

# Html/Body
* Button element has the same hover as the hyperlinks.
This commit is contained in:
mb-wali
2020-09-01 13:38:57 +02:00
committed by GitHub
parent 0239d1d8e7
commit 7ca5e97f0d
7 changed files with 193 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/footer.less
View File

@@ -22,7 +22,7 @@
background-attachment: fixed;
&.footer-bottom {
background-color: #fbfcff;
background-color: #f2f2f2;
padding-top: 15px;
padding-bottom: 15px;
font-size: 16px;

76
invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less
View File

@@ -14,14 +14,7 @@
}
/*****logo section******/
.affiliation-spacer {
display: table-cell;
vertical-align: middle;
width: 100%;
}
.affiliation-logo {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
& a {
@@ -85,18 +78,11 @@ a {
display: table-cell;
width: 50%;
color: #000000;
& div {
stroke: #000;
stroke-linecap: round;
stroke-width: 2;
fill: none;
}
}
.short-menu-right :hover {
background-color: #000000;
color: #ffffff;
stroke: #fff;
}
.short-menu-right-button {
@@ -204,7 +190,7 @@ svg:not(:root) {
}
.main-menu-underline-line {
border: 2.5px solid #e4154b !important;
border: 2px solid #e4154b !important;
border-radius: 0;
}
@@ -227,43 +213,6 @@ svg:not(:root) {
transition: height 0.3s linear 0s;
}
@media (max-width: 767.9px) {
.main-menu {
height: auto;
}
}
@media screen and (max-width: 767.9px) {
#int-header-logo-img {
width: 200px;
height: 75px;
}
}
@media screen and (max-width: 767.9px) {
#int-header-logo {
padding: 50px 0;
text-align: center;
}
}
@media screen and (max-width: 767.9px) {
.affiliation {
margin: 0;
text-align: center;
}
.affiliation-text {
display: none;
}
.affiliation-logo-claim {
display: none;
}
.affiliation-spacer {
display: none;
}
}
.int-menu-q-open-icon {
width: 14px;
vertical-align: middle;
@@ -275,4 +224,27 @@ svg:not(:root) {
.col a {
cursor: pointer;
}
@media screen and (max-width: 767.9px) {
#int-header-logo-img {
width: 200px;
height: 75px;
}
#main-logo {
padding: 30px 0;
text-align: center;
display: block;
}
#repo-logo{
display: none;
}
.affiliation-logo-claim {
display: none;
}
}
.repo-img{
margin-right: 5px;
}
.inline-elements{
display: flex;
}

13
invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less
View File

@@ -98,7 +98,15 @@ search.button
.ui.search.button:hover{
background-color:#000000;
}
/**
.ui.button{
background-color:#e4154b;
}
*/
.ui.button:hover{
background-color:#000000;
color:#fff;
}
/***
remove corners from border
**/
@@ -153,4 +161,7 @@ border-radius: 0;
.button, .ui.action.input:not([class*="left action"])>
.dropdown:last-child {
border-radius: 0;
}
.ui.basic.button, .ui.basic.buttons .button {
border-radius: 0;
}

23
invenio_theme_tugraz/static/images/Icon_1_v2.svg Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
id="Ebene_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="70px"
height="50px"
viewBox="190 340 200.28 241.89"
enable-background="new 0 0 595.28 841.89"
xml:space="preserve">
<line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="241.96" y1="442.299" x2="241.96" y2="595"/>
<polyline fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="373.803,349.25 241.933,442.299 146.321,442.299 "/>
<polyline fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="420.543,444.71 330.344,508.354 251.826,508.354 "/>
<line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="330.344" y1="508.354" x2="330.344" y2="544.901"/>
<polyline fill="none" stroke="#000000" stroke-width="3" stroke-linejoin="round" stroke-miterlimit="10" points="373.703,466.061 373.703,403.966 281.505,469.021 281.505,508.354 "/>
<polyline fill="#e4154b" stroke="#000000" stroke-width="3" points="241.96,442.299 241.96,595 146.321,442.299 241.96,442.299"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

124
invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html
View File

@@ -11,106 +11,11 @@
<header>
{%- block navbar %}
<nav class="navbar navbar-default navbar-static-top">
<nav>
<div class="ui container">
{%- block navbar_header %}
<!----MENU------------------------------------------------------------->
<div class="short-menu" id="all-menu-top-table">
<div class="short-menu-left">
<div id="all-menu-top-left-item">
<div class="short-menu-left-search">
{%- if config.I18N_LANGUAGES %}
<div class="short-menu-left-lang" style="margin-right:10px; font-size:18px;">
{%- for l in current_i18n.get_locales() %}
{%- if current_i18n.language != l.language %}
<a
href="{{ url_for('invenio_i18n.set_lang', lang_code=l.language) }}">{{ l.get_display_name().upper() [0:2]}}</a>
{%- endif %}
{%- endfor %}
</div>
{%- endif %}
<div class="search-icon-header">
<a href="/search">
<svg class="short-menu-icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="26.015" width="26.015" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 26.01515 26.01515">
<g stroke-miterlimit="10" transform="translate(1,1)">
<circle cy="8.5" cx="8.5" r="8" style="stroke-miterlimit:10;stroke-width:2"></circle>
<path style="stroke-width:2;stroke-miterlimit:10;stroke-linecap:round" d="m14.156 14.156 9.344 9.344"></path>
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="short-menu-right">
{%- block navbar_right %}
{%- include config.THEME_HEADER_LOGIN_TEMPLATE %}
{%- endblock navbar_right %}
</div>
</div>
<!----END MENU------------------------------------------------------------->
<div class="affiliation" id="int-header">
<div class="affiliation-text">
<a title="RDM" href="{{url_for('invenio_theme_tugraz.index')}}">
TU Graz
<br>{{_ ("Repository")}}
</a>
</div>
<div class="affiliation-spacer"></div>
<div class="affiliation-logo" id="int-header-logo">
<a href="https://www.tugraz.at" title="TU Graz Home" target="_blank">
<div class="affiliation-logo-claim">
<div class="affiliation-logo-claim-single">{{_ ("SCIENCE")}}</div>
<div class="affiliation-logo-claim-single">{{_ ("PASSION")}}</div>
<div class="affiliation-logo-claim-single">{{_ ("TECHNOLOGY")}}</div>
</div>
<svg id="int-header-logo-img" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="51.862" width="141.1" version="1.1"
xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
viewBox="0 0 141.10001 51.862499">
<g transform="matrix(1.25 0 0 -1.25 0 51.862)">
<g transform="scale(.1)">
<path d="m0 103.73h207.45v207.46l-207.45 0.01v-207.47z"></path>
<path d="m228.19 103.73h207.46v207.46h-207.46v-207.46z"></path>
<path d="m456.41 103.73h207.44v207.46h-207.44v-207.46z"></path>
<path d="m103.72 0h207.47v207.46h-207.47v-207.46z"></path>
<path d="m352.68 207.46h207.44v207.46h-207.44v-207.46z"></path>
<path style="fill:#231f20"
d="m751.04 277.91h-66.426v33.195h171.19v-33.195h-66.407v-173.73h-38.359v173.73"></path>
<path style="fill:#231f20"
d="m1048.3 180.22c0-12.461-2.25-23.711-6.72-33.75-4.5-10.039-10.61-18.555-18.36-25.567-7.76-7.031-16.9-12.421-27.503-16.21-10.605-3.809-22.109-5.7036-34.551-5.7036-12.422 0-23.945 1.8946-34.551 5.7036-10.605 3.789-19.824 9.179-27.656 16.21-7.851 7.012-13.984 15.528-18.34 25.567-4.394 10.039-6.582 21.289-6.582 33.75v130.89h38.379v-129.59c0-5.039 0.801-10.351 2.442-15.898 1.64-5.547 4.336-10.664 8.125-15.332s8.789-8.516 15.039-11.523c6.211-3.008 13.926-4.512 23.144-4.512 9.199 0 16.914 1.504 23.145 4.512 6.23 3.007 11.25 6.855 15.039 11.523 3.77 4.668 6.48 9.785 8.12 15.332 1.63 5.547 2.45 10.859 2.45 15.898v129.59h38.38v-130.89">
</path>
<path style="fill:#231f20"
d="m832.56 75.664c-7.597 3.2812-17.46 4.8632-25.332 4.8632-22.929 0-35.605-14.434-35.605-33.184 0-18.613 12.383-32.637 33.34-32.637 5.351 0 9.59 0.5274 12.969 1.3086v23.867h-20.84v14.414h39.687v-49.297c-10.41-2.6172-21.25-4.707-31.816-4.707-31.797 0-53.906 14.805-53.906 45.742 0 31.348 20.566 48.906 53.906 48.906 11.406 0 20.41-1.4453 28.867-3.8086l-1.27-15.469">
</path>
<path style="fill:#231f20"
d="m856.2 69.375h16.758v-15.332h0.293c0.84 6.289 8.574 16.914 19.824 16.914 1.836 0 3.828 0 5.782-0.5273v-17.715c-1.68 0.918-5.059 1.4454-8.457 1.4454-15.333 0-15.333-17.832-15.333-27.52v-24.785h-18.867v67.52">
</path>
<path style="fill:#231f20"
d="m913.75 65.84c7.324 3.1446 17.187 5.1172 25.215 5.1172 22.09 0 31.23-8.5351 31.23-28.457v-8.6523c0-6.8165 0.156-11.934 0.293-16.914 0.137-5.1172 0.41-9.8242 0.84-15.078h-16.602c-0.703 3.5352-0.703 8.0078-0.839 10.098h-0.293c-4.36-7.4618-13.81-11.661-22.38-11.661-12.793 0-25.332 7.207-25.332 20.059 0 10.078 5.195 15.976 12.383 19.258 7.187 3.2812 16.464 3.9453 24.355 3.9453h10.41c0 10.879-5.195 14.551-16.328 14.551-8.008 0-16.035-2.8907-22.363-7.3438l-0.586 15.078zm22.11-52.715c5.782 0 10.274 2.3633 13.223 6.0352 3.105 3.8086 3.945 8.6523 3.945 13.906h-8.164c-8.437 0-20.957-1.3086-20.957-11.68 0-5.7617 5.195-8.2617 11.953-8.2617">
</path>
<path style="fill:#231f20"
d="m985.69 69.375h57.422v-14.414l-36.04-39.473h37.31v-13.633h-60.235v14.297l36.715 39.59h-35.172v13.633">
</path>
<path d="m1059.6 0h69.102v69.121h-69.102v-69.121z"></path>
</g>
</g>
</svg>
</a>
</div>
</div>
{%- endblock navbar_header %}
{%- include "invenio_theme_tugraz/navbar.html" %}
{%- endblock navbar_header %}
<div class="ui grid stackable container">
<div class="three column row centered" style="padding-bottom: 0;">
<div class="two wide column main-menu-entry main-menu-entry-svg">
@@ -141,29 +46,6 @@
</div>
<div style="margin-top: 15px;"></div>
<!--
{%- block navbar_inner %}
<div id="navbar" class="navbar-collapse collapse">
{%- block navbar_nav %}
{%- if config.THEME_SEARCHBAR %}
{%- block navbar_search %}
<div class="item" id="header-search-bar">
<form class="form" action="{{ config.THEME_SEARCH_ENDPOINT }}" role="search">
<div class="ui action icon input">
<input type="text" name="q" placeholder="{{ _('Search') }}">
<button type="submit" class="ui icon search button">
<i class="icon search"></i>
</button>
</div>
</form>
</div>
{%- endblock navbar_search %}
{%- endif %}
{%- endblock navbar_nav %}
</div>
{%- endblock navbar_inner %}
-->
</div>
{%- endblock navbar %}

37
invenio_theme_tugraz/templates/invenio_theme_tugraz/index.html
View File

@@ -15,26 +15,24 @@
{%- block page_body %}
{%- block frontpage_search %}
<div class="ui container">
{%- block frontpage_search %}
{%- block frontpage_form %}
<div class="ui center aligned grid">
<div class="eight 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>
</div>
</form>
</div>
{%- block frontpage_form %}
<div class="ui center aligned grid">
<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>
</div>
<div class="ui divider hidden"></div>
{%- endblock frontpage_form %}
</form>
</div>
</div>
<div class="ui divider hidden"></div>
{%- endblock frontpage_form %}
{%- endblock frontpage_search %}
<div class="ui container">
<div class="ui stackable grid">
<!---Recent uploads-->
@@ -85,10 +83,9 @@
{%- if not loop.last %}
<div class="ui divider"></div>
{%- else%}
<div class="ui right floated button">
<div class="eight wide column">
<a href="{{url_for('invenio_search_ui.search')}}">{{_('More')}}</a>
</div>
<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 %}

113
invenio_theme_tugraz/templates/invenio_theme_tugraz/navbar.html Normal file
View File

@@ -0,0 +1,113 @@
{#
Copyright (C) 2020 TUGRAZ
Copyright (C) 2020 mojib wali.
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.
#}
<!----MENU------------------------------------------------------------->
<div class="short-menu" id="all-menu-top-table">
<div class="short-menu-left">
<div id="all-menu-top-left-item">
<div class="short-menu-left-search">
{%- if config.I18N_LANGUAGES %}
<div class="short-menu-left-lang" style="margin-right:10px; font-size:18px;">
{%- for l in current_i18n.get_locales() %}
{%- if current_i18n.language != l.language %}
<a
href="{{ url_for('invenio_i18n.set_lang', lang_code=l.language) }}">{{ l.get_display_name().upper() [0:2]}}</a>
{%- endif %}
{%- endfor %}
</div>
{%- endif %}
<div class="search-icon-header">
<a href="{{url_for('invenio_search_ui.search')}}">
<svg class="short-menu-icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="26.015" width="26.015" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 26.01515 26.01515">
<g stroke-miterlimit="10" transform="translate(1,1)">
<circle cy="8.5" cx="8.5" r="8" style="stroke-miterlimit:10;stroke-width:2"></circle>
<path style="stroke-width:2;stroke-miterlimit:10;stroke-linecap:round" d="m14.156 14.156 9.344 9.344"></path>
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="short-menu-right">
{%- block navbar_right %}
{%- include config.THEME_HEADER_LOGIN_TEMPLATE %}
{%- endblock navbar_right %}
</div>
</div>
<!----END MENU------------------------------------------------------------->
<div class="ui grid" id="main-logo">
<!--Left-->
<div class="left floated left aligned six wide column" id="repo-logo">
<div class="inline-elements">
<div class="repo-img">
<img height="51.862"
src="{{ url_for('static', filename='images/Icon_1_v2.svg')}}">
</div>
<div class="affiliation-text">
<a title="RDM" href="{{url_for('invenio_theme_tugraz.index')}}">
TU Graz
<br>
{{_ ("Repository")}}
</a>
</div>
</div>
</div>
<!--Right-->
<div class="right floated right aligned six wide column">
<div class="affiliation-logo" id="int-header-logo">
<a href="https://www.tugraz.at" title="TU Graz Home" target="_blank">
<div class="affiliation-logo-claim">
<div class="affiliation-logo-claim-single">{{_ ("SCIENCE")}}</div>
<div class="affiliation-logo-claim-single">{{_ ("PASSION")}}</div>
<div class="affiliation-logo-claim-single">{{_ ("TECHNOLOGY")}}</div>
</div>
<svg id="int-header-logo-img" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="51.862" width="141.1" version="1.1"
xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
viewBox="0 0 141.10001 51.862499">
<g transform="matrix(1.25 0 0 -1.25 0 51.862)">
<g transform="scale(.1)">
<path d="m0 103.73h207.45v207.46l-207.45 0.01v-207.47z"></path>
<path d="m228.19 103.73h207.46v207.46h-207.46v-207.46z"></path>
<path d="m456.41 103.73h207.44v207.46h-207.44v-207.46z"></path>
<path d="m103.72 0h207.47v207.46h-207.47v-207.46z"></path>
<path d="m352.68 207.46h207.44v207.46h-207.44v-207.46z"></path>
<path style="fill:#231f20"
d="m751.04 277.91h-66.426v33.195h171.19v-33.195h-66.407v-173.73h-38.359v173.73"></path>
<path style="fill:#231f20"
d="m1048.3 180.22c0-12.461-2.25-23.711-6.72-33.75-4.5-10.039-10.61-18.555-18.36-25.567-7.76-7.031-16.9-12.421-27.503-16.21-10.605-3.809-22.109-5.7036-34.551-5.7036-12.422 0-23.945 1.8946-34.551 5.7036-10.605 3.789-19.824 9.179-27.656 16.21-7.851 7.012-13.984 15.528-18.34 25.567-4.394 10.039-6.582 21.289-6.582 33.75v130.89h38.379v-129.59c0-5.039 0.801-10.351 2.442-15.898 1.64-5.547 4.336-10.664 8.125-15.332s8.789-8.516 15.039-11.523c6.211-3.008 13.926-4.512 23.144-4.512 9.199 0 16.914 1.504 23.145 4.512 6.23 3.007 11.25 6.855 15.039 11.523 3.77 4.668 6.48 9.785 8.12 15.332 1.63 5.547 2.45 10.859 2.45 15.898v129.59h38.38v-130.89">
</path>
<path style="fill:#231f20"
d="m832.56 75.664c-7.597 3.2812-17.46 4.8632-25.332 4.8632-22.929 0-35.605-14.434-35.605-33.184 0-18.613 12.383-32.637 33.34-32.637 5.351 0 9.59 0.5274 12.969 1.3086v23.867h-20.84v14.414h39.687v-49.297c-10.41-2.6172-21.25-4.707-31.816-4.707-31.797 0-53.906 14.805-53.906 45.742 0 31.348 20.566 48.906 53.906 48.906 11.406 0 20.41-1.4453 28.867-3.8086l-1.27-15.469">
</path>
<path style="fill:#231f20"
d="m856.2 69.375h16.758v-15.332h0.293c0.84 6.289 8.574 16.914 19.824 16.914 1.836 0 3.828 0 5.782-0.5273v-17.715c-1.68 0.918-5.059 1.4454-8.457 1.4454-15.333 0-15.333-17.832-15.333-27.52v-24.785h-18.867v67.52">
</path>
<path style="fill:#231f20"
d="m913.75 65.84c7.324 3.1446 17.187 5.1172 25.215 5.1172 22.09 0 31.23-8.5351 31.23-28.457v-8.6523c0-6.8165 0.156-11.934 0.293-16.914 0.137-5.1172 0.41-9.8242 0.84-15.078h-16.602c-0.703 3.5352-0.703 8.0078-0.839 10.098h-0.293c-4.36-7.4618-13.81-11.661-22.38-11.661-12.793 0-25.332 7.207-25.332 20.059 0 10.078 5.195 15.976 12.383 19.258 7.187 3.2812 16.464 3.9453 24.355 3.9453h10.41c0 10.879-5.195 14.551-16.328 14.551-8.008 0-16.035-2.8907-22.363-7.3438l-0.586 15.078zm22.11-52.715c5.782 0 10.274 2.3633 13.223 6.0352 3.105 3.8086 3.945 8.6523 3.945 13.906h-8.164c-8.437 0-20.957-1.3086-20.957-11.68 0-5.7617 5.195-8.2617 11.953-8.2617">
</path>
<path style="fill:#231f20"
d="m985.69 69.375h57.422v-14.414l-36.04-39.473h37.31v-13.633h-60.235v14.297l36.715 39.59h-35.172v13.633">
</path>
<path d="m1059.6 0h69.102v69.121h-69.102v-69.121z"></path>
</g>
</g>
</svg>
</a>
</div>
</div>
</div>