Merge pull request #1644 from adsingh14/resp-view

Resp view

Author: peff

app/assets/javascripts/application.js

@@ -364,3 +364,18 @@ var AboutContent = {
     });
   }
 }
+
+// Scroll to Top
+$('#scrollToTop').removeClass('no-js');
+$(window).scroll(function() {
+  $(this).scrollTop() > 150
+    ? $('#scrollToTop').fadeIn()
+    : $('#scrollToTop').fadeOut();
+});
+$('#scrollToTop').click(function(e) {
+  e.preventDefault();
+  $("html, body").animate({
+      scrollTop: 0
+  }, "slow");
+  return false;
+});

app/assets/stylesheets/application.scss

@@ -30,6 +30,7 @@
 code {
   display: inline;
   padding: 0 5px;
+  word-break: break-all;
 }
 
 pre {
@@ -44,3 +45,7 @@ pre {
   overflow: auto;
   padding: 10px 15px 13px;
 }
+
+.d-flex{
+  display: flex;
+}

app/assets/stylesheets/book.scss

@@ -150,3 +150,18 @@ ol.book-toc {
 .switch a {
   color: #aaa;
 }
+
+.book-wrapper {
+  float:right;
+  margin: -20px 40px 0 40px;
+}
+
+@media (min-width: $mobile-m) {
+  .book-toc {
+    width: 60%
+  }
+  .book-wrapper {
+    position: sticky;
+    top: 2rem;
+  }
+}

app/assets/stylesheets/forms.scss

@@ -48,8 +48,8 @@ form#search {
     @include border-radius(20px);
     width: 100%;
     height: 20px;
-    margin-top: 5px;
-    margin-bottom: 1px;
+    margin-top: 4px;
+    margin-bottom: 2px;
     line-height: 1em;
     color: $font-color;
     background-color: transparent;
@@ -61,3 +61,23 @@ form#search {
     background-color: #fff;
   }
 }
+
+// Breakpoint ----------------
+@media (max-width: $default) {
+  form#search{
+    @include center-transformX;
+    margin-top: 7px;
+    top: unset;
+    width: 92%;
+  }
+}
+
+// Mobile
+@media (max-width: $mobile-m) {
+  form#search{
+    width: 84%;
+    #search-text {
+      padding: 0.3rem 0.1rem;
+    }
+  }
+}

app/assets/stylesheets/front-page.scss

@@ -331,3 +331,87 @@ a.icon {
     @include background-image-2x("/images/icons/source-code", 25px, 20px, 0 6px);
   }
 }
+
+
+
+// Breakpoint ----------------
+@media (max-width: $default) {
+  #front-content {
+    display: flex;
+    #front-navigation {
+      width: 50%;
+      #front-nav {
+        ul {
+          padding: 0 1rem 0 0;
+          li {
+            margin-bottom: 1rem !important;
+            margin-right: 0 !important;
+          }
+        }
+      }
+      #front-book {
+        width: unset;
+      }
+    }
+    #front-downloads {
+      width: 50%;
+      .monitor {
+        @include center-transformX;
+      }
+      table{
+        @include center-transformX;
+        tbody, tr {
+          display: flex;
+          flex-direction: column;
+        }
+        td {
+          margin-bottom: 1rem;
+          a { padding-left: 2.3rem; }
+        }
+      }
+    }
+  }
+  #companies-projects {
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    li {
+      margin: 0.7rem 0.4rem;
+    }
+  }
+}
+
+// Mobile
+@media (max-width: $mobile-m) {
+  #front-content{
+    flex-direction: column-reverse;
+    #front-navigation, #front-downloads {
+      width: 100%;
+      border-right: none;
+    }
+    #front-navigation {
+      #front-nav  {
+        ul {
+          padding: 0 1rem;
+        }
+      }
+      #front-book {
+        @include flex-center;
+        align-items: center;
+      }
+    }
+    #front-downloads {
+      border-bottom: 1px solid $base-border-color;
+      margin-bottom: 2rem;
+      padding-bottom: 1rem;
+      .monitor, table {
+        position: relative;
+      }
+      table {
+        top: 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/layout.scss

@@ -95,6 +95,7 @@ aside {
 
   img {
     max-width: 100%;
+    height: auto;
   }
 }
 
@@ -403,3 +404,181 @@ table.benchmarks {
     }
   }
 }
