✨ Lists and Button layout generators
This commit is contained in:
Miguel Avila
parent
d740479181
commit
467c6e0bf5
18
app.css
18
app.css
@ -217,12 +217,21 @@ body {
|
||||
.linksBlockLeft {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
||||
.linksBlockRight {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 3 / span 2;
|
||||
}
|
||||
|
||||
.buttonsContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-gap: 30px;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
.button {
|
||||
@ -269,15 +278,14 @@ body {
|
||||
stroke: var(--sfg);
|
||||
}
|
||||
|
||||
.linksBlockRight {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 3 / span 2;
|
||||
.listsContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-gap: 30px;
|
||||
padding: 0.3rem;
|
||||
|
||||
}
|
||||
|
||||
.list {
|
||||
|
||||
@ -3,13 +3,8 @@
|
||||
// └─┘┴ ┴┴└──┴┘└─┘
|
||||
// Function to print Button Cards.
|
||||
|
||||
const generateButtons = () => {
|
||||
console.log("Yeah, Buttons are working");
|
||||
}
|
||||
|
||||
const printLinksBlockLeft = () => {
|
||||
|
||||
for (const button of CONFIG.buttons) {
|
||||
const generateFirstButtonsContainer = () => {
|
||||
for (const button of CONFIG.firstButtonsContainer) {
|
||||
let item = `
|
||||
<a
|
||||
href="${button.link}"
|
||||
@ -22,9 +17,40 @@ const printLinksBlockLeft = () => {
|
||||
|
||||
const position = 'beforeend';
|
||||
|
||||
linksBlockLeft.insertAdjacentHTML(position, item);
|
||||
buttons_1.insertAdjacentHTML(position, item);
|
||||
}
|
||||
}
|
||||
|
||||
const generateSecondButtonsContainer = () => {
|
||||
for (const button of CONFIG.secondButtonsContainer) {
|
||||
let item = `
|
||||
<a
|
||||
href="${button.link}"
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
class="card button button__${button.id}"
|
||||
>
|
||||
<i class="buttonIcon" icon-name="${button.icon}"></i>
|
||||
</a>
|
||||
`;
|
||||
|
||||
const position = 'beforeend';
|
||||
|
||||
buttons_2.insertAdjacentHTML(position, item);
|
||||
}
|
||||
}
|
||||
|
||||
const generateButtons = () => {
|
||||
switch (CONFIG.bentoLayout) {
|
||||
case 'bento':
|
||||
generateFirstButtonsContainer();
|
||||
break;
|
||||
case 'buttons':
|
||||
generateFirstButtonsContainer();
|
||||
generateSecondButtonsContainer();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
generateButtons();
|
||||
printLinksBlockLeft();
|
||||
|
||||
@ -4,46 +4,34 @@
|
||||
// Generate Layout.
|
||||
|
||||
const generateLayout = () => {
|
||||
let bentoLayout = `
|
||||
<div class="linksBlockLeft" id="linksBlockLeft">
|
||||
<div class="buttonsContainer" id="buttons_1"></div>
|
||||
</div>
|
||||
let firstButtonsContainer = `
|
||||
<div class="buttonsContainer" id="buttons_1"></div>
|
||||
`;
|
||||
let secondButtonsContainer = `
|
||||
<div class="buttonsContainer" id="buttons_2"></div>
|
||||
`;
|
||||
let firstListsContainer = `
|
||||
<div class="listsContainer" id="lists_1"></div>
|
||||
`;
|
||||
|
||||
<div class="linksBlockRight" id="linksBlockRight">
|
||||
|
||||
</div>
|
||||
`;
|
||||
let listLayout = `
|
||||
<div class="linksBlockLeft" id="linksBlockLeft">
|
||||
<div class="card list list__1" id="list_1"></div>
|
||||
<div class="card list list__2" id="list_2"></div>
|
||||
</div>
|
||||
|
||||
<div class="linksBlockRight" id="linksBlockRight">
|
||||
<div class="card list list__3" id="list_3"></div>
|
||||
<div class="card list list__4" id="list_4"></div>
|
||||
</div>
|
||||
`;
|
||||
let buttonsLayout = `
|
||||
<div class="linksBlockLeft" id="linksBlockLeft">
|
||||
<div class="buttonsContainer" id="buttons_1"></div>
|
||||
</div>
|
||||
|
||||
<div class="linksBlockRight" id="linksBlockRight">
|
||||
<div class="buttonsContainer" id="buttons_2"></div>
|
||||
</div>
|
||||
`;
|
||||
let secondListsContainer = `
|
||||
<div class="listsContainer" id="lists_2"></div>
|
||||
`;
|
||||
|
||||
const position = 'beforeend';
|
||||
|
||||
switch (CONFIG.bentoLayout) {
|
||||
case 'bento':
|
||||
linksBlock.insertAdjacentHTML(position, bentoLayout);
|
||||
linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
|
||||
linksBlockRight.insertAdjacentHTML(position, firstListsContainer);
|
||||
break;
|
||||
case 'lists':
|
||||
linksBlock.insertAdjacentHTML(position, listLayout);
|
||||
linksBlockLeft.insertAdjacentHTML(position, firstListsContainer);
|
||||
linksBlockRight.insertAdjacentHTML(position, secondListsContainer);
|
||||
break;
|
||||
case 'buttons':
|
||||
linksBlock.insertAdjacentHTML(position, buttonsLayout);
|
||||
linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
|
||||
linksBlockRight.insertAdjacentHTML(position, secondButtonsContainer);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
||||
@ -3,46 +3,84 @@
|
||||
// ┴─┘┴└─┘ ┴ └─┘
|
||||
// Functions for printing both lists
|
||||
|
||||
const generateLists = () => {
|
||||
console.log("Yeah, I'm working");
|
||||
}
|
||||
|
||||
const printFirstList = () => {
|
||||
let icon = `<i class="listIcon" icon-name="${CONFIG.firstListIcon}"></i>`;
|
||||
const position = 'beforeend';
|
||||
list_1.insertAdjacentHTML(position, icon);
|
||||
for (const link of CONFIG.lists.firstList) {
|
||||
const generateFirstListsContainer = () => {
|
||||
console.log('Running firstlistscontainer');
|
||||
for (const list of CONFIG.firstlistsContainer) {
|
||||
let item = `
|
||||
<div class="card list list__${list.id}" id="list_${list.id}">
|
||||
<i class="listIcon" icon-name="${list.icon}"></i>
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${link.link}"
|
||||
href="${list.links[0].link}"
|
||||
class="listItem"
|
||||
>${link.name}</a
|
||||
>
|
||||
`;
|
||||
>${list.links[0].name}</a>
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${list.links[1].link}"
|
||||
class="listItem"
|
||||
>${list.links[1].name}</a>
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${list.links[2].link}"
|
||||
class="listItem"
|
||||
>${list.links[2].name}</a>
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${list.links[3].link}"
|
||||
class="listItem"
|
||||
>${list.links[3].name}</a>
|
||||
</div>
|
||||
`;
|
||||
const position = 'beforeend';
|
||||
list_1.insertAdjacentHTML(position, item);
|
||||
lists_1.insertAdjacentHTML(position, item);
|
||||
}
|
||||
};
|
||||
|
||||
const printSecondList = () => {
|
||||
let icon = `<i class="listIcon" icon-name="${CONFIG.secondListIcon}"></i>`;
|
||||
const position = 'beforeend';
|
||||
list_2.insertAdjacentHTML(position, icon);
|
||||
for (const link of CONFIG.lists.secondList) {
|
||||
const generateSecondListsContainer = () => {
|
||||
console.log('Running second');
|
||||
for (const list of CONFIG.secondListsContainer) {
|
||||
let item = `
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${link.link}"
|
||||
class="listItem"
|
||||
>${link.name}</a
|
||||
>
|
||||
<div class="card list list__${list.id}" id="list_${list.id}">
|
||||
<i class="listIcon" icon-name="${list.icon}"></i>
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${list.links[0].link}"
|
||||
class="listItem"
|
||||
>${list.links[0].name}</a>
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${list.links[1].link}"
|
||||
class="listItem"
|
||||
>${list.links[1].name}</a>
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${list.links[2].link}"
|
||||
class="listItem"
|
||||
>${list.links[2].name}</a>
|
||||
<a
|
||||
target="${CONFIG.openInNewTab ? '_blank' : ''}"
|
||||
href="${list.links[3].link}"
|
||||
class="listItem"
|
||||
>${list.links[3].name}</a>
|
||||
</div>
|
||||
`;
|
||||
const position = 'beforeend';
|
||||
list_2.insertAdjacentHTML(position, item);
|
||||
lists_2.insertAdjacentHTML(position, item);
|
||||
}
|
||||
};
|
||||
|
||||
const generateLists = () => {
|
||||
switch (CONFIG.bentoLayout) {
|
||||
case 'bento':
|
||||
generateFirstListsContainer();
|
||||
break;
|
||||
case 'lists':
|
||||
generateFirstListsContainer();
|
||||
generateSecondListsContainer();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
generateLists();
|
||||
printFirstList();
|
||||
printSecondList();
|
||||
|
||||
214
config.js
214
config.js
@ -17,7 +17,7 @@ const CONFIG = {
|
||||
twelveHourFormat: false,
|
||||
|
||||
// Layout
|
||||
bentoLayout: 'bento', // 'bento', 'cards', 'lists'
|
||||
bentoLayout: 'buttons', // 'bento', 'lists', 'buttons'
|
||||
|
||||
// Greetings
|
||||
greetingMorning: 'Good morning!',
|
||||
@ -39,7 +39,7 @@ const CONFIG = {
|
||||
autoChangeTheme: true,
|
||||
|
||||
// Autochabge by OS
|
||||
changeThemeByOS: false,
|
||||
changeThemeByOS: false,
|
||||
|
||||
// Autochange by hour options (24hrs format, string must be in: hh:mm)
|
||||
changeThemeByHour: true,
|
||||
@ -50,7 +50,7 @@ const CONFIG = {
|
||||
// ├┴┐│ │ │ │ │ ││││└─┐
|
||||
// └─┘└─┘ ┴ ┴ └─┘┘└┘└─┘
|
||||
|
||||
buttons: [
|
||||
firstButtonsContainer: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Github',
|
||||
@ -87,90 +87,144 @@ const CONFIG = {
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
],
|
||||
|
||||
secondButtonsContainer: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'Odysee',
|
||||
icon: 'youtube',
|
||||
link: 'https://odysee.com/',
|
||||
},
|
||||
],
|
||||
|
||||
// ┬ ┬┌─┐┌┬┐┌─┐
|
||||
// │ │└─┐ │ └─┐
|
||||
// ┴─┘┴└─┘ ┴ └─┘
|
||||
|
||||
//Icons
|
||||
firstListIcon: 'music',
|
||||
secondListIcon: 'coffee',
|
||||
// Links
|
||||
firstlistsContainer: [
|
||||
{
|
||||
icon: 'music',
|
||||
id: '1',
|
||||
links: [
|
||||
{
|
||||
name: 'Inspirational',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Classic',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Oldies',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Rock',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'coffee',
|
||||
id: '2',
|
||||
links: [
|
||||
{
|
||||
name: 'Inspirational',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Classic',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Oldies',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Rock',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// Links
|
||||
lists: {
|
||||
firstList: [
|
||||
{
|
||||
name: 'Inspirational',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Classic',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Oldies',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Rock',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
],
|
||||
secondList: [
|
||||
{
|
||||
name: 'Linkedin',
|
||||
link: 'https://linkedin.com/',
|
||||
},
|
||||
{
|
||||
name: 'Figma',
|
||||
link: 'https://figma.com/',
|
||||
},
|
||||
{
|
||||
name: 'Dribbble',
|
||||
link: 'https://dribbble.com',
|
||||
},
|
||||
{
|
||||
name: 'Telegram',
|
||||
link: 'https://webk.telegram.org',
|
||||
},
|
||||
],
|
||||
},
|
||||
secondListsContainer: [
|
||||
{
|
||||
icon: 'binary',
|
||||
id: '1',
|
||||
links: [
|
||||
{
|
||||
name: 'Inspirational',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Classic',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Oldies',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Rock',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'github',
|
||||
id: '2',
|
||||
links: [
|
||||
{
|
||||
name: 'Inspirational',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Classic',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Oldies',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
{
|
||||
name: 'Rock',
|
||||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
15
index.html
15
index.html
@ -55,17 +55,10 @@
|
||||
</div>
|
||||
|
||||
<div class="linksBlock" id="linksBlock">
|
||||
|
||||
</div>
|
||||
<div class="linksBlockLeft" id="linksBlockLeft"></div>
|
||||
|
||||
<!-- <div class="linksBlockLeft" id="linksBlockLeft">
|
||||
<div class="buttonsContainer"></div>
|
||||
<div class="linksBlockRight" id="linksBlockRight"></div>
|
||||
</div>
|
||||
|
||||
<div class="linksBlockRight" id="linksBlockRight">
|
||||
<div class="card list list__1" id="list_1"></div>
|
||||
<div class="card list list__2" id="list_2"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- Config -->
|
||||
@ -78,8 +71,8 @@
|
||||
<script src="assets/js/greeting.js"></script>
|
||||
<script src="assets/js/weather.js"></script>
|
||||
|
||||
<!-- <script src="assets/js/buttons.js"></script>
|
||||
<script src="assets/js/lists.js"></script> -->
|
||||
<script src="assets/js/buttons.js"></script>
|
||||
<script src="assets/js/lists.js"></script>
|
||||
|
||||
<!-- Icons -->
|
||||
<script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user