Kezdőlap Felfedezés Súgó
Bejelentkezés
cixo-electronic
/
cx-live-documentary
2
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

Add theme to project.

cixo 1 éve
szülő
4eadd57788
commit
69024ff567
13 módosított fájl, 147 hozzáadás és 9 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 6 0
      assets/core.js
  2. 4 3
      assets/items_list.js
  3. 30 0
      assets/logo.js
  4. 11 6
      assets/search.js
  5. 4 0
      core.html
  6. 6 0
      theme/app.css
  7. 7 0
      theme/core.css
  8. 3 0
      theme/font.css
  9. 5 0
      theme/items_list.css
  10. 9 0
      theme/logo.css
  11. 49 0
      theme/search.css
  12. 7 0
      theme/top_bar.css
  13. 6 0
      theme/vars.css

+ 6 - 0
assets/core.js
Fájl Megtekintése 

@@ -4,6 +4,7 @@ import { position, place_top } from "./position.js";
 
 import { sticky } from "./sticky.js";
 
 import { loader } from "./loader.js";
 
 import { database } from "./database.js";
 
+import { logo } from "./logo.js";
 
 
 document.addEventListener("DOMContentLoaded", async () => {
 
     const container = document.querySelector(".container");
 
@@ -19,10 +20,15 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     top_bar_builder.position = new place_top();
 
 
     const top_bar = top_bar_builder.element;
 
+    top_bar.className = "top-bar";
 
+    top_bar.appendChild(document.createElement("div"));
 
 
     const search_bar = new search(store);
 
     top_bar.appendChild(search_bar.ui);
 
 
+    const name = new logo(store.content.name);
 
+    top_bar.appendChild(name.ui);
 
+
 
     container.appendChild(top_bar);
 
 });

+ 4 - 3
assets/items_list.js
Fájl Megtekintése 

