Commit 456c9d09 by Kunto

mobile view & js include

1 parent 6d8ad63b

5.97 KB | W: | H:

6.32 KB | W: | H:

tangsel/base/static/admin/img/logos/bapenda.png
tangsel/base/static/admin/img/logos/bapenda.png
tangsel/base/static/admin/img/logos/bapenda.png
tangsel/base/static/admin/img/logos/bapenda.png
  • 2-up
  • Swipe
  • Onion skin
$(function () {
//
// Carousel
//
$(".counter-carousel").owlCarousel({
loop: true,
margin: 30,
mouseDrag: true,
autoplay: true,
autoplayTimeout: 4000,
autoplaySpeed: 2000,
rtl: true,
nav: false,
dots: false,
responsive: {
0: {
items: 2,
loop: true,
},
576: {
items: 2,
loop: true,
},
768: {
items: 3,
loop: true,
},
1200: {
items: 5,
loop: true,
},
1400: {
items: 6,
loop: true,
},
},
});
});
var userSettings = {
Layout: "vertical", // vertical | horizontal
SidebarType: "full", // full | mini-sidebar
BoxedLayout: true, // true | false
Direction: "ltr", // ltr | rtl
Theme: "light", // light | dark
ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
cardBorder: false, // true | false
Layout: localStorage.getItem("Layout") || "vertical", // vertical | horizontal
SidebarType: localStorage.getItem("SidebarType") || "full", // full | mini-sidebar
BoxedLayout: localStorage.getItem("BoxedLayout") || "boxed", // true | false
Theme: localStorage.getItem("Theme") || "light", // light | dark
cardBorder: localStorage.getItem("cardBorder") || "shadow", // true | false
};
......@@ -10,7 +10,6 @@ if (isSidebar.length > 0) {
AdminSettings.ManageSidebarType();
AdminSettings.ManageBoxedLayout();
AdminSettings.ManageDarkThemeLayout();
AdminSettings.ManageColorThemeLayout();
AdminSettings.ManageCardLayout();
},
......@@ -74,14 +73,20 @@ if (isSidebar.length > 0) {
// Layout Boxed or Full
//****************************
ManageBoxedLayout: function () {
document.getElementById("boxed-layout").checked = true;
const containerFluid = document.querySelectorAll(".container");
// document.getElementById("boxed-layout").checked = true;
switch (settings.BoxedLayout) {
case true:
case "boxed":
containerFluid.forEach(function (element) {
element.classList.remove("max-w-full");
});
document.documentElement.setAttribute("data-boxed-layout", "boxed");
document.getElementById("boxed-layout").checked = true;
break;
case false:
case "full":
containerFluid.forEach(function (element) {
element.classList.add("max-w-full");
});
document.documentElement.setAttribute("data-boxed-layout", "full");
document.getElementById("full-layout").checked = true;
break;
......@@ -92,13 +97,13 @@ if (isSidebar.length > 0) {
// Card Type
//****************************
ManageCardLayout: function () {
document.getElementById("card-without-border").checked = true;
// document.getElementById("card-without-border").checked = true;
switch (settings.cardBorder) {
case true:
case "border":
document.documentElement.setAttribute("data-card", "border");
document.getElementById("card-with-border").checked = true;
break;
case false:
case "shadow":
document.documentElement.setAttribute("data-card", "shadow");
document.getElementById("card-without-border").checked = true;
break;
......@@ -140,19 +145,6 @@ if (isSidebar.length > 0) {
);
}
},
//****************************
// Theme color
//****************************
ManageColorThemeLayout: function () {
const { ColorTheme } = settings;
const colorThemeElement = document.getElementById(ColorTheme);
if (colorThemeElement) {
document.documentElement.setAttribute("data-color-theme", ColorTheme);
colorThemeElement.checked = true;
}
},
};
// Initialize settings
......@@ -177,14 +169,16 @@ if (isSidebar.length > 0) {
});
this.checked;
document.documentElement.setAttribute("data-boxed-layout", "boxed");
localStorage.setItem("BoxedLayout", "boxed");
});
fullLayout.addEventListener("click", function () {
containerFluid.forEach(function (element) {
element.classList.add("max-w-full");
});
document.documentElement.setAttribute("data-boxed-layout", "full");
this.checked;
document.documentElement.setAttribute("data-boxed-layout", "full");
localStorage.setItem("BoxedLayout", "full");
});
}
handleBoxedLayout();
......@@ -198,11 +192,13 @@ if (isSidebar.length > 0) {
verticalLayout.addEventListener("click", function () {
document.documentElement.setAttribute("data-layout", "vertical");
localStorage.setItem("Layout", "vertical");
this.checked;
});
horizontalLayout.addEventListener("click", function () {
document.documentElement.setAttribute("data-layout", "horizontal");
localStorage.setItem("Layout", "horizontal");
this.checked;
});
}
......@@ -238,23 +234,27 @@ if (isSidebar.length > 0) {
}
document.querySelectorAll(".dark-layout").forEach((element) => {
localStorage.setItem("Theme", "dark");
element.addEventListener("click", () =>
setThemeAttributes("dark", "dark-logo", "light-logo", "moon", "sun")
);
});
document.querySelectorAll(".light-layout").forEach((element) => {
localStorage.setItem("Theme", "light");
element.addEventListener("click", () =>
setThemeAttributes("light", "light-logo", "dark-logo", "sun", "moon")
);
});
}
handleTheme();
//****************************
// Theme card with border or shadow
//****************************
function handleCardLayout() {
function setCardAttribute(cardType) {
localStorage.setItem("cardBorder", cardType);
document.documentElement.setAttribute("data-card", cardType);
}
......@@ -273,16 +273,19 @@ if (isSidebar.length > 0) {
function handleSidebarToggle() {
function setSidebarType(sidebarType) {
document.body.setAttribute("data-sidebartype", sidebarType);
localStorage.setItem("SidebarType", sidebarType);
}
document
.getElementById("full-sidebar")
.addEventListener("click", () => setSidebarType("full"));
document
.getElementById("mini-sidebar")
.addEventListener("click", () => setSidebarType("mini-sidebar"));
}
handleSidebarToggle();
//****************************
// Toggle sidebar
//****************************
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
<html metal:use-macro="load: ./base5.pt"
tal:define="scripts scripts|scripts" >
<div metal:fill-slot="content">
<html metal:use-macro="load: ./base5.pt" tal:define="scripts scripts|scripts">
<div metal:fill-slot="content">
<div class="panel panel-default">
<!-- <div class="panel-heading"> -->
<!-- <h3 class="panel-title"><i class="fa fa-fw fa-plus"></i>&nbsp;${request.title}</h3> -->
......@@ -9,9 +8,9 @@ tal:define="scripts scripts|scripts" >
<div tal:content="structure form"></div>
</div>
</div>
</div>
</div>
<div metal:fill-slot="scripts">
<div metal:fill-slot="scripts">
<script>
$(document).ready(function () {
// $(".read-only").attr("readonly", true);
......@@ -24,7 +23,5 @@ tal:define="scripts scripts|scripts" >
});
</script>
<div metal:define-slot="scripts"></div>
</div>
</div>
</html>
<html metal:use-macro="load: ./base5.pt"
tal:define="scripts scripts|scripts" >
<div metal:fill-slot="content">
<html metal:use-macro="load: ./base5.pt" tal:define="scripts scripts|scripts">
<div metal:fill-slot="content">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<!-- <div class="panel-heading"> -->
......@@ -11,9 +10,9 @@ tal:define="scripts scripts|scripts" >
</div>
</div>
</div>
</div>
</div>
<div metal:fill-slot="scripts">
<div metal:fill-slot="scripts">
<script>
$(document).ready(function () {
// $(".read-only").attr("readonly", true);
......@@ -26,7 +25,5 @@ tal:define="scripts scripts|scripts" >
});
</script>
<div metal:define-slot="scripts"></div>
</div>
</div>
</html>
......@@ -75,4 +75,112 @@
</div>
</li>
</ul>
<div
metal:fill-slot="navs-horizontal"
id="topbarnav"
class="flex gap-1 items-center relative"
>
<!-- Dropdown Menu / Multilevel -->
<div
tal:repeat="hmenu get_esppt_menus()"
class="hs-dropdown [--strategy:static] lg:[--strategy:absolute] [--adaptive:none] sm:[--trigger:hover] relative"
>
<a
tal:attributes="href python: home+hmenu['path'] if not hmenu['children'] else 'javascript:void()'; class 'horizontal-menu bg-primary text-white dark:text-white hover:bg-primary hover:text-white' if route_name in hmenu['route_name'] else 'horizontal-menu dark:text-white hover:bg-primary hover:text-white'"
>
<i
tal:condition="hmenu['nama'].strip() == 'E-SPPT Home'"
tal:attributes="class 'ti ti-home text-base' if route_name in hmenu['route_name'] else 'ti ti-home text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'Unduh E-SPPT'"
tal:attributes="class 'ti ti-cloud-down text-base' if route_name in hmenu['route_name'] else 'ti ti-cloud-down text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'My NOP'"
tal:attributes="class 'ti ti-credit-card text-base' if route_name in hmenu['route_name'] else 'ti ti-credit-card text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'My SPPT'"
tal:attributes="class 'ti ti-script text-base' if route_name in hmenu['route_name'] else 'ti ti-script text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'Admin'"
tal:attributes="class 'ti ti-adjustments text-base' if route_name in hmenu['route_name'] else 'ti ti-adjustments text-xl flex-shrink-0'"
></i>
${hmenu['nama']}
<i
tal:condition="hmenu['children']"
class="ti ti-chevron-down ms-auto text-lg"
></i>
</a>
<div
tal:condition="hmenu['children']"
id="${hmenu['nama'].strip()}"
class="horizontal-items hs-dropdown-menu before:absolute left-0 hidden transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0"
>
<a
tal:repeat="hsubmenu hmenu['children']"
class="horizontal-link"
href="${home}${hsubmenu['path']}"
>
<i class="ti ti-circle text-base flex-shrink-0"></i>
<span class="hide-menu flex-shrink-0 text-sm leading-tight"
>${hsubmenu['nama']}</span
>
</a>
</div>
</div>
<div
tal:repeat="hmenu get_base_menus()"
class="hs-dropdown [--strategy:static] lg:[--strategy:absolute] [--adaptive:none] sm:[--trigger:hover] relative"
>
<a
tal:attributes="href python: home+hmenu['path'] if not hmenu['children'] else 'javascript:void()'; class 'horizontal-menu bg-primary text-white dark:text-white hover:bg-primary hover:text-white' if route_name in hmenu['route_name'] else 'horizontal-menu dark:text-white hover:bg-primary hover:text-white'"
>
<i
tal:condition="hmenu['nama'].strip() == 'E-SPPT Home'"
tal:attributes="class 'ti ti-home text-base' if route_name in hmenu['route_name'] else 'ti ti-home text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'Unduh E-SPPT'"
tal:attributes="class 'ti ti-cloud-down text-base' if route_name in hmenu['route_name'] else 'ti ti-cloud-down text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'My NOP'"
tal:attributes="class 'ti ti-credit-card text-base' if route_name in hmenu['route_name'] else 'ti ti-credit-card text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'My SPPT'"
tal:attributes="class 'ti ti-script text-base' if route_name in hmenu['route_name'] else 'ti ti-script text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'Admin'"
tal:attributes="class 'ti ti-adjustments text-base' if route_name in hmenu['route_name'] else 'ti ti-adjustments text-xl flex-shrink-0'"
></i>
${hmenu['nama']}
<i
tal:condition="hmenu['children']"
class="ti ti-chevron-down ms-auto text-lg"
></i>
</a>
<div
tal:condition="hmenu['children']"
id="${hmenu['nama'].strip()}"
class="horizontal-items hs-dropdown-menu before:absolute left-0 hidden transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0"
>
<a
tal:repeat="hsubmenu hmenu['children']"
class="horizontal-link"
href="${home}${hsubmenu['path']}"
>
<i class="ti ti-circle text-base flex-shrink-0"></i>
<span class="hide-menu flex-shrink-0 text-sm leading-tight"
>${hsubmenu['nama']}</span
>
</a>
</div>
</div>
</div>
</html>
......@@ -3,7 +3,7 @@
<div class="card bg-lightprimary dark:bg-darkprimary mb-0 overflow-hidden">
<div class="card-body pb-12 pt-8">
<div class="grid grid-cols-12">
<div class="lg:col-span-8 md:col-span-8 sm:col-span-12 col-span-12">
<div class="lg:col-span-7 md:col-span-6 sm:col-span-12 col-span-12">
<div class="flex gap-3 items-center mb-7">
<div class="rounded-full overflow-hidden">
<img
......@@ -19,9 +19,9 @@
>
</h5>
</div>
<div class="flex gap-6 items-center">
<div class="gap-6 items-center grid grid-cols-12">
<div
class="pe-6 rtl:pe-auto rtl:ps-6 border-e border-[#adb0bb] border-opacity-10 dark:border-darkborder"
class="pe-6 md:border-e md:border-[#adb0bb] md:border-opacity-10 dark:md:border-darkborder col-span-12 md:col-span-6 lg:col-span-7"
>
<h3 class="flex items-start mb-0 text-xl">Fitur Modul:</h3>
<ul class="list-group mt-4">
......@@ -52,7 +52,7 @@
</ul>
</div>
<div class="">
<div class="col-span-12 md:col-span-6 lg:col-span-5">
<div class="lg:col-span-4 md:col-span-6 col-span-12">
<a href="${home}/pbb/esppt/unduh/add">
<div class="card animate-card overflow-hidden">
......@@ -74,7 +74,7 @@
</div>
</div>
</div>
<div class="lg:col-span-5 md:col-span-5 sm:col-span-12 col-span-12">
<div class="lg:col-span-5 md:col-span-6 sm:col-span-12 col-span-12">
<div
class="sm:absolute relative right-0 rtl:right-auto rtl:left-0 -bottom-8"
>
......
......@@ -56,7 +56,8 @@ class ListSchema(colander.Schema):
title="Alamat",
widget=widget.TextInputWidget(),
validator=colander.Length(max=64),
visible=False)
visible=False
)
alamat_2 = colander.SchemaNode(
colander.String(),
......@@ -64,7 +65,8 @@ class ListSchema(colander.Schema):
missing=colander.drop,
widget=widget.TextInputWidget(),
validator=colander.Length(max=64),
visible=False)
visible=False
)
mobile = colander.SchemaNode(
colander.String(),
......@@ -87,7 +89,8 @@ class ListSchema(colander.Schema):
widget=widget.FileUploadWidget(mem_tmp_store),
title="Identitas",
validator=image_validator,
visible=False)
visible=False
)
class EditSchema(ListSchema):
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!