fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

media-queries and sticky refinements

Browse Source
This commit is contained in:
Felix Hamann 2018-01-25 17:55:41 +01:00
parent e6fadd1986
commit 8c792c9243
10 changed files with 249 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/www/courses.html
View File

@ -11,7 +11,7 @@
<body>
<div class="grid">
<header class="header">
<nav class="horizontal">
<nav>
<ul class="flat">
<li><a href="/">Startseite</a></li>
<li><a href="/courses.html">Kurse</a></li>
@ -153,7 +153,7 @@
</section>
<footer class="footer">
<nav class="thirdary">
<nav>
<ul class="flat">
<li><a href="">Impressum</a></li>
<li><a href="">Kontakt</a></li>

4
app/www/index.html
View File

@ -11,7 +11,7 @@
<body>
<div class="grid">
<header class="header">
<nav class="horizontal">
<nav>
<ul class="flat">
<li><a href="/">Startseite</a></li>
<li><a href="/courses.html">Kurse</a></li>
@ -54,7 +54,7 @@
</section>
<footer class="footer">
<nav class="thirdary">
<nav>
<ul class="flat">
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>

168
app/www/src/css/main.css
View File

@ -1,7 +1,7 @@
.grid {
display: grid;
height: 100%;
grid-template-columns: repeat(12, 1fr);
grid-template-columns: [grid-col-start] repeat(12, 1fr) [grid-col-end];
grid-template-rows: var(--header-height) auto var(--footer-height);
grid-gap: 20px;
}
@ -22,7 +22,7 @@
}
.grid > section {
grid-column: 4 / span 8;
grid-column: 4/span 8;
grid-row-start: 2;
}
@ -31,11 +31,65 @@
grid-row-start: 3;
}
@media (max-width: 1000px) {
.grid {
grid-template-columns: [grid-col-start] repeat(8, 1fr) [grid-col-end];
grid-gap: 10px;
}
.grid > header {
grid-column: span 8;
}
.grid > .sidebar {
grid-column: grid-col-start / span 2;
grid-row-start: 2;
}
.grid > section {
grid-column: 3 / span 6;
grid-row-start: 2;
}
.grid > footer {
grid-column: span 8;
grid-row-start: 3;
}
}
@media (max-width: 800px) {
.grid {
grid-template-columns: [grid-col-start] repeat(4, 1fr) [grid-col-end];
}
.grid > header, .grid > .sidebar, .grid > section, .grid > footer {
grid-column: span 4;
}
.grid > section {
grid-row-start: 2;
}
.grid > .sidebar {
grid-row-start: 3;
}
.grid > footer {
grid-row-start: 4;
}
}
@media (max-width: 600px) {
.grid {
grid-template-columns: [grid-col-start] repeat(2, 1fr) [grid-col-end];
}
.grid > header, .grid > .sidebar, .grid > section, .grid > footer {
grid-column: span 2;
}
}
.box {
position: relative;
padding: 13px 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 20px;
font-size: 16px;
}
@ -50,8 +104,8 @@
}
.course-box {
border-left: 1px solid #afb5df;
padding: 4px 20px;
border-left: 1px solid #ccb3e6;
padding: 0 20px;
position: relative;
}
@ -100,7 +154,8 @@
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
@ -120,11 +175,12 @@ a:link {
color: inherit;
text-decoration: none;
font-weight: 600;
-webkit-transition: color .2s ease, background-color .2s ease;
transition: color .2s ease, background-color .2s ease;
}
a:hover {
color: #38428a;
color: rebeccapurple;
}
ul {
@ -141,12 +197,12 @@ h1, h2, h3, h4, h5 {
h1 {
font-size: 32px;
margin: 20px 0 5px;
margin: 20px 0 10px;
}
h2 {
font-size: 24px;
margin: 10px 0 0;
margin: 10px 0 5px;
}
h3 {
@ -162,7 +218,7 @@ h4 {
th, td {
text-align: left;
padding: 0 2px 0 4px;
border-left: 1px solid #38428a;
border-left: 1px solid rebeccapurple;
}
th:first-of-type, td:first-of-type {
@ -171,60 +227,70 @@ th:first-of-type, td:first-of-type {
.header {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 24px;
height: var(--header-height);
line-height: var(--header-height);
background-color: #38428a;
height: 60px;
line-height: 60px;
background-color: rebeccapurple;
width: 100%;
text-align: right;
overflow: hidden;
z-index: 100;
transition: height .2s ease, line-height .2s ease;
}
.header.sticky {
position: fixed;
top: 0;
}
.header.collapsed {
height: var(--header-height-collapsed);
line-height: var(--header-height-collapsed);
}
.header.collapsed:before {
height: 30px;
}
.header .horizontal {
.header > nav {
width: 100%;
}
.header > nav.horizontal li a {
padding: 13px;
position: relative;
height: 100%;
display: inline-block;
color: #eaf2ff;
.has-sticky-nav {
padding-top: 60px;
}
.header > nav.horizontal li a:hover {
background-color: #2e3671;
.has-sticky-nav .header {
height: 40px;
line-height: 40px;
position: fixed;
top: 0;
left: 0;
-webkit-transition: height .2s ease, line-height .2s ease;
transition: height .2s ease, line-height .2s ease;
}
.main-content {
font-size: 16px;
}
ul.flat > li > a {
padding: 0 13px;
position: relative;
height: 100%;
display: inline-block;
color: #eaf2ff;
}
ul.flat > li > a:hover {
background-color: #542a7e;
}
.footer {
text-align: right;
height: 50px;
line-height: 50px;
padding: 7px 24px;
overflow: hidden;
background-color: #38428a;
background-color: rebeccapurple;
color: #eaf2ff;
}
@ -233,19 +299,29 @@ th:first-of-type, td:first-of-type {
}
.button, .event-registration {
background-color: #38428a;
background-color: rebeccapurple;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 3px 13px;
cursor: pointer;
font-weight: 600;
-webkit-transition: background-color .2s ease, -webkit-transform .1s;
transition: background-color .2s ease, -webkit-transform .1s;
transition: transform .1s, background-color .2s ease;
transition: transform .1s, background-color .2s ease, -webkit-transform .1s;
}
.button:hover, .event-registration:hover {
background-color: #293166;
transform: scale(1.01);
background-color: #4d2673;
-webkit-transform: scale(1.01);
transform: scale(1.01);
}
.hidden {

3
app/www/src/css/main.css.map
View File

File diff suppressed because one or more lines are too long

11
app/www/src/js/helper/sticky_menu.js
View File

@ -4,6 +4,8 @@ define(function (require) {
init: function() {
var last_known_scroll_position = 0;
var ticking = false;
var grid = document.querySelector('.grid');
var nav = document.querySelector('.header');
window.addEventListener('scroll', function(e) {
if (!ticking) {
@ -12,13 +14,14 @@ define(function (require) {
});
ticking = true;
}
});
}, false);
// checks scroll direction and shows/hides navbar accordingly
function checkScroll() {
var collapsed = (window.scrollY > 0 && last_known_scroll_position <= window.scrollY)
// var collapsed = (window.scrollY > 0 && last_known_scroll_position <= window.scrollY)
var sticky = window.scrollY > 0;
document.querySelector('header').classList.toggle('collapsed', collapsed);
document.querySelector('header').classList.toggle('sticky', sticky);
grid.classList.toggle('has-sticky-nav', sticky);
// nav.classList.toggle('collapsed', collapsed);
ticking = false;
last_known_scroll_position = window.scrollY;
}

2
app/www/src/scss/_colors.scss
View File

@ -10,3 +10,5 @@ $base-bg-color: #ffffff;
$base-font-color: rgb(53, 53, 53);
$sec-font-color: #eaf2ff;
$box-bg-color: #dddddd;
// THEME 3
$base00: rebeccapurple;

3
app/www/src/scss/_dimensions.scss Normal file
View File

@ -0,0 +1,3 @@
$header-height: 60px;
$header-height-collapsed: 40px;
$footer-height: 50px;

82
app/www/src/scss/_grid.scss
View File

@ -1,12 +1,27 @@
$l-cols: 12;
$m-cols: 8;
$s-cols: 4;
$xs-cols: 2;
$l-grid: "[grid-col-start] repeat(#{$l-cols}, 1fr) [grid-col-end]";
$m-grid: "[grid-col-start] repeat(#{$m-cols}, 1fr) [grid-col-end]";
$s-grid: "[grid-col-start] repeat(#{$s-cols}, 1fr) [grid-col-end]";
$xs-grid: "[grid-col-start] repeat(#{$xs-cols}, 1fr) [grid-col-end]";
$l-breakpoint: 1000px;
$m-breakpoint: 800px;
$s-breakpoint: 600px;
$xs-breakpoint: 400px;
.grid {
display: grid;
height: 100%;
grid-template-columns: repeat(12, 1fr);
grid-template-columns: #{$l-grid};
grid-template-rows: var(--header-height) auto var(--footer-height);
grid-gap: 20px;
> header {
grid-column: span 12;
grid-column: span $l-cols;
}
> .sidebar {
@ -21,12 +36,71 @@
}
> section {
grid-column: 4 / span 8;
grid-column: 4 / span ($l-cols - 4);
grid-row-start: 2;
}
> footer {
grid-column: span 12;
grid-column: span $l-cols;
grid-row-start: 3;
}
}
@media (max-width: $l-breakpoint) {
.grid {
grid-template-columns: #{$m-grid};
grid-gap: 10px;
> header {
grid-column: span $m-cols;
}
> .sidebar {
grid-column: grid-col-start / span 2;
grid-row-start: 2;
}
> section {
grid-column: 3 / span 6;
grid-row-start: 2;
}
> footer {
grid-column: span $m-cols;
grid-row-start: 3;
}
}
}
@media (max-width: $m-breakpoint) {
.grid {
grid-template-columns: #{$s-grid};
> header, > .sidebar, > section, > footer {
grid-column: span $s-cols;
}
> section {
grid-row-start: 2;
}
> .sidebar {
grid-row-start: 3;
}
> footer {
grid-row-start: 4;
}
}
}
@media (max-width: $s-breakpoint) {
.grid {
grid-template-columns: #{$xs-grid};
> header, > .sidebar, > section, > footer {
grid-column: span $xs-cols;
}
}
}

57
app/www/src/scss/main.scss
View File

@ -1,5 +1,6 @@
@import 'grid';
@import 'colors';
@import 'dimensions';
// modules
@import 'modules/box';
@ -44,11 +45,11 @@ h1, h2, h3, h4, h5 {
}
h1 {
font-size: 32px;
margin: 20px 0 5px;
margin: 20px 0 10px;
}
h2 {
font-size: 24px;
margin: 10px 0 0;
margin: 10px 0 5px;
}
h3 {
font-size: 20px;
@ -78,36 +79,40 @@ th, td {
align-items: center;
justify-content: space-between;
padding: 0 24px;
height: var(--header-height);
line-height: var(--header-height);
height: $header-height;
line-height: $header-height;
background-color: $base00;
width: 100%;
text-align: right;
overflow: hidden;
z-index: 100;
// box-shadow: 0 0 40px 40px rgba(0, 0, 0, 0.1);
transition: height .2s ease, line-height .2s ease;
&.sticky {
position: fixed;
top: 0;
}
&.collapsed {
height: var(--header-height-collapsed);
line-height: var(--header-height-collapsed);
&:before {
height: 30px;
}
}
.horizontal {
> nav {
width: 100%;
}
}
> nav.horizontal li a {
padding: 13px;
.has-sticky-nav {
padding-top: $header-height;
}
.has-sticky-nav .header {
height: $header-height-collapsed;
line-height: $header-height-collapsed;
position: fixed;
top: 0;
left: 0;
transition: height .2s ease, line-height .2s ease;
}
.main-content {
font-size: 16px;
}
ul.flat {
> li > a {
padding: 0 13px;
position: relative;
height: 100%;
display: inline-block;
@ -119,12 +124,10 @@ th, td {
}
}
.main-content {
font-size: 16px;
}
.footer {
text-align: right;
height: $footer-height;
line-height: $footer-height;
padding: 7px 24px;
overflow: hidden;
background-color: $base00;

2
app/www/src/scss/modules/_box.scss
View File

@ -22,7 +22,7 @@
// COURSE BOX
.course-box {
border-left: 1px solid lighten($base00, 40%);
padding: 4px 20px;
padding: 0 20px;
position: relative;
li {