mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-29 17:50:09 +02:00
Code Issues Releases Wiki Activity

improve onboarding

Browse Source
This commit is contained in:
Kushagra Gour
2018-03-14 10:23:54 +05:30
parent 8ac1e82160
commit 5cbc13db1e
3 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/partials/changelog.html
View File

@@ -10,7 +10,7 @@
<span class="notification__version">3.0.0</span>
<ul>
<li>After months of work, here is Web Maker 3.0. <a href="https://medium.com/web-maker/web-maker-3-0-is-here-f158a40eeaee" target="_blank">Read the blog post about it</a>.</li>
<li>Web Maker is no more just a Chrome extension, it is also available as web app that runs offline just like the extension!</li>
<li>Web Maker is no more just a Chrome extension, it is also available as web app that runs offline just like the extension! Checkout it out -> <a href="https://webmakerapp.com/app/" target="_blank">https://webmakerapp.com/app/</a>.</li>
<li>Now use Web Maker web app on any modern browser (tested with Chrome and Firefox).</li>
<li><strong>User Accounts</strong> - The much requested user accounts are here. Now maintain your account and store all your creations in the cloud and access them anywhere anytime.
<li><strong>New layout mode</strong> - One more layout mode, that lets you align all the panes vertically.

12
src/partials/onboard-modal.html
View File

@@ -14,7 +14,13 @@
</svg>
</div>
<p>
Open Web Maker anytime by visiting <a>https://webmakerapp.com/app/</a> - Even when you are offline! It just works! 😱
Open Web Maker anytime by visiting <a>https://webmakerapp.com/app/</a> - Even when you are offline! It just works! 😱 <strong>Drag the following bookmarklet</strong> on your bookmark bar to create a quick access shortcut:
<a class="ml-1 bookmarklet" href="https://webmakerapp.com/app/">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="#logo" />
</svg>
Web Maker
</a>
</p>
</div>
<div class="onboard-step show-when-extension">
@@ -52,13 +58,13 @@
</svg>
</div>
<p>
Follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming
Follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp" targe="_blank">@webmakerApp</a> to know about the new upcoming
features!
</p>
</div>
</div>
<p class="ta-c">
<p class="tac show-when-app">
If you are an existing Chrome extension user, you can import your creations from there to here. <a href="https://medium.com/web-maker/importing-exporting-your-creations-d92e7de5c3dc" target="_blank">Learn how to export/import</a>.
</p>

16
src/style.css
View File

@@ -990,11 +990,11 @@ body > #demo-frame {
animation-delay: 0.4s;
}
.onboard-step__icon {
fill: transparent !important;
fill: #fff2ed;
stroke-width: 0.5px;
stroke: #eeb096;
width: 150px;
height: 150px;
stroke: #e79f80;
width: 80px;
height: 80px;
}
@keyframes onboard-step-show {
@@ -1179,6 +1179,14 @@ body:not(.is-app) .show-when-app {
background: white
url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px;height:32px" viewBox="0 0 24 24"><path fill="limegreen" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" /></svg>');
}
.bookmarklet {
display: inline-flex;
align-items: center;
border: 1px #aaa solid;
padding: 0 5px;
border-style: dashed;
color: #333;
}
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */