draft commit, changing the style of main menu;

This commit is contained in:
Nikita Lvov
2020-07-02 09:26:38 +02:00
parent 0351c7013d
commit efd3f4d50a
4 changed files with 214 additions and 351 deletions

View File

@@ -6,230 +6,177 @@
* under the terms of the MIT License; see LICENSE file for more details.
*/
#int-menu-q-home-icon {
width: 18px;
height: 18px;
vertical-align: top;
fill: red;
#int-menu-q-home-icon {
width: 18px;
height: 18px;
vertical-align: top;
fill: red;
}
}
/*****logo section******/
.affiliation-spacer {
display: table-cell;
vertical-align: middle;
width: 100%;
}
/*****logo section******/
.affiliation-spacer{
display: table-cell;
vertical-align: middle;
width: 100%;
}
.affiliation-logo {
display: table-cell;
padding: 0 50px 0 0;
vertical-align: middle;
white-space: nowrap;
}
.affiliation {
background-color: white;
display: table;
margin: 0 auto 80px;
max-width: 1060px;
width: 100%;
text-decoration: none;
}
.affiliation-text {
display: table-cell;
font-size: 17px;
padding: 0 0 0 50px;
vertical-align: middle;
white-space: nowrap;
}
.affiliation-logo-claim {
display: inline-block;
font-size: 12px;
letter-spacing: 2px;
line-height: 17px;
padding: 0 17px 0 0;
text-align: right;
vertical-align: top;
}
a {
color: inherit;
text-decoration: none;
transition: background-color 0.15s ease 0s, color 0.15s ease 0s;
}
/*****END logo section******/
.short-menu {
display: table;
height: 49px;
width: 100%;
}
.short-menu-left {
border-right: 1px solid black;
display: table-cell;
text-align: right;
width: 50%;
}
.short-menu-right {
display: table-cell;
vertical-align: top;
width: 50%;
color:#000000;
}
.short-menu-left-search {
display: inline-block;
margin: 12px 9px 6px 0;
color:#000000;
}
.short-menu-right-h {
cursor: pointer;
display: inline-block;
margin: 12px 0 6px 9px;
padding: 5px;
}
.short-menu-right-main-menu {
display: inline-block;
margin-right: 3px;
vertical-align: top;
width: 21px;
}
svg:not(:root) {
overflow: hidden;
}
/***********MAIN menu*************/
.header {
min-width: 0;
position: relative;
width: 100%;
}
.main-menu-box {
box-sizing: border-box;
display: table;
margin: 0 auto;
max-width: 1060px;
padding: 9px 50px 8px;
text-align: left;
width: 100%;
}
.main-menu-entry {
display: table-cell;
text-align: center;
}
.main-menu-entry a {
box-decoration-break: clone;
padding: 5px 8px;
}
.main-menu-entry a:hover{
background-color: #000000;
color: #ffffff;
text-decoration: none;
}
.affiliation-text a:hover{
background-color: #000000;
color: #ffffff;
text-decoration : none;
}
.affiliation-logo :hover{
.affiliation-logo {
display: table-cell;
padding: 0 50px 0 0;
vertical-align: middle;
white-space: nowrap;
}
.affiliation {
background-color: white;
display: table;
margin: 0 auto 80px;
max-width: 1060px;
width: 100%;
text-decoration: none;
}
}
.short-menu-right :hover{
background-color: #000000;
color: #ffffff;
}
.affiliation-text {
display: table-cell;
font-size: 17px;
padding: 0 0 0 50px;
vertical-align: middle;
white-space: nowrap;
}
.main-menu {
border-bottom: 1px solid #000;
box-sizing: border-box;
height: 39px;
margin-top: -1px;
overflow: hidden;
transition: height 0.3s linear 0s;
}
.affiliation-logo-claim {
display: inline-block;
font-size: 12px;
letter-spacing: 2px;
line-height: 17px;
padding: 0 17px 0 0;
text-align: right;
vertical-align: top;
}
@media (max-width: 767.9px){
a {
color: inherit;
text-decoration: none;
transition: background-color 0.15s ease 0s, color 0.15s ease 0s;
}
/*****END logo section******/
.short-menu {
display: table;
height: 49px;
width: 100%;
}
.short-menu-left {
border-right: 1px solid black;
display: table-cell;
text-align: right;
width: 50%;
}
.short-menu-right {
display: table-cell;
vertical-align: top;
width: 50%;
color: #000000;
}
.short-menu-left-search {
display: inline-block;
margin: 12px 9px 6px 0;
color: #000000;
}
.short-menu-right-h {
cursor: pointer;
display: inline-block;
margin: 12px 0 6px 9px;
padding: 5px;
}
.short-menu-right-main-menu {
display: inline-block;
margin-right: 3px;
vertical-align: top;
width: 21px;
}
svg:not(:root) {
overflow: hidden;
}
/***********MAIN menu*************/
.affiliation-text a:hover {
background-color: #000000;
color: #ffffff;
text-decoration: none;
}
.affiliation-logo :hover {
text-decoration: none;
}
.short-menu-right :hover {
background-color: #000000;
color: #ffffff;
}
.main-menu {
border-bottom: 1px solid #000;
box-sizing: border-box;
height: 39px;
margin-top: -1px;
overflow: hidden;
transition: height 0.3s linear 0s;
}
@media (max-width: 767.9px) {
.main-menu {
height: auto;
}
}
}
@media (max-width: 767.9px){
.main-menu-entry {
display: table-row;
line-height: 1.9em;
}
}
@media screen and (max-width: 767.9px){
@media screen and (max-width: 767.9px) {
#int-header-logo-img {
width: 200px;
height: 75px;
}
}
}
@media screen and (max-width: 767.9px){
@media screen and (max-width: 767.9px) {
#int-header-logo {
padding: 50px 0;
text-align: center;
}}
}
}
@media screen and (max-width: 767.9px){
.affiliation{
@media screen and (max-width: 767.9px) {
.affiliation {
margin: 0;
text-align: center;
}
.affiliation-text{
.affiliation-text {
display: none;
}
.affiliation-logo-claim{
.affiliation-logo-claim {
display: none;
}
.affiliation-spacer{
.affiliation-spacer {
display: none;
}
}
}
.int-menu-q-open-icon {
width: 14px;
vertical-align: middle;
margin-left: 5px;
}
@media (max-width: 767.9px){
.main-menu-box {
margin-top:15px;
width: 100%;
text-align: center;
}
}
/*********************Custom overrides**********************/
/** Login with SAML**/
.col a {
cursor: pointer;
}
.int-menu-q-open-icon {
width: 14px;
vertical-align: middle;
margin-left: 5px;
}
/*********************Custom overrides**********************/
/** Login with SAML**/
.col a{
cursor: pointer;
}
/**** hyperlink hover color ****/
a:focus,
a:hover {
color:#E4154B;
text-decoration:underline
}
/**** hyperlink hover color ****/
a:focus,
a:hover {
color: #e4154b;
text-decoration: underline;
}

View File

@@ -88,25 +88,27 @@ a {
width: 50%;
color: #000000;
& div {
& svg {
& g {
stroke: #000;
stroke-linecap: round;
stroke-width: 2;
fill: none;
}
}
stroke: #000;
stroke-linecap: round;
stroke-width: 2;
fill: none;
}
}
.short-menu-right :hover {
background-color: #000000;
color: #ffffff;
& svg {
& g {
stroke: #fff;
}
}
stroke: #fff;
}
.short-menu-right-button {
cursor: pointer;
display: inline-block;
margin: 12px 0 6px 9px;
padding: 5px;
}
.short-menu-right-button a:hover {
text-decoration: none;
}
.short-menu-left-lang {
@@ -166,13 +168,6 @@ a {
color: #000000;
}
.short-menu-right-h {
cursor: pointer;
display: inline-block;
margin: 12px 0 6px 9px;
padding: 5px;
}
.short-menu-right-main-menu {
display: inline-block;
margin-right: 3px;
@@ -191,31 +186,8 @@ svg:not(:root) {
}
/***********MAIN menu*************/
.header {
min-width: 0;
position: relative;
width: 100%;
//height: 100%;
}
.main-menu-box {
font-size: 16px;
box-sizing: border-box;
display: table;
margin: 0 auto;
max-width: 1060px;
padding: 9px 50px 8px;
text-align: left;
width: 100%;
}
.main-menu-entry {
display: table-cell;
text-align: center;
}
.main-menu-entry a {
box-decoration-break: clone;
padding: 5px 8px;
}
@@ -225,6 +197,12 @@ svg:not(:root) {
text-decoration: none;
}
.main-menu-underline {
background-color: #e4154b;
height: 5px;
width: 100%;
}
.affiliation-text a:hover {
background-color: #000000;
color: #ffffff;
@@ -246,14 +224,6 @@ svg:not(:root) {
}
}
@media (max-width: 767.9px) {
.main-menu-entry {
display: table-row;
line-height: 1.9em;
}
}
@media screen and (max-width: 767.9px) {
#int-header-logo-img {
width: 200px;
@@ -285,14 +255,6 @@ svg:not(:root) {
}
}
@media (max-width: 767.9px) {
.main-menu-box {
margin-top: 15px;
width: 100%;
text-align: center;
}
}
.int-menu-q-open-icon {
width: 14px;
vertical-align: middle;

View File

@@ -2,41 +2,26 @@
{%- if not current_user.is_authenticated %}
<a href="{{url_for_security('login', next=request.path)}}">Login
<svg shape-rendering="optimizeQuality" class="int-menu-q-open-icon"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="5.2753mm"
width="8.7548mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 31.02118 18.692033">
<g style="stroke-width:2.25" transform="translate(-164.49 -416.85)">
<path style="stroke-linejoin:round;stroke:#E4154B;stroke-linecap:round;stroke-width:2.5;fill:none"
d="m165.63 417.99 14.375 16.43 14.375-16.43"></path>
</g>
</svg>
</a>
<div class="short-menu-right-button">
<a href="{{url_for_security('login', next=request.path)}}" style="text-decoration:none">
<i class="sign in icon circular"></i> Login
</a>
</div>
{%- else %}
{%- if config.USERPROFILES %}
<a href="{{ url_for('invenio_userprofiles.profile') }}">
<i class="user icon"></i> {{ current_user.email }}
</a>
<!--- Logout link -->
<a class="dropdown-item" href="{{url_for_security('logout')}}">{{_('Logout')}}
<svg shape-rendering="optimizeQuality" class="int-menu-q-open-icon"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="5.2753mm"
width="8.7548mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 31.02118 18.692033">
<g style="stroke-width:2.25" transform="translate(-164.49 -416.85)">
<path style="stroke-linejoin:round;stroke:#E4154B;stroke-linecap:round;stroke-width:2.5;fill:none"
d="m165.63 417.99 14.375 16.43 14.375-16.43"></path>
</g>
</svg>
</a>
<div class="short-menu-right-button">
<a href="{{ url_for('invenio_userprofiles.profile') }}">
<i class="user icon"></i> {{ current_user.email }}
</a>
</div>
<div class="short-menu-right-button">
<a class="dropdown-item" href="{{url_for_security('logout')}}">
<i class="sign out icon circular"></i>{{_('Logout')}}
</a>
</div>
{%- endif %}
{%- endif %}

View File

@@ -17,64 +17,8 @@
{%- block navbar_header %}
<div class="header">
<div class="main-menu" id="heading">
<div class="main-menu-box">
<div class="main-menu-entry">
<a href="{{url_for('invenio_theme_frontpage.index')}}" title="Home">
<svg shape-rendering="geometricPrecision" id="int-menu-q-home-icon"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
version="1.1" xml:space="preserve" height="36.997" width="35.969"
enable-background="new 0 0 595.28 841.89" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 35.969 36.997451">
<polyline style="stroke:#E4154B;stroke-linecap:square;stroke-width:4;fill:none"
points="282.72 437.28 282.72 414.77 297.71 406.69 312.69 414.77 312.69 437.28"
transform="translate(-279.72 -403.28)">
</polyline>
</svg>
</a>
</div>
<div class="main-menu-entry">
{%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible recursive %}
<a href="{{ item.url }}">{{ item.text|safe }}
<svg shape-rendering="optimizeQuality" class="int-menu-q-open-icon"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
height="5.2753mm" width="8.7548mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 31.02118 18.692033">
<g style="stroke-width:2.25" transform="translate(-164.49 -416.85)">
<path style="stroke-linejoin:round;stroke:#E4154B;stroke-linecap:round;stroke-width:2.5;fill:none"
d="m165.63 417.99 14.375 16.43 14.375-16.43"></path>
</g>
</svg>
</a>
{%- endfor %}
</div>
<div class="main-menu-entry">
<div class="right menu">
{%- block navbar_right %}
{%- include config.THEME_HEADER_LOGIN_TEMPLATE %}
{%- endblock navbar_right %}
</div>
</div>
</div>
</div>
<!----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">
@@ -103,16 +47,10 @@
</div>
<div class="short-menu-right">
<div class="short-menu-right-h" onclick="toggleVisibility('heading');">
<svg shape-rendering="optimizeQuality" class="short-menu-icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="20" width="24.103" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 24.103479 20">
<g transform="translate(0 -1032.4)">
<path d="m2.0142 1034.4h20.972"></path>
<path d="m2.0142 1042.4h20.972"></path>
<path d="m2.0142 1050.4h20.972"></path>
</g>
</svg>
<span style="margin-left:3px; font-size:16px; font-weight:300">{{_ ("Main Menu")}} </span>
{# <div class="short-menu-right-h"> onclick="toggleVisibility('heading');"> #}
{%- block navbar_right %}
{%- include config.THEME_HEADER_LOGIN_TEMPLATE %}
{%- endblock navbar_right %}
</div>
</div>
@@ -173,6 +111,37 @@
</div>
</div>
{%- endblock navbar_header %}
<div class="ui two column grid stackable container">
<div class="three column row centered" style="padding-bottom: 0;">
<div class="two wide column main-menu-entry">
<a href="{{url_for('invenio_theme_frontpage.index')}}" title="Home">
<svg shape-rendering="geometricPrecision" id="int-menu-q-home-icon"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
version="1.1" xml:space="preserve" height="36.997" width="35.969"
enable-background="new 0 0 595.28 841.89" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 35.969 36.997451">
<polyline style="stroke:#E4154B;stroke-linecap:square;stroke-width:4;fill:none"
points="282.72 437.28 282.72 414.77 297.71 406.69 312.69 414.77 312.69 437.28"
transform="translate(-279.72 -403.28)">
</polyline>
</svg>
Home
</a>
</div>
{%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible recursive %}
<div class="two wide column main-menu-entry">
<a href="{{ item.url }}">{{ item.text|safe }}</a>
</div>
{%- endfor %}
</div>
<div class="row">
<div class="six wide column centered">
<div class="main-menu-underline"></div>
</div>
</div>
<div class="row">
</div>
</div>
<!--
{%- block navbar_inner %}