mirror of
https://github.com/gnh1201/welsonjs.git
synced 2024-11-26 15:31:42 +00:00
Change the screenshot and add ui components example page
This commit is contained in:
parent
f3a79a3523
commit
f03c0ef913
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 32 KiB |
314
app/components.html
Normal file
314
app/components.html
Normal file
|
|
@ -0,0 +1,314 @@
|
||||||
|
<div class="cell">
|
||||||
|
<div class="col">
|
||||||
|
<div class="panel cell collapsible">
|
||||||
|
<div class="header collapse-trigger">
|
||||||
|
<span class="icon icon-collapse"></span>
|
||||||
|
<a href="#">
|
||||||
|
<span class="collapsed-only">Show</span>
|
||||||
|
<span class="uncollapsed-only">Hide</span> panel
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="menu collapse-section">
|
||||||
|
<div class="header">
|
||||||
|
<ul class="nav">
|
||||||
|
<li class="active"><a href="#">Item one</a></li>
|
||||||
|
<li><a href="#">Item two</a></li>
|
||||||
|
<li><a href="#">Item three</a></li>
|
||||||
|
<li><a href="#">Item four</a></li>
|
||||||
|
<li><a href="#">Item five</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="body collapse-section">
|
||||||
|
<div class="cell">
|
||||||
|
<p class="no-margin"><img src="app/assets/img/stats.gif" class="top-left-image">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer collapse-section">Footer</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col width-1of2">
|
||||||
|
<div class="panel cell">
|
||||||
|
<div class="header">Repo list</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="cell">
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-fit mobile-width-fit"><span class="icon icon-bookmark color-blue"></span></div>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<span class="float-right">
|
||||||
|
<span class="text">
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
<span class="icon icon-star color-yellow"></span>
|
||||||
|
</span>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<a class="fatty" href="#">Repo 1</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">This is one of my coolest repos.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="cell">
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-fit mobile-width-fit"><span class="icon icon-bookmark color-blue"></span></div>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<span class="float-right">
|
||||||
|
<span class="text">
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
<span class="icon icon-star color-yellow"></span>
|
||||||
|
</span>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<a class="fatty" href="#">Repo 2</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">This is one of my coolest repos.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="cell">
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-fit mobile-width-fit"><span class="icon icon-bookmark color-blue"></span></div>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<span class="float-right">
|
||||||
|
<span class="text">
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
<span class="icon icon-star color-yellow"></span>
|
||||||
|
</span>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<a class="fatty" href="#">Repo 3</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">This is one of my coolest repos.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="cell">
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-fit mobile-width-fit"><span class="icon icon-bookmark color-blue"></span></div>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<span class="float-right">
|
||||||
|
<span class="text">
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
<span class="icon icon-star color-yellow"></span>
|
||||||
|
</span>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<a class="fatty" href="#">Repo 4</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">This is one of my coolest repos.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col width-fill">
|
||||||
|
<div class="panel cell">
|
||||||
|
<div class="header">Repo list</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="cell">
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-fit mobile-width-fit"><span class="icon icon-bookmark color-blue"></span></div>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<span class="float-right">
|
||||||
|
<span class="text">
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
<span class="icon icon-star color-yellow"></span>
|
||||||
|
</span>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<a class="fatty" href="#">Repo 5</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">This is one of my coolest repos.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="cell">
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-fit mobile-width-fit"><span class="icon icon-bookmark color-blue"></span></div>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<span class="float-right">
|
||||||
|
<span class="text">
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
<span class="icon icon-star color-yellow"></span>
|
||||||
|
</span>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<a class="fatty" href="#">Repo 6</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">This is one of my coolest repos.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="cell">
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-fit mobile-width-fit"><span class="icon icon-bookmark color-blue"></span></div>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<span class="float-right">
|
||||||
|
<span class="text">
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
<span class="icon icon-star color-yellow"></span>
|
||||||
|
</span>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<a class="fatty" href="#">Repo 7</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">This is one of my coolest repos.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="cell">
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-fit mobile-width-fit"><span class="icon icon-bookmark color-blue"></span></div>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<span class="float-right">
|
||||||
|
<span class="text">
|
||||||
|
123
|
||||||
|
</span>
|
||||||
|
<span class="icon icon-star color-yellow"></span>
|
||||||
|
</span>
|
||||||
|
<div class="col width-fill mobile-width-fill">
|
||||||
|
<a class="fatty" href="#">Repo 8</a>
|
||||||
|
</div>
|
||||||
|
<div class="col">This is one of my coolest repos.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="cell panel">
|
||||||
|
<div class="header">
|
||||||
|
Form to fill in
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="cell">
|
||||||
|
<form action="#" method="post">
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-1of4">
|
||||||
|
<div class="cell">
|
||||||
|
<label for="firstname">First name<span class="color-red"> *</span></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col width-fill">
|
||||||
|
<div class="cell">
|
||||||
|
<input type="text" id="firstname" placeholder="Your first name" data-required="true" data-error-message="First name is required" class="parsley-validated text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-1of4">
|
||||||
|
<div class="cell">
|
||||||
|
<label for="lastname">Last name<span class="color-red"> *</span></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col width-fill">
|
||||||
|
<div class="cell">
|
||||||
|
<input type="text" id="lastname" placeholder="Your last name" data-required="true" data-error-message="Last name is required" class="parsley-validated text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-1of4">
|
||||||
|
<div class="cell">
|
||||||
|
<label for="country">Country</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col width-fill">
|
||||||
|
<div class="cell">
|
||||||
|
<select id="country">
|
||||||
|
<option>Canada</option>
|
||||||
|
<option>Mexico</option>
|
||||||
|
<option>USA</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-1of4">
|
||||||
|
<div class="cell">
|
||||||
|
<label for="male">Gender</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col width-fill">
|
||||||
|
<div class="cell">
|
||||||
|
<input name="gender" id="male" type="radio" class="radio">
|
||||||
|
<label for="male">Man</label>
|
||||||
|
<input name="gender" id="female" type="radio" class="radio">
|
||||||
|
<label for="female">Woman</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-1of4">
|
||||||
|
<div class="cell">
|
||||||
|
<label for="occupation">Occupation</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col width-fill">
|
||||||
|
<div class="cell">
|
||||||
|
<input type="text" id="occupation" placeholder="Your occupation" class="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-1of4">
|
||||||
|
<div class="cell">
|
||||||
|
<label for="webdev">Hobbies</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col width-fill">
|
||||||
|
<div class="cell">
|
||||||
|
<input name="hobbies" id="webdev" type="checkbox" class="checkbox">
|
||||||
|
<label for="webdev">Web development</label>
|
||||||
|
<input name="hobbies" id="design" type="checkbox" class="checkbox">
|
||||||
|
<label for="design">Design</label>
|
||||||
|
<input name="hobbies" id="programming" type="checkbox" class="checkbox">
|
||||||
|
<label for="programming">Programming</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-1of4">
|
||||||
|
<div class="cell">
|
||||||
|
<label for="comment">Comment<span class="color-red"> *</span></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col width-fill">
|
||||||
|
<div class="cell">
|
||||||
|
<textarea id="comment" data-required="true" data-error-message="Comment is required" class="parsley-validated"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="col width-1of4">
|
||||||
|
</div>
|
||||||
|
<div class="col width-fill">
|
||||||
|
<div class="cell">
|
||||||
|
<button class="button" type="submit">Submit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
Footer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
10
app/index.js
10
app/index.js
|
|
@ -81,6 +81,16 @@ Router.add('/notepad', function(render) {
|
||||||
document.getElementById("useragent").innerHTML = window.navigator.userAgent;
|
document.getElementById("useragent").innerHTML = window.navigator.userAgent;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Router.add('/components', function(render) {
|
||||||
|
render("app\\components.html", {});
|
||||||
|
|
||||||
|
console.log("log message");
|
||||||
|
console.warn("warning message");
|
||||||
|
console.info("information message");
|
||||||
|
console.error("information message");
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
// clear
|
// clear
|
||||||
Browser.setContent("");
|
Browser.setContent("");
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -81,6 +81,7 @@
|
||||||
<ul class="left nav links">
|
<ul class="left nav links">
|
||||||
<li><a href="/test">Go to the test page</a></li>
|
<li><a href="/test">Go to the test page</a></li>
|
||||||
<li><a href="/notepad">WYSIWYG editor</a></li>
|
<li><a href="/notepad">WYSIWYG editor</a></li>
|
||||||
|
<li><a href="/components">UI Components</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user