Steve Nyemba
3 days ago
commit
bf097096c1
@ -0,0 +1,84 @@
|
||||
{
|
||||
"system": {
|
||||
"version": "0.1.1",
|
||||
"context": "",
|
||||
"theme": "hiplab",
|
||||
"logo": "www/content/_assets/images/logo.png",
|
||||
"app": {
|
||||
"debug": true,
|
||||
"port": 8084,
|
||||
"threaded": true,
|
||||
"host": "0.0.0.0"
|
||||
}
|
||||
},
|
||||
"plugins": {
|
||||
"themes": [
|
||||
"List",
|
||||
"Get"
|
||||
]
|
||||
},
|
||||
"layout": {
|
||||
"root": "www/content",
|
||||
"index": "index.html",
|
||||
"on": {
|
||||
"load": {
|
||||
"pane": [
|
||||
"www/content/installation.html"
|
||||
]
|
||||
},
|
||||
"error": {}
|
||||
},
|
||||
"icons": {
|
||||
"comment": "use folder names as keys and fontawesome type as values to add icons to menu"
|
||||
},
|
||||
"api": {
|
||||
"comment": "use keys as uri and function calls as values"
|
||||
},
|
||||
"map": [
|
||||
{}
|
||||
],
|
||||
"order": {
|
||||
"menu": [
|
||||
"docs",
|
||||
"about"
|
||||
]
|
||||
},
|
||||
"overwrite": {
|
||||
"copyright": {
|
||||
"title": "QCMS - Copyright",
|
||||
"text": "copyright",
|
||||
"type": "dialog",
|
||||
"uri": "www/content/about/copyright.html"
|
||||
},
|
||||
"plugins": {
|
||||
"title": "Build Plugins",
|
||||
"text": "Build Plugins"
|
||||
},
|
||||
"themes": {
|
||||
"text": "Change Themes"
|
||||
},
|
||||
"overview": {
|
||||
"text": "Why QCMS",
|
||||
"uri": "www/content/index.html"
|
||||
},
|
||||
"license": {
|
||||
"type": "dialog",
|
||||
"text": "License",
|
||||
"title": "QCMS License - MIT"
|
||||
}
|
||||
},
|
||||
"header": {
|
||||
"logo": true,
|
||||
"title": "QCMS",
|
||||
"subtitle": "Powered by - Python/Flask"
|
||||
},
|
||||
"footer": [
|
||||
{
|
||||
"text": "Designed & Built by Steve L. Nyemba"
|
||||
},
|
||||
{
|
||||
"text": "Powered By QCMS"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
data-transport@git+https://github.com/lnyemba/data-transport
|
||||
flask
|
||||
flask-session
|
||||
requests
|
||||
numpy
|
||||
pandas
|
||||
mistune
|
||||
pygments
|
||||
@ -0,0 +1,88 @@
|
||||
<mxfile host="Electron" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/24.7.5 Chrome/126.0.6478.183 Electron/31.3.0 Safari/537.36" version="24.7.5">
|
||||
<diagram name="Page-1" id="6eXQYGXEZFShR_b9AtQC">
|
||||
<mxGraphModel dx="468" dy="833" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-8" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="a64sFpkENEI93c3L45WZ-1" target="a64sFpkENEI93c3L45WZ-6" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-1" value="Web Engineer" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;fontStyle=1" parent="1" vertex="1">
|
||||
<mxGeometry x="120" y="360" width="30" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="a64sFpkENEI93c3L45WZ-2" target="a64sFpkENEI93c3L45WZ-9" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-2" value="Content Creator" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;fontStyle=1" parent="1" vertex="1">
|
||||
<mxGeometry x="120" y="500" width="30" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-6" value="Builds Site<div>With QCMS</div>" style="html=1;dashed=0;rounded=1;absoluteArcSize=1;arcSize=20;verticalAlign=middle;align=center;whiteSpace=wrap;" parent="1" vertex="1">
|
||||
<mxGeometry x="280" y="365" width="160" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-7" value="*" style="text;resizeWidth=0;resizeHeight=0;points=[];part=1;verticalAlign=middle;align=center;html=1;" parent="a64sFpkENEI93c3L45WZ-6" vertex="1">
|
||||
<mxGeometry x="1" y="0.5" width="20" height="20" relative="1" as="geometry">
|
||||
<mxPoint x="-20" y="-10" as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-9" value="Edit Files" style="html=1;dashed=0;rounded=1;absoluteArcSize=1;arcSize=20;verticalAlign=middle;align=center;whiteSpace=wrap;fillColor=#f0a30a;fontColor=#000000;strokeColor=#BD7000;" parent="1" vertex="1">
|
||||
<mxGeometry x="280" y="505" width="160" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-10" value="*" style="text;resizeWidth=0;resizeHeight=0;points=[];part=1;verticalAlign=middle;align=center;html=1;" parent="a64sFpkENEI93c3L45WZ-9" vertex="1">
|
||||
<mxGeometry x="1" y="0.5" width="20" height="20" relative="1" as="geometry">
|
||||
<mxPoint x="-20" y="-10" as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="a64sFpkENEI93c3L45WZ-13" target="a64sFpkENEI93c3L45WZ-9" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-13" value="Create Content<div>From Markdown</div>" style="html=1;dashed=0;rounded=1;absoluteArcSize=1;arcSize=20;verticalAlign=middle;align=center;whiteSpace=wrap;fillColor=#f0a30a;fontColor=#000000;strokeColor=#BD7000;" parent="1" vertex="1">
|
||||
<mxGeometry x="480" y="455" width="160" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-14" value="*" style="text;resizeWidth=0;resizeHeight=0;points=[];part=1;verticalAlign=middle;align=center;html=1;" parent="a64sFpkENEI93c3L45WZ-13" vertex="1">
|
||||
<mxGeometry x="1" y="0.5" width="20" height="20" relative="1" as="geometry">
|
||||
<mxPoint x="-20" y="-10" as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="a64sFpkENEI93c3L45WZ-15" target="a64sFpkENEI93c3L45WZ-9" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-15" value="Content Content<div>From HTML5</div>" style="html=1;dashed=0;rounded=1;absoluteArcSize=1;arcSize=20;verticalAlign=middle;align=center;whiteSpace=wrap;fillColor=#f0a30a;fontColor=#000000;strokeColor=#BD7000;" parent="1" vertex="1">
|
||||
<mxGeometry x="479" y="560" width="160" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-16" value="*" style="text;resizeWidth=0;resizeHeight=0;points=[];part=1;verticalAlign=middle;align=center;html=1;" parent="a64sFpkENEI93c3L45WZ-15" vertex="1">
|
||||
<mxGeometry x="1" y="0.5" width="20" height="20" relative="1" as="geometry">
|
||||
<mxPoint x="-20" y="-10" as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-21" value="Define Folder Structure" style="html=1;dashed=0;rounded=1;absoluteArcSize=1;arcSize=20;verticalAlign=middle;align=center;whiteSpace=wrap;" parent="1" vertex="1">
|
||||
<mxGeometry x="160" y="260" width="160" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-22" value="*" style="text;resizeWidth=0;resizeHeight=0;points=[];part=1;verticalAlign=middle;align=center;html=1;" parent="a64sFpkENEI93c3L45WZ-21" vertex="1">
|
||||
<mxGeometry x="1" y="0.5" width="20" height="20" relative="1" as="geometry">
|
||||
<mxPoint x="-20" y="-10" as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-23" value="Builds Plugins" style="html=1;dashed=0;rounded=1;absoluteArcSize=1;arcSize=20;verticalAlign=middle;align=center;whiteSpace=wrap;" parent="1" vertex="1">
|
||||
<mxGeometry x="440" y="260" width="160" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-24" value="*" style="text;resizeWidth=0;resizeHeight=0;points=[];part=1;verticalAlign=middle;align=center;html=1;" parent="a64sFpkENEI93c3L45WZ-23" vertex="1">
|
||||
<mxGeometry x="1" y="0.5" width="20" height="20" relative="1" as="geometry">
|
||||
<mxPoint x="-20" y="-10" as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.544;entryY=-0.1;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="a64sFpkENEI93c3L45WZ-23" target="a64sFpkENEI93c3L45WZ-6" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="a64sFpkENEI93c3L45WZ-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.55;entryY=-0.08;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="a64sFpkENEI93c3L45WZ-21" target="a64sFpkENEI93c3L45WZ-6" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="Gio7s8dyMPJOIiXoMkRo-1" value="QCMS" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=24;fontStyle=1" vertex="1" parent="1">
|
||||
<mxGeometry x="84" y="191" width="60" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="Gio7s8dyMPJOIiXoMkRo-2" value="Content Management System" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
|
||||
<mxGeometry x="32" y="220" width="170" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 37 KiB |
@ -0,0 +1,38 @@
|
||||
.border {
|
||||
border:1px solid #CAD5E0 ;
|
||||
}
|
||||
.border-round {
|
||||
padding:6px;
|
||||
border-radius:8px;
|
||||
}
|
||||
.border-round-top-left{
|
||||
border-top-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-top-right{
|
||||
border-top-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-right{
|
||||
border-bottom-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-left{
|
||||
border-bottom-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
.border-right{
|
||||
border-right:1px solid #CAD5E0;
|
||||
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left:1px solid #CAD5E0;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom { border-bottom:1px solid #CAD5E0}
|
||||
.border-top { border-top:1px solid #CAD5E0}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* This file styles the footer of the page
|
||||
*/
|
||||
|
||||
.footer {
|
||||
text-align:center;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap:4px;
|
||||
padding:8px;
|
||||
font-size:12px;
|
||||
color:black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.8); */
|
||||
|
||||
grid-column: 1 /span 2;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.main .header { display:grid; grid-template-columns:64px auto; gap:4px}
|
||||
.main .header .title {font-size:28px; font-weight:bold}
|
||||
.main .header img {width:55px; height:55px;}
|
||||
@ -0,0 +1,22 @@
|
||||
|
||||
|
||||
.main {
|
||||
height:98vh; display:grid; grid-template-columns:70% auto; gap:4px;
|
||||
grid-template-rows:70px 40px auto 32px;
|
||||
padding-left:2%; padding-right:2%;
|
||||
line-height: 1.5; font-size:16px; font-family: sans-serif; font-weight:lighter;
|
||||
}
|
||||
.main .content{
|
||||
align-self:center;
|
||||
}
|
||||
.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;}
|
||||
.bold {font-weight:bold}
|
||||
.small-text {font-size:12px; font-weight:lighter; color :#000000;}
|
||||
.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
|
||||
.active:hover {border-bottom-color: #4682b4;}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
.large-text {font-weight:bold; font-size:28px;}
|
||||
|
||||
@ -0,0 +1,78 @@
|
||||
.menu {
|
||||
padding:8px;
|
||||
border:1px solid #CAD5E0 ;
|
||||
|
||||
display:grid;
|
||||
grid-column: 1 / span 2;
|
||||
grid-template-columns: 92px repeat(7,auto);
|
||||
gap:4px;
|
||||
text-transform: capitalize;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.menu .icon {padding:4px;}
|
||||
.menu .icon img {width:30px; height:30px;}
|
||||
.menu .item {
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
padding:4px;
|
||||
text-align: left;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu .sub-menu {
|
||||
|
||||
display:none;
|
||||
position:absolute;
|
||||
|
||||
margin-top:2px;
|
||||
min-width:10%;
|
||||
z-index:90;
|
||||
padding:8px;
|
||||
font-weight:lighter;
|
||||
text-align:left;
|
||||
align-items:left;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
|
||||
}
|
||||
|
||||
.menu .item:hover .sub-menu{
|
||||
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
.main .pane { height:auto;}
|
||||
.main .pane iframe{ width:100%; border:0px; height:80%;}
|
||||
@ -0,0 +1,36 @@
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.main {
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-rows: 70px auto 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .pane {
|
||||
border-left: none;
|
||||
border-top: 1px solid #CAD5E0;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.main {
|
||||
padding: 5%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.large-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
.border {
|
||||
border:1px solid #CAD5E0 ;
|
||||
}
|
||||
.border-round {
|
||||
padding:6px;
|
||||
border-radius:8px;
|
||||
}
|
||||
.border-round-top-left{
|
||||
border-top-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-top-right{
|
||||
border-top-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-right{
|
||||
border-bottom-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-left{
|
||||
border-bottom-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
.border-right{
|
||||
border-right:1px solid #CAD5E0;
|
||||
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left:1px solid #CAD5E0;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom { border-bottom:1px solid #CAD5E0}
|
||||
.border-top { border-top:1px solid #CAD5E0}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* This file styles the footer of the page
|
||||
*/
|
||||
|
||||
.footer {
|
||||
text-align:center;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap:4px;
|
||||
padding:8px;
|
||||
font-size:12px;
|
||||
color:black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.8); */
|
||||
|
||||
grid-column: 1 /span 2;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.main .header { display:grid; grid-template-columns:64px auto; gap:4px}
|
||||
.main .header .title {font-size:28px; font-weight:bold}
|
||||
.main .header img {width:55px; height:55px;}
|
||||
@ -0,0 +1,37 @@
|
||||
/**
|
||||
* This is the default window and we will have to hide the pane (side)
|
||||
*/
|
||||
body {line-height: 1.5; font-weight:lighter; font-family:sans-serif;}
|
||||
.main {height:98vh; display:grid; grid-template-columns:65% 35%; gap:4px;
|
||||
grid-template-rows:70px 40px auto 32px;
|
||||
padding-left:2%; padding-right:2%;
|
||||
}
|
||||
.main .header { display:grid; grid-template-columns:64px auto; gap:4px; align-items: center;}
|
||||
.main .header .title {font-size:28px; font-weight:bold}
|
||||
.main .header img {width:80px; height:80px;}
|
||||
.main .index{
|
||||
align-self:center;
|
||||
padding:8px;
|
||||
}
|
||||
.main .menu {border:1px solid transparent; background-color:#f3f3f3;}
|
||||
.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px; line-height:1.5; font-size: 14px;}
|
||||
|
||||
|
||||
.search-box {display:block; grid-template-columns: none;}
|
||||
|
||||
|
||||
|
||||
|
||||
.main .content{
|
||||
align-self:center;
|
||||
}
|
||||
.bold {font-weight:bold}
|
||||
.small-text {font-size:12px; font-weight:lighter; color :#000000;}
|
||||
.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
|
||||
.active:hover {border-bottom-color: #4682b4;}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
.large-text {font-weight:bold; font-size:28px;}
|
||||
|
||||
@ -0,0 +1,110 @@
|
||||
.menu {
|
||||
padding:8px;
|
||||
border:1px solid #CAD5E0 ;
|
||||
|
||||
display:grid;
|
||||
grid-column: 1 / span 2;
|
||||
grid-template-columns: 92px repeat(7,auto);
|
||||
gap:4px;
|
||||
text-transform: capitalize;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.menu .icon {padding:4px;}
|
||||
.menu .icon img {width:30px; height:30px;}
|
||||
.menu .item {
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
padding:4px;
|
||||
text-align: left;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu .sub-menu {
|
||||
|
||||
display:none;
|
||||
position:absolute;
|
||||
|
||||
margin-top:2px;
|
||||
min-width:10%;
|
||||
z-index:90;
|
||||
padding:8px;
|
||||
font-weight:lighter;
|
||||
text-align:left;
|
||||
align-items:left;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
|
||||
}
|
||||
|
||||
.menu .item:hover .sub-menu{
|
||||
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
.main .pane {display:block;}
|
||||
/* .main .pane div:first-child {margin-top:4px; background-color:#f3f3f3; border-radius: 8px; padding:8px; min-height:150px} */
|
||||
@ -0,0 +1,36 @@
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.main {
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-rows: 70px auto 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .pane {
|
||||
border-left: none;
|
||||
border-top: 1px solid #CAD5E0;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.main {
|
||||
padding: 5%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.large-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
.border {
|
||||
border:1px solid #CAD5E0 ;
|
||||
}
|
||||
.border-round {
|
||||
padding:6px;
|
||||
border-radius:8px;
|
||||
}
|
||||
.border-round-top-left{
|
||||
border-top-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-top-right{
|
||||
border-top-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-right{
|
||||
border-bottom-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-left{
|
||||
border-bottom-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
.border-right{
|
||||
border-right:3px dotted #CAD5E0;
|
||||
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left:3px dotted gray;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom { border-bottom:1px dotted gray;}
|
||||
.border-top { border-top:3px dotted gray;}
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* This file styles the footer of the page
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* .main .footer { grid-column: 1 / span 2; font-size:13px; font-weight: lighter; padding:8px;} */
|
||||
.footer {
|
||||
text-align:center;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap:4px;
|
||||
padding:8px;
|
||||
font-size:12px;
|
||||
color:black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.8); */
|
||||
|
||||
grid-column: 1 /span 2;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
.main .header {
|
||||
|
||||
grid-row:1;
|
||||
grid-column: 1 / span 2;
|
||||
display:grid;
|
||||
grid-template-columns: 50px auto; gap:4px;
|
||||
line-height: 1;
|
||||
|
||||
|
||||
}
|
||||
.main .header .title {font-size:28px; text-transform: capitalize; font-weight:bold}
|
||||
.main .header .subtitle {font-size:14px}
|
||||
.main .header img { width:44px; height:44px;}
|
||||
@ -0,0 +1,55 @@
|
||||
.main {
|
||||
margin:10px;
|
||||
padding:4px;
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50% ; gap:4px;
|
||||
grid-template-rows: 48px 64px auto 32px;
|
||||
font-family: sans-serif;
|
||||
font-weight: lighter;
|
||||
font-size:18px;
|
||||
line-height: 1.5;
|
||||
justify-items: normal;
|
||||
;
|
||||
height:96vh;
|
||||
}
|
||||
.main .content {
|
||||
grid-row:3;
|
||||
grid-column: 1 ;
|
||||
text-wrap: wrap;
|
||||
height:100%;
|
||||
display:grid;
|
||||
align-content: start;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.main .content #index {
|
||||
text-align: left;
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top:22px;
|
||||
}
|
||||
table {
|
||||
width:99%;
|
||||
border: 1px solid #CAD5E0;
|
||||
}
|
||||
table td {padding:4px; margin:4px;}
|
||||
table thead {
|
||||
|
||||
font-weight:bold;
|
||||
background-color:#f3f3f3;
|
||||
}
|
||||
|
||||
.bold {font-weight:bold}
|
||||
.small-text {font-size:12px; font-weight:lighter; color :#000000;}
|
||||
.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
|
||||
.active:hover {border-bottom-color: #4682b4;}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
.large-text {font-weight:bold; font-size:28px;}
|
||||
|
||||
@ -0,0 +1,110 @@
|
||||
.menu {
|
||||
padding:8px;
|
||||
border-bottom:3px dotted gray ;
|
||||
|
||||
display:grid;
|
||||
grid-column: 1 / span 2;
|
||||
grid-template-columns: 92px repeat(7,auto);
|
||||
gap:4px;
|
||||
text-transform: capitalize;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.menu .icon {padding:4px;}
|
||||
.menu .icon img {width:30px; height:30px;}
|
||||
.menu .item {
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
padding:4px;
|
||||
text-align: left;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu .sub-menu {
|
||||
|
||||
display:none;
|
||||
position:absolute;
|
||||
|
||||
margin-top:2px;
|
||||
min-width:10%;
|
||||
z-index:90;
|
||||
padding:8px;
|
||||
font-weight:lighter;
|
||||
text-align:left;
|
||||
align-items:left;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
|
||||
}
|
||||
|
||||
.menu .item:hover .sub-menu{
|
||||
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
.main .pane {
|
||||
border-left:3px dotted gray;
|
||||
grid-column: 2;
|
||||
font-family: sans-serif;
|
||||
padding-left: 10px;
|
||||
|
||||
|
||||
}
|
||||
.pane iframe {
|
||||
border:1px solid transparent;
|
||||
width:99%;
|
||||
height:100%;
|
||||
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.main {
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-rows: 70px auto 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .pane {
|
||||
border-left: none;
|
||||
border-top: 1px solid #CAD5E0;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.main {
|
||||
padding: 5%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.large-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
.border {
|
||||
border:1px solid #CAD5E0 ;
|
||||
}
|
||||
.border-round {
|
||||
padding:6px;
|
||||
border-radius:8px;
|
||||
}
|
||||
.border-round-top-left{
|
||||
border-top-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-top-right{
|
||||
border-top-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-right{
|
||||
border-bottom-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-left{
|
||||
border-bottom-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
.border-right{
|
||||
border-right:1px solid #CAD5E0;
|
||||
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left:1px solid #CAD5E0;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom { border-bottom:1px solid #CAD5E0}
|
||||
.border-top { border-top:1px solid #CAD5E0}
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
/**
|
||||
* This file styles the footer of the page
|
||||
*/
|
||||
|
||||
.footer {
|
||||
grid-row:5;
|
||||
margin-top:10px;
|
||||
text-align:center;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap:4px;
|
||||
padding:8px;
|
||||
font-size:12px;
|
||||
color:black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.8);
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
.main .header {display:grid; grid-template-columns:64px auto; gap:4px; width:100%; align-items:center;}
|
||||
.main .header .icon {width:64px; height:64px;}
|
||||
.main .header .icon img {width:64px; height:64px;}
|
||||
|
||||
.main .header .title { font-size:32px; text-transform: uppercase; font-weight:bold}
|
||||
.main .header .subtitle {font-style:italic;font-size:14px; color:gray; text-transform: capitalize;}
|
||||
|
||||
@ -0,0 +1,50 @@
|
||||
/**
|
||||
* This file implements theme Open Source Software, the expectation is just a pager that presents a tool/software
|
||||
*/
|
||||
body, ul, p, select {
|
||||
font-size: 16px;
|
||||
font-weight:lighter;
|
||||
font-family:sans-serif;
|
||||
line-height:1.5;
|
||||
|
||||
}
|
||||
.main {
|
||||
display:grid;
|
||||
grid-template-columns: 100%;;
|
||||
margin:1%;
|
||||
margin-left:10%;
|
||||
margin-right:10%;
|
||||
gap:4px;
|
||||
height:90%;
|
||||
width:80%;
|
||||
}
|
||||
.main .content{
|
||||
|
||||
grid-row:4;
|
||||
align-self:center;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.main .content .banner {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height:200px;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
display: grid;
|
||||
|
||||
}
|
||||
|
||||
/* .main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;} */
|
||||
.bold {font-weight:bold}
|
||||
.small-text {font-size:12px; font-weight:lighter; color :#000000;}
|
||||
.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
|
||||
.active:hover {border-bottom-color: #4682b4;}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
.large-text {font-weight:bold; font-size:28px;}
|
||||
|
||||
@ -0,0 +1,82 @@
|
||||
|
||||
.menu .icon {padding:4px; align-items:center; display:grid;}
|
||||
.menu .icon img {width:30px; height:30px;}
|
||||
|
||||
.main .menu .sub-menu {
|
||||
|
||||
display:none;
|
||||
position:absolute;
|
||||
|
||||
margin-top:2px;
|
||||
min-width:10%;
|
||||
z-index:90;
|
||||
padding:8px;
|
||||
font-weight:lighter;
|
||||
text-align:left;
|
||||
align-items:left;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
|
||||
}
|
||||
.main .menu .item {
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
padding:4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.main .menu .item:hover .sub-menu{
|
||||
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.main .menu {
|
||||
padding:8px;
|
||||
grid-row:2;
|
||||
width:100%;
|
||||
display:none;
|
||||
|
||||
/* grid-row:2; grid-column:1 ; */
|
||||
grid-template-columns: 92px repeat(7,auto);
|
||||
gap:4px;
|
||||
text-transform: capitalize;
|
||||
border:0; height:48px; padding:0px;
|
||||
display:grid; grid-template:64px repeat(6,1fr); gap:4px;
|
||||
/* background-color: #f3f3f3; */
|
||||
align-items: center;
|
||||
}
|
||||
.main .menu .icon .button {
|
||||
border:1px solid #CAD5E0; border-radius:8px; padding:2px;
|
||||
;
|
||||
}
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.main .pane {display:block}
|
||||
@ -0,0 +1,36 @@
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.main {
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-rows: 70px auto 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .pane {
|
||||
border-left: none;
|
||||
border-top: 1px solid #CAD5E0;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.main {
|
||||
padding: 5%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.large-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
.border {
|
||||
border:1px solid #CAD5E0 ;
|
||||
}
|
||||
.border-round {
|
||||
padding:6px;
|
||||
border-radius:8px;
|
||||
}
|
||||
.border-round-top-left{
|
||||
border-top-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-top-right{
|
||||
border-top-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-right{
|
||||
border-bottom-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-left{
|
||||
border-bottom-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
.border-right{
|
||||
border-right:1px solid #CAD5E0;
|
||||
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left:1px solid #CAD5E0;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom { border-bottom:1px solid #CAD5E0}
|
||||
.border-top { border-top:1px solid #CAD5E0}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* This file styles the footer of the page
|
||||
*/
|
||||
|
||||
.footer {
|
||||
text-align:center;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap:4px;
|
||||
padding:8px;
|
||||
font-size:12px;
|
||||
color:black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.8); */
|
||||
|
||||
grid-column: 1 /span 2;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.main .header { display:grid; grid-template-columns:64px auto; gap:4px}
|
||||
.main .header .title {font-size:28px; font-weight:bold}
|
||||
.main .header img {width:55px; height:55px;}
|
||||
@ -0,0 +1,22 @@
|
||||
|
||||
|
||||
.main {
|
||||
height:98vh; display:grid; grid-template-columns:70% auto; gap:4px;
|
||||
grid-template-rows:70px 40px auto 32px;
|
||||
padding-left:2%; padding-right:2%;
|
||||
line-height: 1.5; font-size:16px; font-family: sans-serif; font-weight:lighter;
|
||||
}
|
||||
.main .content{
|
||||
align-self:center;
|
||||
}
|
||||
.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;}
|
||||
.bold {font-weight:bold}
|
||||
.small-text {font-size:12px; font-weight:lighter; color :#000000;}
|
||||
.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
|
||||
.active:hover {border-bottom-color: #4682b4;}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
.large-text {font-weight:bold; font-size:28px;}
|
||||
|
||||
@ -0,0 +1,79 @@
|
||||
.menu {
|
||||
padding:8px;
|
||||
border:1px solid #CAD5E0 ;
|
||||
|
||||
display:grid;
|
||||
grid-column: 1 / span 2;
|
||||
grid-template-columns: 92px repeat(7,auto);
|
||||
gap:4px;
|
||||
text-transform: capitalize;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.menu .icon {padding:4px;}
|
||||
.menu .icon img {width:30px; height:30px;}
|
||||
.menu .item {
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
padding:4px;
|
||||
text-align: left;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu .sub-menu {
|
||||
|
||||
display:none;
|
||||
position:absolute;
|
||||
|
||||
margin-top:2px;
|
||||
min-width:10%;
|
||||
z-index:90;
|
||||
padding:8px;
|
||||
font-weight:lighter;
|
||||
text-align:left;
|
||||
align-items:left;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
|
||||
}
|
||||
|
||||
.menu .item:hover .sub-menu{
|
||||
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.main {
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-rows: 70px auto 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .pane {
|
||||
border-left: none;
|
||||
border-top: 1px solid #CAD5E0;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.main {
|
||||
padding: 5%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.large-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
"""
|
||||
|
||||
"""
|
||||
import os
|
||||
import cms
|
||||
|
||||
def _getPath(_config):
|
||||
_layout = _config['layout']
|
||||
path = os.sep.join([_layout['location'],_layout['root'],'_assets','themes'])
|
||||
return path
|
||||
@cms.Plugin(mimetype='application/json')
|
||||
def List (**_args) :
|
||||
"""
|
||||
This will list available css themes we have on disk
|
||||
"""
|
||||
_rq = _args['request']
|
||||
_config = _args['config']
|
||||
path = _getPath(_config) #os.sep.join([_config['layout']['location'],_config['layout']['root'],'_assets','themes'])
|
||||
|
||||
return os.listdir(path)
|
||||
def register ():
|
||||
"""
|
||||
Registering
|
||||
"""
|
||||
pass
|
||||
def Get (**_args):
|
||||
_request = _args['request']
|
||||
_config = _args['config']
|
||||
print (_request.args['theme'])
|
||||
_theme = 'default' if 'theme' not in _request.args else _request.args['theme']
|
||||
path = os.sep.join([_getPath(_config),_theme])
|
||||
files = os.listdir(path)
|
||||
_out = {}
|
||||
for file in files :
|
||||
f = open (os.sep.join([path,file]))
|
||||
_out[file.split('.')[0]] = f.read()
|
||||
f.close()
|
||||
return {_theme:_out},"application/json"
|
||||
@ -0,0 +1,13 @@
|
||||
<style>
|
||||
.fa-check {color:green}
|
||||
</style>
|
||||
<img src="www/content/_assets/images/logo.png" align="left" style="width:150px"> <br>
|
||||
<div>
|
||||
|
||||
<b>QCMS</b> is a python/flask based Content Management System
|
||||
<ul>
|
||||
<br><i class="fa-solid fa-check"></i> Open-source under MIT license
|
||||
<br><i class="fa-solid fa-check"></i> Designed and build by <br>Steve L. Nyemba <i class="fa-solid fa-quote-left"></i> steve@the-phi.com <i class="fa-solid fa-quote-right"></i>
|
||||
|
||||
</ul></div>
|
||||
<br>
|
||||
@ -0,0 +1,8 @@
|
||||
Copyright 2010 - 2024, Steve L. Nyemba
|
||||
|
||||
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.
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
### Build plugins
|
||||
A plugin is a basic <b>python</b> function that takes positional arguments i.e one being <b>request</b> and the other <b>config</b>. We allow the function to have access to the request object (if data were submitted) and to QCMS configuration if any configuration data is needed.
|
||||
|
||||
|
||||
<div class="source-code editor border">
|
||||
<span class="code-comment"># saving this function to www/html/_plugins/myplugins.py</span>
|
||||
<span class="code-comment">#</span>
|
||||
<span class="keyword">import</span> numpy as np
|
||||
<span class="keyword">import</span> cms
|
||||
|
||||
@cms.Plugin(mimetype="application/json", methods=["POST"])
|
||||
<span class="keyword">def</span> demo(**_args):
|
||||
req = _args['request']
|
||||
conf= _args['config']
|
||||
<span class="keyword">return</span> {"name":"foo","age":np.random.randint(0,100)}
|
||||
</div>
|
||||
|
||||
### Register Plugin
|
||||
|
||||
Once a plugin is build it needs to be registered, in order to allow the function be made available to calling code (JS/HTML5)
|
||||
|
||||
<div class="source-code">
|
||||
$ qcms plugin-register qcms-manifest.json myplugins.py --import demo
|
||||
</div>
|
||||
|
||||
Calling the registered function as an API. The example uses <b>curl</ba>
|
||||
<div class="source-code">
|
||||
$ curl http://localhost:8000/api/myplugins/demo
|
||||
</div>
|
||||
|
||||
### Limitations
|
||||
|
||||
**QCMS** lowers the barrier to entry and makes the following tradeoffs to deliver an optimal solution:
|
||||
<ul>
|
||||
<i class="fa-solid fa-minus"></i> Plugins are basic python function that need to be registered with <b>QCMS</b> instance/site
|
||||
<br><i class="fa-solid fa-minus"></i> We delegate access control (read/write) to web content to a cloud service provider (nextcloud for now).
|
||||
</ul>
|
||||
@ -0,0 +1,49 @@
|
||||
Themes consist of basic **css** located in **www/html/_assets/themes**. The css folder names represent the themes.
|
||||
Each folder should have the following files :
|
||||
<div class="border border-round" style="display:grid; grid-template-columns:auto auto; gap:4px; width:96%; text-transform:capitalize">
|
||||
<div class="bold border-bottom" style="background-color:#f3f3f3; padding:4px;">Files (.css extensions)</div><div class="border-bottom bold" style="background-color:#f3f3f3; padding:4px;">Description</div>
|
||||
<div>borders</div><div> styling of borders (top,bottom,right,left,round)</div>
|
||||
<div>footer</div><div>styling the footer</div>
|
||||
<div>header</div><div>styling the footer</div>
|
||||
<div>layout</div><div>The general layout for a site and how to organize different panes</div>
|
||||
<div>menu</div><div>styling the menu</div>
|
||||
<div>pane</div><div>styling secondary pane, it's position and visibility depends on the theme</div>
|
||||
</div>
|
||||
|
||||
### Setup themes
|
||||
|
||||
**QCMS** CLI interface allows to query the backend to determine available themes, in three simple phases described below
|
||||
|
||||
<div class="source-code">
|
||||
#1. Listing available themes<br>
|
||||
$ qcms list-themes
|
||||
</div>
|
||||
|
||||
<div class="source-code">#2. Selecting and applying theme<br>
|
||||
$ qcms set-theme magazine</div>
|
||||
|
||||
<div class="source-code"># Verifying themes set<br>$ ls www/html/_assets/themes </div>
|
||||
|
||||
|
||||
### Custom Themes
|
||||
|
||||
**QCMS** supports custom themes or user-defined themes. Build custom theme manually in three simple steps:
|
||||
|
||||
<div class="source-code">
|
||||
# 1. copy default theme to new folder (www/html/_assets/theme/mytheme)<br>
|
||||
$ cp -r www/html/_assets/themes/default www/html/_assets/themes/mytheme
|
||||
</div>
|
||||
|
||||
<div class="source-code">
|
||||
# 2. update configuration file to enable configuration<br>
|
||||
{
|
||||
"system":{
|
||||
"theme":"mytheme"
|
||||
...
|
||||
}
|
||||
}</div>
|
||||
|
||||
<div class="source-code">
|
||||
# 3. set the theme and reload the your app (from the app folder)<br>
|
||||
$ qcms set-theme magazine
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
### Build plugins
|
||||
A plugin is a basic <b>python</b> function that takes positional arguments i.e one being <b>request</b> and the other <b>config</b>. We allow the function to have access to the request object (if data were submitted) and to QCMS configuration if any configuration data is needed.
|
||||
|
||||
|
||||
<div class="source-code editor">
|
||||
<span class="keyword">import</span> numpy as np
|
||||
|
||||
<span class="keyword">def</span> demo(**_args):
|
||||
req = _args['request']
|
||||
conf= _args['config']
|
||||
<span class="keyword">return</span> {"name":"foo","age":np.random.randint(0,100)}
|
||||
</div>
|
||||
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
<div>
|
||||
<img src="www/content/_assets/images/logo.png" align="left" style="width:250px;">
|
||||
<h3>What is QCMS ?</h3>
|
||||
<i class="fa-solid fa-minus"> </i> Fast lightweight Python/Flask CMS designed for engineers
|
||||
<br><i class="fa-solid fa-minus"> </i> Builds a web site from folder structure (local or nextcloud)
|
||||
<br><i class="fa-solid fa-minus"> </i> Supports industry standard frameworks
|
||||
<div style="margin-left:60px; font-size:13px;">
|
||||
<i class="fa-solid fa-circle" style="font-size:5px; margin-left:10px;"> </i> JQuery, Apexcharts, fontawesome
|
||||
<br><i class="fa-solid fa-circle" style="font-size:5px; margin-left:10px;"> </i> Numpy, Pandas, flask
|
||||
</div>
|
||||
<i class="fa-solid fa-minus"> </i> Custom functions built & registered as API
|
||||
<br><i class="fa-solid fa-minus"> </i> Extensible themes support (mostly css)
|
||||
</div>
|
||||
<br>
|
||||
<div >
|
||||
<div style="width:60%; margin-left:20%;" class="border-top"></div>
|
||||
<p>
|
||||
<h3>Why use QCMS</h3>
|
||||
<img src="www/content/_assets/images/logo-1.png" align="right" style="width:250px">
|
||||
<div>
|
||||
<b>QCMS</b> lowers the barrier of entry to building a site
|
||||
<br><i class="fa-solid fa-minus"></i> It is open-source and available under MIT license
|
||||
<br><i class="fa-solid fa-minus"></i> Removing user administration overhead:smaller footprint & efficiency
|
||||
<br><i class="fa-solid fa-minus"></i> Using basic knowledge of how documents are organized on disk or in the cloud.
|
||||
<div style="margin-left:30px">
|
||||
<i class="fa-solid fa-circle" style="font-size:5px"></i> <b>Markdown</b> rendering for non-technical users (using an editor).
|
||||
<br><i class="fa-solid fa-circle" style="font-size:5px"></i> <b>HTML5</b> rendering for more advanced users
|
||||
<br><i class="fa-solid fa-circle" style="font-size:5px"></i> Suitable to deploy multiple sites on an <b>AWS</b> micro/nano instance
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<div style="width:65%; margin-left:20%;" class="border-top"></div>
|
||||
<h3>Use Cases</h3>
|
||||
<img src="www/content/_assets/images/usecase.png" align="left" style="width:40%; margin-right:1%">
|
||||
<div>
|
||||
<b>QCMS</b>, implements a separation of concerns between <b>web engineer</b> and the <b>content creator</b> with the least amount of friction
|
||||
<br>Ideally the roles would look like
|
||||
<ul>
|
||||
<i class="fa-solid fa-minus"></i> The <b>Web Engineers,</b> will setup virtualenv; setup port, install themes, makes sure sure content is accessible. Optionally can make content.
|
||||
<br><i class="fa-solid fa-minus"></i> The <b>Content Creator</b>, writes up files and uploads images ...
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,120 @@
|
||||
<style>
|
||||
|
||||
.oss .quick-install {
|
||||
/* display:grid; grid-template-columns: 210px auto 210px;; gap:2px; align-items:center */
|
||||
}
|
||||
.oss .quick-install .active {display:block}
|
||||
.snippet {display:block; height:155px; margin:4px;}
|
||||
.snippet-frame {height: 155px; overflow:hidden;}
|
||||
</style>
|
||||
<script>
|
||||
$(document).ready(()=>{
|
||||
var _layout = {on:{load:{}}}
|
||||
_layout.on.load.copyright = ['about/copyright.html']
|
||||
qcms.page.loader(_layout)
|
||||
|
||||
})
|
||||
</script>
|
||||
<div class="tabs">
|
||||
|
||||
<input type="radio" checked name="qstart" id="install"/>
|
||||
<label for="install" class="border-round-top-left" onclick="$('.snippet-scroll-frame').animate({'margin-top':0})">Installation</label>
|
||||
|
||||
<input type="radio" name="qstart" id="project"/>
|
||||
<label for="project" onclick="$('.snippet-scroll-frame').animate({'margin-top':-155})">Create Project</label>
|
||||
<!-- <input type="radio" name="qstart" disable id="extra" disabled/>
|
||||
<label for="extra" class="border-round-top-right" style="grid-column: 3 / span 6;"> </label> -->
|
||||
<div align="right" class="border-round-top-right border-bottom" style="grid-column:3 / span 6; background-color: #f3f3f3;">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="snippet-frame border-right border-left border-bottom" style="margin:4px; margin-top:0px; padding:8px;">
|
||||
<div class="snippet-scroll-frame">
|
||||
<div class="snippet quick-install" >
|
||||
<div>
|
||||
<div class="source-code">
|
||||
# install using virtualenv <br>
|
||||
$ pip install --upgrade git+https://dev.the-phi.com/git/qcms/cms
|
||||
</div>
|
||||
<div class="source-code" style="margin-top:4px;">
|
||||
# explore qcms commands and try them <br>
|
||||
$ qcms --help
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="snippet quick-start">
|
||||
<div>
|
||||
<div class="source-code">#creating a sample project with title and sample title <br>$ qcms create myproject www/html --title mydemo --subtitle "flask cms demo"</div>
|
||||
<div class="source-code" style="margin-top:2px;">#bootup the newly created site<br>$ qcms bootup ./myproject/qcms-manifest.json</div>
|
||||
<br> <div class="small-text"><i class="fa-solid fa-minus"></i> Open your browser on port http://localhost:8084</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p>
|
||||
<ul>
|
||||
<p>
|
||||
</p>
|
||||
<h3>Source code & License</h3>
|
||||
<b>{{layout.header.title}}</b>, is Open-source under MIT License, we welcome you to get a copy of the source code on github
|
||||
<p>
|
||||
<h3>Copyright</h3>
|
||||
<br>
|
||||
<div id="copyright"></div>
|
||||
|
||||
</p>
|
||||
</ul>
|
||||
</p>
|
||||
<!-- <div class="readme">
|
||||
<p id="qstart">
|
||||
<h3>Quick Start</h3>
|
||||
<div class="quick-install" style="">
|
||||
<div align="center" class="active" onclick="window.location.href='#project'">
|
||||
<img src="www/content/_assets/images/logo-1.png" style="width:125px; display:none">
|
||||
<i class="fa-solid fa-down-long fa-bounce" style="font-size:32px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="source-code">
|
||||
# install using virtualenv <br>
|
||||
$ pip install --upgrade git+https://dev.the-phi.com/git/qcms/cms
|
||||
</div>
|
||||
<div class="source-code" style="margin-top:4px;">
|
||||
# explore qcms commands and try them <br>
|
||||
$ qcms --help
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="sticker">
|
||||
<img src="www/content/_assets/images/logo.png" style="width:125px">
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<p id="project">
|
||||
|
||||
<h3>First Project</h3>
|
||||
<div class="quick-install">
|
||||
<div class="sticker" align="center">
|
||||
<i class="fa-solid fa-cog fa-spin" style="font-size:48px; color:#4682B4;"></i>
|
||||
<i class="fa-solid fa-cog fa-spin" style="font-size:32px; color:#F65000; margin-left:-10px"></i>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="source-code">#creating a sample project with title and sample title <br>$ qcms create myproject www/html --title mydemo --subtitle "flask cms demo"</div>
|
||||
<div class="source-code" style="margin-top:2px;">#bootup the newly created site<br>$ qcms bootup ./myproject/qcms-manifest.json</div>
|
||||
|
||||
</div>
|
||||
<div align="center" class="active" onclick="window.location.href='#qstart'">
|
||||
<i class="fa-solid fa-up-long fa-bounce" style="font-size:32px;"></i>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><div align="center" class="small-text"><i class="fa-solid fa-minus" style="margin-left:20px"> </i> Open your browser and go to https://localhost:8084/</div>
|
||||
</p>
|
||||
</div> -->
|
||||
Loading…
Reference in new issue