From: Sven Hoehn <shoehn@ipfire.org>
Date: Wed, 1 Nov 2017 12:23:27 +0000 (+0100)
Subject: Feature page mobile version first steps.
X-Git-Url: http://git.ipfire.org/?p=people%2Fshoehn%2Fipfire.org.git;a=commitdiff_plain;h=4a416dd31f2518fab2ec20a900a2a8403f0cc30b

Feature page mobile version first steps.
---

diff --git a/static/css/style.css b/static/css/style.css
index 27b3d68..bb32825 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4401,9 +4401,13 @@ h3 {
       margin-bottom: 0; } }
   h3.headline {
     text-align: center;
-    font-size: 36px;
-    line-height: 48px;
+    font-size: 32px;
+    line-height: 44px;
     color: #263238; }
+    @media (min-width: 576px) {
+      h3.headline {
+        font-size: 36px;
+        line-height: 48px; } }
 
 h4 {
   font-weight: 500;
@@ -4444,7 +4448,10 @@ p {
         font-size: 24px;
         line-height: 32px; } }
   p.copy {
-    margin-top: 24px; }
+    margin-top: 16px; }
+    @media (min-width: 576px) {
+      p.copy {
+        margin-top: 24px; } }
 
 .display-1 {
   font-size: 120px;
@@ -4558,7 +4565,7 @@ h5.fireinfo {
   transition: opacity .35s ease-in-out; }
 
 .fixed-top {
-  transition: background-color .5s linear;
+  transition: background-color .25s linear;
   height: 56px; }
   @media (min-width: 576px) {
     .fixed-top {
@@ -4635,10 +4642,10 @@ h5.fireinfo {
       height: 100vh;
       padding-top: 64px;
       transform: translateX(-256px);
-      transition: all 0.25s ease-in-out; }
+      transition: all .15s ease-in-out; }
       #navbarSupportedContent.open {
         transform: translateX(0);
-        transition: all .25s ease-in-out;
+        transition: all .15s ease-in-out;
         box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26); } }
 
 @media (min-width: 992px) {
@@ -4687,24 +4694,37 @@ h5.fireinfo {
   .navbar-nav .nav-link:hover:after {
     transform: scaleX(1); } }
 
-body.About li.nav-item a.about {
-  color: #b71c1c; }
-  body.About li.nav-item a.about:after {
-    content: "";
-    border-bottom: 2px solid #b71c1c;
-    position: absolute;
-    width: 100%;
-    left: 0;
-    top: 44px;
-    padding: inherit;
-    transform: scale(1); }
+@media (min-width: 992px) {
+  body.About li.nav-item a.about {
+    color: #b71c1c; }
+    body.About li.nav-item a.about:after {
+      content: "";
+      border-bottom: 2px solid #b71c1c;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      top: 44px;
+      padding: inherit;
+      transform: scale(1); } }
 
 #sidebar {
   padding: 0; }
+  @media (max-width: 991px) {
+    #sidebar {
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
+      position: fixed;
+      top: 52px;
+      z-index: 9999;
+      background-color: white; } }
   #sidebar ul {
     list-style: none; }
     #sidebar ul.features_nav {
-      padding: 0 0 24px 0; }
+      padding: 0 0 24px 0;
+      overflow-x: auto; }
+      #sidebar ul.features_nav.fixed {
+        position: fixed;
+        top: 100px;
+        outline: 1px solid grey; }
     #sidebar ul ul {
       margin: 0;
       padding-left: 0; }
@@ -4724,6 +4744,51 @@ body.About li.nav-item a.about {
           border-left: 2px solid #b71c1c;
           padding: 0 8px 0 6px; }
 
+/* Fix for Android */
+body {
+  -webkit-animation: bugfix infinite 1s; }
+
+@-webkit-keyframes bugfix {
+  from {
+    padding: 0; }
+  to {
+    padding: 0; } }
+
+/* default checkbox */
+input[type=checkbox] {
+  position: absolute;
+  top: -9999px;
+  left: -9999px; }
+
+label {
+  cursor: pointer;
+  user-select: none; }
+
+nav[role="dropdown"] label {
+  display: none; }
+
+@media screen and (max-width: 44em) {
+  nav[role="dropdown"] ul {
+    height: 48px;
+    overflow: hidden; }
+  nav[role="dropdown"] label {
+    position: relative;
+    display: block;
+    width: 100%; }
+  nav[role="dropdown"] label:after {
+    font-family: FontAwesome;
+    font-size: 24px;
+    content: "\f107";
+    position: absolute;
+    right: 20px;
+    top: 12px; }
+  nav[role="dropdown"] input:checked ~ label:after {
+    content: "\f106"; }
+  nav[role="dropdown"] input:checked ~ ul {
+    display: block;
+    height: 40vh;
+    overflow-y: scroll; } }
+
 .btn-red900 {
   color: #fff !important;
   background-color: #b71c1c;
@@ -5012,8 +5077,11 @@ section#appliances {
   padding-bottom: 48px; }
 
 .features-content {
-  padding-top: 161px;
+  padding-top: 88px;
   margin-bottom: 40px; }
+  @media (min-width: 576px) {
+    .features-content {
+      padding-top: 161px; } }
   .features-content .content {
     background: white;
     border-radius: 4px;
@@ -5026,7 +5094,10 @@ section#appliances {
   height: 4px;
   border-radius: 2px;
   background-image: linear-gradient(to right, #b71c1c, #ff3d00);
-  margin: 56px auto 40px auto; }
+  margin: 40px auto 24px auto; }
+  @media (min-width: 576px) {
+    .divider {
+      margin: 56px auto 40px auto; } }
 
 footer {
   padding: 3rem 0 0 0; }