+// scrollToTop
+.scrollToTop {
+  @include border-radius(50px);
+  display: none;
+  position: fixed;
+  background-color: rgba(223, 221, 213, 0.33);
+  right: 20px;
+  bottom: 6.25rem;
+  padding: 0.8rem;
+  height: 20px;
+  transition: background-color 0.2s;
+  width: 20px;
+  &:hover{
+    background-color: rgba(250, 250, 250, 0.9);
+    @include box-shadow(2px);
+    &::before {
+      @include center-transformX;
+      width: 0;
+      height: 0;
+      color: var(--color-neutral-emphasis-plus);
+      content: "";
+      border: 6px solid transparent;
+      border-color:$black-3 transparent transparent;
+      top: -0.55rem;
+      position: absolute;
+    }
+    &::after {
+      @include center-transformX;
+      top: -2rem;
+      border-radius: 4px;
+      position: absolute;
+      content: attr(data-label);
+      word-wrap: break-word;
+      white-space: pre;
+      padding: .5em .75em;
+      color:$callout-color;
+      background-color:$black-3;
+      font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+    }
+  }
+}
+.no-js{
+  &.scrollToTop {
+    display: block;
+  }
+}
+
+// Breakpoint ----------------
+@media (max-width: $default) {
+  .responsive-table { overflow-x: auto; }
+  .center img { height: 100%; }
+  header{
+      padding-bottom: 2.5rem;
+    a, span {
+      padding-left: 1rem;
+      margin-bottom: 10px ;
+    }
+  }
+  #home { .inner { > header { padding-bottom: 2rem; } } }
+  #content { width: 100%; }
+  .inner { width: 100%; }
+  #content-wrapper { padding: 0.8rem; }
+
+  #masthead {
+    height: unset;
+    .inner {
+      display: flex;
+      margin-top: 1.8rem;
+      div:first-of-type {
+        padding:1rem;
+      }
+      .illustration-wrapper {
+        display: flex;
+        align-items: center;
+      }
+      p { width: unset; }
+      img.illustration {
+        position: unset;
+        right: unset;
+        top: unset;
+        max-height: 100%;
+      }
+    }
+  }
+  footer {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+// Mobile
+@media (max-width: $mobile-m) {
+  header {
+    padding-bottom: 3rem;
+    #tagline {
+      font-size: 0.8rem;
+      top: 0;
+      padding-right: 1rem;
+    }
+  }
+  #home { .inner { > header { padding-bottom: 2.5rem; } } }
+  #masthead {
+    .inner { flex-direction: column-reverse; }
+    .illustration-wrapper {
+      @include flex-center;
+      overflow: hidden;
+      .illustration {
+        width: 80%;
+        height: 100%;
+      }
+    }
+  }
+  #main {
+    >.two-column {
+      .column-right {
+        position: relative;
+        @include flex-center;
+      }
+    }
+    .two-column {
+      @include flex-column;
+      .column-left, .column-right {
+        width: 100%;
+      }
+    }
+  }
+  // Topics dropdown
+  #book-chapters,
+  #reference-version {
+    .dropdown-panel {
+      width: unset;
+      .three-column {
+        @include flex-column;
+        height: 70vh;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        .column-left,
+        .column-middle,
+        .column-right {
+          width: 100%;
+          max-width: 300px;
+        }
+        .unstyled {
+          a {
+          padding: 0.15rem 0;
+          display: block;
+          }
+        }
+        .chapter{
+          h2 {
+            display: flex;
+            align-items: center;
+            a { padding-left: 5px; }
+          }
+          ol {
+            li {
+              display: flex;
+              align-items: center;
+              margin-bottom: 6px;
+              padding: 0.45rem 0;
+               a { padding-left: 5px;}
+            }
+          }
+        }
+      }
+    }
+  }
+  footer {
+    @include flex-center;
+    flex-direction: column;
+    align-items: center;
+    .site-source {
+      margin-bottom: 1rem;
+    }
+  }
+  .scrollToTop {
+    bottom: 6rem;
+  }
+}

app/assets/stylesheets/lists.scss

@@ -169,3 +169,23 @@ table.binaries {
     border: solid 1px transparent;
   }
 }
+// Breakpoint ----
+@media (max-width: $default){
+  ol#about-nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+}
+
+@media (max-width: $mobile-m){
+  ol#about-nav {
+    justify-content: unset;
+    li {
+      padding-right: 0;
+      margin-right: 0.6rem;
+      flex-basis: 29%;
+      margin-bottom: 1rem;
+    }
+  }
+}