Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive views: Help - Sources/Tutorials/Logs #2202

Merged
merged 8 commits into from
Oct 16, 2019
Merged

Responsive views: Help - Sources/Tutorials/Logs #2202

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
42316ec
sources
bgptr Oct 3, 2019
bc95c7b
Tutorials
bgptr Oct 3, 2019
bb302c8
Logs
bgptr Oct 8, 2019
0846866
remove resize eventlistener, use sidebarOnBottom selector instead
bgptr Oct 9, 2019
80b38fe
Tutorial previous button alignment fix
bgptr Oct 9, 2019
af11d69
use prevProps & delete routedTabsHeader connector
bgptr Oct 11, 2019
626b655
tutorial layout fix
bgptr Oct 11, 2019
4b61fef
Merge branch 'master' into responsive_help
bgptr Oct 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/components/shared/RoutedTabsHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}
Expand Down
1 change: 1 addition & 0 deletions app/connectors/routing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import * as ca from "../actions/ClientActions";
const mapStateToProps = selectorMap({
location: sel.location,
isTrezor: sel.isTrezor,
sidebarOnBottom: sel.sidebarOnBottom
});

const mapDispatchToProps = dispatch => bindActionCreators({
Expand Down
5 changes: 2 additions & 3 deletions app/style/GetStarted.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -865,7 +865,7 @@
display: none;
}
.go-back-screen-button-area {
top:131px;
top:175px;
right:60px;
}
.loader-settings-logs{
Expand Down Expand Up @@ -904,7 +904,6 @@
}
@media screen and (max-width: 430px) {
.getstarted.loader .go-back-screen-button-area {
top:155px;
right:59px;
}
}
Expand Down Expand Up @@ -998,7 +997,7 @@
margin-left:10px;
}
.go-back-screen-button-area{
top:85px;
top:130px;
right:20px;
}
}
Expand Down
24 changes: 23 additions & 1 deletion app/style/Help.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
12 changes: 12 additions & 0 deletions app/style/HomePage.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@
}

.overview-no-tickets {
width: 352px;
a.purchaseTickets {
background-image: @dummy-icon;
}
Expand Down Expand Up @@ -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;
}
}
19 changes: 13 additions & 6 deletions app/style/Layout.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
font-size: 13px;
float: left;
width: 100%;
margin-left: 42px;
margin-left: 40px;
}

.description-header > .description-header-action-button {
Expand Down Expand Up @@ -236,7 +236,7 @@
font-size: 20px;
line-height: 25px;
margin-bottom: 17px;
margin-left: 42px;
margin-left: 25px;
}

.tabbed-page-subtitle.export {
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
Expand All @@ -371,4 +374,8 @@
height: 82px;
padding-top: 30px;
}

.tabbed-page-subtitle {
margin-left: 20px;
}
}
51 changes: 42 additions & 9 deletions app/style/Logs.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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%;
}
}
64 changes: 53 additions & 11 deletions app/style/Modals.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}


28 changes: 28 additions & 0 deletions app/style/Tutorial.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@
background-size: 12px;
background-image: var(--x-grey);
float: right;
padding: 0;
}

.tutorial-standard-page {
Expand All @@ -137,6 +138,8 @@
text-align: center;
height: 35vw;
width: 35vw;
min-width: 340px;
min-height: 340px;
}

.tutorial-image {
Expand Down Expand Up @@ -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;
Expand Down