1
1
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:
Julien 2018-09-09 19:46:23 +02:00
parent 93b68991dc
commit fb5da7dff2
4 changed files with 175 additions and 10 deletions

View 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>

View File

@ -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 {

View File

@ -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>

View File

@ -15,11 +15,20 @@
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: "JavaScript",
thumbnail: "javascript.jpg"
},
{
name: "PHP",
thumbnail: "php.jpg"
}
]
}, },
{ {
name: "Backend" name: "Backend",
cheatsheets: [
{
name: "Django",
thumbnail: "django.jpg"
},
{
name: "Feathers.js",
thumbnail: "feathers.jpg"
},
{
name: "Moleculer",
thumbnail: "moleculer.jpg"
},
{
name: "Node.js",
thumbnail: "node.jpg"
}
]
}, },
{ {
name: "Frontend" 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" name: "Databases",
cheatsheets: [
{
name: "Redis",
thumbnail: "redis.jpg"
}
]
}, },
{ {
name: "Tools" 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>