diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 00625a1..081b80d 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -4,25 +4,25 @@ on: push jobs: build: name: Build - + runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v2 + - name: Checkout + uses: actions/checkout@v2 + + - name: Set Node.js 12.x + uses: actions/setup-node@v1 + with: + node-version: 12.x + + - name: npm install + run: npm install - - name: Set Node.js 12.x - uses: actions/setup-node@v1 - with: - node-version: 12.x + - name: build + run: npm run package - - name: npm install - run: npm install - - - name: build - run: npm run package - - - uses: actions/upload-artifact@v2 - with: - name: App - path: build/bhacker-store.zip + - uses: actions/upload-artifact@v2 + with: + name: App + path: build/bhacker-store.zip diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml new file mode 100644 index 0000000..c65bba5 --- /dev/null +++ b/.github/workflows/prettier.yml @@ -0,0 +1,21 @@ +name: Prettier - Check Code Formatting +on: push + +jobs: + check-formatting: + name: Build + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v2 + + - name: Set Node.js 12.x + uses: actions/setup-node@v1 + with: + node-version: 12.x + + - name: npm install + run: npm install + + - name: check formatting + run: npm run formatting:test diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..a01e766 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,8 @@ + +**/jQuery-3.1.0.js +**/applait.finder.min.js +**/jquery.autocomplete.min.js +**/moments.min.js + +build +node_modules \ No newline at end of file diff --git a/LICENSE.md b/LICENSE.md index 7746711..2d9006e 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,4 +1,3 @@ - The MIT License (MIT) Copyright (c) 2020 John-David Deubl diff --git a/README.md b/README.md index 5e3d837..eb12e40 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -![logo](/images/logo.png) +![logo](/images/logo.png) ## bHacker-store @@ -6,47 +6,68 @@ An alternative app store by free developers for free devices. The database of apps is hosted [here](https://gitlab.com/banana-hackers/store-db/-/tree/master), further can be added by a pull request. ### Features -+ Install apps from the coders source +- Install apps from the coders source ![image-1](/images/image-1.png) ![image-2](/images/image-2.png) ![image-3](/images/image-3.png) ![image-4](/images/image-4.png) - - ### How to sideload the app on your device + ## Omni SD + Download [bHackerStore App](https://github.com/strukturart/kaiOs-alt-app-store/releases/download/0.5/bhacker-store.zip). Copy this zip file to the apps directory of the memory card. Open "OmniSD" and install this zip. - ## Web IDE -Download [bHackerStore App](https://github.com/strukturart/kaiOs-alt-app-store/releases/download/0.5/bhacker-store.zip). + +Download [bHackerStore App](https://github.com/strukturart/kaiOs-alt-app-store/releases/download/0.5/bhacker-store.zip). Extract this zip to a folder. Click "Open Packaged App" and select the folder from the previous step. Click "Install and Run" button. - ### Thank you -+ SimonLaux and the discord [community](https://discord.gg/t2CBPb) + +- SimonLaux and the discord [community](https://discord.gg/t2CBPb) ### to do offline version ## Donation + Buy Me A Coffee +## Contributing + +### Setup + +first install the dependencies + +```sh +npm install +``` ### Packaging This only works on linux(and maybe osx) at the moment + ```sh -npm i npm run package ``` -The resulting package can be found in the build folder. \ No newline at end of file +The resulting package can be found in the build folder. + +### Formatting + +This project uses code formatting. Make sure to run the formatter before commiting, otherwise the CI will be sad 😢. + +```sh +# check it +npm run formatting:test +# run the formatter +npm run formatting:fix +``` diff --git a/application/about.html b/application/about.html index 402934b..1c031dd 100644 --- a/application/about.html +++ b/application/about.html @@ -1,26 +1,72 @@ -

Privacy Policy and Terms of use

-

Your privacy is important to us, that's why we try to collect only the data that we need to provide the service to you.

-

Data that might get collected while using the app

-

