Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue335 #338

Merged
merged 7 commits into from
Dec 13, 2019
Merged

Issue335 #338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
39bef6b
restructure nav, some fixes for small screens (fix #335)
jakosch Dec 3, 2019
342cac2
fixes for brand on small screens, earlier nav breakpoint
jakosch Dec 8, 2019
3d1e976
order:1 for side-col, order:2 for main-col on small screens
jakosch Dec 8, 2019
9dfb0ac
Merge branch 'develop' into issue335
peterstadler Dec 10, 2019
55ac83b
update expected results
peterstadler Dec 10, 2019
26dcf17
include breakpoints last
jakosch Dec 13, 2019
d79053b
padding + margins in header links
jakosch Dec 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
50 changes: 32 additions & 18 deletions resources/sass/layout/_breakpoints.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
}
}


//navigation for md down
@include media-breakpoint-down(md)
{
.teaser
Expand All @@ -17,15 +19,15 @@
font-size:0.9rem!important;
}
}

.navbar-brand {
padding: 0;
}

.brand {
width: 180px;
}

}

//navigation for sm down
@include media-breakpoint-down(sm)
{
.navbar-nav.nav li
{
padding: 0px;
Expand All @@ -52,25 +54,23 @@

.navbar-nav ul.dropdown-menu li
{
border: none;
border: none;
box-shadow: none!important;
border-left: none!important;
}


ul.dropdown-menu li a
{
background-color: $gray-lighter;
padding: 15px 35px!important;

}

.divider
{
width: 100%!important;
margin: 0px;
padding: 0px;

height:10px;
background-color: $primary;

#navbarCollapse {
order: 3;
.divider {
display: none;
}
}

.resp-tabs-container .resp-tab-content-active
Expand All @@ -81,8 +81,22 @@
}
}

// front page for sm down

// side col for sm down
@include media-breakpoint-down(sm)
{
.side-col {
order: 1;
}

.main-col {
order: 2;
}

}

// front page for md down
@include media-breakpoint-down(md)
{
.brand
{
Expand Down Expand Up @@ -137,7 +151,7 @@
}

.brand {
margin-top: 29px;
/*margin-top: 29px;*/
margin-bottom: 0px;
width: 200px;;
}
Expand Down
11 changes: 8 additions & 3 deletions resources/sass/layout/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
// Navigation

.navbar-brand {
margin-right: 0!important;
}

.brand
{
margin-top: 1px;
margin-right: 2px;
margin-bottom: 0px;
vertical-align: text-bottom;
}
Expand All @@ -12,7 +14,6 @@
{
margin-top: 20px;
margin-bottom: 0px;
border-bottom: 4px solid $gray-lightest;
}

#navbarCollapse .navbar-nav {
Expand Down Expand Up @@ -88,6 +89,10 @@
color:$gray-dark;
}

#content {
border-top: 4px solid $gray-lightest;
}