@@ -37,6 +37,7 @@ class items_list {
 
         const name = document.createElement("span");
 
 
         name.innerText = content.name;
 
+        icon.className = "material-symbols-outlined";
 
         container.className = "single-element";
 
 
         container.addEventListener("click", () => {
 
@@ -44,11 +45,11 @@ class items_list {
 
         });
 
 
         if (content instanceof project) {
 
-            icon.innerText = "project";
 
+            icon.innerText = "tactic";
 
         } else if (content instanceof element) {
 
-            icon.innerText = "element";
 
+            icon.innerText = "stroke_partial";
 
         } else if (content instanceof submission) {
 
-            icon.innerText = "submission";
 
+            icon.innerText = "book_3";
 
         }
 
 
         text.appendChild(icon);

+ 30 - 0
assets/logo.js
Fájl Megtekintése 

@@ -0,0 +1,30 @@
 
+import { is_string } from "./functions.js";
 
+
 
+class logo {
 
+    #name;
 
+
 
+    constructor(name) {
 
+        if (!is_string(name)) {
 
+            throw "Name must be an string.";
 
+        }
 
+
 
+        this.#name = name;
 
+    }   
+
 
+    get name() {
 
+        return this.#name;
 
+    }
 
+
 
+    get ui() {
 
+        const container = document.createElement("div");
 
+        container.className = "logo";
 
+
 
+        const name = document.createElement("span");
 
+        name.innerText = this.name;
 
+        
+        container.appendChild(name);
 
+        return container;
 
+    }
 
+} 
+
 
+export { logo };

+ 11 - 6
assets/search.js
Fájl Megtekintése 

@@ -23,6 +23,7 @@ class search {
 
 
         this.#hint = document.createElement("div");
 
         this.#hint.className = "hint";
 
+        this.#hint.style.display = "none";
 
 
         this.#input = document.createElement("input");
 
         this.#input.type = "text";
 
@@ -86,11 +87,7 @@ class search {
 
     }
 
 
     find() {
 
-        if (!this.changed) {
 
-            return;
 
-        }
 
-        
-        this.#list.update(this.results);
 
+        this.refresh();
 
     }
 
 
     refresh() {
 
@@ -98,7 +95,15 @@ class search {
 
             return;
 
         }
 
     
-        this.#list.update(this.results);
 
+        const results = this.results;
 
+
 
+        this.#list.update(results);
 
+    
+        if (results.length === 0) {
 
+            this.#hint.style.display = "none";
 
+        } else {
 
+            this.#hint.style.display = "";
 
+        }
 
     }
 
 
     get ui() {

+ 4 - 0
core.html
Fájl Megtekintése 

@@ -4,6 +4,10 @@
 
     <head>
 
         <meta charset="UTF-8">
 
         <title>cx-live-documentary</title>
 
+        <link rel="preconnect" href="https://fonts.googleapis.com">
 
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
 
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> 
         <link rel="stylesheet" type="text/css" href="theme/core.css">
 
         <script type="module" src="assets/core.js"></script>
 
     </head>

+ 6 - 0
theme/app.css
Fájl Megtekintése 

@@ -0,0 +1,6 @@
 
+body {
 
+    margin: 0px;
 
+    padding: 0px;
 
+    background-color: var(--background-color);
 
+    color: var(--font-color);
 
+}

+ 7 - 0
theme/core.css
Fájl Megtekintése 

@@ -0,0 +1,7 @@
 
+@import url("./vars.css");
 
+@import url("./app.css");
 
+@import url("./font.css");
 
+@import url("./top_bar.css");
 
+@import url("./logo.css");
 
+@import url("./search.css");
 
+@import url("./items_list.css");

+ 3 - 0
theme/font.css
Fájl Megtekintése 

@@ -0,0 +1,3 @@
 
+* {
 
+    font-family: "Open Sans", sans-serif;
 
+}

+ 5 - 0
theme/items_list.css
Fájl Megtekintése 

@@ -0,0 +1,5 @@
 
+.elements-list .single-element p {
 
+    display: flex;
 
+    align-content: center;
 
+    align-items: center;
 
+}

+ 9 - 0
theme/logo.css
Fájl Megtekintése 

@@ -0,0 +1,9 @@
 
+.logo {
 
+    padding: 10px 20px;
 
+    margin: 20px;
 
+    border-radius: 10px;
 
+    color: var(--secondary-color);
 
+    border: var(--primary-color) 3px solid;
 
+    font-weight: bold;
 
+    box-shadow: 0px 0px 36px 0px var(--primary-color);
 
+}

+ 49 - 0
theme/search.css
Fájl Megtekintése 

@@ -0,0 +1,49 @@
 
+.search input[type="text"] {
 
+    font-size: 16px;
 
+    padding: 10px 20px;
 
+    margin: 20px 0px 20px 20px;
 
+    border: none;
 
+    width: 35vw;
 
+    border-radius: 2em 0px 0px 2em;
 
+    background-color: var(--primary-color);
 
+    outline: none !important;
 
+    color: var(--font-color);
 
+}
 
+
 
+.search input[type="submit"] {
 
+    border: var(--primary-color) 3px solid;
 
+    padding: 7px 20px;
 
+    font-size: 16px;
 
+    background-color: rgba(0, 0, 0, 0);
 
+    color: var(--secondary-color);
 
+    border-radius: 0px 2em 2em 0px;
 
+    cursor: pointer;
 
+    transition: background-color 0.5s, color 0.5s;
 
+}
 
+
 
+.search input[type="submit"]:hover {
 
+    background-color: var(--primary-color);
 
+    color: var(--font-color);
 
+}
 
+
 
+.hint {
 
+    margin: 20px;
 
+    background-color: var(--background-color);
 
+    border: var(--primary-color) 3px solid;
 
+    border-radius: 20px;
 
+    max-height: 400px;
 
+    overflow-y: auto;
 
+    width: 300px;
 
+}
 
+
 
+.hint .single-element {
 
+    padding-left: 20px;
 
+}
 
+
 
+.hint .single-element {
 
+    border-bottom: var(--primary-color) 1px solid;
 
+}
 
+
 
+.hint .single-element:last-child {
 
+    border-bottom: none;
 
+}

+ 7 - 0
theme/top_bar.css
Fájl Megtekintése 

@@ -0,0 +1,7 @@
 
+.top-bar {
 
+    display: flex;
 
+    flex-direction: row;
 
+    flex-wrap: nowrap;
 
+    justify-content: space-between;
 
+    align-items: flex-start;
 
+}

+ 6 - 0
theme/vars.css
Fájl Megtekintése 

@@ -0,0 +1,6 @@
 
+:root {
 
+    --background-color: #0A090C;
 
+    --font-color: #FFFFFF;
 
+    --primary-color: #07393C;
 
+    --secondary-color: #2C666E;
 
+}