main UI - directives and table views #168
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,171 @@ | ||
| /*! | ||
| * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/) | ||
| */ | ||
| /*! | ||
| * Bootstrap v3.4.1 (https://getbootstrap.com/) | ||
| * Copyright 2011-2019 Twitter, Inc. | ||
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | ||
| */ | ||
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ | ||
|
|
||
| .badge { | ||
| display: inline-block; | ||
| min-width: 10px; | ||
| padding: 3px 7px; | ||
| font-size: 12px; | ||
| font-weight: bold; | ||
| line-height: 1; | ||
| color: #ffffff; | ||
| text-align: center; | ||
| white-space: nowrap; | ||
| vertical-align: middle; | ||
| background-color: #777777; | ||
| border-radius: 10px; | ||
| } | ||
| .badge:empty { | ||
| display: none; | ||
| } | ||
| .btn .badge { | ||
| position: relative; | ||
| top: -1px; | ||
| } | ||
| .btn-xs .badge, | ||
| .btn-group-xs > .btn .badge { | ||
| top: 0; | ||
| padding: 1px 5px; | ||
| } | ||
| a.badge:hover, | ||
| a.badge:focus { | ||
| color: #ffffff; | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
| } | ||
| .list-group-item.active > .badge, | ||
| .nav-pills > .active > a > .badge { | ||
| color: #337ab7; | ||
| background-color: #ffffff; | ||
| } | ||
| .list-group-item > .badge { | ||
| float: right; | ||
| } | ||
| .list-group-item > .badge + .badge { | ||
| margin-right: 5px; | ||
| } | ||
| .nav-pills > li > a > .badge { | ||
| margin-left: 3px; | ||
| } | ||
|
|
||
| .tooltip { | ||
| position: absolute; | ||
| z-index: 1070; | ||
| display: block; | ||
| font-family: inherit; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 1.42857143; | ||
| line-break: auto; | ||
| text-align: left; | ||
| text-align: start; | ||
| text-decoration: none; | ||
| text-shadow: none; | ||
| text-transform: none; | ||
| letter-spacing: normal; | ||
| word-break: normal; | ||
| word-spacing: normal; | ||
| word-wrap: normal; | ||
| white-space: normal; | ||
| font-size: 12px; | ||
| filter: alpha(opacity=0); | ||
| opacity: 0; | ||
| } | ||
| .tooltip.in { | ||
| filter: alpha(opacity=90); | ||
| opacity: 0.9; | ||
| } | ||
| .tooltip.top { | ||
| padding: 5px 0; | ||
| margin-top: -3px; | ||
| } | ||
| .tooltip.right { | ||
| padding: 0 5px; | ||
| margin-left: 3px; | ||
| } | ||
| .tooltip.bottom { | ||
| padding: 5px 0; | ||
| margin-top: 3px; | ||
| } | ||
| .tooltip.left { | ||
| padding: 0 5px; | ||
| margin-left: -3px; | ||
| } | ||
| .tooltip.top .tooltip-arrow { | ||
| bottom: 0; | ||
| left: 50%; | ||
| margin-left: -5px; | ||
| border-width: 5px 5px 0; | ||
| border-top-color: #000000; | ||
| } | ||
| .tooltip.top-left .tooltip-arrow { | ||
| right: 5px; | ||
| bottom: 0; | ||
| margin-bottom: -5px; | ||
| border-width: 5px 5px 0; | ||
| border-top-color: #000000; | ||
| } | ||
| .tooltip.top-right .tooltip-arrow { | ||
| bottom: 0; | ||
| left: 5px; | ||
| margin-bottom: -5px; | ||
| border-width: 5px 5px 0; | ||
| border-top-color: #000000; | ||
| } | ||
| .tooltip.right .tooltip-arrow { | ||
| top: 50%; | ||
| left: 0; | ||
| margin-top: -5px; | ||
| border-width: 5px 5px 5px 0; | ||
| border-right-color: #000000; | ||
| } | ||
| .tooltip.left .tooltip-arrow { | ||
| top: 50%; | ||
| right: 0; | ||
| margin-top: -5px; | ||
| border-width: 5px 0 5px 5px; | ||
| border-left-color: #000000; | ||
| } | ||
| .tooltip.bottom .tooltip-arrow { | ||
| top: 0; | ||
| left: 50%; | ||
| margin-left: -5px; | ||
| border-width: 0 5px 5px; | ||
| border-bottom-color: #000000; | ||
| } | ||
| .tooltip.bottom-left .tooltip-arrow { | ||
| top: 0; | ||
| right: 5px; | ||
| margin-top: -5px; | ||
| border-width: 0 5px 5px; | ||
| border-bottom-color: #000000; | ||
| } | ||
| .tooltip.bottom-right .tooltip-arrow { | ||
| top: 0; | ||
| left: 5px; | ||
| margin-top: -5px; | ||
| border-width: 0 5px 5px; | ||
| border-bottom-color: #000000; | ||
| } | ||
| .tooltip-inner { | ||
| max-width: 200px; | ||
| padding: 3px 8px; | ||
| color: #ffffff; | ||
| text-align: center; | ||
| background-color: #000000; | ||
| border-radius: 4px; | ||
| } | ||
| .tooltip-arrow { | ||
| position: absolute; | ||
| width: 0; | ||
| height: 0; | ||
| border-color: transparent; | ||
| border-style: solid; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,12 @@ | ||
| <div hx-ext="sse" sse-connect="/events/connection"> | ||
| <div id="places_parent"> | ||
| {% capture totalCount %}{{directiveModel.totalCount}} {% endcapture %} | ||
| {%if totalCount > 0 %} | ||
| {% include "place/directive.html" %} | ||
| {% include "place/place_navbar.html" %} | ||
| {% include "place/list_lazy.html" %} | ||
| {%else%} | ||
| {% include "place/directive_1_get_started.html" %} | ||
| {%endif%} | ||
| </div> | ||
| </div> |
|
There was a problem hiding this comment. I see we removed most of the actions from the nav but i don't see any alternatives introduced for clearing the place list, refreshing the place list, creating places etc There was a problem hiding this comment. was following this for design thats why options moved away from then header bar must have missed the clear option though will add that nice catch There was a problem hiding this comment. Since there's no alternative for the actions in the |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <nav class="navbar"> | ||
| <div class="navbar-branding" id="logo"> | ||
| <a href="/"><img src="{{ logo }}" /></a> | ||
| </div> | ||
| <div class="navbar-branding" id="title"><a>User Management</a></div> | ||
| <ul> | ||
| <li class="dropdown"> | ||
| <div id="dropdown-btn"> | ||
| <img src="/public/icons/cloud.svg" alt="dropdown-button"> | ||
| <i>{{ session.authInfo.friendly }}</i> | ||
| </div> | ||
| <div class="hamburger-icon"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </div> | ||
| <ul class="dropdown-menu" id="dd-menu"> | ||
| <a href="/logout"> | ||
| <li><img src="/public/icons/logout.svg">Logout</li> | ||
| </a> | ||
| <li><i>Logged in as {{ session.username }}</i></li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <script> | ||
|
There was a problem hiding this comment. It'd be great to keep scripts like this in an |
||
| document.addEventListener('click', function () { | ||
|
There was a problem hiding this comment. Not sure why this listener is added to the document and not the element being targeted There was a problem hiding this comment. aah i see, to hide the drop down menu when we click anywhere on the page, correct? There was a problem hiding this comment. Now I'm confused, since the drop down disappears when it's not hovered on, why is this needed? |
||
| const dropDownMenu = document.getElementById('dd-menu'); | ||
| if(dropDownMenu.classList.contains('active-dropdown')) { | ||
| document.querySelector('.dropdown-menu').classList.toggle('active-dropdown'); | ||
| document.querySelector('.hamburger-icon').classList.toggle('open'); | ||
| } | ||
| }); | ||
|
|
||
| document.querySelector('.hamburger-icon') | ||
| .addEventListener('click', function(event){ | ||
| event.stopPropagation(); | ||
| document.querySelector('.dropdown-menu').classList.toggle('active-dropdown'); | ||
| document.querySelector('.hamburger-icon').classList.toggle('open'); | ||
| }); | ||
| </script> | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interesting that you still rely on bootstrap. Did bulma not provide this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i can customized bootstrap to get only the elements i want for this its tooltips, badges and breadcrumbs keeping the file very small
not sure you can do that with bulma