mirror of
https://github.com/namibia/awesome-cheatsheets.git
synced 2024-12-23 10:38:54 +00:00
feat(base-cheatsheet): initialize component
This commit is contained in:
parent
93b68991dc
commit
fb5da7dff2
65
components/BaseCheatsheet.vue
Normal file
65
components/BaseCheatsheet.vue
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<!-- *************************************************************************
|
||||||
|
TEMPLATE
|
||||||
|
************************************************************************* -->
|
||||||
|
|
||||||
|
<template lang="pug">
|
||||||
|
.c-base-cheatsheet
|
||||||
|
img(
|
||||||
|
:src="thumbnail"
|
||||||
|
class="c-base-cheatsheet__thumbnail"
|
||||||
|
)
|
||||||
|
.c-base-cheatsheet__content
|
||||||
|
span.c-base-cheatsheet__name The {{ name }} Cheatsheet
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- *************************************************************************
|
||||||
|
SCRIPT
|
||||||
|
************************************************************************* -->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
thumbnail: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- *************************************************************************
|
||||||
|
STYLE
|
||||||
|
************************************************************************* -->
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$c: ".c-base-cheatsheet";
|
||||||
|
|
||||||
|
#{$c} {
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #313d4f;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #273142;
|
||||||
|
|
||||||
|
#{$c}__thumbnail {
|
||||||
|
width: 100%;
|
||||||
|
height: 160px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#{$c}__content {
|
||||||
|
padding: 10px;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
#{$c}__name {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -36,11 +36,11 @@ $c: ".c-base-divider";
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
#{$c}__category {
|
#{$c}__category {
|
||||||
font-size: 18px;
|
margin-right: 40px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-right: 40px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$c}__line {
|
#{$c}__line {
|
||||||
|
@ -42,7 +42,7 @@ $c: ".l-default";
|
|||||||
html {
|
html {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 60px 0 100px;
|
padding: 60px 0 40px;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
background-color: #1b2431;
|
background-color: #1b2431;
|
||||||
color: white;
|
color: white;
|
||||||
@ -96,8 +96,8 @@ html {
|
|||||||
#{$c} {
|
#{$c} {
|
||||||
#{$c}__copyright {
|
#{$c}__copyright {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
112
pages/index.vue
112
pages/index.vue
@ -15,10 +15,19 @@
|
|||||||
|
|
||||||
section(
|
section(
|
||||||
v-for="(category, index) in categories"
|
v-for="(category, index) in categories"
|
||||||
|
:key="category.name"
|
||||||
class="c-index__category"
|
class="c-index__category"
|
||||||
)
|
)
|
||||||
base-divider(
|
base-divider(
|
||||||
:category="'0' + (index + 1) + '. ' + category.name"
|
:category="'0' + (index + 1) + '. ' + category.name"
|
||||||
|
class="c-index__divider"
|
||||||
|
)
|
||||||
|
.c-index__cheatsheets
|
||||||
|
base-cheatsheet(
|
||||||
|
v-for="cheatsheet in category.cheatsheets"
|
||||||
|
:key="cheatsheet.name"
|
||||||
|
:name="cheatsheet.name"
|
||||||
|
:thumbnail="cheatsheet.thumbnail"
|
||||||
)
|
)
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -27,10 +36,12 @@
|
|||||||
************************************************************************* -->
|
************************************************************************* -->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BaseCheatsheet from "@/components/BaseCheatsheet";
|
||||||
import BaseDivider from "@/components/BaseDivider";
|
import BaseDivider from "@/components/BaseDivider";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
BaseCheatsheet,
|
||||||
BaseDivider
|
BaseDivider
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -38,19 +49,93 @@ export default {
|
|||||||
return {
|
return {
|
||||||
categories: [
|
categories: [
|
||||||
{
|
{
|
||||||
name: "Languages"
|
name: "Languages",
|
||||||
|
cheatsheets: [
|
||||||
|
{
|
||||||
|
name: "Bash",
|
||||||
|
thumbnail: "bash.jpg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Backend"
|
name: "JavaScript",
|
||||||
|
thumbnail: "javascript.jpg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Frontend"
|
name: "PHP",
|
||||||
|
thumbnail: "php.jpg"
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Databases"
|
name: "Backend",
|
||||||
|
cheatsheets: [
|
||||||
|
{
|
||||||
|
name: "Django",
|
||||||
|
thumbnail: "django.jpg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Tools"
|
name: "Feathers.js",
|
||||||
|
thumbnail: "feathers.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Moleculer",
|
||||||
|
thumbnail: "moleculer.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Node.js",
|
||||||
|
thumbnail: "node.jpg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Frontend",
|
||||||
|
cheatsheets: [
|
||||||
|
{
|
||||||
|
name: "Angular.js",
|
||||||
|
thumbnail: "angularjs.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "HTML5",
|
||||||
|
thumbnail: "html5.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "React.js",
|
||||||
|
thumbnail: "react.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Vue.js",
|
||||||
|
thumbnail: "vue.jpg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Databases",
|
||||||
|
cheatsheets: [
|
||||||
|
{
|
||||||
|
name: "Redis",
|
||||||
|
thumbnail: "redis.jpg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Tools",
|
||||||
|
cheatsheets: [
|
||||||
|
{
|
||||||
|
name: "Docker",
|
||||||
|
thumbnail: "docker.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Kubernetes",
|
||||||
|
thumbnail: "kubernetes.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "VIM",
|
||||||
|
thumbnail: "vim.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Xcode",
|
||||||
|
thumbnail: "xcode.jpg"
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
@ -80,7 +165,22 @@ $c: ".c-index";
|
|||||||
}
|
}
|
||||||
|
|
||||||
#{$c}__category {
|
#{$c}__category {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#{$c}__divider {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#{$c}__cheatsheets {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 20px;
|
||||||
|
grid-template-columns: repeat(auto-fill, 270px);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user