Skip to content

Commit

Permalink
Merge pull request #62 from TachyonicProject/development
Browse files Browse the repository at this point in the history
Photonic code cleanup #35
  • Loading branch information
Christiaan Rademan committed May 23, 2018
2 parents e4bb4f1 + a682de8 commit 49a6d5f
Show file tree
Hide file tree
Showing 18 changed files with 241 additions and 137 deletions.
21 changes: 21 additions & 0 deletions photonic/static/photonic/feather-icons/LICENSE
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2013-2017 Cole Bemis

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
13 changes: 13 additions & 0 deletions photonic/static/photonic/feather-icons/feather.min.js

Large diffs are not rendered by default.

176 changes: 121 additions & 55 deletions photonic/static/photonic/photonic.css
@@ -1,8 +1,19 @@

html {
height: 100%;
font-size: 0.875rem !important;
}

body {
height: 100%;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
background-color: #fff;
}

/* Ensure bootstrap4 knows we working from left side */
.container {
margin-left: 4px !important;
}
Expand All @@ -12,17 +23,11 @@ html {
width: 100% !important;
}

body {
height: 100%;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
background-color: #fff;
}

header {
display: flex;
position: fixed;
align-items:center;
padding-left: 1rem;
padding-right: 1rem;
height: 3rem;
Expand All @@ -31,26 +36,48 @@ header {
left: 0;
z-index: 1000;
background-color: #343a40;
display: flex;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
font-size: 1rem;
}

.header-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
display: inline-block;

header a {
display: flex;
align-items:center;
float: right;
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
line-height: inherit;
color: #fff;
color: #999;
}

header a .feather {
color: #999;
margin-right: 0.3rem;
height: 3rem;
}

.header-brand:hover, .header-brand:focus {
header a:hover {
color: #fff;
text-decoration: none;
}

.header-brand img {
header a:hover .feather {
color: #fff;
}

header span {
display: flex;
align-items:center;
white-space: nowrap;
color: #fff;
}

header img {
height: 3rem;
padding-top: .2rem;
padding-bottom: .2rem;
margin-right: 5px;
}

Expand All @@ -61,22 +88,6 @@ div.header-links {
justify-content: space-between;
}

.header-link {
padding-top: .75rem;
padding-bottom: .75rem;
padding-left: 5px;
padding-right: 5px;
display: relative;
float: right;
white-space: nowrap;
line-height: inherit;
color: rgba(255,255,255,.5);
}

.header-link:hover, .header-link:focus {
color: rgba(255,255,255,.75);
text-decoration: none;
}

.application {
height: 100%;
Expand All @@ -96,63 +107,118 @@ div.push_footer {
z-index: 1;
}

div.navigation {
div.sidebar {
position: fixed;
padding: 5px;
background-color: #f8f9fa;
top: 0px;
bottom: 0px;
width: 250px;
overflow-x: scroll;
overflow-y: none;
z-index: 999;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
border-right: 1px solid #ddd;
}

div.navmenu {
margin-bottom: 1rem;
}

div.navmenu ul {
display: block;
margin: 0px;
padding-left: 15px;
}

div.navmenu li {
display: block;
}

div.navmenu a {
display: block;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
font-weight: 500;
font-size: 1rem;
color: #333;
}

div.navmenu a:hover {
font-weight: 500;
color: #333;
text-decoration: None;
}
/* color: #007bff; */

div.navmenu a .feather {
color: #999;
margin-right: 5px;
width: 1rem;
height: 1rem;
vertical-align: text-bottom;
}

div.navmenu a:hover .feather {
color: #000;
margin-right: 5px;
width: 1rem;
height: 1rem;
vertical-align: text-bottom;
}


main {
height: 100%;
background-color: #ffffff;
padding: 5px;
padding: 0px;
margin-left: 250px;
width: calc(100% - 260px);
max-width: 1100px;
border-right: 1px solid #ddd;
}

span.toggler-icon {
display: none;
padding-top: .75rem;
padding-bottom: .75rem;
margin: 0px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
vertical-align: middle;
width: 1.5em;
height: 1.5em;
content: "";
height: 48px;
background-repeat: none;
background-position: center;
background-size: 100% 100%;
margin-right: 10px;
div.view {
padding-left: 5px;
padding-right: 5px;
}

.toggler-icon {
display: none;
}

@media screen and (max-width: 1100px) {
div.navigation {
div.sidebar {
display: none;
}
main {
margin-left: 0px;
width: 100%;
}
span.toggler-icon {
.toggler-icon {
display: inline-block !important;
}
}

h1 {
background-color: #f8f9fa;
padding-left: 5px;
text-transform: uppercase;
font-size: 1.1rem;
line-height: 1.5rem;
color: #427FA2;
display: block;
width: 100%;
border-bottom: 1px solid #ddd;
width: 100%;
}

h1 .feather {
display: relative;
float: right;
color: #999;
margin-right: 5px;
width: 1.5rem;
height: 1.5rem;
vertical-align: text-bottom;
}

footer {
background-color: #343a40;
Expand Down
15 changes: 8 additions & 7 deletions photonic/static/photonic/photonic.js
Expand Up @@ -28,21 +28,22 @@ function reloadStylesheets() {
/**
* Toggle Navigation
*/
function toggle_navigation() {
var display = document.getElementById('navigation').style.display;
function toggle_sidebar() {
var display = document.getElementById('sidebar').style.display;
if (display == "none" || display == "") {
document.getElementById('navigation').style.display = "block";
document.getElementById('sidebar').style.display = "block";
}
else {
document.getElementById('navigation').style.display = "none";
document.getElementById('sidebar').style.display = "none";
}
}

window.onresize = function() {
if (window.innerWidth >= 1100) {
document.getElementById('navigation').style.display = "block";
if (window.innerWidth > 1100) {
document.getElementById('sidebar').style.display = "block";
}
else {
document.getElementById('navigation').style.display = "none";
document.getElementById('sidebar').style.display = "none";
}
}

Expand Down
Binary file added photonic/static/themes/default/nav-icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion photonic/templates/body.html
Expand Up @@ -2,10 +2,13 @@
{% include "photonic/modals.html" %}
{% include "photonic/header.html" %}
<div class="application">
{% include "photonic/navigation.html" %}
{% include "photonic/sidebar.html" %}
{% include "photonic/view.html" %}
</div>
<div class="loading" id="loading"></div>
<div id="popup"></div>
<script>
feather.replace()
</script>
{% include "photonic/footer.html" %}
</body>
2 changes: 1 addition & 1 deletion photonic/templates/head.html
Expand Up @@ -17,7 +17,7 @@
<script type="text/javascript" src="{{STATIC}}/photonic/DataTables/datatables.min.js"></script>
<script type="text/javascript" src="{{STATIC}}/photonic/select2/js/select2.min.js"></script>
<script type="text/javascript" src="{{STATIC}}/photonic/photonic.js"></script>

<script type="text/javascript" src="{{STATIC}}/photonic/feather-icons/feather.min.js"></script>
<link rel="icon" href="{{ theme('icon-32x32.png') }}">

{% for css in REQ.context.css %}
Expand Down
7 changes: 4 additions & 3 deletions photonic/templates/header.html
@@ -1,12 +1,13 @@
<header>
<span class="toggler-icon" onclick="toggle_navigation();"></span>
<a class="toggler-icon"><span data-feather="menu" onclick="toggle_sidebar();"></span></a>

<a class="header-brand" href="#"><img src="{{theme('logo.png') }}" alt="Logo" height="30">{{ G.app.config.get("application", 'name', fallback='Tachonic UI') }}</a>
<img class="header-brand" src="{{theme('logo.png') }}" alt="Logo">
<span>{{ G.app.config.get("application", 'name', fallback='Tachonic UI') }}</span>

<form method="POST" action="{{APP}}/scope">
{{ REQ.context.tenants_html }}
</form>
<div class="header-links">
<a class="header-link" href="{{APP}}/logout">Sign out</a>
<a class="header-link" href="{{APP}}/logout"> <span data-feather="log-out"></span>Sign out</a>
</div>
</header>
13 changes: 4 additions & 9 deletions photonic/templates/modals.html
@@ -1,33 +1,28 @@
{% if not REQ.credentials.authenticated %}
<div class="locked"></div>
<div class="modal-login modal">
<div class="modal-header">
Login
</div>
<h1>Login <span data-feather="chevrons-down"></span></h1>
<div class="modal-body">
{% if error_title %}
<p class='red'>{{ error_title }} {{ error_description }} ({{ REQUEST_ID }})</p>
{% endif %}
<form method="post" action="{{APP}}/login" role="form">
<div class="form-group has-feedback has-feedback-left">
<label for="username" class="control-label sr-only">Email/Username</label>
<input name="username" type="username" id="username" class="form-control" placeholder="Username" value="{{ username }}" required autofocus>
<input name="username" type="username" id="username" class="form-control" placeholder="Username" value="{{ REQ.get_first('username', default='') }}" required autofocus>
<i class="form-control-feedback glyphicon glyphicon-user"></i>
</div>
<div class="form-group has-feedback has-feedback-left">
<label for="password" class="sr-only">Password</label>
<input name="password" type="password" id="password" class="form-control" placeholder="Password" value="{{ password }}" required>
<input name="password" type="password" id="password" class="form-control" placeholder="Password" value="{{ REQ.get_first('password', default='') }}" required>
<i class="form-control-feedback glyphicon glyphicon-lock"></i>
</div>
<div class="form-group">
<label for="domain" class="sr-only">Domain</label>
<input name="domain" type="text" id="domain" class="form-control" placeholder="Domain" value="{{ domain }}">
<input name="domain" type="text" id="domain" class="form-control" placeholder="Domain" value="{{ REQ.get_first('domain', default='') }}">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</div>



{% endif %}

0 comments on commit 49a6d5f

Please sign in to comment.