diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 723ef36..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.idea \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..8c9d83d --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +# Roster Grid +A smash-bros roster grid template in Vue + +## [View demo](klemek.github.io/roster-grid/) \ No newline at end of file diff --git a/index.html b/index.html index 44b4c35..16ccebe 100644 --- a/index.html +++ b/index.html @@ -2,30 +2,105 @@ - <!-- TODO -->Change this you moron - + Roster grid - - - + + -
-

{{title}}

-
-

-
- @Klemek - Github Repository - {{currentYear}} +
+
+

click to add items

+
+ #{{ item.id }} +
+
+ diff --git a/main.js b/main.js deleted file mode 100644 index 5dd8606..0000000 --- a/main.js +++ /dev/null @@ -1,109 +0,0 @@ -/* exported app, utils */ - -const utils = { - ajax: { - proxy: 'cors-anywhere.herokuapp.com', - /** - * Define a get HTTP request to be executed with .then/.catch - * @param {string} url - * @param {Object} data - * @param {boolean} proxy - use cors proxy - * @returns {Promise} return JSON parsed data or string - */ - get: (url, data, proxy = false) => { - return new Promise((resolve, reject) => { - if (data && Object.keys(data).length) { - url += '?' + Object.keys(data) - .map(k => k + '=' + encodeURIComponent(data[k])) - .join('&') - .replace(/%20/g, '+'); - } - const xhr = new XMLHttpRequest(); - if (proxy) { - const http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); - url = `${http}//${utils.ajax.proxy}/${url}`; - } - xhr.open('GET', url); - xhr.onload = () => { - try { - resolve(JSON.parse(xhr.responseText)); - } catch (ignored) { - resolve(xhr.responseText); - } - }; - xhr.onerror = () => reject(xhr); - xhr.send(); - }); - }, - }, - cookies: { - /** - * Save a value in a cookie - * @param {string} name - * @param {string} value - * @param {number | undefined} days - */ - set: function (name, value, days = undefined) { - const maxAge = !days ? undefined : days * 864e2; - document.cookie = `${name}=${encodeURIComponent(value)}${maxAge ? `;max-age=${maxAge};` : ''}`; - }, - /** - * Get a value from a cookie - * @param {string} name - * @return {string} value from cookie or empty if not found - */ - get: function (name) { - return document.cookie.split('; ').reduce(function (r, v) { - const parts = v.split('='); - return parts[0] === name ? decodeURIComponent(parts[1]) : r; - }, ''); - }, - /** - * Delete a cookie - * @param {string} name - */ - delete: function (name) { - this.set(name, '', -1); - }, - /** - * Clear all cookies - */ - clear: function () { - const cookies = document.cookie.split(';'); - for (let i = 0; i < cookies.length; i++) { - const cookie = cookies[i]; - const eqPos = cookie.indexOf('='); - const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie; - document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`; - } - }, - }, -}; - -let app = { - data() { - return { - title: 'Vue-Boilerplate', - content: 'Fill this page with whatever you\'re going to develop.
Then enjoy!', - }; - }, - computed: { - currentYear() { - return new Date().getFullYear(); - }, - }, - methods: { - showApp() { - document.getElementById('app').setAttribute('style', ''); - }, - }, - mounted: function () { - console.log('app mounted'); - setTimeout(this.showApp); - }, -}; - -window.onload = () => { - app = Vue.createApp(app); - app.mount('#app'); -}; diff --git a/style.css b/style.css deleted file mode 100644 index 108a155..0000000 --- a/style.css +++ /dev/null @@ -1,159 +0,0 @@ -/* -================================================= -https://www.joshwcomeau.com/css/custom-css-reset/ -================================================= -*/ - -/* - 1. Use a more-intuitive box-sizing model. -*/ -*, -*::before, -*::after { - box-sizing: border-box; -} -/* - 2. Remove default margin - */ -* { - margin: 0; -} -/* - 3. Allow percentage-based heights in the application - */ -html, -body { - height: 100%; -} -/* - Typographic tweaks! - 4. Add accessible line-height - 5. Improve text rendering - */ -body { - line-height: 1.5; - -webkit-font-smoothing: antialiased; -} -/* - 6. Improve media defaults - */ -img, -picture, -video, -canvas, -svg { - display: block; - max-width: 100%; -} -/* - 7. Remove built-in form typography styles - */ -input, -button, -textarea, -select { - font: inherit; -} -/* - 8. Avoid text overflows - */ -p, -h1, -h2, -h3, -h4, -h5, -h6 { - overflow-wrap: break-word; -} -/* - 9. Create a root stacking context - */ -#root, -#__next { - isolation: isolate; -} - -/* -================================================= -CUSTOM STYLE -================================================= -*/ - -:root { - /* https://materialui.co/colors/ */ - --hue-primary: 65.52; - --sat-primary: 69.96%; - --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%); - --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%); - --color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%); - --text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%); - --text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%); -} - -/* -================================================= -https://blog.koley.in/2019/339-bytes-of-responsive-css -https://www.swyx.io/css-100-bytes -https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41 -================================================= -*/ - -* { - box-sizing: border-box; - font-family: Verdana, serif; - color: var(--text-primary); -} - -html, -body { - padding: 0; - max-width: 100%; -} - -body { - background-color: var(--background); -} - -main { - padding: 1.5rem; - margin: auto; - background-color: var(--background-primary); - min-height: 100%; -} - -h1 { - margin-bottom: 0.5em; -} - -table { - border-collapse: collapse; - width: 100%; - font-size: 0.9em; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 1.5em 0 0.5em; -} - -p, -ul, -ol { - margin-bottom: 2em; - color: var(--text-secondary); - font-family: sans-serif; -} - -@media only screen and (min-width: 768px) { - main { - max-width: 42rem; - } - table { - font-size: inherit; - } -}