diff --git a/static/scss/style.scss b/static/scss/style.scss
index 20bb379..a97b14b 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -261,8 +261,11 @@ section#appliances {
 }
 
 .features-content {
-	padding-top: 161px;
+	padding-top: 88px;
 	margin-bottom: 40px;
+	@include media-breakpoint-up(sm) {
+		padding-top: 161px;
+	}
 	.content {
 		background: white;
 		border-radius: 4px;
@@ -277,7 +280,10 @@ section#appliances {
 	height: 4px;
 	border-radius: 2px;
 	background-image: linear-gradient(to right, $red_900, $deep_orange_a400);
-	margin: 56px auto 40px auto;
+	margin: 40px auto 24px auto;
+	@include media-breakpoint-up(sm) {
+		margin: 56px auto 40px auto;
+	}
 }
 
 footer {
diff --git a/templates/base.html b/templates/base.html
index 719c807..1921398 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -12,6 +12,7 @@
 		<meta name="description" content="{{ _("IPFire is a free firewall distribution based on Linux.") }}" />
 
 		<!-- styling stuff -->
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 		<link rel="stylesheet" type="text/css" href="{{ static_url("css/style.css") }}" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/templates/static/features.html b/templates/static/features.html
index 091c41f..b8ba1cf 100644
--- a/templates/static/features.html
+++ b/templates/static/features.html
@@ -5,7 +5,9 @@
 {% block container %}
 	<div class="container features-content">
 		<div class="row">
-			<nav id="sidebar" class="col-3">
+			<nav id="sidebar" class="col-sm-12 col-md-3" role="dropdown">
+				<input type="checkbox" id="menu">
+				<label for="menu" onclick></label>
 				<ul class="nav flex-column features_nav">
 					<li class="nav-item"><a class="nav-link active" href="#about">About IPFire</a></li>
 					<li class="nav-item"><a class="nav-link" href="#security">Security</a></li>
@@ -35,7 +37,7 @@
 				</ul>
 			</nav>
 		
-		<section class="content col-9">	
+		<section class="content col-sm-12 col-md-9">	
 			<section id="about">
 				<h3 class="headline">About IP<strong>Fire</strong></h3>
 				<h5 class="subheadline">The Open Source Firewall Distribution</h5>
@@ -360,19 +362,19 @@
 					<h4 class="secondHeadline">Web User-Interface screenshots</h4>
 		
 					<div class="row">
-						<div class="col-3">
+						<div class="col-sm-12 col-md-3">
 							<a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/rules.png") }}">
 								<img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/rules.png") }}" alt="{{ _("Screenshot") }}">
 							</a>
 						</div>
 						
-						<div class="col-3">
+						<div class="col-sm-12 col-md-3">
 							<a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/new-rule.png") }}">
 								<img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/new-rule.png") }}" alt="{{ _("Screenshot") }}">
 							</a>
 						</div>
 		
-						<div class="col-3">
+						<div class="col-sm-12 col-md-3">
 							<a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/service-groups.png") }}">
 								<img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/service-groups.png") }}" alt="{{ _("Screenshot") }}">
 							</a>
@@ -380,13 +382,13 @@
 					</div>
 		
 					<div class="row">
-						<div class="col-3">
+						<div class="col-sm-12 col-md-3">
 							<a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/host-groups.png") }}">
 								<img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/host-groups.png") }}" alt="{{ _("Screenshot") }}">
 							</a>
 						</div>
 		
-						<div class="col-3">
+						<div class="col-sm-12 col-md-3">
 							<a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/connections-1.png") }}">
 								<img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/connections-1.png") }}" alt="{{ _("Screenshot") }}">
 							</a>
@@ -455,13 +457,13 @@
 		
 		
 				<div class="row">
-					<div class="col-3">
+					<div class="col-sm-12 col-md-3">
 						<a class="thumbnail" href="{{ static_url("images/screenshots/en/pakfire/pakfire-overview-1.png") }}">
 							<img class="img-fluid" src="{{ static_url("images/screenshots/en/pakfire/pakfire-overview-1.png") }}" alt="{{ _("Screenshot") }}">
 						</a>
 					</div>
 	
-					<div class="col-3">
+					<div class="col-sm-12 col-md-3">
 						<a class="thumbnail" href="{{ static_url("images/screenshots/en/pakfire/addon-services-1.png") }}">
 							<img class="img-fluid" src="{{ static_url("images/screenshots/en/pakfire/addon-services-1.png") }}" alt="{{ _("Screenshot") }}">
 						</a>
@@ -1468,7 +1470,7 @@
 					{% end %}
 		
 					<div class="row">
-						<div class="col-3">
+						<div class="col-sm-12 col-md-3">
 							<a class="thumbnail" href="{{ static_url("images/screenshots/en/virtualization/virt-manager-1.png") }}">
 								<img class="img-fluid" src="{{ static_url("images/screenshots/en/virtualization/virt-manager-1_thumb.png") }}" alt="{{ _("Screenshot") }}">
 							</a>
@@ -1520,14 +1522,14 @@
 		$('body').scrollspy({ target: '#sidebar', offset: 148 })
 		
 		$('a[href^="#"]').on('click', function(event) {
-		var target = $(this.getAttribute('href'));
-		if( target.length ) {
-			event.preventDefault();
-			$('html, body').stop().animate({
-				scrollTop: target.offset().top -150
-			}, 750);
-		}
-	});
+			var target = $(this.getAttribute('href'));
+			if( target.length ) {
+				event.preventDefault();
+				$('html, body').stop().animate({
+					scrollTop: target.offset().top -147
+				}, 750);
+			}
+		});
 	});
 </script>
 {% end block %}
\ No newline at end of file