@nebularstreams/statify 3.0.0

package/src.website/src.widgets/widgets.market/widgets/market/css/market.css

@@ -0,0 +1,394 @@
+.market {
+    line-height: 1.25;
+}
+
+.market .avatar {
+    border: solid 1px var(--border-color);
+    border-radius: 1000rem;
+}
+
+.market .image {
+    background: var(--placeholder);
+    background-size: cover;
+    background-position: center;
+}
+
+.market .toolbar > button {
+    font-variant: inherit;
+}
+
+.market .templatestories li {
+    height: fit-content;
+}
+
+.market .templatestories .inner:before {
+    content: "FREE !";
+    background: var(--accent);
+    color: var(--text-over-accent);
+    text-align: center;
+    transform: rotate(-45deg);
+    position: absolute;
+    font-size: 0.5rem;
+    padding: 0 2rem;
+    transform-origin: right;
+    left: -2.5rem;
+    top: -1rem;
+    z-index: 100000;
+}
+
+.market .templatestories {
+    align-content: flex-start;
+    padding-top: 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.market .image.asp169:before {
+    padding-top: 56.25%;
+    content: "";
+    display: block;
+}
+
+.market nav > .title {
+    font-weight: bold;
+}
+
+.market .toolbar {
+    z-index: 10000;
+}
+
+/*
+.market .graytrx {
+    filter: grayscale(1);
+    transition: filter 1s ease-in-out;
+}
+
+.market .graytrx:hover {
+    filter: grayscale(0);
+}
+*/
+.market .graytrx {
+    position: relative;
+    border-radius: 0.25rem;
+}
+
+.market .buttoncontainer button, .market .buttoncontainer a {
+    margin: 0;
+    border: 0 !important;
+}
+
+.market a.button {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.market a.button-accent {
+    background-color: var(--accent);
+    color: var(--text-over-accent) !important;
+    text-align: center;
+    border-radius: 1rem;
+    box-shadow: 0 0 2px var(--shadow-color);
+    transition: all 0.25s linear;
+}
+
+.market .attribution {
+}
+
+.market .coverimage {
+    border-bottom: solid 1px var(--border-color);
+}
+
+.market .tag {
+    background: var(--accent-light);
+    color: var(--text);
+    border-radius: 3rem;
+    padding: 0.25rem 0.5rem;
+    margin: 0.25rem;
+    text-align: center;
+    cursor: pointer;
+    border: solid 1px var(--border-color);
+    font-variant: all-small-caps;
+}
+
+.market .liclist li {
+    max-width: initial;
+    list-style-type: none;
+    font-size: .6rem;
+    padding: 0.25rem;
+    color: var(--text-lo);
+    min-width: 200px;
+    flex-grow: 1;
+    margin: 0.1rem 0;
+}
+
+.market .liclist .icon {
+    flex-shrink: 0;
+    font-size: 1rem;
+    text-align: center;
+    background: var(--accent);
+    color: var(--text-over-accent);
+    border-radius: 1000rem;
+    width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    margin-right: 0.5rem;
+}
+
+
+.market .maxcontainer {
+    height: fit-content;
+    flex-shrink: 0;
+}
+
+.max .titlestrip,
+.featured .titlestrip {
+    border-bottom: solid 1px var(--border-color);
+}
+
+.titlestrip .icon {
+    color: var(--border-color);
+}
+
+.descriptionstrip {
+    padding: 1rem;
+    border-bottom: solid 1px var(--border-color);
+    white-space: pre-wrap;
+}
+
+.market h2 {
+    margin-bottom: 0.5rem;
+}
+
+.market ol {
+    margin: 0.5rem 0;
+    padding-left: 2.25rem;
+    border-left: solid 0.5rem var(--accent);
+    padding-right: 1.5rem;
+}
+
+.market .liclist {
+    padding: 0 0.5rem;
+    border-left: solid 0.5rem var(--accent);
+}
+
+.market .templatemax {
+    height: max-content;
+    min-height: -webkit-fill-available;
+}
+
+.market .divimage {
+    transition: background 0.5s linear;
+}
+
+.market .divimage button {
+    top: 0;
+    border: 0;
+    background: transparent;
+    color: white;
+    font-size: 3rem;
+    text-shadow: 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black;
+}
+
+.market .minitag {
+    background: lightgray;
+    padding: 0 0.25rem;
+    border-radius: 100rem;
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+    margin-top: 0.15rem;
+    margin-left: -0.15rem;
+}
+
+.market .buttoncontainer a {
+    flex-direction: row;
+    align-items: center;
+    margin-right: 0.5rem;
+}
+
+.market .buttoncontainer button,
+.market .buttoncontainer a {
+    margin: 0;
+}
+
+.market .metric {
+    border: solid 1px var(--border-color);
+    margin: 0 0.25rem;
+    padding: 0 0.5rem;
+    border-radius: 1000rem;
+    background-color: var(--window-background);
+    font-size: 0.75rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.market .metric:after {
+    content: attr(data-num);
+    padding: 0 0.5rem;
+}
+
+.market .templateitem.max .metric:after {
+    content: attr(data-num) " " attr(data-metric);
+}
+
+.market .metric:before {
+    font-family: "Font Awesome 5 Free";
+}
+
+.market .thumbnail {
+    margin: 0.5rem;
+    width: 200px;
+    flex-grow: 1;
+    max-width: calc(50% - 1rem);
+    border-radius: 0.25rem;
+    position: relative;
+    overflow: hidden;
+}
+
+li.thumbnail.flexcol.error-loading-image {
+    display: none;
+}
+
+.market .thumbnail.current:before {
+    background: var(--accent);
+    color: var(--text-over-accent);
+}
+
+.scenes .thumbnail:after {
+    content: "scene";
+    background: white;
+    position: absolute;
+    bottom: 0;
+    font-variant: all-small-caps;
+    padding: 0 0.5rem;
+    border-top-right-radius: 0.5rem;
+    font-weight: bold;
+    color: black;
+}
+
+.templates .thumbnail:after {
+    content: "template";
+    background: darkmagenta;
+    position: absolute;
+    bottom: 0;
+    font-variant: all-small-caps;
+    padding: 0 0.5rem;
+    font-size: 1rem;
+    border-top-right-radius: 0.5rem;
+    font-weight: bold;
+    color: white;
+}
+
+/*
+.market .thumbnail:before {
+    transition: all 0.5s ease-in-out;
+    content: attr(title);
+    border: solid 1px var(--border-color);
+    padding: 0.5rem;
+    border-radius: 10000rem;
+    font-size: 0.6rem;
+    text-align: center;
+    margin-bottom: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: var(--window-background-lo);
+}
+*/
+
+.market ul > li.templateitem {
+    transition: all 0.2s ease-out;
+}
+
+.market .marketdetail {
+    place-content: flex-start;
+}
+
+.market ul > li.templateitem:active {
+    transform: scale(0.9);
+}
+
+.market .templateitem > .inner {
+    overflow: hidden;
+}
+
+.market .thumbnail img:active {
+    transform: scale(0.9);
+}
+
+.market .thumbnail img {
+    width: 100%;
+    border-radius: 0.25rem;
+    border: solid 1px var(--border-color);
+    transition: all 0.2s ease-out;
+}
+
+.market a {
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.market a:hover {
+    color: var(--accent);
+}
+
+
+.market a.button-accent:active {
+    transform: scale(0.97);
+}
+
+.market .buttoncontainer {
+    margin-bottom: 1rem;
+}
+
+.market .ytwrapper {
+    top: 0;
+}
+
+.market .nodownload {
+    font-weight: bold;
+    border: solid 1px;
+    padding: 1rem;
+}
+
+.market iframe {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+/*
+in-card
+.market .howto {
+    padding: 1rem;
+    border-radius: 1rem;
+    border: solid 1px var(--border-color);
+    background: var(--window-background-lo);
+}
+.market .attrib {
+    background: var(--window-background-hi);
+    padding: 1rem;
+    border-radius: 1rem;
+    margin: 0.5rem 0;
+    border: solid 1px var(--border-color);
+}
+*/
+
+.market .howto,
+.market .attrib {
+    padding: 0 0.5rem;
+}
+
+
+.market .diffdate:after {
+    padding: 0 0.5rem;
+    content: attr(data-computedtime);
+}
+
+.error-loading-image {
+    background: #550000;
+}
+
+.error-loading-image img {
+    display: none;
+}

package/src.website/src.widgets/widgets.market/widgets/market/css/notice.css

@@ -0,0 +1,6 @@
+.notihead {
+    background: var(--accent);
+    border-radius: 1rem;
+    color: white;
+    margin: 0.5rem;
+}

package/src.website/src.widgets/widgets.market/widgets/navibar/NaviBarWidget.mjs

@@ -0,0 +1,58 @@
+import m from "mithril";
+import {defineWidget, ButtonNew} from "@nebularstreams/libmui"
+
+import "./css/titlebar.css";
+import "./css/ui.navibar.css";
+
+import CdnModel from "../../../../src/core/cdnmodel.mjs";
+import {run} from "../../../../src/core.cookies/cookiemanager.mjs";
+import {get, set} from "../../../../src/support/persistsettings.mjs";
+
+const
+	{ platform } = CdnModel,
+	RES_LOGO_BANNER = "frontpage-over.png",
+	HOME = "/promo",
+	ENABLE = true;
+
+const
+	NaviBarWidget = defineWidget(
+		({ attrs, children }) => m(
+			"nav.flexrow.pad-h.noshrink" + (attrs.subbar ? ".subbar" : ""),
+			{
+				class: attrs.class || "shadow-2",
+				"aria-label": attrs.label || "Main Navigation"
+			},
+			attrs.subbar
+				? children
+				: [
+					m("img.unitsizesmall", {
+						alt: "Logo",
+						src: platform.resources(attrs.logo || RES_LOGO_BANNER),
+						onclick: () => m.route.set(attrs.homeLink || HOME)
+					}),
+					...children,
+					...ENABLE
+						? [
+							m(".grows"),
+							m(ButtonNew, {
+								onclick: () => run(true),
+								icon: "cookie",
+								"aria-label": "change cookie settings",
+								class: "unitsize marg-0 d-none with-nocookies noshrink scaff-left transbutton"
+							}),
+							m(ButtonNew, {
+								"aria-label": "dark or light skin",
+								class: "unitsize marg-0 noshrink transbutton scaff-left",
+								icon: get("skin") ? "sun" : "moon",
+								onClick: () => {
+									set("skin", !get("skin"));
+									m.redraw();
+								}
+							})
+						]
+						: []
+				]
+		)
+	);
+
+export default NaviBarWidget;

package/src.website/src.widgets/widgets.market/widgets/navibar/css/titlebar.css

@@ -0,0 +1,68 @@
+nav a {
+    color: inherit !important;
+    text-decoration: none;
+}
+
+nav a:hover {
+    text-decoration: underline;
+}
+
+nav.titlebar {
+    z-index: 1000;
+    align-items: center;
+    white-space: nowrap;
+    font-variant: all-small-caps;
+}
+
+nav.titlebar > * {
+    margin: 0 0.5rem;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+nav.titlebar .square {
+    flex-shrink: 0;
+    display: inline-block;
+    margin: 0;
+    padding: 0 1rem;
+    border-left: solid 1px var(--border-color);
+    height: var(--unitsize);
+    line-height: var(--unitsize);
+}
+
+nav.titlebar .inter,
+nav.titlebar .mute {
+    flex-shrink: 0;
+}
+
+nav.titlebar > .inter:after {
+    content: "\f0da";
+    font-family: "Font Awesome 5 Free";
+    padding-left: 1rem;
+}
+
+nav.titlebar > .sep {
+    padding: 0;
+    color: var(--text-lo);
+}
+
+.naviholder i {
+    line-height: inherit;
+}
+
+nav.autohide {
+    transition: opacity 0.5s linear;
+}
+
+.scrolltop nav.autohide {
+    opacity: 0;
+}
+
+nav .transbutton {
+    background: transparent;
+    border: 0;
+    color: var(--text);
+    cursor: pointer;
+    margin: 0;
+    border-left: solid 1px var(--border-color);
+}

package/src.website/src.widgets/widgets.market/widgets/navibar/css/ui.navibar.css

@@ -0,0 +1,28 @@
+
+nav.tab-menu.flexrow {
+
+    right: 0;
+    left: 0;
+    padding-left: 0.5rem;
+    box-shadow: 0 0 2px var(--shadow-color);
+}
+
+nav input {
+    border: 0;
+    border-radius: 2rem;
+    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+}
+
+nav.tab-menu > .tab-menu-item.selected-tab-item {
+    color: var(--accent);
+    border-radius: 10rem;
+    display: inline-block;
+}
+
+nav.subbar {
+    z-index: 100;
+    line-height: 2rem;
+    border-top: dashed 1px var(--border-color);
+    font-variant: all-small-caps;
+    height: 2rem;
+}

package/src.website/src.widgets/widgets.software/index.mjs

@@ -0,0 +1,9 @@
+import Download from "./widgets/DownloadWidget.mjs";
+import License from "./widgets/LicenseWidget.js";
+
+const WidgetLibrary =  {
+	Download,
+	License
+};
+
+export default WidgetLibrary;

package/src.website/src.widgets/widgets.software/widgets/BootStrapColumnWidget.mjs

@@ -0,0 +1,17 @@
+import m from "mithril";
+
+const
+	BootStrapColumnWidget = defineWidget(
+		({attrs, children}) => m(".container.flexcol",
+			{
+				class: attrs.class || "col-12"
+			},
+			[
+				m(".grows", {
+					class: (attrs.rows ? "flexrow" : "flexcol") + " " + (attrs.subclass || "")
+				}, children)
+			]
+		)
+	);
+
+export default BootStrapColumnWidget;