@cocreate/resize
Version:
A light weight resize handler make any element resizable by adding data attributes or usinng init object. Great for Customized text box or text area.
472 lines (454 loc) • 13.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../assets/favicon.ico" />
<title>Dashboard | CoCreate</title>
<link
rel="stylesheet"
href="../index.css"
array="files"
object="637bc8fe91249e639db315d9"
key="src"
type="text/css" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<style>
.progressbar {
flex-grow: 1;
height: 4px;
border: none;
position: relative;
background-color: rgb(194, 240, 253);
overflow: hidden;
}
.progressbar > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
transform-origin: left;
transition: transform 0.4s linear;
background-color: #61dafb;
}
.floating-label {
margin-top: 0px ;
margin-bottom: 0px ;
}
.main-height {
height: calc(100vh - 30px);
}
.progressbar-text {
color: #121212;
font-weight: bolder;
}
</style>
<body>
<!-- Modal Viewport -->
<div id="modal-viewport" hidden></div>
<!-- Navbar -->
<nav
class="nav display:flex align-items:center background:whitesmoke"
content_id="content"
scroll="sticky-nav, hide-nav"
scroll-up="5"
scroll-down="5">
<!-- Horizontal Scroll Nav/Tabs -->
<ul
class="display:inline-flex direction:rtl overflow:auto font-size:20px align-items:center list-style-type:none width:100% height:50px">
<!-- Modal Controls -->
<li class="margin-right:15px">
<a actions="closeModal"
><i class="height:18px" src="/assets/svg/times.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a actions="minMaxModal">
<i
toggle="/assets/svg/window-restore.svg, /assets/svg/window-maximize.svg"
toggle-attribute="src"
class="height:18px"
src="/assets/svg/window-maximize.svg"></i>
</a>
</li>
<li class="margin-right:15px">
<a actions="parkModal"
><i
class="height:18px"
src="/assets/svg/window-minimize.svg"></i
></a>
</li>
<!-- fullscreen toogle and icon transform-->
<li class="margin-right:15px">
<a fullscreen>
<i class="height:18px" src="/assets/svg/expand.svg"></i>
<i
class="height:18px"
src="/assets/svg/compress.svg"></i>
</a>
</li>
<!-- Render Module Form -->
<li class="margin-right:15px">
<a
actions="state, openModal"
modal-src="../modules/form.html"
modal-width="320px">
<i class="height:18px" src="/assets/svg/cog.svg"></i>
<div
state_id="module-form"
state-array="modules"
state-object=""
state_to="form-fields"></div>
<div
state_id="datatable"
state-filter-query-value=""
state_to="module_id"></div>
</a>
</li>
<!-- Render Code Editor -->
<li class="margin-right:15px">
<a
actions="state, openModal"
modal-src="../code-editor/index.html">
<i class="height:18px" src="/assets/svg/code.svg"></i>
<div
state_id="render"
state-array=""
state-object=""
state-key=""
state_to="code-editor"></div>
</a>
</li>
<!-- Render Builder -->
<li class="margin-right:15px">
<a
actions="state, openModal"
modal-src="../builder/index.html">
<i
class="height:18px"
src="/assets/svg/palette.svg"></i>
<div
state_id="render"
state-array=""
state-object=""
state-key=""
state_to="builder"></div>
</a>
</li>
<!-- deleteDocument-->
<li class="margin-right:15px">
<a
actions="deleteDocument, closeModal"
array=""
object=""
state_id="form-fields">
<i
class="height:18px"
src="/assets/svg/trash-alt.svg"></i>
</a>
</li>
</ul>
</nav>
<!-- SideNav -->
<sidenav
id="menuL"
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:50px width:275px:hover width:0px@xs"
resizable
resize-selector="[content_id='content']"
resize-property="margin-left"
resize-value="width">
<!-- Search -->
<form class="padding:5px">
<input type="text" class="floating-label" state_to="results" />
<span
class="position:relative bottom:29px right:11px float:right font-size:18px">
<a
actions="state, openModal"
state_to="render"
array="website-pages"
object=""
state-key="src"
modal-width="900px"
modal-color="#229954">
<i src="/assets/svg/search.svg"></i>
</a>
</span>
</form>
<div class="padding-right:5px padding-bottom:5px">
<!-- Fetch and Render-->
<ul
class="overflow:auto display:flex flex-direction:column width:100% height:calc(100vh_-_160px) bottom:10px margin-right:5px">
<div
array="modules"
filter-sort-key="main-menu-position"
filter-sort-direction="asc"
filter-query-key="main-menu-position"
filter-query-value="0"
filter-value-type="number"
render-selector="[template]">
<!-- Template -->
<li
template
class="line-height:40px height:40px overflow:hidden background:dodgerblue:hover"
object="{{object._id}}">
<input
type="hidden"
array="files"
object="{{object.main-menu-primary}}"
key="path"
input-selector="#a{{object._id}}"
input-key="primary-url" />
<a
actions="state, openModal"
id="a{{object._id}}"
href="..{{primary-url}}"
modal-width="{{object.main-modal-primary-width}}"
modal-color="{{object.main-modal-color}}"
class="display:inline-block">
<span
class="display:inline-block width:50px text-align:center"
object="{{object._id}}"
array="modules"
key="icon"
value="icon"></span>
<span
array="modules"
object="{{object._id}}"
key="name"></span>
<div
state-array="module_activities"
state-filter-query-key="module_id"
state-filter-value="{{object._id}}"
state_to="datatable"></div>
<div
state-array="module_activities"
state-value="{{object._id}}"
state_to="module_id"></div>
<div
state-array="files"
state-object="{{object.main-menu-secondary}}"
state-key="src"
state_to="form"></div>
<div
state-array="files"
state-object="{{object.main-menu-primary}}"
state-key="src"
state_to="render"></div>
<div
state-value="{{object._id}}"
state-filter-value="{{object._id}}"
state_to="module-form"></div>
</a>
<div
class="float:right width:50px text-align:center">
<input
type="hidden"
array="files"
object="{{object.main-menu-secondary}}"
key="path"
input-selector="#a{{object._id}}"
input-key="secondary-url" />
<a
actions="state, openModal"
id="a1{{object._id}}"
href="..{{secondary-url}}"
modal-width="{{object.main-menu-secondary-width}}"
modal-color="{{object.main-menu-secondary-color}}">
<i
class="height:16px"
src="/assets/svg/plus.svg"></i>
<div
state-value="{{object._id}}"
state-filter-value="{{object._id}}"
state_to="module_id"></div>
<div
state-array="files"
state-object="{{object.main-menu-secondary}}"
state-key="src"
state_to="render"></div>
<div
state-object="{{object._id}}"
state_to="module-form"></div>
<div
state_to="form-fields"
state-object=""></div>
</a>
</div>
</li>
</div>
</ul>
<!-- sidenav Footer -->
<div
class="display:flex justify-content:space-between flex-wrap:wrap position:absolute bottom:0px background:gainsboro line-height:40px height:40px width:100% overflow:hidden">
<a
actions="state, openModal"
modal-src="../admin/settings/index.html"
modal-width="275px"
modal-color="#229954"
modal-x="0"
modal-y="0"
class="width:50px text-align:center display:inline-block">
<span class="padding:10px width:50px text-align:center"
><i
class="height:16px"
src="/assets/svg/cogs.svg"></i
></span>
<div
state-array="files"
state-object="60ddfdc014b5ab0c2dd2fe18"
state-key="src"
state_to="render"></div>
</a>
<a
actions="state, openModal"
modal-src="../admin/modules/datatable.html"
modal-width="640px"
modal-color="#229954"
class="width:50px text-align:center display:inline-block">
<span class="padding:10px width:50px text-align:center"
><i
class="height:16px"
src="/assets/svg/project-diagram.svg"></i
></span>
<div
state-array="files"
state-object="60ddfdbf14b5ab0c2dd2fe08"
state-key="src"
state_to="render"></div>
</a>
<a
actions="state, openModal"
modal-src="../admin/module-views/datatable.html"
modal-width="640px"
modal-color="#229954"
class="width:50px text-align:center display:inline-block">
<span class="padding:10px width:50px text-align:center"
><i
class="height:16px"
src="/assets/svg/shapes.svg"></i
></span>
<div
state-array="files"
state-object="60ddfdc014b5ab0c2dd2fe0b"
state-key="src"
state_to="render"></div>
</a>
<a
actions="state, openModal"
modal-src="../admin/files/datatable.html"
modal-width="640px"
modal-color="#229954"
class="width:50px text-align:center display:inline-block">
<span class="padding:10px width:50px text-align:center"
><i
class="height:16px"
src="/assets/svg/folder.svg"></i
></span>
<div
state-array="files"
state-object="60ddfdc014b5ab0c2dd2fe15"
state-key="src"
state_to="render"></div>
</a>
<a
actions="logout"
href="./signin.html"
state_to
class="width:50px text-align:center display:inline-block">
<span class="padding:10px width:50px text-align:center"
><i
class="height:16px"
src="/assets/svg/sign-out-alt.svg"></i
></span>
</a>
</div>
</div>
<div resize="right"></div>
</sidenav>
<!-- Main Content -->
<main class="padding:10px" content_id="content">
<div
class="display:grid grid-auto-rows:50px gap:10px grid-template-columns:repeat(auto-fill,minmax(50px,1fr))"
dnd-group-key="dashboard"
array="files"
filter-limit="20"
render-selector="[template]"
droppable="true">
<div
template
class="card position:relative template display:flex padding:20px align-items:center grid-column-end:span_6 grid-row-end:span_2"
eid="id1"
draggable="tru"
resizable>
<!-- dashboard template-->
<div class="flex-grow:1 padding-right:20px">
<h2 key="name">Visits</h2>
<p key="description">Total visits today</p>
<div class="display:flex align-items:center">
<h2>
$<span
array=""
object
filter-query-key="total"
chart-operator="sum"
>4000</span
>
</h2>
<div
filter-query-key="status"
filter-query-value="completed"></div>
<!--<i class="fas fa-chart-line color:green font-size:16px padding:0px_15px"></i>-->
<span
class="cocreate-badge background:green round font-size:12px"
>7%</span
>
</div>
<a href="#">Detail</a>
</div>
<div class="width:120px">
<div
class="progressbar-circle text-align:center width:100%"
progressbar-color="#22CCE2"
percent-value="85"
percent-note="New Visits"></div>
</div>
<div resize="top" dnd-exclude></div>
<div resize="bottom" dnd-exclude></div>
<div resize="left" dnd-exclude></div>
<div resize="right" dnd-exclude></div>
</div>
</div>
<button
class="position:absolute bottom:15px right:15px line-height:50px width:50px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
<a
actions="state, openModal"
modal-src="./form.html"
modal-width="320px"
modal-color="#229954">
<i src="/assets/svg/plus.svg"></i>
<div state_to="form-fields" state-object=""></div>
<div
state_id="module-form"
state-value=""
state-filter-query-value=""
state_to="module_id"></div>
<div
state_id="form"
state-array=""
state-object=""
state-key=""
state_to="render"></div>
</a>
</button>
</main>
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
<!-- <script src="https://CoCreate.app/dist/CoCreate.js"></script> -->
</body>
</html>