add cute icons and a navigationbar

This commit is contained in:
flynn 2019-01-12 02:00:08 +01:00
parent c607f0928c
commit 3b4b0e1c46
13 changed files with 127 additions and 39 deletions

View file

@ -185,11 +185,8 @@
<orderEntry type="library" name="Leiningen: org.projectodd.wunderboss/wunderboss-web:0.13.1" level="project" />
<orderEntry type="library" name="Leiningen: org.slf4j/slf4j-api:1.7.7" level="project" />
<orderEntry type="library" name="Leiningen: org.tobereplaced/lettercase:1.0.0" level="project" />
<orderEntry type="library" name="Leiningen: org.webjars.bower/tether:1.4.4" level="project" />
<orderEntry type="library" name="Leiningen: org.webjars/bootstrap:4.2.1" level="project" />
<orderEntry type="library" name="Leiningen: org.webjars.npm/bulma:0.7.2" level="project" />
<orderEntry type="library" name="Leiningen: org.webjars/font-awesome:5.6.1" level="project" />
<orderEntry type="library" name="Leiningen: org.webjars/jquery:3.0.0" level="project" />
<orderEntry type="library" name="Leiningen: org.webjars/popper.js:1.14.3" level="project" />
<orderEntry type="library" name="Leiningen: org.webjars/webjars-locator-core:0.35" level="project" />
<orderEntry type="library" name="Leiningen: org.webjars/webjars-locator:0.34" level="project" />
<orderEntry type="library" name="Leiningen: pjstadig/humane-test-output:0.9.0" level="project" />

View file

@ -26,8 +26,8 @@
[org.clojure/tools.cli "0.4.1"]
[org.clojure/tools.logging "0.4.1"]
[org.postgresql/postgresql "42.2.5"]
[org.webjars.bower/tether "1.4.4"]
[org.webjars/bootstrap "4.2.1"]
;https://www.webjars.org/
[org.webjars.npm/bulma "0.7.2"]
[org.webjars/font-awesome "5.6.1"]
[org.webjars/webjars-locator "0.34"]
[ring-webjars "0.2.0"]

View file

@ -4,14 +4,75 @@
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to cat</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/vega@4.4.0"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<div id="navbar"></div>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item">
<img src="/img/cat_hollow_purple.png" width="28" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<!--
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
-->
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div id="view"></div>
<div id="view">
<div style="width: 400px; height: 300px"></div>
</div>
</section>
<section class="section">
<div class="columns">
@ -116,46 +177,51 @@
</section>
<section class="section">
<div id="app">
<div class="container-fluid">
<div class="card-deck">
<div class="card-block">
<h4>Welcome to cat</h4>
<p>If you're seeing this message, that means you haven't yet compiled your ClojureScript!</p>
<p>Please run <code>lein figwheel</code> to start the ClojureScript compiler and reload the page.
</p>
<h4>For better ClojureScript development experience in Chrome follow these steps:</h4>
<ul>
<li>Open DevTools
<li>Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1
>
General > Console)
<li>Check-in "Enable custom formatters"
<li>Close DevTools
<li>Open DevTools
</ul>
<p>See <a href="http://www.luminusweb.net/docs/clojurescript.md">ClojureScript</a> documentation for
further details.</p>
</div>
</div>
<div class="container">
<h4>Welcome to cat</h4>
<p>If you're seeing this message, that means you haven't yet compiled your ClojureScript!</p>
<p>Please run <code>lein figwheel</code> to start the ClojureScript compiler and reload the page.
</p>
<h4>For better ClojureScript development experience in Chrome follow these steps:</h4>
<ul>
<li>Open DevTools
<li>Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1
>
General > Console)
<li>Check-in "Enable custom formatters"
<li>Close DevTools
<li>Open DevTools
</ul>
<p>See <a href="http://www.luminusweb.net/docs/clojurescript.md">ClojureScript</a> documentation for
further details.</p>
</div>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<div>Icons made by
<a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a
href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a
href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC
3.0
BY</a>
</div>
</div>
</footer>
<!-- scripts and styles -->
{% style "/assets/bootstrap/css/bootstrap.min.css" %}
{% style "/assets/bulma/css/bulma.css" %}
{% style "/assets/font-awesome/css/all.css" %}
{% style "/css/screen.css" %}
{% script "/assets/jquery/jquery.min.js" %}
{% script "/js/home.js" %}
{% script "/assets/font-awesome/js/all.js" %}
{% script "/assets/tether/dist/js/tether.min.js" %}
{% script "/assets/bootstrap/js/bootstrap.min.js" %}
<script type="text/javascript">
var csrfToken = "{{csrf-token}}";
</script>
<!--{% script "/js/app.js" %}-->
{% script "/js/app.js" %} <!-- Compiled clojurescript -->
{% script "/js/graphing.js" %}
{% script "/js/graphing.js" %} <!-- Vega graphing -->
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

View file

@ -0,0 +1,25 @@
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});

View file

@ -49,7 +49,7 @@
},
{
"name": "nodeCharge",
"value": -30,
"value": -70,
"bind": {
"input": "range",
"min": -100,
@ -69,7 +69,7 @@
},
{
"name": "static",
"value": true,
"value": false,
"bind": {
"input": "checkbox"
}