We rely on gitlab pages for hosting the data, this service might store cookies and save your ip address (https://about.gitlab.com/privacy/)

-

We only link to the app packages, we don't host them ourselves so when downloading apps you will download them from thirdparty servers who can then see your ip address.

-

Data that might be shared with third paries

- -

Download Counter and ratings

-

When using the app we fetch the download count for all apps from our ratings server. This request might be logged, but we don't explicitly store your ip address.

-

When downloading apps a request to the download counter will be made to increase it, this request contains:

- -

When fetching the ratings for an app the server gets the requested appname and the ip address but it is not explicitly saved.

-

When rating apps we store your nickname and your ratings on our server to make the service possible.

-

Analytics

-

Besides from counting downloads we don't do any analytics. But the apps you download might do it, have ads or even track you. We try to label apps that have tracking and/or advertisement.

-

Liability & Warranty

-

This service is community maintained and provided on a best-effort basis. We try our best make sure the data is correct, but we do not give any warranties that the information is correct. Use this service on your own risk.

-

Abuse

-

If you see an app that violates you rights or does bad stuff with your device, please report it on gitlab issues

\ No newline at end of file +

Privacy Policy and Terms of use

+

+ Your privacy is important to us, that's why we try to collect only the + data that we need to provide the service to you. +

+

Data that might get collected while using the app

+

+ We rely on gitlab pages for hosting the data, this service might store cookies + and save your ip address (https://about.gitlab.com/privacy/) +

+

+ We only link to the app packages, we don't host them ourselves so when + downloading apps you will download them from thirdparty servers who can then + see your ip address. +

+

Data that might be shared with third paries

+ +

Download Counter and ratings

+

+ When using the app we fetch the download count for all apps from our ratings + server. This request might be logged, but we don't explicitly store your + ip address. +

+

+ When downloading apps a request to the download counter will be made to + increase it, this request contains: +

+ +

+ When fetching the ratings for an app the server gets the requested appname and + the ip address but it is not explicitly saved. +

+

+ When rating apps we store your nickname and your ratings on our server to make + the service possible. +

+

Analytics

+

+ Besides from counting downloads we don't do any analytics. But the apps + you download might do it, have ads or even track you. We try to label apps + that have tracking and/or advertisement. +

+

Liability & Warranty

+

+ This service is community maintained and provided on a best-effort basis. We + try our best make sure the data is correct, but we do not give any warranties + that the information is correct. Use this service on your own risk. +

+

Abuse

+

+ If you see an app that violates you rights or does bad stuff with your device, + please report it on + gitlab issues +

diff --git a/application/app.js b/application/app.js index f2b0a9f..53c1bff 100644 --- a/application/app.js +++ b/application/app.js @@ -8,608 +8,542 @@ let panels = ["All"]; let current_panel = 0; let app_slug; -let server_list = ["https://banana-hackers.gitlab.io/store-db/data.json", "https://bananahackers.github.io/data.json"]; +let server_list = [ + "https://banana-hackers.gitlab.io/store-db/data.json", + "https://bananahackers.github.io/data.json", +]; -$(document).ready(function() { +$(document).ready(function () { + check_iconnection(); + ////////////////////////////// + //fetch-database//// + ////////////////////////////// + function getJson(url) { + let xhr = new XMLHttpRequest(); + xhr.open("GET", url); + xhr.timeout = 4000; // time in milliseconds + xhr.responseType = "json"; - check_iconnection(); + xhr.send(); - ////////////////////////////// - //fetch-database//// - ////////////////////////////// - - - function getJson(url) { - let xhr = new XMLHttpRequest(); - xhr.open('GET', url); - xhr.timeout = 4000; // time in milliseconds - xhr.responseType = 'json'; + xhr.ontimeout = function (e) { + toaster("timeout please wait I try another source"); + getJson(server_list[1]); + }; + xhr.onload = function () { + if (xhr.status != 200) { + // analyze HTTP status of the response + toaster(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } + if (xhr.status == 403) { + // analyze HTTP status of the response + toaster("database not found try another"); + getJson(server_list[1]); + } + if (xhr.status == 200) { + // show the result + dataSet = xhr.response; + addAppList(); + addCategories(); + + $("div#message-box").css("animation-play-state", "running"); + $("div#message-box img.icon-2").css("animation-play-state", "running"); + $("div#message-box img.icon-1").css("animation-play-state", "running"); + $("div#message-box div").css("display", "none"); + } + }; - xhr.send(); + xhr.onprogress = function (event) { + if (event.lengthComputable) { + //toaster(`Received ${event.loaded} of ${event.total} bytes`); + } else { + //toaster(`Received ${event.loaded} bytes`); // no Content-Length + } + }; - xhr.ontimeout = function(e) { - toaster("timeout please wait I try another source") - getJson(server_list[1]) + xhr.onerror = function () { + toaster("Request failed, please try later."); + }; + } + + //check if internet connection + if (navigator.onLine) { + //start download loop + getJson(server_list[0]); + } else { + $("#download").html( + "😴
Your device is offline, please connect it to the internet " + ); + } + + let contributors = ["40min"]; + + function addAppList() { + let i = 0; + + $.when( + dataSet.apps.forEach(function (value, index) { + let data = dataSet.apps[index]; + let item_title = data.name; + let item_summary = data.description; + let item_link = data.download.url; + let item_url = data.git_repo; + let donation = data.donation; + let ads = data.has_ads; + let tracking = data.has_tracking; + let str = data.meta.categories; + let tag = data.meta.categories; + let item_categorie = str.toString().replace(",", " "); + let item_tags = tag.toString().replace(",", " "); + let item_author = data.author.toString(); + let item_icon = data.icon; + let item_license = data.license; + let item_type = data.type; + let images = ""; + let images_collection = ""; + let donation_icon = "none"; + let ads_icon = "none"; + let tracking_icon = "none"; + let item_slug = data.slug; + //i++; + let elem_id = "elem-" + index; + + //unique author list + if (contributors.indexOf(item_author) === -1) { + contributors.push(item_author); + } + //apps thumbnails + if (data.screenshots) { + images = data.screenshots.toString(); + images = images.split(","); + + images.forEach(function (value, index) { + images_collection += "
    • "; + }); } + //options page + $("div#options").append("
    "); - xhr.onload = function() { - if (xhr.status != 200) { // analyze HTTP status of the response - toaster(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found - } - if (xhr.status == 403) { // analyze HTTP status of the response - toaster("database not found try another") - getJson(server_list[1]) - - } - if (xhr.status == 200) { // show the result - dataSet = xhr.response; - addAppList() - addCategories() - - $("div#message-box").css("animation-play-state", "running"); - $("div#message-box img.icon-2").css("animation-play-state", "running"); - $("div#message-box img.icon-1").css("animation-play-state", "running"); - $("div#message-box div").css("display", "none"); - } - }; - + if (item_url) { + $("div#options div#" + elem_id).append( + "
    source code of the app
    " + ); + } + if (donation) { + donation_icon = "yes"; + $("div#options div#" + elem_id).append( + "
    make a donation
    " + ); + } - xhr.onprogress = function(event) { - if (event.lengthComputable) { - //toaster(`Received ${event.loaded} of ${event.total} bytes`); - } else { - //toaster(`Received ${event.loaded} bytes`); // no Content-Length - } + if (tracking) { + tracking_icon = "yes"; + } - }; + if (ads) { + donation_icon = "yes"; + } - xhr.onerror = function() { - toaster("Request failed, please try later."); - }; + //article + let meta_data = + "
    " + + "
    Author " + + item_author + + "
    " + + "
    License " + + item_license + + "
    " + + "
    Type " + + item_type + + "
    " + + "
    Donation " + + donation_icon + + "
    " + + "
    Tracking " + + tracking_icon + + "
    " + + "
    Ads " + + ads_icon + + "
    " + + "
    "; + //urls + let urls = + "data-download ='" + + item_link + + "' data-url ='" + + item_url + + "' data-tags ='" + + item_tags + + "' data-slug ='" + + item_slug + + "'"; + let article = + "
    " + + "
    " + + "
    " + + item_categorie + + "
    " + + "

    " + + item_title + + "

    " + + item_summary + + "
    " + + meta_data + + "
    "; + + $("div#app-panels").append(article); + }) + ).then(function () { + set_tabindex(); + + fetch("about.html") + .then((response) => { + return response.text(); + }) + .then((data) => { + $("div#privacy").html(data); + }); + let update_time = moment(dataSet.generated_at).format( + "DD.MM.YYYY, HH:mm" + ); + let about_text = + "
    An alternative app store by free developers for free devices.The database of apps is hosted https://banana-hackers.gitlab.io/store-db , further can be added by a pull request.
    " + + "

    Contributors

    " + + contributors.toString() + + "
    " + + "

    Respect

    " + + "
    Respect the licenses of the apps, it would be nice if you use app more often to support the developer with a donation.
    Thanks!
    " + + "
    " + + "
    Last update: " + + update_time + + "
    "; + + let article = $("
    " + about_text + "
    "); + $("div#app-panels").append(article); + + getData(); + + $("article#search input").focus(); + }); + } + + function addCategories() { + $.each(dataSet.categories, function (key, val) { + panels.push(key); + }); + panels.push("About"); + $("div#navigation").append("
    " + panels[0] + "
    "); + } + + function set_tabindex() { + $("div#app-panels article").removeAttr("tabindex"); + $("div#app-panels article") + .filter(":visible") + .each(function (index) { + $(this).prop("tabindex", index); + }); + article_array = $("div#app-panels article").filter(":visible"); + sort_data(); + $("body").find("article[tabindex = 0]").focus(); + } + + function sort_data() { + let $wrapper = $("div#app-panels"); + + $wrapper + .find("article tabindex") + .sort(function (a, b) { + return b - a; + }) + .appendTo($wrapper); + } + + function panels_list(panel) { + $("article").css("display", "none"); + $("article." + panel).css("display", "block"); + $("div#app-panels article") + .find([(tabindex = "0")]) + .focus(); + } + + //////////////////////// + //NAVIGATION + ///////////////////////// + ///thank you farooqkz + //for the clever solution + + function nav_panels(left_right) { + if (left_right == "left") { + current_panel--; } - //check if internet connection - if (navigator.onLine) { - //start download loop - getJson(server_list[0]); - } else { - $('#download').html("😴
    Your device is offline, please connect it to the internet ") + if (left_right == "right") { + current_panel++; } - - let contributors = ["40min"]; - - function addAppList() { - - - - let i = 0; - - - $.when( - dataSet.apps.forEach(function(value, index) { - - - let data = dataSet.apps[index]; - let item_title = data.name; - let item_summary = data.description; - let item_link = data.download.url; - let item_url = data.git_repo; - let donation = data.donation; - let ads = data.has_ads; - let tracking = data.has_tracking; - let str = data.meta.categories; - let tag = data.meta.categories; - let item_categorie = str.toString().replace(",", " "); - let item_tags = tag.toString().replace(",", " "); - let item_author = data.author.toString(); - let item_icon = data.icon; - let item_license = data.license; - let item_type = data.type; - let images = ""; - let images_collection = ""; - let donation_icon = "none"; - let ads_icon = "none"; - let tracking_icon = "none"; - let item_slug = data.slug; - //i++; - let elem_id = "elem-" + index; - - //unique author list - if (contributors.indexOf(item_author) === -1) { - contributors.push(item_author) - } - //apps thumbnails - if (data.screenshots) { - images = data.screenshots.toString() - images = images.split(','); - - images.forEach(function(value, index) { - images_collection += "
    • "; - }) - } - - - - //options page - $("div#options").append("
    "); - - if (item_url) { - $("div#options div#" + elem_id).append("
    source code of the app
    ") - } - - if (donation) { - donation_icon = "yes"; - $("div#options div#" + elem_id).append("
    make a donation
    ") - } - - if (tracking) { - tracking_icon = "yes"; - } - - - if (ads) { - donation_icon = "yes"; - } - - - //article - let meta_data = "
    " + - "
    Author " + item_author + "
    " + - "
    License " + item_license + "
    " + - "
    Type " + item_type + "
    " + - "
    Donation " + donation_icon + "
    " + - "
    Tracking " + tracking_icon + "
    " + - "
    Ads " + ads_icon + "
    " + - "
    "; - //urls - let urls = "data-download ='" + item_link + "' data-url ='" + item_url + "' data-tags ='" + item_tags + "' data-slug ='" + item_slug + "'"; - let article = "
    " + - "
    " + - "
    " + item_categorie + "
    " + - "

    " + item_title + "

    " + item_summary + "
    " + meta_data + "
    "; - - $('div#app-panels').append(article); - - }) - - ).then(function() { - - - set_tabindex(); - - fetch("about.html") - .then(response => { - return response.text() - }) - .then(data => { - $("div#privacy").html(data) - }); - let update_time = moment(dataSet.generated_at).format('DD.MM.YYYY, HH:mm'); - let about_text = "
    An alternative app store by free developers for free devices.The database of apps is hosted https://banana-hackers.gitlab.io/store-db , further can be added by a pull request.
    " + - "

    Contributors

    " + contributors.toString() + "
    " + - "

    Respect

    " + - "
    Respect the licenses of the apps, it would be nice if you use app more often to support the developer with a donation.
    Thanks!
    " + - "
    " + - "
    Last update: " + update_time + "
    " - - let article = $("
    " + about_text + "
    "); - $('div#app-panels').append(article); - - getData() - - $("article#search input").focus(); - - - }) - - - - + current_panel = current_panel % panels.length; + if (current_panel < 0) { + current_panel += panels.length; } + $("div#navigation div").text(panels[current_panel]); + panels_list(panels[current_panel]); + set_tabindex(); + pos_focus = 0; - function addCategories() { - $.each(dataSet.categories, function(key, val) { - panels.push(key) - - }) - panels.push("About"); - $("div#navigation").append("
    " + panels[0] + "
    ") - + if (current_panel == 0) { + $("input").val(""); + $("input").focus(); } + } + //up - down + function nav(param) { + let focused = $(":focus").attr("tabindex"); + let siblings = $(":focus").parent().children(":visible"); + let siblingsLength = $(":focus").parent().children(":visible").length; - function set_tabindex() { - $('div#app-panels article').removeAttr("tabindex") - $('div#app-panels article').filter(':visible').each(function(index) { - $(this).prop("tabindex", index); - - }) - article_array = $('div#app-panels article').filter(':visible') - sort_data() - $('body').find('article[tabindex = 0]').focus() - - - - + if ($("input").is(":focus")) { + $("article#search").next().focus(); } + if (param == "+1" && focused < siblingsLength - 1) { + focused++; + siblings[focused].focus(); - function sort_data() { - - let $wrapper = $('div#app-panels'); - - $wrapper.find('article tabindex').sort(function(a, b) { - return b - a; - }) - .appendTo($wrapper); + let focusedElement = $(":focus")[0].offsetTop; + //$('div#app-panels article').eq(-2).css("margin-bottom", "40px") + window.scrollTo({ + top: focusedElement - 35, + behavior: "smooth", + }); + if ($("article#search").is(":focus")) { + $("input").focus(); + } } - function panels_list(panel) { + if (param == "-1" && focused > 0) { + focused--; + siblings[focused].focus(); + let focusedElement = $(":focus")[0].offsetTop; - $("article").css("display", "none"); - $("article." + panel).css("display", "block") - $('div#app-panels article').find([tabindex = "0"]).focus() + window.scrollTo({ + top: focusedElement - 35, + behavior: "smooth", + }); + if ($("article#search").is(":focus")) { + $("input").focus(); + } } + } + //store current article + let article_id; + function show_article() { + let $focused = $(":focus"); + let getClass = $focused.attr("class"); + let getId = $(":focus").parent().attr("id"); + article_id = $(":focus").attr("id"); - //////////////////////// - //NAVIGATION - ///////////////////////// - ///thank you farooqkz - //for the clever solution - - - function nav_panels(left_right) { - if (left_right == "left") { - current_panel--; - } + if (getId == "search") { + return false; + } - if (left_right == "right") { - current_panel++; + if (getClass != "About" || getId != "search") { + $("article").css("display", "none"); + $("div#navigation").css("display", "none"); + $("div#app div#app-panels").css("margin", "5px 0 0 0"); + $("div#app div#app-panels").css("max-height", "100%"); + $("div#app div#app-panels").css("overflow-y", "scroll"); + + $focused.css("display", "block"); + $("div.summary").css("display", "block"); + $("div.meta-data").css("display", "block"); + $("div.icon").css("display", "block"); + $("div.channel").css("display", "none"); + $("ul.images").css("display", "block"); + + $("div#button-bar").css("display", "block"); + $("div#button-bar div#button-left").css("color", "white"); + $("div#button-bar div#button-center").css("color", "black"); + $("div#button-bar div#button-right").css("color", "white"); + window_status = "single-article"; + } + } + + function show_article_list() { + navigator.spatialNavigationEnabled = false; + panels_list(panels[current_panel]); + $("div#app div#app-panels").css("margin", "32px 0 0 0"); + $("div#app div#app-panels").css("max-height", "73%"); + $("div#options").css("display", "none"); + + $("div#navigation").css("display", "block"); + $("div#app-panels").css("display", "block"); + $("div.summary").css("display", "none"); + $("div.meta-data").css("display", "none"); + $("div.channel").css("display", "block"); + $("ul.images").css("display", "none"); + + $("div.icon").css("display", "none"); + + let targetElement = article_array[pos_focus]; + targetElement.focus(); + + $("div#button-bar").css("display", "block"); + $("div#button-bar div#button-left").css("color", "black"); + $("div#button-bar div#button-center").css("color", "white"); + $("div#button-bar div#button-right").css("color", "black"); + + window.scrollTo(0, $(targetElement).offset().top); + window_status = "article-list"; + } + + function download() { + let link_target = ""; + let targetElement = $(":focus"); + link_target = $(targetElement).data("download"); + app_slug = $(targetElement).data("slug"); + window.location.assign(link_target); + } + + function open_url() { + let targetElement = $(":focus"); + let link_target = $(targetElement).data("url"); + window.open(link_target, "_self "); + } + + function close_options() { + $("div#options").css("display", "none"); + $("article#" + article_id).focus(); + + $("div#navigation").css("display", "none"); + $("div#app div#app-panels").css("margin", "5px 0 0 0"); + $("div#app div#app-panels").css("max-height", "100%"); + $("div#app div#app-panels").css("overflow-y", "scroll"); + + $("div.summary").css("display", "block"); + $("div.meta-data").css("display", "block"); + $("div.icon").css("display", "block"); + $("div.channel").css("display", "none"); + $("ul.images").css("display", "block"); + + $("div#button-bar").css("display", "block"); + $("div#button-bar div#button-left").css("color", "white"); + $("div#button-bar div#button-center").css("color", "black"); + $("div#button-bar div#button-right").css("color", "white"); + window_status = "single-article"; + } + + function open_options() { + let $focused = $(":focus"); + let selected_article = $focused.attr("id"); + + $("div#options div").css("display", "none"); + + $("div#options").css("display", "block"); + $("div#options div#" + selected_article).css("display", "block"); + + $("div#options div#" + selected_article + " div").css("display", "block"); + + $("div#button-bar div#button-left").css("color", "black"); + $("div#button-bar div#button-center").css("color", "white"); + $("div#button-bar div#button-right").css("color", "black"); + + $("div#options div#" + selected_article + " div:first").focus(); + window_status = "options"; + } + + ////////////////////////// + ////KEYPAD TRIGGER//////////// + ///////////////////////// + + function handleKeyDown(evt) { + switch (evt.key) { + case "Enter": + if (window_status == "article-list") { + show_article(); } - current_panel = current_panel % panels.length; - if (current_panel < 0) { - current_panel += panels.length; + if (window_status == "options") { + open_url(); } + break; - $("div#navigation div").text(panels[current_panel]); - panels_list(panels[current_panel]); - set_tabindex(); - pos_focus = 0; + case "ArrowDown": + nav("+1"); + break; - if (current_panel == 0) { - $("input").val("") - $("input").focus() + case "ArrowUp": + nav("-1"); + break; + case "ArrowLeft": + if (window_status == "article-list") { + nav_panels("left"); } - } - - - - //up - down + break; - - function nav(param) { - - let focused = $(':focus').attr('tabindex'); - let siblings = $(':focus').parent().children(':visible'); - let siblingsLength = $(':focus').parent().children(':visible').length; - - - if ($("input").is(":focus")) { - $("article#search").next().focus() + case "ArrowRight": + if (window_status == "article-list") { + nav_panels("right"); } + break; - - if (param == "+1" && focused < siblingsLength - 1) { - - - focused++ - siblings[focused].focus(); - - - let focusedElement = $(':focus')[0].offsetTop; - //$('div#app-panels article').eq(-2).css("margin-bottom", "40px") - - - window.scrollTo({ - top: focusedElement - 35, - behavior: 'smooth' - }); - - - - if ($("article#search").is(":focus")) { - $("input").focus() - - } - - + case "SoftLeft": + if (window_status == "single-article") { + open_options(); } - if (param == "-1" && focused > 0) { - - focused-- - siblings[focused].focus(); - let focusedElement = $(':focus')[0].offsetTop; - - - window.scrollTo({ - top: focusedElement - 35, - behavior: 'smooth' - }); - - - - if ($("article#search").is(":focus")) { - $("input").focus() - } - + break; + case "SoftRight": + if (window_status == "single-article") { + download(); } + break; - - - } - - - - //store current article - let article_id; - - function show_article() { - let $focused = $(':focus'); - let getClass = $focused.attr('class'); - let getId = $(":focus").parent().attr('id'); - article_id = $(":focus").attr('id'); - - if (getId == "search") { - return false; + case "Backspace": + evt.preventDefault(); + if (window_status == "single-article") { + show_article_list(); + return; } - if (getClass != "About" || getId != "search") { - $('article').css('display', 'none'); - $('div#navigation').css('display', 'none'); - $('div#app div#app-panels').css('margin', '5px 0 0 0'); - $('div#app div#app-panels').css('max-height', '100%'); - $('div#app div#app-panels').css('overflow-y', 'scroll'); - - $focused.css('display', 'block'); - $('div.summary').css('display', 'block'); - $('div.meta-data').css('display', 'block'); - $('div.icon').css('display', 'block'); - $('div.channel').css('display', 'none'); - $('ul.images').css('display', 'block'); - - $('div#button-bar').css('display', 'block'); - $('div#button-bar div#button-left').css('color', 'white'); - $('div#button-bar div#button-center').css('color', 'black'); - $('div#button-bar div#button-right').css('color', 'white'); - window_status = "single-article"; + if (window_status == "options") { + close_options(); + return; } - - - - } - - - function show_article_list() { - navigator.spatialNavigationEnabled = false; - panels_list(panels[current_panel]) - $('div#app div#app-panels').css('margin', '32px 0 0 0') - $('div#app div#app-panels').css('max-height', '73%') - $('div#options').css('display', 'none'); - - - $('div#navigation').css('display', 'block'); - $('div#app-panels').css('display', 'block'); - $('div.summary').css('display', 'none'); - $('div.meta-data').css('display', 'none'); - $('div.channel').css('display', 'block'); - $('ul.images').css('display', 'none'); - - - $('div.icon').css('display', 'none'); - - let targetElement = article_array[pos_focus]; - targetElement.focus(); - - $('div#button-bar').css('display', 'block'); - $('div#button-bar div#button-left').css('color', 'black'); - $('div#button-bar div#button-center').css('color', 'white'); - $('div#button-bar div#button-right').css('color', 'black'); - - window.scrollTo(0, $(targetElement).offset().top); - window_status = "article-list"; - - } - - - - - - - - function download() { - let link_target = ""; - let targetElement = $(":focus"); - link_target = $(targetElement).data('download'); - app_slug = $(targetElement).data('slug'); - window.location.assign(link_target); - - } - - - - - function open_url() { - let targetElement = $(":focus"); - let link_target = $(targetElement).data('url'); - window.open(link_target, '_self ') - - } - - function close_options() { - - $("div#options").css("display", "none"); - $('article#' + article_id).focus(); - - $('div#navigation').css('display', 'none'); - $('div#app div#app-panels').css('margin', '5px 0 0 0'); - $('div#app div#app-panels').css('max-height', '100%'); - $('div#app div#app-panels').css('overflow-y', 'scroll'); - - $('div.summary').css('display', 'block'); - $('div.meta-data').css('display', 'block'); - $('div.icon').css('display', 'block'); - $('div.channel').css('display', 'none'); - $('ul.images').css('display', 'block'); - - $('div#button-bar').css('display', 'block'); - $('div#button-bar div#button-left').css('color', 'white'); - $('div#button-bar div#button-center').css('color', 'black'); - $('div#button-bar div#button-right').css('color', 'white'); - window_status = "single-article"; - - } - - - function open_options() { - - let $focused = $(':focus'); - let selected_article = $focused.attr('id'); - - - $("div#options div").css("display", "none"); - - $("div#options").css("display", "block"); - $("div#options div#" + selected_article).css("display", "block"); - - - $("div#options div#" + selected_article + " div").css("display", "block"); - - $('div#button-bar div#button-left').css('color', 'black'); - $('div#button-bar div#button-center').css('color', 'white'); - $('div#button-bar div#button-right').css('color', 'black'); - - $("div#options div#" + selected_article + " div:first").focus(); - window_status = "options"; - } - - - - - - - ////////////////////////// - ////KEYPAD TRIGGER//////////// - ///////////////////////// - - - - function handleKeyDown(evt) { - - switch (evt.key) { - - - case 'Enter': - if (window_status == "article-list") { - show_article(); - } - - if (window_status == "options") { - open_url(); - } - break; - - - case 'ArrowDown': - nav("+1"); - break; - - - case 'ArrowUp': - nav("-1"); - break; - - case 'ArrowLeft': - if (window_status == "article-list") { - nav_panels("left"); - - } - break; - - case 'ArrowRight': - if (window_status == "article-list") { - nav_panels("right"); - - } - break; - - - - case 'SoftLeft': - if (window_status == "single-article") { - open_options(); - } - - - break; - - - - case 'SoftRight': - if (window_status == "single-article") { - download(); - } - break; - - - case 'Backspace': - evt.preventDefault(); - if (window_status == "single-article") { - show_article_list(); - return; - - } - - if (window_status == "options") { - close_options(); - return; - - } - if (window_status == "article-list" && !$("input").is(":focus")) { - window.close(); - } - break; - - - - + if (window_status == "article-list" && !$("input").is(":focus")) { + window.close(); } + break; + } + } - }; - - - - document.addEventListener('keydown', handleKeyDown); - - - - - - -}); \ No newline at end of file + document.addEventListener("keydown", handleKeyDown); +}); diff --git a/application/assets/css/grid.css b/application/assets/css/grid.css index 42d89bc..fc37a2e 100644 --- a/application/assets/css/grid.css +++ b/application/assets/css/grid.css @@ -1,821 +1,604 @@ /* G R I D */ -.grid-col-1 -{ - min-width:10px; - max-width:10px; +.grid-col-1 { + min-width: 10px; + max-width: 10px; } - -.grid-col-2 -{ - min-width:20px; - max-width:20px; +.grid-col-2 { + min-width: 20px; + max-width: 20px; } -.grid-col-3 -{ - min-width:30px; - max-width:30px; +.grid-col-3 { + min-width: 30px; + max-width: 30px; } -.grid-col-4 -{ - min-width:40px; - max-width:40px; +.grid-col-4 { + min-width: 40px; + max-width: 40px; } -.grid-col-5 -{ - min-width:50px; - max-width:50px; +.grid-col-5 { + min-width: 50px; + max-width: 50px; } -.grid-col-6 -{ - min-width:60px; - max-width:60px; +.grid-col-6 { + min-width: 60px; + max-width: 60px; } - -.grid-col-7 -{ - min-width:70px; - max-width:70px; +.grid-col-7 { + min-width: 70px; + max-width: 70px; } -.grid-col-8 -{ - min-width:80px; - max-width:80px; +.grid-col-8 { + min-width: 80px; + max-width: 80px; } -.grid-col-9 -{ - min-width:90px; - max-width:90px; +.grid-col-9 { + min-width: 90px; + max-width: 90px; } -.grid-col-10 -{ - min-width:100px; - max-width:100px; +.grid-col-10 { + min-width: 100px; + max-width: 100px; } -.grid-col-11 -{ - min-width:110px; - max-width:110px; +.grid-col-11 { + min-width: 110px; + max-width: 110px; } -.grid-col-12 -{ - min-width:120px; - max-width:120px; +.grid-col-12 { + min-width: 120px; + max-width: 120px; } -.grid-col-13 -{ - min-width:130px; - max-width:130px; +.grid-col-13 { + min-width: 130px; + max-width: 130px; } -.grid-col-14 -{ - min-width:140px; - max-width:140px; +.grid-col-14 { + min-width: 140px; + max-width: 140px; } - -.grid-col-15 -{ - min-width:150px; - max-width:150px; +.grid-col-15 { + min-width: 150px; + max-width: 150px; } - -.grid-col-16 -{ - min-width:160px; - max-width:160px; +.grid-col-16 { + min-width: 160px; + max-width: 160px; } - -.grid-col-17 -{ - min-width:170px; - max-width:170px; +.grid-col-17 { + min-width: 170px; + max-width: 170px; } - -.grid-col-18 -{ - min-width:180px; - max-width:180px; +.grid-col-18 { + min-width: 180px; + max-width: 180px; } -.grid-col-19 -{ - min-width:190px; - max-width:190px; +.grid-col-19 { + min-width: 190px; + max-width: 190px; } -.grid-col-20 -{ - min-width:200px; - max-width:200px; +.grid-col-20 { + min-width: 200px; + max-width: 200px; } -.grid-col-21 -{ - min-width:210px; - max-width:210px; +.grid-col-21 { + min-width: 210px; + max-width: 210px; } -.grid-col-22 -{ - min-width:220px; - max-width:220px; +.grid-col-22 { + min-width: 220px; + max-width: 220px; } -.grid-col-23 -{ - min-width:230px; - max-width:230px; +.grid-col-23 { + min-width: 230px; + max-width: 230px; } -.grid-col-24 -{ - min-width:240px; - max-width:240px; +.grid-col-24 { + min-width: 240px; + max-width: 240px; } - -.grid-col-25 -{ - min-width:250px; - max-width:250px; +.grid-col-25 { + min-width: 250px; + max-width: 250px; } - -.grid-col-26 -{ - min-width:260px; - max-width:260px; +.grid-col-26 { + min-width: 260px; + max-width: 260px; } -.grid-col-27 -{ - min-width:270px; - max-width:270px; +.grid-col-27 { + min-width: 270px; + max-width: 270px; } - -.grid-col-28 -{ - min-width:280px; - max-width:280px; +.grid-col-28 { + min-width: 280px; + max-width: 280px; } - -.grid-col-29 -{ - min-width:290px; - max-width:290px; +.grid-col-29 { + min-width: 290px; + max-width: 290px; } -.grid-col-30 -{ - min-width:300px; - max-width:300px; +.grid-col-30 { + min-width: 300px; + max-width: 300px; } - -.grid-col-31 -{ - min-width:310px; - max-width:310px; +.grid-col-31 { + min-width: 310px; + max-width: 310px; } -.grid-col-32 -{ - min-width:320px; - max-width:320px; +.grid-col-32 { + min-width: 320px; + max-width: 320px; } -.grid-col-33 -{ - min-width:330px; - max-width:330px; +.grid-col-33 { + min-width: 330px; + max-width: 330px; } -.grid-col-34 -{ - min-width:340px; - max-width:340px; +.grid-col-34 { + min-width: 340px; + max-width: 340px; } -.grid-col-35 -{ - min-width:350px; - max-width:350px; +.grid-col-35 { + min-width: 350px; + max-width: 350px; } -.grid-col-36 -{ - min-width:360px; - max-width:360px; +.grid-col-36 { + min-width: 360px; + max-width: 360px; } -.grid-col-37 -{ - min-width:370px; - max-width:370px; +.grid-col-37 { + min-width: 370px; + max-width: 370px; } - -.grid-col-38 -{ - min-width:380px; - max-width:380px; +.grid-col-38 { + min-width: 380px; + max-width: 380px; } - -.grid-col-39 -{ - min-width:390px; - max-width:390px; +.grid-col-39 { + min-width: 390px; + max-width: 390px; } -.grid-col-40 -{ - min-width:400px; - max-width:400px; +.grid-col-40 { + min-width: 400px; + max-width: 400px; } -.grid-col-41 -{ - min-width:410px; - max-width:410px; +.grid-col-41 { + min-width: 410px; + max-width: 410px; } -.grid-col-42 -{ - min-width:420px; - max-width:420px; +.grid-col-42 { + min-width: 420px; + max-width: 420px; } -.grid-col-43 -{ - min-width:430px; - max-width:430px; +.grid-col-43 { + min-width: 430px; + max-width: 430px; } -.grid-col-44 -{ - min-width:440px; - max-width:440px; +.grid-col-44 { + min-width: 440px; + max-width: 440px; } - -.grid-col-45 -{ - min-width:450px; - max-width:450px; +.grid-col-45 { + min-width: 450px; + max-width: 450px; } - -.grid-col-46 -{ - min-width:460px; - max-width:460px; +.grid-col-46 { + min-width: 460px; + max-width: 460px; } - -.grid-col-47 -{ - min-width:470px; - max-width:470px; +.grid-col-47 { + min-width: 470px; + max-width: 470px; } - -.grid-col-48 -{ - min-width:480px; - max-width:480px; +.grid-col-48 { + min-width: 480px; + max-width: 480px; } - -.grid-col-49 -{ - min-width:490px; - max-width:490px; +.grid-col-49 { + min-width: 490px; + max-width: 490px; } - -.grid-col-50 -{ - min-width:500px; - max-width:500px; +.grid-col-50 { + min-width: 500px; + max-width: 500px; } - -.grid-col-51 -{ - min-width:510px; - max-width:510px; +.grid-col-51 { + min-width: 510px; + max-width: 510px; } -.grid-col-52 -{ - min-width:520px; - max-width:520px; +.grid-col-52 { + min-width: 520px; + max-width: 520px; } - -.grid-col-53 -{ - min-width:530px; - max-width:530px; +.grid-col-53 { + min-width: 530px; + max-width: 530px; } - -.grid-col-54 -{ - min-width:540px; - max-width:540px; +.grid-col-54 { + min-width: 540px; + max-width: 540px; } - -.grid-col-55 -{ - min-width:550px; - max-width:550px; +.grid-col-55 { + min-width: 550px; + max-width: 550px; } - -.grid-col-56 -{ - min-width:560px; - max-width:560px; +.grid-col-56 { + min-width: 560px; + max-width: 560px; } - -.grid-col-57 -{ - min-width:570px; - max-width:570px; +.grid-col-57 { + min-width: 570px; + max-width: 570px; } - -.grid-col-58 -{ - min-width:580px; - max-width:580px; +.grid-col-58 { + min-width: 580px; + max-width: 580px; } - -.grid-col-59 -{ - min-width:590px; - max-width:590px; +.grid-col-59 { + min-width: 590px; + max-width: 590px; } - -.grid-col-60 -{ - min-width:600px; - max-width:600px; +.grid-col-60 { + min-width: 600px; + max-width: 600px; } - -.grid-col-61 -{ - min-width:610px; - max-width:610px; +.grid-col-61 { + min-width: 610px; + max-width: 610px; } - -.grid-col-62 -{ - min-width:620px; - max-width:620px; +.grid-col-62 { + min-width: 620px; + max-width: 620px; } - -.grid-col-63 -{ - min-width:630px; - max-width:630px; +.grid-col-63 { + min-width: 630px; + max-width: 630px; } - -.grid-col-64 -{ - min-width:640px; - max-width:640px; +.grid-col-64 { + min-width: 640px; + max-width: 640px; } -.grid-col-65 -{ - min-width:650px; - max-width:650px; +.grid-col-65 { + min-width: 650px; + max-width: 650px; } -.grid-col-66 -{ - min-width:660px; - max-width:660px; +.grid-col-66 { + min-width: 660px; + max-width: 660px; } -.grid-col-67 -{ - min-width:670px; - max-width:670px; +.grid-col-67 { + min-width: 670px; + max-width: 670px; } - -.grid-col-68 -{ - min-width:680px; - max-width:680px; +.grid-col-68 { + min-width: 680px; + max-width: 680px; } -.grid-col-69 -{ - min-width:690px; - max-width:690px; +.grid-col-69 { + min-width: 690px; + max-width: 690px; } -.grid-col-70 -{ - min-width:700px; - max-width:700px; +.grid-col-70 { + min-width: 700px; + max-width: 700px; } - -.grid-col-71 -{ - min-width:710px; - max-width:710px; +.grid-col-71 { + min-width: 710px; + max-width: 710px; } - -.grid-col-72 -{ - min-width:720px; - max-width:720px; +.grid-col-72 { + min-width: 720px; + max-width: 720px; } -.grid-col-73 -{ - min-width:730px; - max-width:730px; +.grid-col-73 { + min-width: 730px; + max-width: 730px; } - -.grid-col-74 -{ - min-width:740px; - max-width:740px; +.grid-col-74 { + min-width: 740px; + max-width: 740px; } - - -.grid-col-75 -{ - min-width:750px; - max-width:750px; +.grid-col-75 { + min-width: 750px; + max-width: 750px; } - -.grid-col-76 -{ - min-width:760px; - max-width:760px; +.grid-col-76 { + min-width: 760px; + max-width: 760px; } - -.grid-col-77 -{ - min-width:770px; - max-width:770px; +.grid-col-77 { + min-width: 770px; + max-width: 770px; } - - -.grid-col-78 -{ - min-width:780px; - max-width:780px; +.grid-col-78 { + min-width: 780px; + max-width: 780px; } - - -.grid-col-79 -{ - min-width:790px; - max-width:790px; +.grid-col-79 { + min-width: 790px; + max-width: 790px; } - -.grid-col-80 -{ - min-width:800px; - max-width:800px; +.grid-col-80 { + min-width: 800px; + max-width: 800px; } - -.grid-col-81 -{ - min-width:810px; - max-width:810px; +.grid-col-81 { + min-width: 810px; + max-width: 810px; } - -.grid-col-82 -{ - min-width:820px; - max-width:820px; +.grid-col-82 { + min-width: 820px; + max-width: 820px; } - - -.grid-col-83 -{ - min-width:830px; - max-width:830px; +.grid-col-83 { + min-width: 830px; + max-width: 830px; } - -.grid-col-84 -{ - min-width:840px; - max-width:840px; +.grid-col-84 { + min-width: 840px; + max-width: 840px; } -.grid-col-85 -{ - min-width:850px; - max-width:850px; +.grid-col-85 { + min-width: 850px; + max-width: 850px; } - -.grid-col-86 -{ - min-width:860px; - max-width:860px; +.grid-col-86 { + min-width: 860px; + max-width: 860px; } - - -.grid-col-87 -{ - min-width:870px; - max-width:870px; +.grid-col-87 { + min-width: 870px; + max-width: 870px; } - - -.grid-col-88 -{ - min-width:880px; - max-width:880px; +.grid-col-88 { + min-width: 880px; + max-width: 880px; } - - -.grid-col-88 -{ - min-width:880px; - max-width:880px; +.grid-col-88 { + min-width: 880px; + max-width: 880px; } - - -.grid-col-89 -{ - min-width:890px; - max-width:890px; +.grid-col-89 { + min-width: 890px; + max-width: 890px; } - - -.grid-col-90 -{ - min-width:900px; - max-width:900px; +.grid-col-90 { + min-width: 900px; + max-width: 900px; } - - -.grid-col-91 -{ - min-width:910px; - max-width:910px; +.grid-col-91 { + min-width: 910px; + max-width: 910px; } - -.grid-col-92 -{ - min-width:920px; - max-width:920px; +.grid-col-92 { + min-width: 920px; + max-width: 920px; } - -.grid-col-93 -{ - min-width:930px; - max-width:930px; +.grid-col-93 { + min-width: 930px; + max-width: 930px; } - - - -.grid-col-94 -{ - min-width:940px; - max-width:940px; +.grid-col-94 { + min-width: 940px; + max-width: 940px; } - - -.grid-col-95 -{ - min-width:950px; - max-width:950px; +.grid-col-95 { + min-width: 950px; + max-width: 950px; } - - -.grid-col-96 -{ - min-width:960px; - max-width:960px; +.grid-col-96 { + min-width: 960px; + max-width: 960px; } - -.text-center -{ - text-align:center; +.text-center { + text-align: center; } - - -.flex -{ - display:-webkit-flex; - display:flex; +.flex { + display: -webkit-flex; + display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; - } -.flex-column -{ - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; +.flex-column { + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } -.flex-shrink-1 -{ +.flex-shrink-1 { //flex: 1 1 - min-width:50%; - max-width:50%; - outline:2px solid red; + min-width: 50%; + max-width: 50%; + outline: 2px solid red; } -.justify-content-start -{ +.justify-content-start { -webkit-align-items: flex-start; align-items: flex-start; - } -.justify-content-end -{ +.justify-content-end { -webkit-justify-content: flex-end; justify-content: flex-end; - } -.algin-item-start -{ - -webkit-align-items: flex-start; +.algin-item-start { + -webkit-align-items: flex-start; align-items: flex-start; - } -.algin-item-end -{ - -webkit-align-items: flex-end; - align-items: flex-end; - +.algin-item-end { + -webkit-align-items: flex-end; + align-items: flex-end; } -.align-item-center -{ - - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - +.align-item-center { + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } -.justify-content-spacebetween -{ - -webkit-justify-content: space-between; - justify-content: space-between; +.justify-content-spacebetween { + -webkit-justify-content: space-between; + justify-content: space-between; } -.justify-content-spacearound -{ - - - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; - -webkit-align-content: space-around; - -ms-flex-line-pack: distribute; - align-content: space-around; - +.justify-content-spacearound { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-align-content: space-around; + -ms-flex-line-pack: distribute; + align-content: space-around; } -.justify-content-center -{ - +.justify-content-center { -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; + -ms-flex-pack: center; + justify-content: center; } -.width-100 -{ - min-width:100vw; +.width-100 { + min-width: 100vw; } -.height-100 -{ - min-height:100vh; +.height-100 { + min-height: 100vh; } - -.width-50 -{ - min-width:50%; +.width-50 { + min-width: 50%; } -.width-30 -{ - min-width:30%; - max-width:30%; +.width-30 { + min-width: 30%; + max-width: 30%; } -.center -{ - - - transform: translate(50%, -0%); +.center { + transform: translate(50%, -0%); } - - - -.col-3 -{ - -webkit-column-count: 3; +.col-3 { + -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; - - -webkit-column-count: 3; + -webkit-column-count: 3; -webkit-column-gap: 30px; -moz-column-count: 3; -moz-column-gap: 30px; column-count: 3; column-gap: 30px; - - } -.col-dont-break-inside -{ +.col-dont-break-inside { -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */ - } -.block -{ - display:block; +.block { + display: block; } -[class*='grid-'] -{ - - +[class*="grid-"] { } - diff --git a/application/assets/css/grid.min.css b/application/assets/css/grid.min.css deleted file mode 100644 index 0942c2d..0000000 --- a/application/assets/css/grid.min.css +++ /dev/null @@ -1 +0,0 @@ -.grid-col-1{min-width:10px;max-width:10px}.grid-col-2{min-width:20px;max-width:20px}.grid-col-3{min-width:30px;max-width:30px}.grid-col-4{min-width:40px;max-width:40px}.grid-col-5{min-width:50px;max-width:50px}.grid-col-6{min-width:60px;max-width:60px}.grid-col-7{min-width:70px;max-width:70px}.grid-col-8{min-width:80px;max-width:80px}.grid-col-9{min-width:90px;max-width:90px}.grid-col-10{min-width:100px;max-width:100px}.grid-col-11{min-width:110px;max-width:110px}.grid-col-12{min-width:120px;max-width:120px}.grid-col-13{min-width:130px;max-width:130px}.grid-col-14{min-width:140px;max-width:140px}.grid-col-15{min-width:150px;max-width:150px}.grid-col-16{min-width:160px;max-width:160px}.grid-col-17{min-width:170px;max-width:170px}.grid-col-18{min-width:180px;max-width:180px}.grid-col-19{min-width:190px;max-width:190px}.grid-col-20{min-width:200px;max-width:200px}.grid-col-21{min-width:210px;max-width:210px}.grid-col-22{min-width:220px;max-width:220px}.grid-col-23{min-width:230px;max-width:230px}.grid-col-24{min-width:240px;max-width:240px}.grid-col-25{min-width:250px;max-width:250px}.grid-col-26{min-width:260px;max-width:260px}.grid-col-27{min-width:270px;max-width:270px}.grid-col-28{min-width:280px;max-width:280px}.grid-col-29{min-width:290px;max-width:290px}.grid-col-30{min-width:300px;max-width:300px}.grid-col-31{min-width:310px;max-width:310px}.grid-col-32{min-width:320px;max-width:320px}.grid-col-33{min-width:330px;max-width:330px}.grid-col-34{min-width:340px;max-width:340px}.grid-col-35{min-width:350px;max-width:350px}.grid-col-36{min-width:360px;max-width:360px}.grid-col-37{min-width:370px;max-width:370px}.grid-col-38{min-width:380px;max-width:380px}.grid-col-39{min-width:390px;max-width:390px}.grid-col-40{min-width:400px;max-width:400px}.grid-col-41{min-width:410px;max-width:410px}.grid-col-42{min-width:420px;max-width:420px}.grid-col-43{min-width:430px;max-width:430px}.grid-col-44{min-width:440px;max-width:440px}.grid-col-45{min-width:450px;max-width:450px}.grid-col-46{min-width:460px;max-width:460px}.grid-col-47{min-width:470px;max-width:470px}.grid-col-48{min-width:480px;max-width:480px}.grid-col-49{min-width:490px;max-width:490px}.grid-col-50{min-width:500px;max-width:500px}.grid-col-51{min-width:510px;max-width:510px}.grid-col-52{min-width:520px;max-width:520px}.grid-col-53{min-width:530px;max-width:530px}.grid-col-54{min-width:540px;max-width:540px}.grid-col-55{min-width:550px;max-width:550px}.grid-col-56{min-width:560px;max-width:560px}.grid-col-57{min-width:570px;max-width:570px}.grid-col-58{min-width:580px;max-width:580px}.grid-col-59{min-width:590px;max-width:590px}.grid-col-60{min-width:600px;max-width:600px}.grid-col-61{min-width:610px;max-width:610px}.grid-col-62{min-width:620px;max-width:620px}.grid-col-63{min-width:630px;max-width:630px}.grid-col-64{min-width:640px;max-width:640px}.grid-col-65{min-width:650px;max-width:650px}.grid-col-66{min-width:660px;max-width:660px}.grid-col-67{min-width:670px;max-width:670px}.grid-col-68{min-width:680px;max-width:680px}.grid-col-69{min-width:690px;max-width:690px}.grid-col-70{min-width:700px;max-width:700px}.grid-col-71{min-width:710px;max-width:710px}.grid-col-72{min-width:720px;max-width:720px}.grid-col-73{min-width:730px;max-width:730px}.grid-col-74{min-width:740px;max-width:740px}.grid-col-75{min-width:750px;max-width:750px}.grid-col-76{min-width:760px;max-width:760px}.grid-col-77{min-width:770px;max-width:770px}.grid-col-78{min-width:780px;max-width:780px}.grid-col-79{min-width:790px;max-width:790px}.grid-col-80{min-width:800px;max-width:800px}.grid-col-81{min-width:810px;max-width:810px}.grid-col-82{min-width:820px;max-width:820px}.grid-col-83{min-width:830px;max-width:830px}.grid-col-84{min-width:840px;max-width:840px}.grid-col-85{min-width:850px;max-width:850px}.grid-col-86{min-width:860px;max-width:860px}.grid-col-87{min-width:870px;max-width:870px}.grid-col-88{min-width:880px;max-width:880px}.grid-col-88{min-width:880px;max-width:880px}.grid-col-89{min-width:890px;max-width:890px}.grid-col-90{min-width:900px;max-width:900px}.grid-col-91{min-width:910px;max-width:910px}.grid-col-92{min-width:920px;max-width:920px}.grid-col-93{min-width:930px;max-width:930px}.grid-col-94{min-width:940px;max-width:940px}.grid-col-95{min-width:950px;max-width:950px}.grid-col-96{min-width:960px;max-width:960px}.flex{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap}.flex-column{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-shrink-1{max-width:50%;outline:2px solid red}.justify-content-start{-webkit-align-items:flex-start;align-items:flex-start}.justify-content-end{-webkit-justify-content:flex-end;justify-content:flex-end}.algin-item-start{-webkit-align-items:flex-start;align-items:flex-start}.algin-item-end{-webkit-align-items:flex-end;align-items:flex-end}.align-item-center{-webkit-align-items:center;-ms-flex-align:center;align-items:center}.justify-content-spacebetween{-webkit-justify-content:space-between;justify-content:space-between}.justify-content-spacearound{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;-webkit-align-content:space-around;-ms-flex-line-pack:distribute;align-content:space-around}.justify-content-center{-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.width-100{min-width:100%}.width-50{min-width:50%}.width-30{min-width:30%;max-width:30%}.center{transform:translate(50%,0)}.col-3{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-count:3;-webkit-column-gap:30px;-moz-column-count:3;-moz-column-gap:30px;column-count:3;column-gap:30px}.col-dont-break-inside{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid}.block{display:block} \ No newline at end of file diff --git a/application/assets/css/main.css b/application/assets/css/main.css index 671cca3..ffb52a0 100644 --- a/application/assets/css/main.css +++ b/application/assets/css/main.css @@ -1,425 +1,425 @@ - /*GENERAL*/ - - :root { - --color-one: black; - --color-two: yellow; - --color-three: silver; - --color-four: rgb(99, 99, 99); - --color-five: rgb(38, 38, 38); - --color-six: rgb(78, 206, 144); - --color-seven: gainsboro; - } - - *, - *:before, - *:after { - border: 0px; - padding: 0px; - margin: 0px; - box-sizing: border-box; - } - - *::-webkit-scrollbar { - width: 0!important; - background-color: transparent!Important; - display: none!Important; - overflow: -moz-scrollbars-none; - -webkit-appearance: none; - } - - :focus { - outline: none; - } - - ::-moz-focus-inner { - border: 0; - } - - input[type=range]::-moz-focus-outer { - border: 0; - } - - html, - body { - font-weight: 100; - width: 100vw; - position: relative; - margin: 0px; - padding: 0px; - font-size: 1.0rem; - line-height: 1.4rem; - -webkit-appearance: none; - height: 100%; - margin: 0; - } - - h1 { - font-size: 1rem; - } - - img { - max-width: 90vw; - height: auto; - display: block; - } - - .debug { - outline: 1px solid red; - } - - div.autocomplete-suggestions { - background: gray; - overflow: auto; - color: black; - padding: 5px 0px 0px 0; - white-space: nowrap; - overflow: hidden; - font-size: 1.1rem; - } - - div.autocomplete-suggestions div { - border: 3px solid white; - background: silver; - } - - .autocomplete-selected { - background: silver; - color: black; - font-weight: bold; - } - - .autocomplete-suggestions strong { - font-weight: normal; - } - - .autocomplete-group { - padding: 2px 5px; - color: black; - margin: 0 0 10px 0; - } - - .autocomplete-group strong { - display: block; - border-bottom: 1px solid #000; - } - /*/////////////////////////// +/*GENERAL*/ + +:root { + --color-one: black; + --color-two: yellow; + --color-three: silver; + --color-four: rgb(99, 99, 99); + --color-five: rgb(38, 38, 38); + --color-six: rgb(78, 206, 144); + --color-seven: gainsboro; +} + +*, +*:before, +*:after { + border: 0px; + padding: 0px; + margin: 0px; + box-sizing: border-box; +} + +*::-webkit-scrollbar { + width: 0 !important; + background-color: transparent !important; + display: none !important; + overflow: -moz-scrollbars-none; + -webkit-appearance: none; +} + +:focus { + outline: none; +} + +::-moz-focus-inner { + border: 0; +} + +input[type="range"]::-moz-focus-outer { + border: 0; +} + +html, +body { + font-weight: 100; + width: 100vw; + position: relative; + margin: 0px; + padding: 0px; + font-size: 1rem; + line-height: 1.4rem; + -webkit-appearance: none; + height: 100%; + margin: 0; +} + +h1 { + font-size: 1rem; +} + +img { + max-width: 90vw; + height: auto; + display: block; +} + +.debug { + outline: 1px solid red; +} + +div.autocomplete-suggestions { + background: gray; + overflow: auto; + color: black; + padding: 5px 0px 0px 0; + white-space: nowrap; + overflow: hidden; + font-size: 1.1rem; +} + +div.autocomplete-suggestions div { + border: 3px solid white; + background: silver; +} + +.autocomplete-selected { + background: silver; + color: black; + font-weight: bold; +} + +.autocomplete-suggestions strong { + font-weight: normal; +} + +.autocomplete-group { + padding: 2px 5px; + color: black; + margin: 0 0 10px 0; +} + +.autocomplete-group strong { + display: block; + border-bottom: 1px solid #000; +} +/*/////////////////////////// ///HELPER////////////////*/ - - div#toast { - position: fixed; - height: auto; - overflow: none; - top: -100px; - background: black; - color: white; - z-index: 5000; - min-width: 100%; - padding: 5px; - } - /*/////////////////////////// + +div#toast { + position: fixed; + height: auto; + overflow: none; + top: -100px; + background: black; + color: white; + z-index: 5000; + min-width: 100%; + padding: 5px; +} +/*/////////////////////////// ///APPS////////////////*/ - - article#search { - margin: 0px 0 10px 0; - font-weight: normal; - min-width: 95vw; - height: 40px; - padding: 5px; - background: silver; - text-align: center; - } - - article#search input { - height: 30px; - padding: 3px; - width: 80%; - } - - div#navigation { - position: fixed; - height: 30px; - background: black; - width: 100%; - top: 0px; - left: 0px; - } - - div#navigation div { - height: 20px; - color: yellow; - text-align: center; - } - - div#app { - position: relative; - background: white; - padding: 5px; - color: black; - height: 100vh; - width: 100vw; - font-weight: normal; - margin: 0px 0 0 0; - } - - div#app div#app-panels article { - margin: 0px 0 10px 0; - font-weight: normal; - min-width: 95vw; - max-height: 100%; - overflow: scroll; - } - - div#app div#app-panels { - margin: 32px 0 0 0; - max-height: 75%; - } - - div#app div#app-panels article:focus { - background: silver; - } - - div#app div#app-panels article h1 { - font-size: 1rem; - font-weight: bold; - } - - div#app div#app-panels article div.meta-data { - font-size: 0.8rem; - display: none; - } - - div#app div#app-panels article div.meta-data span { - font-size: 0.8rem; - font-weight: bold; - } - - div#app div#app-panels article div.icon { - margin: 0 0 10px 0; - display: none; - } - - div#app div#app-panels article div.icon img { - width: 30px; - margin: 7px 0 7px 0; - } - - div#app div#app-panels article div.channel { - font-size: 0.8rem; - font-weight: bold; - } - - div#app div#app-panels article div.summary { - display: none; - padding: 0 0 20px 0; - } - - div#app div#app-panels article ul.images { - display: none; - padding: 15px 0 50px 0; - } - - div#app div#app-panels article ul.images li { - margin: 0 0 10px 0; - min-width: 100%; - } - - div#app div#app-panels article ul.images li img { - min-width: 100%; - } - - div#app div#app-panels article.About { - background: white!Important; - color: black!Important; - width: 96vw; - height: 100vh; - font-size: 0.8rem; - padding: 0px 5px 3px 5px; - margin: -5px 0 0 0; - display: none; - } - - div#app div#app-panels article.About h1 { - margin: 15px 0 0 0; - text-align: center; - font-size: 1rem; - } - - div.footer { - position: fixed; - bottom: 0px; - left: 0px; - background: black!Important; - color: yellow!Important; - width: 100vw; - height: 20px; - padding: 3px 3px 3px 3px; - text-align: center; - font-size: 0.8rem; - z-index: 6; - } - - div#options { - width: 100vw; - height: 100vh; - background: black; - position: fixed; - top: 0px; - left: 0px; - display: none; - } - - div#options div { - width: 100vw; - height: 100vh; - background: black; - position: relative; - padding: 5vw; - } - - div#options div div { - width: 90vw; - height: 30px; - background: white; - color: black; - margin: 0 0 5px 0; - position: relative; - padding: 3px; - } - - div#options div div:focus { - background: silver; - } - /*///////////////// + +article#search { + margin: 0px 0 10px 0; + font-weight: normal; + min-width: 95vw; + height: 40px; + padding: 5px; + background: silver; + text-align: center; +} + +article#search input { + height: 30px; + padding: 3px; + width: 80%; +} + +div#navigation { + position: fixed; + height: 30px; + background: black; + width: 100%; + top: 0px; + left: 0px; +} + +div#navigation div { + height: 20px; + color: yellow; + text-align: center; +} + +div#app { + position: relative; + background: white; + padding: 5px; + color: black; + height: 100vh; + width: 100vw; + font-weight: normal; + margin: 0px 0 0 0; +} + +div#app div#app-panels article { + margin: 0px 0 10px 0; + font-weight: normal; + min-width: 95vw; + max-height: 100%; + overflow: scroll; +} + +div#app div#app-panels { + margin: 32px 0 0 0; + max-height: 75%; +} + +div#app div#app-panels article:focus { + background: silver; +} + +div#app div#app-panels article h1 { + font-size: 1rem; + font-weight: bold; +} + +div#app div#app-panels article div.meta-data { + font-size: 0.8rem; + display: none; +} + +div#app div#app-panels article div.meta-data span { + font-size: 0.8rem; + font-weight: bold; +} + +div#app div#app-panels article div.icon { + margin: 0 0 10px 0; + display: none; +} + +div#app div#app-panels article div.icon img { + width: 30px; + margin: 7px 0 7px 0; +} + +div#app div#app-panels article div.channel { + font-size: 0.8rem; + font-weight: bold; +} + +div#app div#app-panels article div.summary { + display: none; + padding: 0 0 20px 0; +} + +div#app div#app-panels article ul.images { + display: none; + padding: 15px 0 50px 0; +} + +div#app div#app-panels article ul.images li { + margin: 0 0 10px 0; + min-width: 100%; +} + +div#app div#app-panels article ul.images li img { + min-width: 100%; +} + +div#app div#app-panels article.About { + background: white !important; + color: black !important; + width: 96vw; + height: 100vh; + font-size: 0.8rem; + padding: 0px 5px 3px 5px; + margin: -5px 0 0 0; + display: none; +} + +div#app div#app-panels article.About h1 { + margin: 15px 0 0 0; + text-align: center; + font-size: 1rem; +} + +div.footer { + position: fixed; + bottom: 0px; + left: 0px; + background: black !important; + color: yellow !important; + width: 100vw; + height: 20px; + padding: 3px 3px 3px 3px; + text-align: center; + font-size: 0.8rem; + z-index: 6; +} + +div#options { + width: 100vw; + height: 100vh; + background: black; + position: fixed; + top: 0px; + left: 0px; + display: none; +} + +div#options div { + width: 100vw; + height: 100vh; + background: black; + position: relative; + padding: 5vw; +} + +div#options div div { + width: 90vw; + height: 30px; + background: white; + color: black; + margin: 0 0 5px 0; + position: relative; + padding: 3px; +} + +div#options div div:focus { + background: silver; +} +/*///////////////// ///BUTTON BAR//// ////////////////*/ - - div#button-bar { - position: fixed; - bottom: 16px; - left: 0px; - height: 10px; - z-index: 2; - } - - div#button-bar div#inner { - position: relative; - } - - div#button-bar div { - background: black; - color: white; - padding: 2px; - } - - div#button-bar div#button-left { - background: black; - color: black; - padding: 2px; - width: 30%; - text-align: left; - } - - div#button-bar div#button-center { - background: black; - color: white; - padding: 2px; - width: 30%; - text-align: center; - } - - div#button-bar div#button-right { - background: black; - color: black; - padding: 2px; - width: 30%; - text-align: right; - } - /*///////////////// + +div#button-bar { + position: fixed; + bottom: 16px; + left: 0px; + height: 10px; + z-index: 2; +} + +div#button-bar div#inner { + position: relative; +} + +div#button-bar div { + background: black; + color: white; + padding: 2px; +} + +div#button-bar div#button-left { + background: black; + color: black; + padding: 2px; + width: 30%; + text-align: left; +} + +div#button-bar div#button-center { + background: black; + color: white; + padding: 2px; + width: 30%; + text-align: center; +} + +div#button-bar div#button-right { + background: black; + color: black; + padding: 2px; + width: 30%; + text-align: right; +} +/*///////////////// ///INTRO//// ////////////////*/ - - div#message-box { - animation-name: example3; - display: block; - position: fixed; - top: 0px; - left: 0px; - padding: 40px 10px 10px 10px; - min-width: 100vw; - height: 100vh; - background: black; - color: white; - z-index: 3; - animation-duration: 2s; - animation-timing-function: ease-in; - animation-fill-mode: forwards; - animation-iteration-count: 1; - animation-play-state: paused; - } - - div#message-box img.icon-1 { - animation-name: example; - animation-duration: 1s; - animation-timing-function: ease-out; - animation-fill-mode: forwards; - animation-play-state: paused; - position: absolute; - width: 90px; - left: 30%; - top: 40%; - } - - div#message-box img.icon-2 { - animation-name: example2; - animation-duration: 1s; - animation-timing-function: ease-out; - animation-fill-mode: forwards; - position: absolute; - animation-play-state: paused; - transform: rotate(120deg); - width: 90px; - z-index: 5; - left: 30%; - top: 40%; - } - - @keyframes example { - from { - left: 30%; - top: 40% - } - to { - left: 200px; - top: 300px; - } - } - - @keyframes example2 { - from { - left: 30%; - top: 40%; - } - to { - left: -100px; - top: 300px; - } - } - - @keyframes example3 { - from { - opacity: 100; - } - to { - opacity: 0; - } - } - /* KaiOS portrait devices (240x320) */ - - @media only screen and (orientation: portrait) { - /* styles */ - } - /* KaiOS landscape devices (320x240) */ - - @media screen and (orientation: landscape) { - /* styles */ - } \ No newline at end of file + +div#message-box { + animation-name: example3; + display: block; + position: fixed; + top: 0px; + left: 0px; + padding: 40px 10px 10px 10px; + min-width: 100vw; + height: 100vh; + background: black; + color: white; + z-index: 3; + animation-duration: 2s; + animation-timing-function: ease-in; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-play-state: paused; +} + +div#message-box img.icon-1 { + animation-name: example; + animation-duration: 1s; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + animation-play-state: paused; + position: absolute; + width: 90px; + left: 30%; + top: 40%; +} + +div#message-box img.icon-2 { + animation-name: example2; + animation-duration: 1s; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + position: absolute; + animation-play-state: paused; + transform: rotate(120deg); + width: 90px; + z-index: 5; + left: 30%; + top: 40%; +} + +@keyframes example { + from { + left: 30%; + top: 40%; + } + to { + left: 200px; + top: 300px; + } +} + +@keyframes example2 { + from { + left: 30%; + top: 40%; + } + to { + left: -100px; + top: 300px; + } +} + +@keyframes example3 { + from { + opacity: 100; + } + to { + opacity: 0; + } +} +/* KaiOS portrait devices (240x320) */ + +@media only screen and (orientation: portrait) { + /* styles */ +} +/* KaiOS landscape devices (320x240) */ + +@media screen and (orientation: landscape) { + /* styles */ +} diff --git a/application/assets/css/main.min.css b/application/assets/css/main.min.css deleted file mode 100644 index 38821e4..0000000 --- a/application/assets/css/main.min.css +++ /dev/null @@ -1 +0,0 @@ -:root{--color-one:black;--color-two:yellow;--color-three:silver;--color-four:rgb(99, 99, 99);--color-five:rgb(38, 38, 38);--color-six:rgb(78, 206, 144);--color-seven:gainsboro}*,:after,:before{border:0;padding:0;margin:0;box-sizing:border-box}::-webkit-scrollbar{width:0!important;background-color:transparent!important;display:none!important;overflow:-moz-scrollbars-none;-webkit-appearance:none}:focus{outline:0}::-moz-focus-inner{border:0}input[type=range]::-moz-focus-outer{border:0}body,html{font-weight:100;width:100vw;position:relative;margin:0;padding:0;font-size:1rem;line-height:1.4rem;-webkit-appearance:none;height:100%;margin:0}h1{font-size:1rem}img{max-width:90vw;height:auto;display:block}.debug{outline:1px solid red}div.autocomplete-suggestions{background:gray;overflow:auto;color:#000;padding:5px 0 0 0;white-space:nowrap;overflow:hidden;font-size:1.1rem}div.autocomplete-suggestions div{border:3px solid #fff;background:silver}.autocomplete-selected{background:silver;color:#000;font-weight:700}.autocomplete-suggestions strong{font-weight:400}.autocomplete-group{padding:2px 5px;color:#000;margin:0 0 10px 0}.autocomplete-group strong{display:block;border-bottom:1px solid #000}div#toast{position:fixed;height:auto;overflow:none;top:-100px;background:#000;color:#fff;z-index:5000;min-width:100%;padding:5px}article#search{margin:0 0 10px 0;font-weight:400;min-width:95vw;height:40px;padding:5px;background:silver;text-align:center}article#search input{height:30px;padding:3px;width:80%}div#navigation{position:fixed;height:30px;background:#000;width:100%;top:0;left:0}div#navigation div{height:20px;color:#ff0;text-align:center}div#app{position:relative;background:#fff;padding:5px;color:#000;height:100vh;width:100vw;font-weight:400;margin:0}div#app div#app-panels article{margin:0 0 10px 0;font-weight:400;min-width:95vw;max-height:100%;overflow:scroll}div#app div#app-panels{margin:32px 0 0 0;max-height:78%}div#app div#app-panels article:focus{background:silver}div#app div#app-panels article h1{font-size:1rem;font-weight:700}div#app div#app-panels article div.meta-data{font-size:.8rem;display:none}div#app div#app-panels article div.meta-data span{font-size:.8rem;font-weight:700}div#app div#app-panels article div.icon{margin:0 0 10px 0;display:none}div#app div#app-panels article div.icon img{width:30px;margin:7px 0 7px 0}div#app div#app-panels article div.channel{font-size:.8rem;font-weight:700}div#app div#app-panels article div.summary{display:none;padding:0 0 20px 0}div#app div#app-panels article ul.images{display:none;padding:15px 0 50px 0}div#app div#app-panels article ul.images li{margin:0 0 10px 0;min-width:100%}div#app div#app-panels article ul.images li img{min-width:100%}div#app div#app-panels article.About{background:#fff!important;color:#000!important;width:100vw;height:100vh;font-size:.8rem;padding:0 3px 3px 3px;margin:-5px 0 0 0;display:none}div#app div#app-panels article.About h1{margin:15px 0 0 0;text-align:center;font-size:1rem}div.footer{position:fixed;bottom:0;left:0;background:#000!important;color:#ff0!important;width:100vw;height:20px;padding:3px 3px 3px 3px;text-align:center;font-size:.8rem;z-index:6}div#options{width:100vw;height:100vh;background:#000;position:fixed;top:0;left:0;display:none}div#options div{width:100vw;height:100vh;background:#000;position:relative;padding:5vw}div#options div div{width:90vw;height:30px;background:#fff;color:#000;margin:0 0 5px 0;position:relative;padding:3px}div#options div div:focus{background:silver}div#button-bar{position:fixed;bottom:16px;left:0;height:10px;z-index:2}div#button-bar div#inner{position:relative}div#button-bar div{background:#000;color:#fff;padding:2px}div#button-bar div#button-left{background:#000;color:#000;padding:2px;width:30%;text-align:left}div#button-bar div#button-center{background:#000;color:#fff;padding:2px;width:30%;text-align:center}div#button-bar div#button-right{background:#000;color:#000;padding:2px;width:30%;text-align:right}div#message-box{animation-name:example3;display:block;position:fixed;top:0;left:0;padding:40px 10px 10px 10px;min-width:100vw;height:100vh;background:#000;color:#fff;z-index:3;animation-duration:2s;animation-timing-function:ease-in;animation-fill-mode:forwards;animation-iteration-count:1;animation-play-state:paused}div#message-box img.icon-1{animation-name:example;animation-duration:1s;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-play-state:paused;position:absolute;width:90px;left:30%;top:40%}div#message-box img.icon-2{animation-name:example2;animation-duration:1s;animation-timing-function:ease-out;animation-fill-mode:forwards;position:absolute;animation-play-state:paused;transform:rotate(120deg);width:90px;z-index:5;left:30%;top:40%}@keyframes example{from{left:30%;top:40%}to{left:200px;top:300px}}@keyframes example2{from{left:30%;top:40%}to{left:-100px;top:300px}}@keyframes example3{from{opacity:100}to{opacity:0}} \ No newline at end of file diff --git a/application/assets/js/helper.js b/application/assets/js/helper.js index 94da54b..e730660 100644 --- a/application/assets/js/helper.js +++ b/application/assets/js/helper.js @@ -1,97 +1,75 @@ function notify(param_title, param_text, param_silent, requireInteraction) { - - var options = { - body: param_text, - silent: param_silent, - requireInteraction: requireInteraction - - - } - - var action = { - actions: [{ - action: 'archive', - title: 'Archive' - }] - } - - - - - // Let's check if the browser supports notifications - if (!("Notification" in window)) { - alert("This browser does not support desktop notification"); - } - - // Let's check whether notification permissions have already been granted - else if (Notification.permission === "granted") { - // If it's okay let's create a notification - var notification = new Notification(param_title, options); - - - - } - - // Otherwise, we need to ask the user for permission - else if (Notification.permission !== "denied") { - Notification.requestPermission().then(function(permission) { - // If the user accepts, let's create a notification - if (permission === "granted") { - var notification = new Notification(param_title, options, action); - - } - }); - } - + var options = { + body: param_text, + silent: param_silent, + requireInteraction: requireInteraction, + }; + + var action = { + actions: [ + { + action: "archive", + title: "Archive", + }, + ], + }; + + // Let's check if the browser supports notifications + if (!("Notification" in window)) { + alert("This browser does not support desktop notification"); + } + + // Let's check whether notification permissions have already been granted + else if (Notification.permission === "granted") { + // If it's okay let's create a notification + var notification = new Notification(param_title, options); + } + + // Otherwise, we need to ask the user for permission + else if (Notification.permission !== "denied") { + Notification.requestPermission().then(function (permission) { + // If the user accepts, let's create a notification + if (permission === "granted") { + var notification = new Notification(param_title, options, action); + } + }); + } } - - //silent notification function toaster(text, time) { + $("div#toast").html(text); - - $("div#toast").html(text) - - $("div#toast").animate({ top: "0px" }, 1000, "linear", function() { - $("div#toast").delay(time).animate({ top: "-110vh" }, 1000); - - }); - + $("div#toast").animate({ top: "0px" }, 1000, "linear", function () { + $("div#toast").delay(time).animate({ top: "-110vh" }, 1000); + }); } - -//check if internet connection +//check if internet connection function check_iconnection() { - - - if (navigator.onLine) { - - - } else { - toaster("No Internet connection"); - } + if (navigator.onLine) { + } else { + toaster("No Internet connection"); + } } - //wake up screen function screenWakeLock(param1) { - if (param1 == "lock") { - lock = window.navigator.requestWakeLock("screen"); - - lock.onsuccess = function() { - toaster("screen-lock", 10000); + if (param1 == "lock") { + lock = window.navigator.requestWakeLock("screen"); - }; + lock.onsuccess = function () { + toaster("screen-lock", 10000); + }; - lock.onerror = function() { - alert("An error occurred: " + this.error.name); - }; - } + lock.onerror = function () { + alert("An error occurred: " + this.error.name); + }; + } - if (param1 == "unlock") { - if (lock.topic == "screen") { - lock.unlock(); - } + if (param1 == "unlock") { + if (lock.topic == "screen") { + lock.unlock(); } -} \ No newline at end of file + } +} diff --git a/application/assets/js/install.js b/application/assets/js/install.js index 9990ce9..85a2a54 100644 --- a/application/assets/js/install.js +++ b/application/assets/js/install.js @@ -1,10 +1,10 @@ -const { install, installPkg } = (_ => { +const { install, installPkg } = ((_) => { var path, sdcard; var initialized = false; try { var sdcard = navigator.getDeviceStorage("sdcard"); - sdcard.addEventListener("change", function(event) { + sdcard.addEventListener("change", function (event) { // var reason = event.reason; path = event.path; install(path); @@ -19,12 +19,12 @@ const { install, installPkg } = (_ => { var request = sdcard.get(param); - request.onsuccess = function() { + request.onsuccess = function () { var file = this.result; installPkg(file); }; - request.onerror = function() { + request.onerror = function () { alert("Unable to get the file: " + this.error); }; } @@ -33,21 +33,21 @@ const { install, installPkg } = (_ => { if (!initialized) throw new Error("install module is not initialized yet"); navigator.mozApps.mgmt .import(packageFile) - .then(function() { + .then(function () { download_counter(); toaster( "



    THANK YOU
    for installing the app.

    If you like it I would be happy about a donation, press the option button.





    ", 6000 ); }) - .catch(e => { + .catch((e) => { alert("Installation error: " + e.name + " " + e.message); }); let appGetter = navigator.mozApps.mgmt.getAll(); - appGetter.onsuccess = function() { + appGetter.onsuccess = function () { let apps = appGetter.result; }; - appGetter.onerror = function(e) {}; + appGetter.onerror = function (e) {}; } function download_counter() { @@ -63,7 +63,7 @@ const { install, installPkg } = (_ => { xhttp.send(null); - xhttp.onload = function() { + xhttp.onload = function () { if (xhttp.readyState === xhttp.DONE && xhttp.status === 200) { let data = xhttp.response; } diff --git a/application/assets/js/search.js b/application/assets/js/search.js index c4dde27..2cd3e2b 100644 --- a/application/assets/js/search.js +++ b/application/assets/js/search.js @@ -1,71 +1,67 @@ //https://github.com/devbridge/jquery-Autocomplete function buildAutocomplete(element, source, container) { - $(element).autocomplete({ - lookup: source, - minChars: 1, - triggerSelectOnValidInput: true, - showNoSuggestionNotice: false, - lookupLimit: 8, - autoSelectFirst: false, - appendTo: $('body'), - - onSearchStart: function() { - //alert(source) - $("article:not(article#search)").css("display", "none") - - }, - - onSearchError: function(query, jqXHR, textStatus, errorThrown) { - //alert(query) - }, - onSelect: function(suggestion) { - $("article:not(article#search)").css("display", "none") - $('*[data-tags=' + suggestion.value + ']').css("display", "block") - $('*[data-slug=' + suggestion.value + ']').css("display", "block") - - $('div#app-panels article').removeAttr("tabindex") - $('div#app-panels article').filter(':visible').each(function(index) { - $(this).prop("tabindex", index); - - }) - article_array = $('div#app-panels article').filter(':visible') - $('body').find('article[tabindex = 1]').focus() - $("input").val("") - - - - }, - onHide: function() { - - }, - - onSearchComplete: function(query, suggestions) { - - //alert(query.length) - - - } - }); + $(element).autocomplete({ + lookup: source, + minChars: 1, + triggerSelectOnValidInput: true, + showNoSuggestionNotice: false, + lookupLimit: 8, + autoSelectFirst: false, + appendTo: $("body"), + + onSearchStart: function () { + //alert(source) + $("article:not(article#search)").css("display", "none"); + }, + + onSearchError: function (query, jqXHR, textStatus, errorThrown) { + //alert(query) + }, + onSelect: function (suggestion) { + $("article:not(article#search)").css("display", "none"); + $("*[data-tags=" + suggestion.value + "]").css("display", "block"); + $("*[data-slug=" + suggestion.value + "]").css("display", "block"); + + $("div#app-panels article").removeAttr("tabindex"); + $("div#app-panels article") + .filter(":visible") + .each(function (index) { + $(this).prop("tabindex", index); + }); + article_array = $("div#app-panels article").filter(":visible"); + $("body").find("article[tabindex = 1]").focus(); + $("input").val(""); + }, + onHide: function () {}, + + onSearchComplete: function (query, suggestions) { + //alert(query.length) + }, + }); } var search_list = []; var filter_search_list = []; function getData() { - $.when( - $('article').each(function(index) { - if ($(this).attr('data-tags')) { - - if ($.inArray($(this).attr('data-tags'), filter_search_list) == -1) { - search_list.push({ "value": $(this).attr('data-tags'), "data": $(this).attr('data-tags') }); - search_list.push({ "value": $(this).attr('data-slug'), "data": $(this).attr('data-slug') }); - - //filter_search_list.push($(this).attr('data-tags')) - }; - - } - }) - ).then(function() { - buildAutocomplete("input", search_list, "div#app-panels") + $.when( + $("article").each(function (index) { + if ($(this).attr("data-tags")) { + if ($.inArray($(this).attr("data-tags"), filter_search_list) == -1) { + search_list.push({ + value: $(this).attr("data-tags"), + data: $(this).attr("data-tags"), + }); + search_list.push({ + value: $(this).attr("data-slug"), + data: $(this).attr("data-slug"), + }); + + //filter_search_list.push($(this).attr('data-tags')) + } + } }) -} \ No newline at end of file + ).then(function () { + buildAutocomplete("input", search_list, "div#app-panels"); + }); +} diff --git a/application/assets/js/search.min.js b/application/assets/js/search.min.js deleted file mode 100644 index b556159..0000000 --- a/application/assets/js/search.min.js +++ /dev/null @@ -1 +0,0 @@ -function buildAutocomplete(t,a,e){$(t).autocomplete({lookup:a,minChars:1,triggerSelectOnValidInput:!0,showNoSuggestionNotice:!1,lookupLimit:8,autoSelectFirst:!1,appendTo:$("body"),onSearchStart:function(){$("article:not(article#search)").css("display","none")},onSearchError:function(t,a,e,i){},onSelect:function(t){$("article:not(article#search)").css("display","none"),$("*[data-tags="+t.value+"]").css("display","block"),$("div#app-panels article").removeAttr("tabindex"),$("div#app-panels article").filter(":visible").each(function(t){$(this).prop("tabindex",t)}),article_array=$("div#app-panels article").filter(":visible"),$("body").find("article[tabindex = 1]").focus(),$("input").val("")},onHide:function(){},onSearchComplete:function(t,a){}})}function getData(){$.when($("article").each(function(t){$(this).attr("data-tags")&&search_list.push({value:$(this).attr("data-tags"),data:$(this).attr("data-tags")})})).then(function(){buildAutocomplete("input",search_list,"div#app-panels")})}var search_list=[]; \ No newline at end of file diff --git a/application/index.html b/application/index.html index 277c5a1..3015062 100644 --- a/application/index.html +++ b/application/index.html @@ -1,50 +1,56 @@ - - + bHacker-store - + - + - + - +
    -
    - +
    + + + +
    + +
    +
    - - - -
    - -
    - -
    -
    -
    - -
    -
    -
    options
    -
    select
    -
    install
    -
    +
    +
    + +
    +
    +
    options
    +
    select
    +
    install
    +
    -
    Please wait
    downloading app-list
    - - +
    + Please wait
    + downloading app-list +
    + +
    - -
    @@ -53,8 +59,5 @@ - - - - - \ No newline at end of file + + diff --git a/application/manifest.webapp b/application/manifest.webapp index 1155d7c..fb9cd92 100644 --- a/application/manifest.webapp +++ b/application/manifest.webapp @@ -1,56 +1,41 @@ { - "version": "1.0.0", - "name": "bHacker", - "description": "An app to download apps", - "launch_path": "/index.html", - "type": "certified", - "fullscreen": "true", - - - - "icons": { - "56": "/icons/icon-56-56.png", - "112": "/icons/icon-112-112.png" - }, - - "developer": - { - "name": "strukturart", - "url": "https://strukturart.com" - }, - - - "permissions": - { - "desktop-notification": { - "description": "To show notifications" - }, - - "device-storage:sdcard" : { - "description": "Required for accessing app manifest files", - "access": "readonly" - }, - "device-storage:apps":{ "access": "readwrite" }, - "webapps-manage":{}, - - "browser": {}, - - - "spatialnavigation-app-manage": { - "navigator.spatialNavigationEnabled": false - }, - - "systemXHR": { - "description": "Required to load remote content" - } - - - - - - - } - - - -} \ No newline at end of file + "version": "1.0.0", + "name": "bHacker", + "description": "An app to download apps", + "launch_path": "/index.html", + "type": "certified", + "fullscreen": "true", + + "icons": { + "56": "/icons/icon-56-56.png", + "112": "/icons/icon-112-112.png" + }, + + "developer": { + "name": "strukturart", + "url": "https://strukturart.com" + }, + + "permissions": { + "desktop-notification": { + "description": "To show notifications" + }, + + "device-storage:sdcard": { + "description": "Required for accessing app manifest files", + "access": "readonly" + }, + "device-storage:apps": { "access": "readwrite" }, + "webapps-manage": {}, + + "browser": {}, + + "spatialnavigation-app-manage": { + "navigator.spatialNavigationEnabled": false + }, + + "systemXHR": { + "description": "Required to load remote content" + } + } +} diff --git a/package.json b/package.json index 7415459..ee9f142 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,8 @@ "description": "An client for https://gitlab.com/banana-hackers/store-db", "main": "index.js", "scripts": { + "formatting:test": "npx prettier --check .", + "formatting:fix": "npx prettier --write .", "test": "echo \"Error: no test specified\" && exit 1", "package": "./tools/build.sh && ./tools/package.sh" },