[help] Responsive views - Sources/Tutorials/Logs (#2202)

decred · Oct 16, 2019 · 77b655b · 77b655b
1 parent 884db7f
commit 77b655b
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 33 deletions.
diff --git a/app/components/shared/RoutedTabsHeader.js b/app/components/shared/RoutedTabsHeader.js
@@ -19,10 +19,10 @@ class RoutedTabsHeader extends React.Component {
     this.updateCaretPosition();
   }
 
-  componentDidUpdate() {
-    const { location } = this.props;
+  componentDidUpdate(prevProps) {
+    const { location, sidebarOnBottom } = this.props;
     const selectedTab = location.pathname;
-    if (this.state.selectedTab != selectedTab) {
+    if (this.state.selectedTab != selectedTab || prevProps.sidebarOnBottom != sidebarOnBottom){
       this.updateCaretPosition();
     }
   }

diff --git a/app/connectors/routing.js b/app/connectors/routing.js
@@ -7,6 +7,7 @@ import * as ca from "../actions/ClientActions";
 const mapStateToProps = selectorMap({
   location: sel.location,
   isTrezor: sel.isTrezor,
+  sidebarOnBottom: sel.sidebarOnBottom,
   lnEnabled: sel.lnEnabled,
 });
 

diff --git a/app/style/GetStarted.less b/app/style/GetStarted.less
@@ -865,7 +865,7 @@
         display: none;
     }
     .go-back-screen-button-area {
-      top:131px;
+      top:175px;
       right:60px;
     }      
     .loader-settings-logs{
@@ -904,7 +904,6 @@
 }
 @media screen and (max-width: 430px) {
   .getstarted.loader .go-back-screen-button-area {
-    top:155px;
     right:59px;
   }
 }
@@ -998,7 +997,7 @@
         margin-left:10px;
       }
       .go-back-screen-button-area{
-        top:85px;
+        top:130px;
         right:20px;
       }    
     }    

diff --git a/app/style/Help.less b/app/style/Help.less
@@ -5,7 +5,8 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  margin-left: 42px;
+  margin: 0 0 20px 25px;
+  max-width: 700px;
 }
 
 .help-icon {
@@ -134,3 +135,24 @@
 .help-external-icon-hover {
   background-image: var(--help-external-hover);
 }
+
+@media screen and (max-width: 1179px) {
+  .help-icons-list {
+    margin-left: -20px;
+  }  
+  .help-icon {
+    margin-right:10px;
+    margin-bottom:10px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .help-icons-list {
+    margin-left: 0;
+    flex-direction: column;
+  }
+  .help-icon{
+    margin-right: 0;
+    width: 355px;
+  }
+}
diff --git a/app/style/HomePage.less b/app/style/HomePage.less
@@ -162,6 +162,7 @@
 }
 
 .overview-no-tickets {
+  width: 352px;
   a.purchaseTickets {
     background-image: @dummy-icon;
   }
@@ -265,3 +266,14 @@
     padding-left: 9px;
   }
 }
+
+@media screen and (max-width: 1179px) {
+  .overview-no-tickets{
+    margin-left: -20px;
+  }  
+}
+@media screen and (max-width: 768px) {
+  .overview-no-tickets{
+    margin-left: 0;
+  }    
+}
diff --git a/app/style/Layout.less b/app/style/Layout.less
@@ -149,7 +149,7 @@
   font-size: 13px;
   float: left;
   width: 100%;
