rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixing onboarding flicker, moving to flex and also using logical CSS

Browse source
This commit is contained in:
Jonathan Kingston 2017-01-10 19:59:13 +00:00
parent 8bcfae7bed
commit 8209d1d5a7
2 changed files with 32 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
webextension/css/popup.css
View file

@ -1,23 +1,37 @@
body { body {
background: #FAFAFA; background: #FAFAFA;
min-width: 200px; min-inline-size: 200px;
max-width: 400px; max-inline-size: 400px;
} }
table { table {
margin-bottom: 0; margin-block-end: 0;
} }
.onboarding { .onboarding {
margin-top: 16px; margin: 16px;
min-block-size: 480px;
display: flex;
flex-flow: column;
align-items: center;
}
.onboarding h3 {
margin-block-start: 16px;
} }
.onboarding * { .onboarding * {
text-align: center; text-align: center;
} }
/* Make button placement to be consistent on tour */
.onboarding .spacing {
margin-block-start: auto;
}
.popup-bumper { .popup-bumper {
width: 100%; inline-size: 100%;
padding: .5em; padding: .5em;
} }
@ -26,8 +40,8 @@ table {
} }
.icon { .icon {
max-width: 16px; max-inline-size: 16px;
height: 16px; block-size: 16px;
margin: 4px; margin: 4px;
} }
@ -44,8 +58,8 @@ table.unstriped tbody tr {
background-size: contain; background-size: contain;
filter: url('/img/filters.svg#fill'); filter: url('/img/filters.svg#fill');
fill: var(--identity-icon-color); fill: var(--identity-icon-color);
width: 32px; inline-size: 32px;
height: 32px; block-size: 32px;
} }
.edit-identities { .edit-identities {

26
webextension/popup.html
View file

@ -7,25 +7,17 @@
</head> </head>
<body> <body>
<div class="panel onboarding onboarding-panel-1" id="onboarding-panel-1"> <div class="panel onboarding onboarding-panel-1" id="onboarding-panel-1">
<div class="row"> <img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
<div class="columns"> <h3>A better way to manage all the things you do online</h3>
<img alt="Container Tabs Overview" src="/img/onboarding-1.png" /> <p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p>
<h3>A better way to manage all the things you do online</h3> <p class="spacing" ><a href="#">Learn more</a></p>
<p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p> <a href="#" id="onboarding-next-button" class="button expanded">Next</a>
<p><a href="#">Learn more</a></p>
<p><a href="#" id="onboarding-next-button" class="button expanded">Next</a></p>
</div>
</div>
</div> </div>
<div class="panel onboarding onboarding-panel-2" id="onboarding-panel-2"> <div class="panel onboarding onboarding-panel-2" id="onboarding-panel-2">
<div class="row"> <img alt="How Containers Work" src="/img/onboarding-2.png" />
<div class="columns"> <h3>Put containers to work for you.</h3>
<img alt="How Containers Work" src="/img/onboarding-2.png" /> <p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
<h3>Put containers to work for you.</h3> <a href="#" id="onboarding-done-button" class="button expanded spacing">Done</a>
<p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
<p><a href="#" id="onboarding-done-button" class="button expanded">Done</a></p>
</div>
</div>
</div> </div>
<div class="panel container-panel" id="container-panel"> <div class="panel container-panel" id="container-panel">
<div class="row popup-bumper"> <div class="row popup-bumper">