Trang chủ Khám phá Trợ giúp
Đăng nhập
biheng
/
uppy
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

Make sidebar work better w/ TransloaditBar (#2356)

* Fix header height; set z-index for TransloaditBar

* Sidebar positioning

* Make sidebar top position dependent on the header top position

* Correct sidebar top position + apply it on desktop only

* mobile support

* Cleanup

* Check if TransloaditBar exists
Alexander Zaytsev 4 năm trước cách đây
mục cha
fd5f092f5f
commit
0211e06f19
5 tập tin đã thay đổi với 34 bổ sung và 10 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 1 1
      website/themes/uppy/layout/layout.ejs
  2. 3 1
      website/themes/uppy/source/css/_common.scss
  3. 7 7
      website/themes/uppy/source/css/_page.scss
  4. 1 1
      website/themes/uppy/source/css/_settings.scss
  5. 22 0
      website/themes/uppy/source/js/common.js

+ 1 - 1
website/themes/uppy/layout/layout.ejs
Xem Tập Tin 

@@ -39,7 +39,7 @@ if (page.series) {
 
   </head>
 
   </head>
 
   <body class="<%= isIndex ? 'page-index' : 'page-inner' %> <%= page.body_class %>">
 
   <body class="<%= isIndex ? 'page-index' : 'page-inner' %> <%= page.body_class %>">
 
     <div class="page">
 
     <div class="page">
 
-      <div class="TransloaditBar">
 
+      <div class="TransloaditBar js-TransloaditBar">
 
         <div class="TransloaditBar-about">
 
         <div class="TransloaditBar-about">
 
           <a class="TransloaditBar-logo" href="https://transloadit.com/" target="_blank" rel="noopener noreferrer">
 
           <a class="TransloaditBar-logo" href="https://transloadit.com/" target="_blank" rel="noopener noreferrer">
 
             <img class="TransloaditBar-logoImg" src="/images/transloadit-white-glyph.svg" width="20" height="20" alt="Transloadit">
 
             <img class="TransloaditBar-logoImg" src="/images/transloadit-white-glyph.svg" width="20" height="20" alt="Transloadit">

+ 3 - 1
website/themes/uppy/source/css/_common.scss
Xem Tập Tin 

@@ -262,6 +262,8 @@ hr {
 
   background: $color-darkblue;
 
   background: $color-darkblue;
 
   color: #fff;
 
   color: #fff;
 
   font-size: 13px;
 
   font-size: 13px;
 
+  position: relative;
 
+  z-index: 11;
 
   
   
   @media #{$screen-medium} {
 
   @media #{$screen-medium} {
 
     display: flex;
 
     display: flex;
 
@@ -333,7 +335,7 @@ hr {
 
     top: 0;
 
     top: 0;
 
     left: 0;
 
     left: 0;
 
     width: 100%;
 
     width: 100%;
 
-    height: auto;
 
+    height: $size-headerHeight;
 
     display: flex;
 
     display: flex;
 
     align-items: baseline;
 
     align-items: baseline;
 
     padding: 14px 60px 19px;
 
     padding: 14px 60px 19px;

+ 7 - 7
website/themes/uppy/source/css/_page.scss
Xem Tập Tin 

@@ -29,26 +29,26 @@
 
   // .fix-sidebar & { position: fixed; }
 
   // .fix-sidebar & { position: fixed; }
 
 
 
   @media #{$screen-medium} {
 
   @media #{$screen-medium} {
 
-    // position: absolute;
 
-    top: 0;
 
+    top: $size-headerHeight + $size-transloaditBarHeight;
 
     left: 0;
 
     left: 0;
 
     right: auto;
 
     right: auto;
 
     width: 280px;
 
     width: 280px;
 
-    // bottom: 0;
 
-    // padding: 2.2em 0;
 
-    padding-top: 95px + $size-transloaditBarHeight;
 
+    padding-top: 30px;
 
     padding-left: 60px;
 
     padding-left: 60px;
 
-    padding-bottom: 130px;
 
-    // width: 20px;
 
     margin-right: 20px;
 
     margin-right: 20px;
 
     overflow-x: hidden;
 
     overflow-x: hidden;
 
     overflow-y: auto;
 
     overflow-y: auto;
 
     -webkit-overflow-scrolling: touch;
 
     -webkit-overflow-scrolling: touch;
 
     -ms-overflow-style: none;
 
     -ms-overflow-style: none;
 
+    transition: none;
 
     transform: none;
 
     transform: none;
 
     background-color: transparent;
 
     background-color: transparent;
 
     box-shadow: none;
 
     box-shadow: none;
 
 
 
+    .list {
 
+      padding-bottom: 100px;
 
+    }
 
+
 
     .main-menu { display: none; }
 
     .main-menu { display: none; }
 
     &::-webkit-scrollbar { width: 0 !important; }
 
     &::-webkit-scrollbar { width: 0 !important; }
 
     h2 { margin-top: .2em; }
 
     h2 { margin-top: .2em; }

+ 1 - 1
website/themes/uppy/source/css/_settings.scss
Xem Tập Tin 

@@ -35,7 +35,7 @@ $color-primary    : $color-pink;
 
 
 
 // sizes
 
 // sizes
 
 $size-radius : 2px;
 
 $size-radius : 2px;
 
-$size-headerHeight: 40px;
 
+$size-headerHeight: 70px;
 
 $size-transloaditBarHeight: 37px;
 
 $size-transloaditBarHeight: 37px;
 
 
 
 // Media queries
 
 // Media queries

+ 22 - 0
website/themes/uppy/source/js/common.js
Xem Tập Tin 

@@ -19,6 +19,7 @@
 
     var header = document.querySelector('.js-MainHeader')
 
     var header = document.querySelector('.js-MainHeader')
 
     var menu = document.querySelector('.js-Sidebar')
 
     var menu = document.querySelector('.js-Sidebar')
 
     var content = document.querySelector('.js-Content')
 
     var content = document.querySelector('.js-Content')
 
+    var transloaditBar = document.querySelector('.js-TransloaditBar')
 
 
 
     var animating = false
 
     var animating = false
 
     var allLinks = []
 
     var allLinks = []
 
@@ -27,6 +28,27 @@
 
     // window.addEventListener('scroll', updateSidebar)
 
     // window.addEventListener('scroll', updateSidebar)
 
     // window.addEventListener('resize', updateSidebar)
 
     // window.addEventListener('resize', updateSidebar)
 
 
 
+    function makeSidebarTop () {
 
+      var headerHeight = header.offsetHeight
 
+      var transloaditBarHeight = 0
 
+
 
+      if (transloaditBar) {
 
+        transloaditBarHeight = transloaditBar.offsetHeight
 
+      }
 
+
 
+      if (window.matchMedia('(min-width: 1024px)').matches) {
 
+        var headerTopOffset = header.getBoundingClientRect().top
 
+        menu.style.top = headerHeight + headerTopOffset + 'px'
 
+      } else {
 
+        menu.style.paddingTop = headerHeight + transloaditBarHeight + 20 + 'px'
 
+      }
 
+    }
 
+
 
+    makeSidebarTop()
 
+
 
+    window.addEventListener('scroll', makeSidebarTop)
 
+    window.addEventListener('resize', makeSidebarTop)
 
+
 
     function updateSidebar () {
 
     function updateSidebar () {
 
       var top = (doc && doc.scrollTop) || body.scrollTop
 
       var top = (doc && doc.scrollTop) || body.scrollTop
 
       var headerHeight = header.offsetHeight
 
       var headerHeight = header.offsetHeight