-  margin-left: 42px;
+  margin-left: 40px;
 }
 
 .description-header > .description-header-action-button {
@@ -236,7 +236,7 @@
   font-size: 20px;
   line-height: 25px;
   margin-bottom: 17px;
-  margin-left: 42px;
+  margin-left: 25px;
 }
 
 .tabbed-page-subtitle.export {
@@ -324,15 +324,18 @@
 
 @media screen and (max-width: 1179px) {
   .tabbed-page .tab-content {
-    padding: 38px 40px 30px 40px;
+    padding: 38px 20px 30px 40px;
   }
   .tabbed-page-header > .tabs{
-    left:60px;
+    left: 55px;
   }
   .tabbed-page-header,
   .standalone-page-header {
     padding-left: 20px;
   }  
+  .tabbed-page-subtitle {
+    margin-left: 20px;
+  }  
 }
 
 @media screen and (max-width: 768px) {
@@ -353,14 +356,14 @@
   }
   .tabbed-page .tab-content
   {
-    padding: 0 10px 20px 10px;
+    padding: 0 10px 80px 10px;
   }
   .description-header{
     display: none;
   }
   .tabbed-page-header > .tabs{
     font-size: 13px;
-    left: 20px;
+    left: 25px;
     right: 20px;
     .tab{
       margin-right:45px;
@@ -371,4 +374,8 @@
     height: 82px;
     padding-top: 30px;
   }    
+
+  .tabbed-page-subtitle {
+      margin-left: 20px;
+  }    
 }
diff --git a/app/style/Logs.less b/app/style/Logs.less
@@ -4,16 +4,17 @@
 .log-area {
   background-color: var(--background-back-color);
   color: var(--title-text-and-button-background);
-  width: 100%;
+  width: 740px;
   margin-top: 15px;
-  float: left;
+  margin-left: -15px;
+  padding-bottom: 5px;
 
   &:nth-of-type(1n){
     margin-top:8px;
   }
 
   .log-area-logs {
-    margin: 30px 42px 30px 42px;
+    margin: 30px 42px 30px 40px;
 
     textarea {
       font-family: Inconsolata, monospace;
@@ -28,10 +29,10 @@
   }
 
   .log-area-title {
-    padding: 0.5em;
+    padding: 15px 0 15px 40px;
+    margin-right: 20px;
     font-size: 18px;
-    border-bottom: 1px solid var(--background-container-hover);
-    background-position: 95px 15px;
+    background-position: right center;
     background-size: 10px;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -43,18 +44,50 @@
 
   .log-area-title.expanded:hover {
     background-image: @arrow-down-key-blue-icon;
-    background-size: 10px;
   }
 
   .log-area-title.hidden {
     background-image: var(--arrow-right-gray-icon);
-    background-position: 98px 15px;
     background-size: 5px;
   }
 
   .log-area-title.hidden:hover {
     background-image: @arrow-right-key-blue-icon;
-    background-position: 98px 15px;
     background-size: 5px;
   }
+
+}
+
+@media screen and (max-width: 1179px) {
+  .log-area {
+    width: 634px;
+    .log-area-title {
+      padding-left: 35px;
+    }  
+  }
 }
+
+@media screen and (max-width: 768px) {
+  .log-area {
+    width: 355px;
+    margin-left: 0;
+    .log-area-title {
+      padding-left: 20px;
+    }  
+    .log-area-logs {
+      margin: 30px 20px;
+    }
+  }
+}  
+
+@media screen and (max-width: 375px) {
+  .log-area {
+    width: 100%;
+  }
+}    
+
+.getstarted {
+  .log-area {
+    width: 100%;
+  }
+}
diff --git a/app/style/Modals.less b/app/style/Modals.less
@@ -108,7 +108,7 @@
   z-index: 200;
   overflow-y: auto;
   text-align: left;
-  width: 611px;
+  width: 611px !important;
   height: 342px;
   margin-top: 108px;
   font-size: 13px;
@@ -473,17 +473,36 @@
   text-align: left;
 }
 
-@media screen and (max-width: 588px) {
-  .about-modal-icon {
-    height: 66px;
-    width: 66px;
-    background-size: 59px;
-  }
-
-  .about-modal-bottom-area {
-    width: 413px;
+@media screen and (max-width: 825px) {
+  .app-modal-reduced-bar.about-modal {
+    margin-left:100px;
   }
 }
+@media screen and (max-width: 588px) {
+  .app-modal-reduced-bar.about-modal {
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%, 0%);    
+    margin-left:0 !important;    
+    margin-right:0 !important;     
+    width: 455px !important;
+    height: 280px;
+    .about-modal-content {
+      margin-left:25px;
+      padding-bottom: 20px;
+      margin-top: 20px;
+    }    
+    .about-modal-icon {
+      margin-top: 20px;
+      height: 66px;
+      width: 66px;
+      background-size: 59px;      
+    }
+    .about-modal-bottom-area {
+      width: 413px;
+    }
+  }  
+}
 
 @media screen and (max-width: 955px) {
   .app-modal-standalone.about-modal {
@@ -590,8 +609,31 @@
   }
 }
 
+.app-modal-reduced-bar.info-modal.double {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);    
+  margin:0 !important;
+}
+
 @media screen and (max-width: 768px) {
   .confirm-seed-copy-warning-text {
     column-count: 1;
   }
-}
+  .app-modal-overlay-reduced-bar {
+    left:0;
+  }
+
+  .app-modal-reduced-bar.info-modal.double {
+    width: 300px !important;
+  }
+}
+
+@media screen and (max-width: 420px) {
+  .app-modal-reduced-bar.info-modal.double  {
+    width: 250px !important;
+  }
+}
+
+
diff --git a/app/style/Tutorial.less b/app/style/Tutorial.less
@@ -113,6 +113,7 @@
     background-size: 12px;
     background-image: var(--x-grey);
     float: right;
+    padding: 0;
   }
 
   .tutorial-standard-page {
@@ -137,6 +138,8 @@
     text-align: center;
     height: 35vw;
     width: 35vw;
+    min-width: 340px;
+    min-height: 340px;
   }
 
   .tutorial-image {
@@ -176,6 +179,31 @@
   }
 }
 
+@media screen and (max-width: 800px) {
+  .wallet-tutorial {
+    padding: 30px 0;
+
+    .tutorial-close-button {
+      margin-right:20px;
+    }
+    .tutorial-title,
+    .tutorial-subtitle{
+      margin-left:20px;
+    }
+
+    .tutorial-text {
+      width: 100%;
+      margin-right: 20px;
+    }
+    .tutorial-page {
+      padding: 0 20px 125px 20px;
+      background-color: var(--background-back-color);
+    }
+    .tutorial-standard-page {
+      flex-direction: column;
+    }    
+  }  
+}
 @media screen and (max-width: 670px) {
   .getstarted-tutorial .tutorial-main-text {
     max-height: 650px;