Skip to content

O
OKU-GIS
Commit 85e29181 authored by prabaswara's avatar prabaswara
Browse files
Options

redesign

parent 55dea877
Show whitespace changes
Inline Side-by-side
Showing with 572 additions and 239 deletions
OKU/settings.py
View file @ 85e29181
...@@ -42,7 +42,7 @@ INSTALLED_APPS = [ ...@@ -42,7 +42,7 @@ INSTALLED_APPS = [
'Application', 'Application',
'API', 'API',
'myauth.apps.MyauthConfig', 'myauth.apps.MyauthConfig',
'widget_tweaks' 'widget_tweaks',
] ]
MIDDLEWARE = [ MIDDLEWARE = [
......
requirements deleted 100644 → 0
View file @ 55dea877
asgiref==3.4.0
Django==3.2.4
djangorestframework==3.12.4
pytz==2021.1
sqlparse==0.4.1
typing-extensions==3.10.0.0
static/js/scripts.js
View file @ 85e29181
...@@ -79,23 +79,26 @@ $("#button_unhide").click(function() { ...@@ -79,23 +79,26 @@ $("#button_unhide").click(function() {
}) })
$("#button_hide_panel").click(function() { $("#button_hide_panel").click(function() {
$("#panel-samping").css('display', 'none'); $("#panel-samping").toggleClass("move");
// $("#panel-samping").css('display', 'none');
$("#button_unhide_panel").css('display', 'block'); $("#button_unhide_panel").css('display', 'block');
$("#button_hide_panel").css('display', 'none'); $("#button_hide_panel").css('display', 'none');
$("#thisFooter").css('left', '0px'); // $("#thisFooter").css('left', '0px');
$('#legenda').css('left', '0px'); // $('#legenda').css('left', '0px');
}) })
$("#button_unhide_panel").click(function() { $("#button_unhide_panel").click(function() {
$("#panel-samping").css('display', 'block'); $("#panel-samping").toggleClass("move");
$("#button_unhide").css('display', 'none'); $(this).toggleClass("move-btn");
$("#button_hide_panel").css('display', 'block'); // $("#panel-samping").css('display', 'block');
$("#thisFooter").css('left', '380px'); // $("#button_unhide").css('display', 'none');
$("#thisFooter").css('max-width', '900px'); // $("#button_hide_panel").css('display', 'block');
$('#legenda').css('left', '380px'); // $("#thisFooter").css('left', '380px');
$("#legenda").css('max-width', '900px'); // $("#thisFooter").css('max-width', '900px');
// $('#legenda').css('left', '380px');
// $("#legenda").css('max-width', '900px');
}) })
......
templates/includes/css-o.html
View file @ 85e29181
<style> <style>
.footer { .footer {
background: #ffffffa6; background: #ffffff00;
position: fixed; position: fixed;
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0; bottom: 0;
width: 1000px; width: 100%;
max-width: 100%;
overflow-x: clip;
height: 170px; height: 170px;
z-index: 999; z-index: 999;
} }
.legenda { .legenda {
background: #ffffffa6; background: #ffffff00;
position: fixed; position: fixed;
left: 20px; left: 20px;
bottom: 0; bottom: 0;
...@@ -66,7 +68,7 @@ ...@@ -66,7 +68,7 @@
display: block; display: block;
} }
#button_hide { /* #button_hide {
line-height: 15px; line-height: 15px;
width: 40px; width: 40px;
font-size: 10pt; font-size: 10pt;
...@@ -78,8 +80,8 @@ ...@@ -78,8 +80,8 @@
right: 0; right: 0;
z-index: 99999999; z-index: 99999999;
} }
*/
#button_unhide { /* #button_unhide {
line-height: 15px; line-height: 15px;
width: 40px; width: 40px;
font-size: 10pt; font-size: 10pt;
...@@ -88,7 +90,7 @@ ...@@ -88,7 +90,7 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
z-index: 99999999; z-index: 99999999;
} } */
.dataTables_length { .dataTables_length {
margin: 0 0 0px 0px; margin: 0 0 0px 0px;
...@@ -143,7 +145,20 @@ ...@@ -143,7 +145,20 @@
} }
#btn_edit_kelurahan { #btn_edit_kelurahan {
display: none; display: block;
position: relative;
top: 0;
right: 0;
width: 100px;
background-color: #fff;
border-radius: 36px;
height: 36px;
cursor: inherit;
}
#btn_edit_kelurahan :hover{
border-color: #DADCE0;
background-color: #F1F3F4;
} }
#btn_edit_tuplah { #btn_edit_tuplah {
......
templates/includes/js-m.html
View file @ 85e29181
...@@ -439,7 +439,7 @@ ...@@ -439,7 +439,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -819,7 +819,7 @@ ...@@ -819,7 +819,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -1199,7 +1199,7 @@ ...@@ -1199,7 +1199,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -1579,7 +1579,7 @@ ...@@ -1579,7 +1579,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -2002,7 +2002,7 @@ ...@@ -2002,7 +2002,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
...@@ -2410,7 +2410,7 @@ ...@@ -2410,7 +2410,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -2789,7 +2789,7 @@ ...@@ -2789,7 +2789,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -3153,7 +3153,7 @@ ...@@ -3153,7 +3153,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -3479,7 +3479,7 @@ ...@@ -3479,7 +3479,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -3785,7 +3785,7 @@ ...@@ -3785,7 +3785,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f4 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f4 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -4140,7 +4140,7 @@ ...@@ -4140,7 +4140,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -4573,7 +4573,7 @@ ...@@ -4573,7 +4573,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
......
templates/includes/js-o.html
View file @ 85e29181
...@@ -154,16 +154,20 @@ ...@@ -154,16 +154,20 @@
<script> <script>
function panel_samp() { function panel_samp() {
if ($('#panel-samping').css('display') == 'block') { if ($('#panel-samping').css('display') == 'block') {
$("#thisFooter").css('left', '380px'); // $("#panel-samping").toggleClass("move");
$("#thisFooter").css('max-width', '900px'); // $("#button_unhide_panel").toggleClass("move-btn");
$('#button_unhide').css('right', '85px'); // $("#thisFooter").css('left', '380px');
$('#legenda').css('left', '380px'); // $("#thisFooter").css('max-width', '900px');
$("#legenda").css('max-width', '900px'); // $('#button_unhide').css('right', '85px');
// $('#legenda').css('left', '380px');
// $("#legenda").css('max-width', '900px');
} else { } else {
$("#thisFooter").css('left', '0px'); // $("#panel-samping").toggleClass("move");
$("#thisFooter").css('max-width', '900px'); // $("#button_unhide_panel").toggleClass("move-btn");
$('#button_unhide').css('right', '365px'); // $("#thisFooter").css('left', '0px');
$('#legenda').css('left', '0px'); // $("#thisFooter").css('max-width', '900px');
// $('#button_unhide').css('right', '365px');
// $('#legenda').css('left', '0px');
} }
} }
...@@ -208,14 +212,11 @@ ...@@ -208,14 +212,11 @@
content = ` content = `
<a href="/editkelurahan/?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" id='btn_edit_kelurahan' class='btn
btn-default btn_edit_kelurahan' style="position: absolute;
top: 6px;right: 5px;width: 60px;">Edit</a>
<table class="table table-hover tasks-list"> <table class="table table-hover tasks-list">
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 237px;height:237"> </th> <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368"> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -259,6 +260,12 @@ ...@@ -259,6 +260,12 @@
</div> </div>
</th> </th>
</tr> </tr>
<tr>
<td>
<a href="/editkelurahan/?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" id='btn_edit_kelurahan' class='btn
btn-default btn_edit_kelurahan'>Edit</a>
</td>
</tr>
<tr> <tr>
<th> <th>
<label class="text-semibold" style="margin-left:10px">Informasi Penduduk <label class="text-semibold" style="margin-left:10px">Informasi Penduduk
...@@ -531,8 +538,8 @@ ...@@ -531,8 +538,8 @@
</table>`; </table>`;
$("#panel-samping").css("display", "block"); $("#panel-samping").css("display", "block");
$("#button_hide_panel").css("display", "block") $("#button_hide_panel").css("display", "block")
$("#thisFooter").css('left', '380px'); // $("#thisFooter").css('left', '380px');
$("#thisFooter").css('width', '930px'); // $("#thisFooter").css('width', '930px');
$("#thisFooter").css('display', 'none'); $("#thisFooter").css('display', 'none');
$("#button_unhide").css('display', 'block') $("#button_unhide").css('display', 'block')
$("#isi_panel").html(content) $("#isi_panel").html(content)
...@@ -544,7 +551,7 @@ ...@@ -544,7 +551,7 @@
mouseover: function(e) { mouseover: function(e) {
var info_foot = ` var info_foot = `
<div class="col-xs-12"> <div class="col-xs-12">
<div class="row">
<div class="col-md-5" style="min-width: 300px;"> <div class="col-md-5" style="min-width: 300px;">
<div class="form-group"> <div class="form-group">
<label class="text-semibold">Informasi</label> <label class="text-semibold">Informasi</label>
...@@ -625,6 +632,7 @@ ...@@ -625,6 +632,7 @@
</div> </div>
</div> </div>
</div>
`; `;
$('#info-footer').html(info_foot) $('#info-footer').html(info_foot)
var layer = e.target; var layer = e.target;
...@@ -994,7 +1002,7 @@ ...@@ -994,7 +1002,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -1383,7 +1391,7 @@ ...@@ -1383,7 +1391,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -1805,7 +1813,7 @@ ...@@ -1805,7 +1813,7 @@
<thead style="text-align: center;"> <thead style="text-align: center;">
<tr> <tr>
<th style="padding: 0 0 0 0px;"> <th style="padding: 0 0 0 0px;">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 237px;height:237"> <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368">
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -2283,7 +2291,7 @@ ...@@ -2283,7 +2291,7 @@
// <thead style="text-align: center;"> // <thead style="text-align: center;">
// <tr> // <tr>
// <th style="padding: 0 0 0 0px;"> // <th style="padding: 0 0 0 0px;">
// <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 237px;height:237"> // <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368">
// </th> // </th>
// </tr> // </tr>
// </thead> // </thead>
......
templates/includes/navbar.html
View file @ 85e29181
{% load static %} {% load static %}
<!-- Main navbar --> <!-- Main navbar -->
<div class="navbar navbar-inverse"> <div class="navbar navbar-inverse navbar-fixed-top bg-none">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="{% url 'apps:dashboard' %}"> <a class="navbar-brand gradient-text " href="{% url 'apps:dashboard' %}">
<!-- <h3>NationalAddress</h3> --> <!-- <h3>NationalAddress</h3> -->
<i class=" icon-location4"></i> <i class="icon-location4 fa-gradient"></i>
<b>&nbsp;&nbsp;OKU-GIS</b> <b>&nbsp;&nbsp;OKU-GIS</b>
</a> </a>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</div> </div>
<div class="navbar-collapse collapse" id="navbar-mobile"> <div class="navbar-collapse collapse" id="navbar-mobile">
<p class="navbar-text"><span class="label bg-success-400">Online</span></p> <!-- <p class="navbar-text"><span class="label bg-success-400">Online</span></p> -->
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li class="dropdown dropdown-user"> <li class="dropdown dropdown-user">
......
templates/includes/o.html
View file @ 85e29181
...@@ -237,14 +237,16 @@ ...@@ -237,14 +237,16 @@
<div> <div>
<a href="#" class="btn btn-default" id="button_hide"><span class="caret" style="margin-left: -5px;"></span></a> <a href="#" class="btn btn-default" id="button_hide"><span class="caret" style="margin-left: -5px;"></span></a>
</div> </div>
<div class="row" id="info-footer"> <div class="row" >
<div class="col-md-3"></div>
<div class="col-xs-12">
<div class="col-md-6 content-footer" >
<div class="row" id="info-footer">
<div class="col-md-12">
<div class="row">
<div class="col-md-3" style="min-width: 150px;"> <div class="col-md-3" style="min-width: 150px;">
<div class="form-group"> <div class="form-group">
<label class="text-semibold">Informasi Global</label> <label class="text-semibold">Informasi</label>
<div> <div>
<table> <table>
...@@ -359,6 +361,13 @@ ...@@ -359,6 +361,13 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div> </div>
<div> <div>
<a href="#" class="btn btn-default" id="button_unhide" style="display: none;"><span class="caret" style="margin-left: -5px;transform: rotate(180deg)"></span></a> <a href="#" class="btn btn-default" id="button_unhide" style="display: none;"><span class="caret" style="margin-left: -5px;transform: rotate(180deg)"></span></a>
......
templates/includes/plugin.html
View file @ 85e29181
{% load static %} {% load static %}
<div class="fixed-plugin" style="position: absolute;z-index: 999;right: 0px;background-color: #40777c;border-top-left-radius: 10px;border-bottom-left-radius: 10px;margin-top: 5px;"> <ul class="dock" style="right: 0;position: absolute;">
<li class="fixed-plugin" style="top: 100px;">
<div class="dropdown show-dropdown"> <div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown"> <a href="#" data-toggle="dropdown">
<i class="fa fa-map-o fa-2x" style="color: white; <i class="fa fa-map-o fa-2x" style="color: white;
...@@ -7,10 +8,7 @@ ...@@ -7,10 +8,7 @@
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
width: auto;"> </i> width: auto;"> </i>
</a> </a>
<ul class="dropdown-menu" x-placement="bottom-start" style="right: 50px; <ul class="dropdown-menu" x-placement="bottom-start" >
position: absolute;
margin-left: -757px !important;
margin-top: -47px !important;">
<li class="header-title text-center">Maps BaseLayer</li> <li class="header-title text-center">Maps BaseLayer</li>
<div class="dropdown-content-body"> <div class="dropdown-content-body">
<div class="row text-center"> <div class="row text-center">
...@@ -57,15 +55,8 @@ ...@@ -57,15 +55,8 @@
</div> </div>
</ul> </ul>
</div> </div>
</div> </li>
<div class="fixed-plugin" style="position: absolute; <li class="fixed-plugin" style="top: 160px;">
z-index: 999;
right: 0px;
background-color: #40777c;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
top: 105px;
width: 50px;">
<div class="dropdown show-dropdown"> <div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown"> <a href="#" data-toggle="dropdown">
...@@ -74,11 +65,7 @@ ...@@ -74,11 +65,7 @@
margin: 4px; margin: 4px;
margin-left: 10px;"> </i> margin-left: 10px;"> </i>
</a> </a>
<ul class="dropdown-menu" style="float: right; <ul class="dropdown-menu" >
position: absolute;
width: 550px;
margin-left: -550px !important;
margin-top: -46px !important;">
<li class="header-title text-center">Sidebar Filters</li> <li class="header-title text-center">Sidebar Filters</li>
<!-- <div id="sidebar" onmouseleave="overll()"> <!-- <div id="sidebar" onmouseleave="overll()">
<div class="sidebar-wrapper"> <div class="sidebar-wrapper">
...@@ -246,7 +233,7 @@ ...@@ -246,7 +233,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</ul>
<!-- Second navbar --> <!-- Second navbar -->
<div class="navbar navbar-default" id="navbar-second" style="display: none;"> <div class="navbar navbar-default" id="navbar-second" style="display: none;">
<ul class="nav navbar-nav no-border visible-xs-block"> <ul class="nav navbar-nav no-border visible-xs-block">
...@@ -277,5 +264,4 @@ ...@@ -277,5 +264,4 @@
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
templates/layout/layout.html
View file @ 85e29181
...@@ -8,17 +8,6 @@ ...@@ -8,17 +8,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{title}}</title> <title>{{title}}</title>
<style> <style>
#sidebar {
display: none;
width: 450px;
height: 100px;
max-width: 100%;
float: right;
top: 100px;
right: 19px;
position: absolute;
z-index: 9999;
}
#map { #map {
width: auto; width: auto;
...@@ -86,20 +75,6 @@ ...@@ -86,20 +75,6 @@
width: 250px; width: 250px;
} }
.sidebar-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.sidebar-table {
position: absolute;
width: 100%;
top: -20px;
bottom: -485px;
overflow: auto;
background-color: white;
}
.page_loader { .page_loader {
position: fixed; position: fixed;
...@@ -190,6 +165,279 @@ ...@@ -190,6 +165,279 @@
display: none; display: none;
} }
</style> </style>
<style>
.navbar {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.navbar-brand {
font-size: 20px !important;
}
.navbar-brand > [class^="icon-"], [class*=" icon-"] {
font-size: 24px !important;
}
.bg-none {
background-color: #ffffff00 !important;
/* border-color: #3F51B5; */
/* color: #fff; */
}
/* .navbar-inverse .navbar-brand {
font-size: 20px;
color: linear-gradient(258.09deg, #D77E7C -3.66%, #AE4F88 37.2%, #7B43BD 129.85%);
background: -webkit-linear-gradient(#2c9e6a,#2495cc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} */
.gradient-text {
display: inline-block;
background-image: -webkit-gradient(linear,left top,right top,from(#2c9e6a),to(#2495cc));
background-image: linear-gradient(to right,#2c9e6a,#2495cc);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-gradient {
background: -webkit-gradient(linear,left top,right top,from(#2c9e6a),to(#2495cc));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-inverse .navbar-nav > li > a {
color: #2799a4 !important;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #2799a4 !important;
/* background-color: rgba(0, 0, 0, 0.1); */
background: linear-gradient(to right,#2c9e6a38,#2495cc2e);
}
#map{
height: 100vh;
width: 100%;
}
.content-wrapper{
display: block;
position: fixed;
top : 0;
}
.content {
padding: 0 !important;
}
.widget-pane {
width: 408px;
position: absolute;
top: 0;
z-index: 999;
opacity: 1;
/* height: 0; */
left: -408px;
/* -webkit-transform: translateX(0px); */
/* transform: translateX(0px); */
/* transition-property: -webkit-transform,transform,opacity; */
/* transition-duration: 0.2s; */
/* transition-timing-function: cubic-bezier(0.0,0.0,0.2,1); */
/* width: 380px; */
/* height: 100px; */
max-width: 100%;
float: right;
top: -48px;
/* left: -5px; */
position: absolute;
z-index: 999;
display: block;
background-color: rgba(255, 255, 255, 0.836);
opacity: 1;
height: 100vh;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: rgba(255, 255, 255, 0.801);
overflow: auto;
transition: all 1s ease;
}
.widget-pane-visible {
opacity: 1;
height: 100vh !important;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: #fff;
}
.panel {
margin-bottom: 0 !important;
}
.widget-pane-toggle-button-container {
position: absolute;
z-index: 0;
top: calc(50% - 24px);
left: 100%;
display: none;
}
#button_unhide_panel {
line-height: 30px;
width: 10px;
font-size: 10pt;
font-family: tahoma;
margin-top: 0px;
/* margin-right: 3px; */
position: absolute;
top: calc(50vh - 48px);
left: 0;
z-index: 1001;
display: block;
width: 23px;
height: 48px;
cursor: pointer;
border-left: 1px solid #D4D4D4;
box-shadow: 0px 1px 4px rgb(0 0 0 / 30%);
border-radius: 0 8px 8px 0;
background: rgba(255,255,255,1) 7px center/7px 10px no-repeat;
transition: all 1s ease;
}
#button_hide_panel {
line-height: 30px;
width: 10px;
font-size: 10pt;
font-family: tahoma;
margin-top: 0px;
/* margin-right: 3px; */
position: absolute;
top: calc(50vh - 48px);
left: 407px;
z-index: 1001;
display: none;
width: 23px;
height: 48px;
cursor: pointer;
border-left: 1px solid #D4D4D4;
box-shadow: 0px 1px 4px rgb(0 0 0 / 30%);
border-radius: 0 8px 8px 0;
background: rgba(255,255,255,1) 7px center/7px 10px no-repeat;
}
.content-footer{
background: #6f99c330;
border-radius: 10px 10px 0px 0px;
padding: 10px 20px 10px 20px;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
}
#button_hide {
padding: 5px 0px 5px 5px;
line-height: 15px;
text-align: center;
width: 48px;
font-size: 10pt;
height: 23px;
font-family: tahoma;
margin-top: 3px;
margin-right: 3px;
position: absolute;
top: calc(100% - 196px);
right: calc(50% - 0px);
z-index: 99999999;
border-radius: 8px 8px 0 0;
border: 0;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: #ffffff85;
}
#button_unhide {
padding: 5px 0px 5px 5px;
line-height: 15px;
text-align: center;
width: 48px;
font-size: 10pt;
height: 23px;
font-family: tahoma;
margin-top: 3px;
margin-right: 3px;
position: absolute;
top: calc(100% - 23px);
right: calc(50% - 0px);
z-index: 99999999;
border-radius: 8px 8px 0 0;
border: 0;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: #ffffff85;
}
.move{
left: 408px !important;
transform: translate(-408px, 0);
}
.move-btn{
left: 408px !important;
transform: translate(0, 0);
}
.fixed-plugin{
position: absolute;
z-index: 999;
right: 0px;
background-color: #40777c;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-top: 5px;
width: 48px;
height: 48px;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
transition: 0.3s ease-out;
display: inline-block;
}
.fixed-plugin .dropdown-menu{
float: right;
position: absolute;
right: 0px;
width: 550px;
margin-left: -560px !important;
margin-top: -40px !important;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
border-radius: 8px 8px 8px 8px;
}
li.fixed-plugin:hover {
transform: scale(1.3);
right: 0;
margin-right: 7px;
position: relative;
}
li.fixed-plugin:hover .dropdown-menu {
transform: scale(0.769230);
float: right;
position: absolute;
right: -550px;
width: 550px;
margin-left: -490px !important;
margin-top: -40px !important;
top: 0;
/* margin-right: -550px; */
}
</style>
{% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %} {% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
...@@ -242,38 +490,30 @@ ...@@ -242,38 +490,30 @@
</head> </head>
<body> <body class="navbar-top">
{% include 'includes/navbar.html' %} {% include 'includes/plugin.html' %} {% include 'includes/navbar.html' %} {% include 'includes/plugin.html' %}
<div style="height: 93vh;"> <!-- Page container -->
<div class="page-container">
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<!-- <div class="sidebar sidebar-main sidebar-default"> -->
<!-- <div class="sidebar-content"> -->
<div id="panel-samping" class="widget-pane widget-pane-visible" >
{% block content %} {% block content %}
<div>
<a href="#" class="btn btn-default" id="button_hide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(90deg)"></span></a>
</div>
<div>
<a href="#" class="btn btn-default" id="button_unhide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(270deg)"></span></a>
</div>
<div id="panel-samping" style="width: 380px;
height: 100px;
max-width: 100%;
float: right;
top: 68px;
left: -5px;
position: absolute;
z-index: 999;
display: none;
background-color: white;">
<div class="sidebar-wrapper"> <div class="sidebar-wrapper">
<div class="panel panel-default" id="features"> <div class="panel panel-default" id="features">
<div class="sidebar-table" id="isi_panel"> <div class="sidebar-table" id="isi_panel">
<!-- <input type="submit" value="submit"> --> <!-- <input type="submit" value="submit"> -->
<a href="" id="btn_edit_kelurahan" style="position: absolute; <!-- <a href="" id="btn_edit_kelurahan" style="position: absolute;
top: 240px; top: 240px;
right: 5px;">Edit</a> right: 5px;">Edit</a> -->
<table class="table table-hover tasks-list"> <table class="table table-hover tasks-list">
<!-- panel samping js disini --> <!-- panel samping js disini -->
...@@ -283,12 +523,90 @@ ...@@ -283,12 +523,90 @@
</div> </div>
</div> </div>
</div> </div>
</div>
{% endblock content %} {% endblock content %}
</div>
<!-- <div >
<a href="#" class="btn btn-default" id="button_hide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(90deg)"></span></a>
</div> -->
<div >
<a href="#" class="btn btn-default" id="button_unhide_panel" data-toggle="tooltip" data-placement="right" title="Tampilkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(270deg)"></span></a>
</div>
<!-- User menu -->
<!-- <div class="sidebar-user-material"> -->
<!-- <div class="category-content" id="panel-samping"> -->
<!-- <div class="panel panel-default" id="features"> -->
<!-- <div class="sidebar-table" id="isi_panel"> -->
<!-- <input type="submit" value="submit"> -->
<!-- <a href="" id="btn_edit_kelurahan" style="position: absolute; -->
<!-- top: 240px; -->
<!-- right: 5px;">Edit</a> -->
<!-- <table class="table table-hover tasks-list"> -->
<!-- panel samping js disini -->
<!-- </table> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- /category content -->
<!-- </div> -->
<!-- /user menu -->
<!-- </div> -->
<!-- </div> -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Content area -->
<div class="content">
<!-- Main charts -->
<div class="row">
<div class="col-lg-12">
<div id="map"></div> <div id="map"></div>
<div id="map-cesium" style="z-index: -999; height: 605px; display:none"></div> <div id="map-cesium" style="z-index: -999; height: 605px; display:none"></div>
</div> </div>
</div>
</div>
</div>
</div>
<!-- /page content -->
</div>
<!-- <div style="height: 93vh;"> -->
<!-- <div>
<a href="#" class="btn btn-default" id="button_hide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(90deg)"></span></a>
</div>
<div>
<a href="#" class="btn btn-default" id="button_unhide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(270deg)"></span></a>
</div> -->
<!-- <div id="panel-samping" style="width: 380px;
height: 100px;
max-width: 100%;
float: right;
top: 68px;
left: -5px;
position: absolute;
z-index: 999;
display: none;
background-color: white;">
<div class="sidebar-wrapper">
</div>
</div> -->
<!-- <div id="map"></div>
<div id="map-cesium" style="z-index: -999; height: 605px; display:none"></div> -->
<!-- </div> -->
<div class="modal fade" id="modal-kelurahan" tabindex="-1" role="dialog"> <div class="modal fade" id="modal-kelurahan" tabindex="-1" role="dialog">
</div> </div>
......
templates/layout/user_layout.html
View file @ 85e29181
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
<a class="navbar-brand" href="{% url 'apps:dashboard' %}"> <a class="navbar-brand" href="{% url 'apps:dashboard' %}">
<!-- <h3>NationalAddress</h3> --> <!-- <h3>NationalAddress</h3> -->
<i class=" icon-location4"></i> <i class=" icon-location4"></i>
<b>&nbsp;&nbsp;OKU-GIS</b> <b>&nbsp;&nbsp;OKU-GISs</b>
</a> </a>
<ul class="nav navbar-nav pull-right visible-xs-block"> <ul class="nav navbar-nav pull-right visible-xs-block">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment