L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-55802 theme_noname: Navbar is responsive and better styled

Browse Source 
Still not perfect, but better...

Conflicts:
	theme/noname/templates/columns1.mustache
	theme/noname/templates/columns2.mustache
	theme/noname/templates/columns3.mustache

Part of MDL-55071
This commit is contained in:
Frederic Massart
2016-09-23 10:55:15 +01:00
committed by Dan Poltawski
parent ba252fca41
commit 5f18da120e
9 changed files with 84 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/noname/scss/moodle/core.scss
+9
View File
@@ -1659,6 +1659,15 @@ img#persona_signin {
}
}
/** Header. */
header {
.collapse.in,
.collapsing {
display: block;
clear: both;
}
}
/** Header-bar styles **/
.page-context-header {
// We need to be explicit about the height of the header.
theme/noname/scss/moodle/icons.scss
+2 -2
View File
@@ -15,8 +15,8 @@ a:first-of-type > .icon {
}
// Fix the cog icon for an action menu.
.action-menu > .dropdown {
margin-left: -0.5rem;
.action-menu > .dropdown .icon {
margin-left: 0;
}
// Fix the first item in a drop down menu (it's a list of links and icons, but has been made vertical.
theme/noname/scss/moodle/modules.scss
+3 -4
View File
@@ -279,13 +279,12 @@ div#dock {
// Usermenu
.usermenu {
.login {
// color: $navbarText;
line-height: 40px;
line-height: 2.25rem;
a {
color: $dropdown-link-color;
color: $link-color;
&:hover,
&:focus {
color: $dropdown-link-hover-color;
color: $link-hover-color;
text-decoration: underline;
}
}
theme/noname/scss/moodle/search.scss
+19 -6
View File
@@ -12,22 +12,27 @@
}
.search-input-wrapper {
margin: 0 5px 0 2px;
margin: 0 $spacer 0 0;
overflow: hidden;
float: right;
height: 100%;
width: 16px;
transition: width 0.5s ease, left 0.5s ease;
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
}
.search-input-wrapper > div {
float: left;
margin: 10px 0 9px 0;
margin: 0;
.icon {
margin-right: 0;
}
}
.search-input-wrapper > form {
opacity: 0;
margin: 5px 0 5px 25px;
margin-left: 25px;
transition: opacity 0.5s ease-in-out;
}
@@ -40,11 +45,19 @@
}
.search-input-wrapper.expanded {
width: 160px;
width: 162px;
}
.navbar .search-input-wrapper > form {
margin: 5px 0 5px 25px;
@include media-breakpoint-down(xs) {
.search-input-wrapper {
> div {
margin: 0;
}
> form {
display: none;
}
margin: 0 $spacer 0 0;
}
}
.search-areas-actions {
theme/noname/templates/columns1.mustache
+1 -28
View File
@@ -13,34 +13,7 @@
{{{ output.standard_top_of_body_html }}}
<header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
</div>
<a href="{{{ config.wwwroot }}}" class="navbar-brand">
{{# output.should_display_navbar_logo }}
<div class="logo">
<img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
</div>
{{/ output.should_display_navbar_logo }}
<div class="site-name">{{{ sitename }}}</div>
</a>
<!-- user_menu -->
{{{ output.user_menu }}}
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
<nav class="nav navbar-nav">
<!-- search_box -->
{{{ output.search_box }}}
<!-- custom_menu -->
{{{ output.custom_menu }}}
<!-- page_heading_menu -->
{{{ output.page_heading_menu }}}
</div>
</nav>
</header>
{{>theme_noname/header}}
<div id="page" class="container-fluid">
{{{ output.full_header }}}
theme/noname/templates/columns2.mustache
+1 -28
View File
@@ -13,34 +13,7 @@
{{{ output.standard_top_of_body_html }}}
<header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
</div>
<a href="{{{ config.wwwroot }}}" class="navbar-brand">
{{# output.should_display_navbar_logo }}
<div class="logo">
<img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
</div>
{{/ output.should_display_navbar_logo }}
<div class="site-name">{{{ sitename }}}</div>
</a>
<!-- user_menu -->
{{{ output.user_menu }}}
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
<nav class="nav navbar-nav">
<!-- search_box -->
{{{ output.search_box }}}
<!-- custom_menu -->
{{{ output.custom_menu }}}
<!-- page_heading_menu -->
{{{ output.page_heading_menu }}}
</div>
</nav>
</header>
{{>theme_noname/header}}
<div id="page" class="container-fluid">
{{{ output.full_header }}}
theme/noname/templates/columns3.mustache
+1 -28
View File
@@ -13,34 +13,7 @@
{{{ output.standard_top_of_body_html }}}
<header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
</div>
<a href="{{{ config.wwwroot }}}" class="navbar-brand">
{{# output.should_display_navbar_logo }}
<div class="logo">
<img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
</div>
{{/ output.should_display_navbar_logo }}
<div class="site-name">{{{ sitename }}}</div>
</a>
<!-- user_menu -->
{{{ output.user_menu }}}
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
<nav class="nav navbar-nav">
<!-- search_box -->
{{{ output.search_box }}}
<!-- custom_menu -->
{{{ output.custom_menu }}}
<!-- page_heading_menu -->
{{{ output.page_heading_menu }}}
</div>
</nav>
</header>
{{>theme_noname/header}}
<div id="page" class="container-fluid">
{{{ output.full_header }}}
theme/noname/templates/core/custom_menu_item.mustache
+1 -1
View File
@@ -1,7 +1,7 @@
{{^divider}}
{{#haschildren}}
<span class="dropdown nav-item">
<a class="dropdown-toggle nav-link p-x-1" id="drop-down-{{uniqid}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
<a class="dropdown-toggle nav-link" id="drop-down-{{uniqid}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
{{text}}
</a>
<div class="dropdown-menu" aria-labelledby="drop-down-{{uniqid}}">
theme/noname/templates/header.mustache
+47
View File
@@ -0,0 +1,47 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
Page header.
}}
<header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
<button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-nav" aria-expanded="false" aria-controls="bd-main-nav" type="button">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
<a href="{{{ config.wwwroot }}}" class="navbar-brand">
{{# output.should_display_navbar_logo }}
<div class="logo">
<img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
</div>
{{/ output.should_display_navbar_logo }}
<div class="site-name">{{{ sitename }}}</div>
</a>
<!-- user_menu -->
{{{ output.user_menu }}}
<!-- search_box -->
{{{ output.search_box }}}
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
<nav class="nav navbar-nav">
<!-- custom_menu -->
{{{ output.custom_menu }}}
<!-- page_heading_menu -->
{{{ output.page_heading_menu }}}
</nav>
</div>
</header>