From 71b99fe2d9002b747034ea92a86a493d47a68e75 Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Fri, 17 Dec 2021 16:16:11 -0600 Subject: [PATCH] first iteration of settings menus complete --- node_modules/.cache/.eslintcache | 2 +- src/index.css | 147 ++++++++++++++++-- src/index.js | 251 ++++++++++++++++++++++++------- 3 files changed, 328 insertions(+), 72 deletions(-) diff --git a/node_modules/.cache/.eslintcache b/node_modules/.cache/.eslintcache index ce090652..8907521a 100644 --- a/node_modules/.cache/.eslintcache +++ b/node_modules/.cache/.eslintcache @@ -1 +1 @@ -[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":22896,"mtime":1639695960041,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"ikqo75","/home/seanedmunds/dev/home-page/src/index.js",["6","7","8"],{"ruleId":"9","severity":1,"message":"10","line":1,"column":10,"nodeType":"11","messageId":"12","endLine":1,"endColumn":16},{"ruleId":"13","severity":1,"message":"14","line":195,"column":11,"nodeType":"15","endLine":195,"endColumn":61},{"ruleId":"16","severity":1,"message":"17","line":746,"column":1,"nodeType":"18","messageId":"19","endLine":749,"endColumn":2},"no-unused-vars","'render' is defined but never used.","Identifier","unusedVar","jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-extend-native","String prototype is read only, properties should not be added.","AssignmentExpression","unexpected"] \ No newline at end of file +[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":27677,"mtime":1639779365084,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"ikqo75","/home/seanedmunds/dev/home-page/src/index.js",["6","7","8","9"],{"ruleId":"10","severity":1,"message":"11","line":1,"column":10,"nodeType":"12","messageId":"13","endLine":1,"endColumn":16},{"ruleId":"10","severity":1,"message":"14","line":167,"column":10,"nodeType":"12","messageId":"13","endLine":167,"endColumn":19},{"ruleId":"15","severity":1,"message":"16","line":184,"column":11,"nodeType":"17","endLine":184,"endColumn":61},{"ruleId":"18","severity":1,"message":"19","line":885,"column":1,"nodeType":"20","messageId":"21","endLine":888,"endColumn":2},"no-unused-vars","'render' is defined but never used.","Identifier","unusedVar","'ModalMenu' is defined but never used.","jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-extend-native","String prototype is read only, properties should not be added.","AssignmentExpression","unexpected"] \ No newline at end of file diff --git a/src/index.css b/src/index.css index 502b0d0b..02e3611f 100644 --- a/src/index.css +++ b/src/index.css @@ -175,6 +175,7 @@ a:hover #app-address{ background-color: transparent; text-align: center; position: relative; + padding: .3em; } .abackground > i{ text-align: left; @@ -392,6 +393,7 @@ table a{ margin-right: auto; margin-top: 2vh; width: 75%; + padding-top: .3em; } #settings-nav{ @@ -405,7 +407,7 @@ table a{ margin-left: 0em; margin-right: 0em; height: 95vh; - background-color: var(--color-background); + background-color: var(--color-search-background); border-radius: 1em; } #settings-nav div{ @@ -445,7 +447,7 @@ table a{ margin-left: 0em; margin-right: 0em; height: 95vh; - background-color: var(--color-background); + background-color: var(--color-search-background); border-radius: 1em; overflow: auto; } @@ -460,6 +462,19 @@ table a{ display: grid; text-align: center; } +#settings-panel button:not(.theme-button) { + color: var(--color-text-pri); + margin: 1em; + padding-top: .5em; + padding-bottom: .5em; + padding-left: 1em; + padding-right: 1em; + border: 0px none; + background-color: var(--color-background); +} +#settings-panel button:hover:not(.theme-button) { + background-color: var(--color-search-background); +} /* Personalization Form */ @@ -502,7 +517,6 @@ table a{ #messageForm input { border: var(--color-border); padding-left: 1em; - height: 1hv; } #messageForm input:focus { border: var(--color-border); @@ -513,6 +527,87 @@ table a{ grid-row-gap: 1vh; } +/* Application Form */ + +#applicationForm { + display: grid; + grid-column-gap: 1vh; + grid-row-gap: 1vh; + grid-template-columns: 1fr; + width: 100vh; + text-align: end; +} +#applicationForm label { + width: 100%; + padding-right: 1em; +} +#applicationForm input { + border: var(--color-border); + padding-left: 1em; +} +#applicationForm input:focus { + border: var(--color-border); +} +#applicationGrid { + display: grid; + grid-template-columns: 5% 10% 5% 30% 5% 10% 10% 10% 5% 5%; + grid-row-gap: 1vh; +} + +/* Bookmark Form */ + +#bookmarkForm { + display: grid; + grid-column-gap: 1vh; + grid-row-gap: 1vh; + grid-template-columns: 1fr; + width: 100vh; + text-align: end; +} +#bookmarkForm label { + width: 100%; + padding-right: 1em; +} +#bookmarkForm input { + border: var(--color-border); + padding-left: 1em; +} +#bookmarkForm input:focus { + border: var(--color-border); +} +#bookmarkGrid { + display: grid; + grid-template-columns: 5% 25% 10% 60%; + grid-row-gap: 1vh; +} + +/* Providers Form */ + +#providersForm { + display: grid; + grid-column-gap: 1vh; + grid-row-gap: 1vh; + grid-template-columns: 1fr; + width: 100vh; + text-align: end; +} +#providersForm label { + width: 100%; + padding-right: 1em; +} +#providersForm input { + border: var(--color-border); + padding-left: 1em; +} +#providersForm input:focus { + border: var(--color-border); +} +#providersGrid { + display: grid; + grid-template-columns: 5% 10% 5% 10% 5% 65%; + grid-row-gap: 1vh; +} + /* MODAL */ @@ -538,17 +633,15 @@ table a{ #modal>div{ background-color: var(--color-background); color: var(--color-text-acc); - box-shadow: 0 14px 28px var(--color-search-background), 0 15px 12px rgba(0, 0, 0, .35); margin-left: auto; margin-right: auto; padding: 2em; margin-top: 5vh; margin-bottom: 5vh; width: 50%; - display: flex; + display: grid; flex-direction: column; border-radius: 1em; - backdrop-filter: blur(10px); } #modal h1{ @@ -568,7 +661,7 @@ table a{ #modal-footer{ display:flex; font-size:2em; - justify-content: flex-start; + justify-content: center; } #modal-footer a{ @@ -585,11 +678,10 @@ table a{ } #modal-footer input[type="checkbox"]:checked + label{ - color: var(--color-text-alt); + color: var(--color-text-acc); } .sneaky{ - position: absolute; right: 1em; } @@ -617,9 +709,10 @@ table a{ #modal-theme{ border-bottom: 0px solid var(--color-text-acc); - display: flex; - flex-wrap: wrap; - margin-bottom: 2em; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-column-gap: 2em; + grid-row-gap: 0em; } #providers{ @@ -631,12 +724,30 @@ table a{ /* THEMING */ .theme-button{ - font-size: 0.8em; - margin: 2px; + font-size: 1em; + font-weight:500; + margin: 20px; width:128px; line-height: 3em; text-align: center; text-transform: uppercase; + border-radius: 1em; +} + +.theme-row{ + display: grid; + grid-template-rows: 1fr 1fr; + height: fit-content; +} + +.theme-palette { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; +} + +.swatch{ + height: 30%; + width: 100%; } .theme-blackboard{ @@ -675,6 +786,12 @@ table a{ color: #aeea00; } +.theme-white{ + background-color: #ffffff; + border: 4px solid #222222; + color: #dddddd; +} + .theme-passion{ background-color: #f5f5f5; border: 4px solid #8e24aa; @@ -709,7 +826,7 @@ table a{ border: 4px solid #F3E600; color: #FF2A6D; } -.theme-cyberpunk{ +.theme-quadra{ background-color: #010115; border: 4px solid #F3E600; color: #FF2A6D; diff --git a/src/index.js b/src/index.js index c6fba8b6..37d74154 100644 --- a/src/index.js +++ b/src/index.js @@ -36,9 +36,6 @@ function Homepage() {
-
- -
- +
); @@ -84,7 +81,7 @@ function Header(props) { } const Applications = () => { - const data = (getApps()).apps; + let data = (getApps()).apps; return (

Applications

@@ -104,7 +101,6 @@ const Applications = () => { ); } - function Apps(props) { let classNameType = props.NSFW + "-content"; @@ -128,41 +124,34 @@ function Apps(props) { } function Bookmarks() { - let bookmarkList = getLinks(); - var items = []; - for (var i = 0; i < bookmarkList.bookmarks.length; i++) { - items.push( - - ); - } + let bookmarkList = (getLinks()).bookmarks; return ( ); } function LinkGroups(props) { - var items = []; - for (var i = 0; i < props.links.length; i++) { - items.push( - - ); - } + let links = props.links; return ( ); } @@ -212,7 +201,7 @@ function ModalMenu() { - + @@ -267,19 +256,20 @@ function Provider(props) { ); } -function ModalInit() { +function SettingsButton() { setDisplayedItems(); return ( ); } function Settings() { setTheme(); + var isChecked = localStorage.getItem("contenttype"); return (
@@ -289,8 +279,14 @@ function Settings() { Applications Bookmarks Themes + Search Providers
@@ -305,11 +301,11 @@ const PersonalizationSettings = () => { }; return (
-
-
+

Personalization

Personal details

-
+
+

Greetings

@@ -350,24 +346,19 @@ function FormInput(props) { } function MessageInfo() { - let greetings = require('./messages.json'); - var items = []; - for (var i = 0; i < greetings.messages.length; i++) { - items.push( - - ); - } + let greetings = (require('./messages.json')).messages; return (
- {items} + {greetings.map((greetings, index) => ( + + ))}
- ); } @@ -393,26 +384,173 @@ function Messages(props) { ); } -function AppSettings() { +const ApplicationSettings = () => { + let apps = (getApps()).apps + const handleSubmit = (e) => { + e.preventDefault(); + }; return (
-

Applications

+
+

Applications

+
+ + {apps.map((apps) => ( + + ))} + + +
+ + ); +} + +function ApplicationDetails(props) { + + var nsfwChecked; + if(props.NSFW === "NSFW") { + nsfwChecked = true; + } else if(props.easterEgg === "SAFE") { + nsfwChecked = false; + } else { + nsfwChecked = false; + } + return ( +
+ + + + + + + + + +
); } -function BookmarksSettings() { +const BookmarksSettings = () => { + let groups = (getLinks()).bookmarks; + const handleSubmit = (e) => { + e.preventDefault(); + }; return (
-

Bookmarks

+
+

Bookmarks

+
+
+
+ {groups.map((groups) => ( + + ))} +
+
+ +
+ + ); +} + +function BookmarkGroups(props) { + let links = props.links; + return ( +
+

{props.category}

+ {links.map((links) => ( + + ))} +
+ ); +} + +function BookmarkDetails(props) { + return ( +
+ + + +
); } function ThemesSettings() { + let themes = (getThemes()).themes; + console.log(themes[0].colorbackground); return (

Themes

+ +
+ ); +} + +function ProviderSettings() { + let providers = (getProviders()).providers; + const handleSubmit = (e) => { + e.preventDefault(); + }; + return ( +
+
+

Providers

+
+
+ {providers.map((providers) => ( + + ))} + + +
+ + ); +} + +function ProvidersDetails(props) { + return ( +
+ + + + + +
); } @@ -423,9 +561,10 @@ ReactDOM.render( } /> }> }/> - }/> + }/> }/> }/> + }/> ,