/* hover open for larger screens */
@include media-breakpoint-up(md) {
.nav-item.dropdown:hover>.dropdown-menu {
Expand Down
2 changes: 1 addition & 1 deletion resources/sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@
@import "components/ajax";
@import "components/collapse";
@import "layout/grid";
@import "layout/breakpoints";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
Expand All @@ -79,3 +78,4 @@
@import "pages/index";
@import "pages/apparatus";
@import "pages/search";
@import "layout/breakpoints";
30 changes: 14 additions & 16 deletions templates/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,21 +48,18 @@

</head>
<body>
<nav class="navbar navbar-light navbar-default navbar-expand-md">
<div class="container">
<div class="row flex-grow-1 flex-row-reverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <!-- old class: navbar-right -->
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggler">
<span class="navbar-toggler-icon"/>
</button>
<a href="$link/index" class="nav-link navbar-brand"> <!-- old class: navbar-right -->
<img src="$resources/img/logo_weber.png" class="brand" alt="navbar-background-image"/>
</a>
</div>
<div class="container">
<nav class="navbar navbar-light navbar-default navbar-expand-lg">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggler">
<span class="navbar-toggler-icon"/>
</button>
<a href="$link/index" class="nav-link navbar-brand order-3">
<img src="$resources/img/logo_weber.png" class="brand" alt="navbar-background-image"/>
</a>

<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="navbar-collapse collapse">
<!-- old classes: collapse navbar-collapse navbar-left col-md-9 -->
<ul class="nav navbar-nav" data-template="app:active-nav">
<li class="nav-item" data-template="app:set-active-nav">
<a class="nav-link" href="$link/index">Home</a>
Expand Down Expand Up @@ -171,9 +168,10 @@
<li class="nav-item" data-template="app:set-active-lang">En</li>
</ul>
</div>
</div>
</div>


</nav>
</div>
<div id="content">
<!-- content gets filled by templating module-->
</div>
Expand Down Expand Up @@ -309,4 +307,4 @@ <h3 class="item-title">
</div>

</body>
</html>
</html>
74 changes: 36 additions & 38 deletions testing/expected-results/addenda/A120001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,21 +50,18 @@

</head>
<body>
<nav class="navbar navbar-light navbar-default navbar-expand-md">
<div class="container">
<div class="row flex-grow-1 flex-row-reverse">
<div class="container">
<nav class="navbar navbar-light navbar-default navbar-expand-lg">

<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/exist/apps/WeGA-WebApp/de/Index" class="nav-link navbar-brand order-3">
<img src="/exist/apps/WeGA-WebApp/resources/img/logo_weber.png" class="brand" alt="navbar-background-image" />
</a>

<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/exist/apps/WeGA-WebApp/de/Index" class="nav-link navbar-brand">
<img src="/exist/apps/WeGA-WebApp/resources/img/logo_weber.png" class="brand" alt="navbar-background-image" />
</a>
</div>

<div id="navbarCollapse" class="navbar-collapse collapse">

<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/exist/apps/WeGA-WebApp/de/Index">Home</a>
Expand All @@ -81,22 +78,22 @@
<li class="">
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/A002068/Biographie.html">Biographie</a>
</li>
<li class="">
<li class="">
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/A002068.html#documents">Dokumente</a>
</li>
<li class="">
<li class="">
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/A002068.html#correspondence">Korrespondenz</a>
</li>
<li class="">
<li class="">
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/A002068.html#writings">Schriften</a>
</li>
<li class="">
<li class="">
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/A002068.html#diaries">Tagebücher</a>
</li>
<li class="">
<li class="">
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/A002068.html#works">Werke</a>
</li>
</ul>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-secondlevel-nav dropdown-toggle" data-toggle="dropdown" href="#">Register</a>
Expand All @@ -112,28 +109,28 @@
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Register/Briefe">Briefe</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Register/Dokumente">Dokumente</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Register/Orte">Orte</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Register/Personen">Personen</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Register/Schriften">Schriften</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Register/Tagebücher">Tagebücher</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Register/Themenkommentare">Themenkommentare</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Register/Werke">Werke</a>
</li>
</ul>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/exist/apps/WeGA-WebApp/de/Suche">Suche</a>
Expand All @@ -150,28 +147,28 @@



<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Projekt/Aktuelles">Aktuelles</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Projekt/Bandübersicht.html">Bandübersicht</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Projekt/Bibliographie">Bibliographie</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Projekt/Editionsrichtlinien_Musik.html">Editionsrichtlinien Musik</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Projekt/Editionsrichtlinien_Text.html">Editionsrichtlinien Text</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Projekt/Kontakt.html">Kontakt</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Projekt/Projektbeschreibung.html">Projektbeschreibung</a>
</li>
</ul>
</ul>
</li>
<li id="help-nav" class="nav-item dropdown">
<a class="nav-link dropdown-secondlevel-nav dropdown-toggle" data-toggle="dropdown" href="#">Hilfe</a>
Expand All @@ -181,10 +178,10 @@
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Hilfe/API_Dokumentation.html">API Dokumentation</a>
</li>
<li>
<li>
<a class="dropdown-item" href="/exist/apps/WeGA-WebApp/de/Hilfe/FAQ.html">FAQ</a>
</li>
</ul>
</ul>
</li>
<li class="nav-item divider"></li>
<li class="nav-item">
Expand All @@ -195,9 +192,10 @@
<li class="nav-item"><a class="nav-link" href="/exist/apps/WeGA-WebApp/en/Project/Contents_of_Series_and_Volumes/A120001.html" hreflang="en" lang="en">En</a></li>
</ul>
</div>
</div>
</div>


</nav>
</div>
<div id="content">
<div class="header">
<div class="container">
Expand Down
Loading